WordPressプラグイン「Advanced Custom Fields」繰り返しフィールド(Pro版機能)の代替案

WordPressでカスタムフィールドを作成する際に人気のあるプラグイン「Advanced Custom Fields」。
Web制作案件でもよく利用するプラグインです。
今回は「Advanced Custom Fields」のPro版に実装されている「繰り返しフィールド」の代替案をご紹介します。

Index

「Advanced Custom Fields」とは

「Advanced Custom Fields」は、WordPressでカスタムフィールドを作成する際に利用するプラグインです。
「Advanced Custom Fields」には、大きく分けて2種類あります。「Advanced Custom Fields」と「Secure Custom Fields」です。
「Advanced Custom Fields」は本家本元のプラグインで、WP Engineが開発元となります。
一方「Secure Custom Fields」は、開発元がWordPress.orgに移行したものです。
2つに分かれたのは両者に起こったいざこざが原因で、WordPressの共同創設者であるマット・マレンウェッグ氏とWP Engineの関係悪化が原因とされています。
詳細については、各種Webサイト上の記事にも掲載されておりますので割愛しますが、もっとも大きな違いは「Advanced Custom Fields」には、有料のPro版が存在するところです。

「Advanced Custom Fields」のPro版に実装されている「繰り返しフィールド」の代替案とは

「Advanced Custom Fields」のPro版は、サブスクリプションで提供されており、その機能の1つとしてよく活用されているのが「繰り返しフィールド(※公式な名称は「リピーターフィールド」みたいです)」機能です。
例えば「同一ページ内に製品紹介をカスタムフィールドで複数作成したい」場合、カスタムフィールの項目を全て作成しないといけません。
ですが、Pro版の「繰り返しフィールド」を利用すると、製品紹介のカスタムフィールドを1アイテム作成すると「行を追加」といったようにボタンを表示させ、ボタンを押すことで1アイテムのカスタムフィールド入力項目を複製することができるようになります。

とても便利な機能ですが、Web制作案件で「Advanced Custom Fields」プラグインを利用したい場合、有料版と無料版の選択を強いられてしまいます…。個人的には「Pro版の繰り返しフィールド以外に有料版をサブスクリプションで選択するメリットは少ない」と思っています。
なぜなら「Pro版のサブスクリプションの費用をクライアントさんが支払い続けてくれる？」といった点です。
私のクライアントさんでこれを快く受けてくれる方は稀なため、基本的には無料版の「Advanced Custom Fields」もしくは「Secure Custom Fields」で実装することが多いのが現状です。
「繰り返しフィールド」が利用できない場合の問題点は「管理画面内の入力項目が縦に長くなってしまう」ところです。
そこで「Advanced Custom Fieldsの繰り返しフィールド(Pro版機能)の代替案」をご紹介したいと思います。

「Advanced Custom Fields(無料版)」で繰り返しフィールド(Pro版機能)の代替案を実装

●今回の代替案の前提条件

1. Advanced Custom Fields(無料版) もしくは Secure Custom Fieldsを利用している
2. Advanced Custom Fields(有料版)の使用が難しい
3. 同じ入力項目が複数あり、管理画面内に全ての項目を表示させたくない(※管理画面が縦に長くなり見づらくなるため)

●今回の代替案の仕様

1. 「今回の代替案の前提条件」1～3の条件を満たす仕様にする
2. 繰り返しフィールド(Pro版機能)では[行を追加]等のボタンが表示されるが、以下のように表示させる
   未入力の状態：1アイテム分の入力項目のみを表示
   1アイテム分の入力を完了：2アイテム目の入力項目を自動で表示

1.カスタムフィールドを作成する
まず、Advanced Custom FieldsやSecure Custom Fieldsでカスタムフィールドを作成していきます。
※作成手順は以下を参照

[補足]
①1アイテム分のカスタムフィールドを作成する
ここでは「アイテム1」と「価格」と「説明」の3フィールドを作成しています。
②登録したアイテム1のフィールドを必要な分だけ複製する
各フィールドには[複製]ボタンがありますので、「アイテム1」と「価格」と「説明」の3フィールドを複製し、表示順を並び替えます。
③フィールド名は変更する
複製したフィールド名は変更しましょう。
※フィールドラベルも合わせて変更しましょう

2.条件判定を設定する
続いて、条件判定を設定していきます。
※作成手順は以下を参照

[補足]
①アイテム2の条件判定を設定
[条件判定]タブを選択。
②フィールドグループの表示条件
「アイテム1のフィールド全て」を選択します。
「任意の値あり」を選択します
※右側に表示されている[と]ボタンを押すと、条件判定項目を追加できます
　押したボタンの内容が反映されますので、適宜内容に応じて変更してください
③アイテム3についてもフィールドグループの表示条件を設定
アイテム3についても、アイテム2と同じように表示条件を設定していきます。
※「アイテム2のフィールド全て」を選択
※「任意の値あり」を選択
※アイテム2 → アイテム1、アイテム3 → アイテム2のフィールドを選択
[変更内容を保存]ボタンを押せば、カスタムフィールドの登録は完了です。

3.投稿画面からカスタムフィールドの表示内容を確認
投稿画面を開き、カスタムフィールドの表示内容を確認します。
※表示内容は以下を参照

[補足]
①フィールドを入力していない状態
次の入力項目は表示されません。
②フィールドを入力すると…
1つ目の入力フィールドを登録します。
③次の入力項目が自動で表示される
1つ目の入力フィールドである「アイテム1」と「価格」と「説明」を登録すると、自動で次の入力項目が表示されます。

4.PHPに以下を記述
page.php等に以下を記述します。

カスタムフィールド出力の参考ソース

PHP

// アイテム1 <?php if( get_field('item1') ): ?> <div> <h1><?php the_field('item1'); ?></h1> <?php if( get_field('price1') ): ?> <p><?php the_field('price1'); ?></p> <?php else : ?> <?php endif; ?> <?php if( get_field('explanation1') ): ?> <p><?php the_field('explanation1'); ?></p> <?php else : ?> <?php endif; ?> </div> <?php else : ?> <?php endif; ?> // アイテム2 <?php if( get_field('item2') ): ?> <div> <h1><?php the_field('item2'); ?></h1> <?php if( get_field('price2') ): ?> <p><?php the_field('price2'); ?></p> <?php else : ?> <?php endif; ?> <?php if( get_field('explanation2') ): ?> <p><?php the_field('explanation2'); ?></p> <?php else : ?> <?php endif; ?> </div> <?php else : ?> <?php endif; ?> // アイテム3 <?php if( get_field('item3') ): ?> <div> <h1><?php the_field('item3'); ?></h1> <?php if( get_field('price3') ): ?> <p><?php the_field('price3'); ?></p> <?php else : ?> <?php endif; ?> <?php if( get_field('explanation3') ): ?> <p><?php the_field('explanation3'); ?></p> <?php else : ?> <?php endif; ?> </div> <?php else : ?> <?php endif; ?>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

// アイテム1 <?php if( get_field('item1') ): ?>   <div>     <h1><?php the_field('item1'); ?></h1>       <?php if( get_field('price1') ): ?>         <p><?php the_field('price1'); ?></p>       <?php else : ?>       <?php endif; ?>         <?php if( get_field('explanation1') ): ?>           <p><?php the_field('explanation1'); ?></p>       <?php else : ?>       <?php endif; ?>   </div> <?php else : ?> <?php endif; ?>   // アイテム2 <?php if( get_field('item2') ): ?>   <div>     <h1><?php the_field('item2'); ?></h1>       <?php if( get_field('price2') ): ?>         <p><?php the_field('price2'); ?></p>       <?php else : ?>       <?php endif; ?>         <?php if( get_field('explanation2') ): ?>           <p><?php the_field('explanation2'); ?></p>       <?php else : ?>       <?php endif; ?>   </div> <?php else : ?> <?php endif; ?>   // アイテム3 <?php if( get_field('item3') ): ?>   <div>     <h1><?php the_field('item3'); ?></h1>       <?php if( get_field('price3') ): ?>         <p><?php the_field('price3'); ?></p>       <?php else : ?>       <?php endif; ?>         <?php if( get_field('explanation3') ): ?>           <p><?php the_field('explanation3'); ?></p>       <?php else : ?>       <?php endif; ?>   </div> <?php else : ?> <?php endif; ?>

[補足]
表示させたいアイテムの数だけ「アイテム1～アイテム3」のように記述していきます。
※各フィールド名は変更してください

今回は、WordPressプラグイン「Advanced Custom Fields」繰り返しフィールド(Pro版機能)の代替案についてご紹介しました。
制作時の参考になりましたら幸いです。