[Wordpress]ACF（Advanced Custom Fields）の「繰り返しフィールド」が便利すぎて泣ける

ACFの中で一番私が重宝して使ってる「繰り返しフィールド」の使い方を説明します。

知らない、まだ使ってないという方はぜひ使ってみて欲しい機能です。

特にテーマを自作されてる方にはかなり手放せないものになると思います。

ACFとは？

アドバンスドカスタムフィールド、通称ACFです。

ACF（Advanced Custom Fields）

以前にも軽く説明したのですが、現在は有料版がサブスクみたいに月額制となってるようです。

で、今回の繰り返しフィールドを使うにはpro版が必要となりますので、有料版ですね。

課金して使う価値は充分にあると思います。それくらい便利なプラグインです。

オプション設定方法

ACFプラグインを導入したら、まずはオリジナルのオプション項目を作ります。

「functions.php」に記述する事で使えるようになります。

今回は「プライバシーポリシー」の項目をオプション＆繰り返しフィールドを使って実装する例を書いてみます。

【functions.php】

<?php
if( function_exists('acf_add_options_page') ) {
  $option_page = acf_add_options_page(array(
    'page_title' => 'PRIVACY POLICY',
    'menu_title' => 'PRIVACY POLICY',
    'menu_slug' => 'privacy_op',
    'capability' => 'edit_posts',
    'redirect' => false
  ));
}

これを追加するとWP管理画面内にこういったオプション項目が表示されるようになります。

カスタムフィールド

続いて「カスタムフィールド」の項目へ。

まずは新規追加で管理しやすい分かりやすい名前をつけましょう。

そして以下、各項目の説明をしていきます。

①フィールドラベル

これは分かりやすい名前を任意で付けます。

②フィールド名

これは実際に使用するフィールド名となります。半角英数字にしましょう。

③フィールドタイプ

ここは「繰り返しフィールド」を選択

④サブフィールド

ここに入力に必要となる項目を追加していきます。

プライバシーポリシーを作る例なので、見出しとなるタイトルと中身となる内容の2種を作成します

入力し終わったら、「ルール」という項目でどこで使うカスタムフィールドなのかを指定します。

さっきオプション追加した「プライバシーポリシー」の項目に指定するように選択します。

実際にオプション内で設定

では今度は実際にフィールドの中身の項目を埋めていく作業です。

オプションの「プライバシーポリシー」を開いて、見出しと内容を入力していきます。

「行を追加」ボタンを押すと行を増やせますので、個数も自由に増減可能です。

入力できたら保存して終了。

出力方法

では実際にフィールド内の入力した項目を出力します。

出力したいページのファイル内に下記をコピペします。

【phpファイル】

<?php if(have_rows('privacy_field',option)):?>
  <?php while(have_rows('privacy_field',option)): the_row();?>
    <h3>
      <?php echo get_sub_field('privacy_title',option);?>
    </h3>
    <div>
      <?php echo get_sub_field('privacy_desc',option);?>
    </div>
  <?php endwhile;?>
<?php endif;?>

私の場合はメールフォーム下部につけてるので実際の画面はCONTACTページで確認する事ができます。

注意点としては「,option」とついてるのはオプション項目で利用するものの場合です。

もし投稿や固定ページで使用する場合には不要です。

あと、サブフィールドの呼び出しは「get_sub_field('')」と、「sub」がついてるので間違えないように注意です。

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

まとめ

以上がACF「繰り返しフィールド」の使い方の一例です。

使い方によっては様々な事ができますので本当にオススメです。

WPでオリジナルテーマを自作されてる方はACFで夢が広がるはずです。

ぜひぜひ使ってみてください。

では現場から以上です！