WordPress

2020.11.18

【WordPress】繰り返しフィールドの基礎

WPのカスタマイズでとっても役に立つカスタムフィールドですが、Advanced Custom Fields(以下ACF) というプラグインに繰り返しフィールド(Repeater Field)という拡張機能があります。

この繰り返しフィールドを活用することで、カスタマイズの幅が広がります。

※繰り返しフィールドを使用するにはPRO版へのアップデートが必要です。

繰り返しフィールドでできること

通常、カスタマイズフィールドは必要な分だけフィールド枠を増やしていく必要がありますが、繰り返しフィールドを使うことで、投稿画面でフィールド枠の増減をすることができます。

例)会社概要の情報をWPで編集可能にする場合

<通常のカスタムフィールドだと>
・会社名の入力欄
・住所の入力欄
・連絡先の入力欄
・代表者の入力欄
など、項目の数だけフィールドを用意する必要がありました。

数を減らしたい、増やしたい場合はACFの編集画面から変更するだけでなく、コーディングデータも編集する手間があります。

<繰り返しフィールドを使えば>
・会社名などの項目名と内容を入れる欄
これをセットするだけで終了です。
あとは使いたい分だけ増やしていくだけです。

繰り返しフィールドにすることで、項目名と内容を自由に記入できるだけでなく数も自由に変更することができ、順序もドラッグアンドドロップで入れ替えることができます。

リピーターフィールドの出力方法

該当ページで使う場合

<?php if(have_rows('繰り返しフィールドのスラッグ')): ?>
<?php while(have_rows('繰り返しフィールドのスラッグ')): the_row(); ?>
<!-- 繰り返しフィールドの内容ここから -->
<?php the_sub_field('サブフィールドスラッグ'); ?>
<!-- 繰り返しフィールドの内容ここまで -->
<?php endwhile; ?>
<?php endif; ?>

入力したページと表示するページが同じ場合は上記のコードで表示できます。

該当ページ以外で使う場合

<?php
$page_id = get_page_by_path('固定ページのスラッグ');
$page_id = $page_id->ID;
?>
<?php if(have_rows('繰り返しフィールドのスラッグ', $page_id)): ?>
<?php $page_counter = 2; ?>//表示件数
<?php while(have_rows('繰り返しフィールドのスラッグ', $page_id)): the_row(); ?>
<?php $page_counter--; ?>
<!-- 繰り返しフィールドの内容ここから -->
<?php the_sub_field('サブフィールドのスラッグ'); ?>
<!-- 繰り返しフィールドの内容ここまで -->
<?php if ($page_counter === 0) break;?>
<?php endwhile; ?>
<?php endif; ?>

入力したページとは違うページで使う(例:Aの固定ページで入力して、Bの固定ページで表示する)場合はコードの書き方が違うので注意してください。

さらに応用することで…

繰り返しフィールドの中に繰り返しフィールドを作ることも可能です。

例)レストランのメニューを編集可能にする

▼ジャンル…前菜
 ∟メニュー名&値段
 ∟メニュー名&値段

▼ジャンル…パスタ
 ∟メニュー名&値段
 ∟メニュー名&値段

という風に各ジャンルに紐づくメニュー名と値段の枠を増やせるだけでなく、ジャンルそのものを増やすことができます。

<?php if(have_rows('繰り返しフィールド(ジャンル)のスラッグ')): ?>
<?php while(have_rows('繰り返しフィールド(ジャンル)のスラッグ')): the_row(); ?>
<!-- ジャンルの内容ここから -->
<?php the_sub_field('ジャンル名のスラッグ'); ?>
<?php if(have_rows('繰り返しフィールド(メニュー)のスラッグ')): ?>
<?php while(have_rows('繰り返しフィールド(メニュー)のスラッグ')): the_row(); ?>
<!-- メニューの内容ここから -->
<?php the_sub_field('メニュー名のスラッグ'); ?>
<?php the_sub_field('値段のスラッグ'); ?>
<?php endwhile; ?>
<?php endif; ?>
<!-- メニューの内容ここまで -->
<?php endwhile; ?>
<?php endif; ?>
<!-- ジャンルの内容ここまで -->

今回はACFの拡張機能のひとつの繰り返しフィールドの使い方を紹介しました。
通常のカスタムフィールドに比べて、入れ子になっていたり同じスラッグを複数書く必要があったりと少しわかりにくいですが、一度覚えてしまえば色々と活用できてとても便利です。

0

関連記事

  • 2021.04.14

    【WordPress】管理画面のカスタム投稿記事一覧をカテゴリーで絞り込めるようにする

    WordPress

  • 2021.03.26

    【Wordpress】子タームだけ出力する方法

    WordPress

  • 2021.03.19

    【WordPress】親ページとその子ページも含めて条件分岐をする記述

    WordPress

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!