【Smart Custom Fields】繰り返しフィールドで画像を出力する方法

Smart Custom Fieldsはデフォルトで繰り返しフィールドが使えるのでACF（Advanced Custom Fields）より好んで使うことが多いです。

今回Smart Custom Fieldsの繰り返しフィールドで画像を出力するのに苦戦したので備忘録としてブログにまとめておこうと思います。

Smart Custom Fieldsの作者様のサイトの質問欄でも画像出力についての質問が多いように思います。

今回やりたいことは、Smart Custom Fields(カスタムフィールド)の画像フィールドを使用して

imgタグのsrc属性の中に画像のurlが入るようにする

ことです。

<img src="ここに画像のURLが入るようにしたい！！" alt="" />

imgタグを丸ごと出力することもできますが、class名やalt属性を個別に設定したい場合もあるので、できるだけsrc属性の中身だけを自分で設定できるようにしたいです。

繰り返しフィールドで画像を出力する大まかな手順

カスタムフィールドを作成

まずはカスタムフィールドを作成します。

コーデイングしていく上で大事になるのがグループ名と画像フィールド名です。

グループ名を取得

グループ名を使用して、グループの情報を取得します。

<?php $property = SCF::get('property'); ?>

foreachのループを作成

続けて、foreach文を記述します。

<?php $property = SCF::get('property'); foreach ( $property as $fields ) : ?>
  //ここにコンテンツが入る
  <img src="" alt="画像です" />
<?php endforeach; ?>

画像のIDを取得

画像のIDを取得し、変数に入れます。

フィールド名property__image1のIDを取得するには以下のように記述します。

<?php $gaikan_id = SCF::get('property__image1'); ?>

上記のコードを実際にimgタグの中に埋め込みます。

<img src="
  <?php
    $gaikan_id = SCF::get('property__image1');
  ?>
 " alt="" />

wp_get_attachment_url関数にSTEP3の画像IDを埋め込む

画像URLを返すにはwp_get_attachment_url関数を使用します。

使い方は、引数に画像のIDを入れるだけです。

事前に画像IDを取得しているのでそれを埋め込めばいいですね。

使い方の例は以下の通りです。

変数の後に[0]を入れるのがポイントです！！！

<?php
    $gaikan_id = SCF::get('property__image1');//IDを取得
    echo wp_get_attachment_url($gaikan_id[0], 'midium');//IDを埋め込む
?>

実際にimgタグの中に記述すると以下のようなコードになります。

<img src="
  <?php
    $gaikan_id = SCF::get('property__image1');
    echo wp_get_attachment_url($gaikan_id[0], 'midium');
  ?>
 " alt="" />

---

これでSmart Custom Fieldsの繰り返しフィールドで画像を出力できるようになります！