Custom Field Suiteループのショートコードを作成

作成日: 2013/09/03

更新日: 2013年9月3日

WordPressのプラグイン「Custom Field Suite」はAdvanced Custom Fieldより使いやすいと以前紹介させていただいた参考サイトに書いてありました。そしてなによりCustom Field Suiteのループを利用して、カスタムフィールドを追加できる点がすばらしいと思います。
Advanced Custom Fieldsにも似た機能あるらしいですが、何しろ有料アドオンのため考えどころでした。こちらは無料で利用できます。
参考サイト：http://komodo.arrow.jp/wp/733
基本的な使い方には上記の参考サイトを利用した方が分かりやすいのでそちらを見てもらい、今回はCustom Field Suiteのループをテーマ内ではなく投稿入力画面で利用できるようにショートコードを作成してみようというものです。
たとえばIDやクラスを指定しているのでクライアント様の方で追加･削除するときはHTMLを編集しなきゃいけない部分があって、そしてそれが投稿の途中にあるのでカスタムフィールドを何個もつけたくないしどうしようみたいなとき。
ショートコードを作ればHTMLをいじらずに編集でき、ループはカスタムフィールドを投稿別に追加･編集･削除できるのでうってつけかと。入力した値を他のページでも使いたい場合などは投稿タイプを関連させた方もいいかもですが、この場合は投稿画面上で編集して追加したいときに利用するといいと思います。

例として、飲食店のメニュー表をカスタムフィールドに入力しているとします。
フィールド名、吐き出されるHTMLやそのクラス名は任意のもので変更できますが、以下のようにフィールドグループを作成したとします。

コメントをいただいたのですが、ちょうど他の投稿のデータを取る必要が出てきたので、
追記(2014.01.30)として投稿IDを指定しても挿入できるようにしました。
これにより他の投稿でも表示することが出来ます。

ループのフィールド名・・・「menu」
料理名のフィールド名・・・「menutitle」
料理の画像(URL)・・・「menuimg」
料理の説明・・・「menuimg」

以下はテーマ内のfunctions.php内に記述します。

function menubox($atts) {
		extract(shortcode_atts(array(
					 'id' => ""
					 ), $atts));
    global $cfs;
    if(empty($atts)) :
    	$fields = $cfs->get('menu');
    else :
    	$fields = $cfs->get('menu',$atts['id']);
   endif;
    $menucode = '';
    foreach ($fields as $field) {
        $menutitle = $field['menutitle'];
        $menuimg = $field['menuimg'];
        $menutext = $field['menutext'];
        $menucode .= '<div class="MenuBox">';
        $menucode .= '<h2>'.$menutitle.'</h2>';
        $menucode .= '<p class="Img"><img src="'.$menuimg.'" /></p>';
        $menucode .= '<p>'.$menutext.'</p>';
        $menucode .= '</div>';
  }
    return $menucode;
}
add_shortcode('menu', 'menubox');

function menubox($atts) {

extract(shortcode_atts(array(

'id' => ""

), $atts));

global $cfs;

if(empty($atts)) :

$fields = $cfs->get('menu');

else :

$fields = $cfs->get('menu',$atts['id']);

endif;

$menucode = '';

foreach ($fields as $field) {

$menutitle = $field['menutitle'];

$menuimg = $field['menuimg'];

$menutext = $field['menutext'];

$menucode .= '<div class="MenuBox">';

$menucode .= '<h2>'.$menutitle.'</h2>';

$menucode .= '<p class="Img"><img src="'.$menuimg.'" /></p>';

$menucode .= '<p>'.$menutext.'</p>';

$menucode .= '</div>';

}

return $menucode;

}

add_shortcode('menu', 'menubox');

「$menucode」は吐き出す変数、「.=」は付け足していく感じです。自由にHTML変えたり出来るかと思います。
ifとかでメニューが入っているか確かめた方がいいのかもですが、こうすれば投稿画面内で[menu]と入れればカスタムフィールドに入力したものが一覧表示されます。
たぶん吐き出されるHTMLは以下のようになります。

<div class="MenuBox">
<h2>料理名１</h2>
<p class="Img"><img src="料理１の画像のURL" /></p>
<p>料理１の説明が入ります。</p>
</div>
<div class="MenuBox">
<h2>料理名２</h2>
<p class="Img"><img src="料理２の画像のURL" /></p>
<p>料理２の説明が入ります。</p>
</div>
･
･

<p>料理１の説明が入ります。</p>

</div>

<p>料理２の説明が入ります。</p>

</div>

･

moko より:

2013年9月6日 8:05 PM

はじめまして。
ちょうど、Custom Field Suite を使って悩んでいたところです。

固定ページ内にカスタムフィールドを作っています。
その値を、トップページ(home.php)に読み込ませたいのですが、うまくできません。
上記ショートコードを作ったらうまくいくのかなと試したのですが、ショートコードがそのまま表示されてしまいました。
良い方法がありましたら、ぜひ教えてください。

よろしくお願いいたします。

返信
tetch1987 より:

2013年9月7日 9:36 AM

初めてのコメントありがとうございます。
テンプレート内で使うとなるとショートコードは利用しないでもいいかもしれません。

その固定ページを管理画面からトップページに指定して、
home.phpのループ内で、通常の表示方法で表示してみてはいかがでしょうか。

通常の表示方法は参考サイトが分かりやすいです。

他には、
同じように固定ページを管理画面からトップページに指定して、
固定ページ内にショートコードを書くとか、

home.phpのループ内で
echo do_shortcode(‘[SHORTCODE]’);
する方法もいいかもしれません。

でもそのままコードが出るということは、間違っているのかもしれません。

返信
- moko より:
  
  2013年9月7日 12:56 PM
  
  ありがとうございます。
  コメントいただいて、再度見直しました。
  
  ショートコードのところで、
  $fields = $cfs->get(menu, ID番号);
  としたら、home.php内で読み込めました。
  お騒がせしました・・・。
  
  返信
tetch1987 より:

2013年9月7日 2:04 PM

結果報告ありがとうございます。
表示できて何よりです。

的外れなアドバイスすみません。
ＩＤを渡せるように変えてみようかと思います。

返信
【WordPress】Advanced Custom Fields PROで入力したデータをChart.jsのグラフに使用して、ショートコード化したついでにクイックタグ化する | eureka より:

2021年1月26日 12:30 AM

[…] Custom Field Suiteループのショートコードを作成 […]

返信

Custom Field Suiteループのショートコードを作成