カスタムフィールドの繰り返しを出力する方法(Smart Custom Fields)

Wordpress

WordPressのカスタムフィールドの繰り返しが使えるプラグイン「Smart Custom Fields」を以前紹介しましたが、今回はその繰り返しをテンプレート上で出力する方法です。

「Smart Custom Fields」の基本についてはこちらをご確認ください。

とても便利な「Smart Custom Fields」ですが、出力方法がわからなければ意味ないですよね?
それでは早速書き方をみてみましょう。

Smart Custom Fieldsで繰り返しを出力するときの基本

「Smart Custom Fields」には、独自の出力方法がいくつかあるのですが、繰り返しを出力する際には、特にこの方法が必要になります。
まずは、次のソースをご確認ください。

これは、グループ名が「groupA」で「kurikaeshiB」というカスタムフィールドを繰り返す場合の出力方法です。
まずは第一のポイントは、グループ名を呼び出すということなのですが、SCF::get(‘ 【グループ名】 ‘); というかたちで、呼び出します。SCFは「Smart Custom Fields」の略なので、このプラグイン独自の呼び出し方だということがわかっていただけると思います。
この出力された情報をひとまず変数にまとめて(ここでは“$ groupA”)phpの繰り返し「foreach」をつかって繰り返しを出力します。
foreach ($groupA as $fields ) { 【ここに繰り返す内容をいれる】}
foreach」内で、カスタムフィールドを出力するときは、$fields[‘【カスタムフィールド名】’]; とします。

サンプルを使った解説

ここでは、具体例を使って「Smart Custom Fields」の繰り返しの出力方法を解説したいと思います。
以前の記事「無料!簡単!便利!カスタムフィールドの繰り返しが使えるプラグインSmart Custom Fieldsの使い方」でもサンプルとして使用した、質問と答えが繰り返されるFAQ形式の出力を「Smart Custom Fields」で出力する場合を今回もサンプルとして使用します。

ちなみに、質問内容[faq_q]のタイプはテキスト、質問の答え[faq_a]のタイプはテキストエリアで設定しました、それによっての書き方の変化も注目してみてください。これがそのソースです。

これが、htmlとして出力すると次のようになります。

質問の答え[faq_a]はテキストエリアで改行を含んだ内容を登録できますが、改行も出力したい場合はカスタムフィールドの出力部分をnl2br()で囲ってあげる必要があります。

繰り返しの条件分岐

カスタムフィールドをテンプレート内で出力する際、もし値がない場合は代替えを表示させるなど、条件によって表示方法を変えたり非表示にしたりといったことがよくあると思いますが、「Smart Custom Fields」の繰り返しにこういったものを設置する場合の方法を解説します。
まずはソースをご確認ください。

これは先ほど例に挙げた質問と答えが繰り返されるFAQ形式のサンプルに、条件分岐を追加したものです。この条件分岐を設置することにより、FAQのカスタムフィールドに登録された値が一つもない場合、「Q.」、「A.」の部分は表示されず、「現在表示できる情報がありません」という部分が表示されるようになります。
この条件分岐のキーにする値ですが、グループ名「$faq」だけでは値の有無を判定することができないので、繰り返しのループ内で使用されているカスタムフィールド名(このサンプルの場合は [faq_q])の有無で条件分岐を作ります。
ちなみに、$faq[0][‘faq_q’]の$faq[0]は、$faqの中ので一番初め[0]のグループを意味し、$faq[0][‘faq_q’]で変数$faqの中の一番初め(0番目)の[‘faq_q’]の値ということになります。

画像の繰り返しを出力

最後に繰り返し内で画像を出力する方法を簡単に解説します。
ここでは、画像のurlを取得して画像を表示する方法をご紹介します。

グループ名「imggroup」カスタムフィールド名(画像)「imgA」でシンプルに画像だけを繰り返すサンプルを用意しました。
wp_get_attachment_image_srcは画像のurlやサイズを取得できる関数で、配列には次のものを含みます。

[0] 画像のurl
[1] 画像の幅(width)
[2] 画像の高さ(height)

画像の大きさはキーワードとなる文字列 (thumbnail, medium, large, full)を使います。初期値は「thumbnail」です。