Wordpress Tips

2015.11.21

Advanced Custom Fieldsの拡張プラグイン -Repeater Field-

カテゴリー:

カスタムフィールドを直感的に追加できるAdvanced Custom Fieldsの拡張プラグインの中で実際に使用している拡張プラグイン「Repeater Field」をご紹介します。

フィールドタイプ Repeaterを選択します
Repeater Fields こちらでカスタムフィールドを設定していきます
Minimum Rows 最低数を設定します
Maximum Rows 最大数を設定します
レイアウト TableかRowを設定します
Button Label ボタンの文言を設定します

Repeater Fieldを使うまでの準備

Advanced Custom Fieldのプラグインを有効化し、「カスタムフィールド」メニューから「Add-ons」を選択します。

pic_acf_repeater01

「購入してインストールする」のボタンをクリックし、購入手続きをします。
購入手続きについては割愛させていただきます。

プラグイン一覧に「Advanced Custom Fields: Repeater Field」が追加されますので有効化します。

pic_acf_repeater02

これでRepeater Fieldを使う準備が整いました。

Repeater Fieldの設定方法

Repeater Fieldを有効化するとAdvanced Custom Fieldの設定画面内の項目「フィールドタイプ*」の中の一番下に「Repeater」という項目が追加されます。

pic_acf_repeater03

「Repeater」を選択すると、新たに「Repeater Fields」という項目が追加されます。

pic_acf_repeater04

ここでリピートさせたい項目を追加していきます。

今回は、本サイトでも実際に使用している内容をご紹介致します。

プラグインの機能を紹介する際に、表示するtable部分にRepeater Fieldを使用しています。
設定は以下のようにしています。

pic_acf_repeater05

他にも下記のような設定が可能です

pic_acf_repeater06

Minimum Rows

最低でも、この数は入力してほしいという場合に数値を指定します。

Maximum Rows

最大個数を制限したい場合に数値を指定します。

最大数を超えて登録を使用とすると、アラートがでてきます。

レイアウト

Table形式か、Row形式かを選択できます。

基本はTable形式で考えた方が使いやすいRepeater Fieldですが、テキストエリアをリピートさせる際には
Row形式にした方が表示がわかりやすくて管理がしやすくなります。

Button Label

リピートの項目を追加する際にクリックするボタンの文言を任意のものに設定できます。

何も指定していない時は「Add Row」となります。

出力方法

Advanced Custom Fieldで設定したカスタムフィールドを主力する際は、the_field,get_fieldといった関数を使用するのですが
Repeater Fieldで設定した際は下記のようなコードを使用します。

本サイトで実際に使用しているコードを記載いたします。

<?php if (get_field('機能一覧')): ?></p>
<table class="facility_tbl">
	<?php while(the_repeater_field('機能一覧')): ?></p>
<tr>
<th><?php the_sub_field('項目'); ?></th>
<td><?php the_sub_field('内容'); ?></td>
</tr>
<p><?php endwhile; ?></table>

Repeater Fieldを使用すると、何個のカスタムフィールドを出力するかわからないですからwhile文を使用して出力を行います。

今回は、機能一覧が必要ないパターンもあるかと思い、機能一覧のフィールドが未入力の場合を考えてif文で囲ってあります。

今まで、複数のフィールドが必要だった時は1つずつフィールドを作成して、フィールドの位置を変えて…と行っていたのですが
Repeater Fieldを使えば項目の増減や入れ替えがものすごく簡単になります。

Advanced Custom Fieldには他にも便利な拡張プラグインがたくさんあります。
有料ですが、拡張プラグインを入れる事で今までこねくり回して作成していた部分がサッとできてしまったりとします。

拡張プラグインを使用してもっと便利に使いやすいwordpressを目指してみてはいかがでしょうか?

Advanced Custom Fields -Repeater Field-を使用して制作したサイト

ジオクリエート株式会社様

新規Webサイト開設のご依頼を承り、更新の利便さや作業時間の軽減を目指しWordPressを導入いたしました。

 

ご相談・ご依頼に関して、まずは

ください。お気軽にどうぞ