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

公開日:2023(令和5)年2月21日/最終更新日:

WordPress Create Shortcodes | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



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

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

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

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

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

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

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

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

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

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

リピーター(ループ)フィールドの設定方法

管理画面上での設定方法

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

  • 「フィールドタイプ」を「ループ(複製フィールド)」にします
  • 「名前」が、後程紹介するショートコードの「グループ」パラメーターになります
「Custom Field Suite」プラグインのリピーター(繰り返し、ループ)フィールドの使い方&ショートコードで呼び出す方法|Personal WP Customization Notes (PWCN)

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

「Custom Field Suite」プラグインのリピーター(繰り返し、ループ)フィールドの使い方&ショートコードで呼び出す方法|Personal WP Customization Notes (PWCN)

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

「Custom Field Suite」プラグインのリピーター(繰り返し、ループ)フィールドの使い方&ショートコードで呼び出す方法|Personal WP Customization Notes (PWCN)

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

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

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

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

「Custom Field Suite」プラグインのリピーター(繰り返し、ループ)フィールドの使い方&ショートコードで呼び出す方法|Personal WP Customization Notes (PWCN)

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

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

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

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

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

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

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

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

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

:環境によって、テーマのfunctions.php保存時のチェックでエラーと指摘されることがあるので、ショートコードパラメーターが空白の場合の対処を追加しました

/* CFSのリピーターフィールドショートコード */
function pwcn_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('[pwcn-cfsre-sc', '[pwcn_cfs_repeater_shortcode');

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

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

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

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

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

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

念のためエラー回避をしておくといいかも..

※この部分は2024年3月9日に加筆しました

前項で紹介したショートコード出力用のコードですが、以下の場合にはエラーとして処理が停止してしまうことがあります。

  • CFSプラグインが停止または削除されている場合
  • 各パラメーターの値に誤りがある場合

個人で自身のみが編集するサイトであれば、都度誤りを直せば問題ないかも知れませんが、そうでない場合は以下のようにして回避させておくといいかも知れません。

回避前のコード部分

add_shortcode('pwcn-cfsre-sc', 'pwcn_cfs_repeater_shortcode');

回避処置をしたコード部分

require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if (is_plugin_active('custom-field-suite/cfs.php')) {
add_shortcode('pwcn-cfsre-sc', 'pwcn_cfs_repeater_shortcode');
}

※上記修正コードでは、CFSプラグインが有効化されているかどうかの判別を加えています

, , , , , , , , , ,



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Create Shortcodes | Personal WP Customization Notes (PWCN)
カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード