「Custom Field Suite」プラグインのリピーター（繰り返し、ループ）フィールドの使い方＆ショートコードで呼び出す方法

WordPressのカスタムフィールドの設定や管理を管理画面のUI上で行える「Custom Field Suite」プラグイン。

超有名な同様の機能を持つACFプラグインでは有料機能である、リピーター（繰り返し、ループともいう）フィールドが無料で使えるのがいいですね。

このプラグインの公式ページを見ると、いかにも素っ気ない感じ（ちゃんとしてるの？）と思われそうですが、私は何年もこのプラグインのお世話になっています。

ただ、このプラグインが提供しているのは以下の機能のみ。

• 管理画面上でカスタムフィールドの設定をし、投稿や固定ページへメタボックスとして表示
• メタボックスの各項目へ入力された内容をカスタムフィールドとして保存
• メタボックスの各項目へ入力されたデータに変更があれば更新と同時に上書き

つまり、入力フォームの作成とデータの入力・保存はできても、肝心の出力機能がないんです。

そこで以前に以下のページで、カスタムフィールドの値をショートコードで呼び出す方法を紹介しました。

カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード（メモ）

ただ、このコードは標準のカスタムフィールドのお話で、リピーター（繰り返し、ループ）フィールドには対応していないんです。

そこで今回は、リピーターフィールドの機能と、CFS(Custom Field Suite)プラグインでの設定と使用方法、リピーターフィールドの値をフロントエンドへ表示させるためのショートコードプログラムについて一挙に紹介します。

リピーター（ループ）フィールドの設定方法

管理画面上での設定方法

CFSの管理画面を開き、下図のように、リピートさせるカスタムフィールドを格納するフィールド（便宜上本ページでは「グループ」とします）を追加します。

• 「フィールドタイプ」を「ループ（複製フィールド）」にします
• 「名前」が、後程紹介するショートコードの「グループ」パラメーターになります

次に、グループ内に入れる（繰り返し入力する）カスタムフィールドを追加します。追加したらドラッグして、グループの青線の上（中）へ移動させます。

移動が終わると下図のようになります。

これで画像例では「更新履歴」というグループの中に、「更新履歴の中身」という繰り返し入力フィールドが作成されます。

投稿や固定ページ編集画面での使用方法

前項の「更新履歴」を作成した前提で説明します。投稿編集画面を開きます。

ブロックエディターの編集画面の下に、下図のようなメタボックス（カスタムフィールド値を入力するための入力窓）が表示されます。

最初は1行分表示されているので入力すれば、1件の繰り返しデータが作成できます。

続いて「追加」をクリックして入力することで、複数の繰り返しデータが作成できます。

必要ない繰り返しデータは各データ右側の「×」をクリックして削除します。

投稿編集画面の「下書き保存」「公開」「更新」をクリックすることで、データが保存されます。

リピーター（ループ）フィールドを呼び出すショートコード

個別のカスタムフィールドを出力するには以下のページを参考にしてショートコードで呼び出せるようにします。

カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード（メモ）

CFS(Custom Field Suite)で保存されるカスタムフィールドは、WordPressの標準通り、フィールド名と値が1対1で保存されているので、汎用なカスタムフィールドの呼び出しコードで出力でき、CFS用のコードを用意する必要はありません

ここでは、CSFを使って、ループ（リピーター）フィールドとして保存しているカスタムフィールドの値をリストで呼び出すためのショートコード（例）を紹介します。

以下のコードを有効化しているテーマ（子テーマ推奨）のfunctions.phpへ追加します。

2023年8月11日：環境によって、テーマのfunctions.php保存時のチェックでエラーと指摘されることがあるので、ショートコードパラメーターが空白の場合の対処（コード中の赤字部分）を追加しました

/* CFSのリピーターフィールドショートコード */
function sample_cfs_repeater_shortcode($atts, $content = null) {
		extract(shortcode_atts(array(
			'group' => "",
			'field' => "",
					 ), $atts));
global $cfs;

//ショートコード内のグループとフィールドの値を取得
if($atts['group'] !== null){
	$fields = $cfs->get($atts['group']);
}
if($atts['field'] !== null){
	$field_param = $atts['field'];
}

//カスタムフィールドが存在するか？
	$custom_fields = get_post_meta( get_the_ID() , $field_param , true );

//カスタムフィールドが存在すれば、リスト形式で出力
if(empty( $custom_fields ) === false){
foreach ($fields as $field) {
	$list_content = $field[$field_param];
	$content .= '<div class="ha-cfs-re-box"><ul>';
	$content .= '<li>'.$list_content.'</li>';
	$content .= '</ul></div>';
}
}

return $content;

}
add_shortcode('sample-cfsre-sc', 'sample_cfs_repeater_shortcode');

コードを追加して保存したら、投稿や固定ページ編集画面で、以下のショートコードを挿入します。

[sample-cfsre-sc group="グループスラグ" field="出力するフィールド"]

「グループスラグ」はCFSの設定画面にあるループに設定したフィールドの「名前」欄の文字列を、「出力するフィールド」にはループ内に挿入したフィールドの「名前」欄の文字列をそれぞれ指定します

このコードは「Custom Field Suiteループのショートコードを作成」を参考に、以下の機能を追加して再構築しました。

• ショートコード内パラメーターで「グループ」と「フィールド」を指定できるようにしています
• リストタグで出力するようにしています
• 空のリストが出力されないよう、「フィールド」が存在しない場合にはリストともども出力されないようにしています

---

今回はグループ内の1つのカスタムフィールドをリスト表示させるコードとして紹介しましたが、コードをカスタマイズすれば、複数のカスタムフィールドを列記したりすることもできますのでチャレンジしてみてください。