前回は「Smart Custom Fields（SCF）」（バージョン 4.1.2）
のインストールから表示までをご紹介致しました。
今回は、SCFを使用しての画像の表示の仕方と、繰り返し表示についてご紹介いたします。
前回のブログ→https://tecb.jp/blog/1626
カスタムフィールドを設定
前回と同様フィールドを追加致します。
今回は「食べた物」と題名を付け、投稿ページに食べた物の名前・画像・説明文を表示したいと思います。
①ラベルには「食べ物の名前」「食べ物の画像」「食べた感想」と下記画像のようにタイプも設定します。名前は後で出力する際に使用するので、わかりやすいものを付けて下さい。
➁前回と同様、投稿にチェックを入れ公開し、投稿ページで下記画像のように表示されれば完了です。
③各テキストを入力・好きな画像をアップロードし公開すれば入力画面は完了です。
これではまだページに出力されないので、次はテーマファイルの編集です。
カスタムフィールドをウェブサイトで表示
前回同様、投稿タイプ『投稿』を表示するファイルcontent.phpを編集していきます。
テキストの出力方法は変わらないのですが、画像出力の際は画像のURLを取得し
それをimgタグに出力するという処理を記述します。
赤枠で囲んだ範囲がURLを取得する処理です。
$変数 = SCF::get（‘カスタムフィールド名’）;で（food_image）を呼び出します。
次にWord Pressの関数（wp_get_attachment_image_src）を使用します。
wp_get_attachment_image_src関数を使うと、画像に関する情報を取得することができます。
戻り値は以下となっております。
- [0] => url
- [1] => width
- [2] => height
- [3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false
esc_url関数で取得したURLを無害化し、変数$imgUrlへ格納
echoでimgタグへ出力し画像を表示します。
今回は、画像を取得時に引数にlargeを渡しているので、大サイズで表示されます。
上記画像のように表示されれば完了です。
グループを設定し繰り返し表示
SCFで一番魅力的なのが繰り返し表示です。
次は、購入品というフィールドを作成し、購入品名と金額を表示したいと思います。
①繰り返しのボタンを選択すると、グループ名が入力できるようになるので、クリックしグループ名を（buy）と付けます。「購入品名」とサブフィールドを追加し「金額」を入力し、前回同様投稿にチェックし、公開します。
➁投稿ページに行き、下記のように入力できればOKです。
＋のボタンをクリックすると同じ入力フォームがもう１つできるので２つとも入力してください。
③次は、テーマファイルを変更します。前回同様content.phpを編集していきます。
前回との大きな変更点は、SCF::getでグループ名を呼び出しているところです。
$変数 = SCF::get（‘グループ名’）;で設定したグループ名（buy）を呼び出すことができます。
foreach文で繰り返し処理を行い、変数$field_valueに格納されているカスタムフィールド
購入品名（buy_name）と金額（buy_price）をechoで出力します。
投稿ページを確認し繰り返し表示されていたら完了です。
まとめ
今回はSmart Custom Fieldsの画像表示から、繰り返し表示までを解説いたしました。
この２つは、開発時に躓いたところなので備忘録がてら書かせていただきました。
これにタグやカテゴリー分類などで、表示内容をさらに細かく絞り込めたりと
学べば学ぶほど奥が深いWordPress。是非皆さんも開発してみて下さい！ではまた！
