【Advanced Custom Fields(ACF)】画像のデータを取得して表示する例

WordPressのプラグイン『Advanced Custom Fields(ACF)』は、カスタムフィールドを管理・カスタマイズできる便利なプラグイン。
今回は、そのACFでフィールドタイプが「画像」のカスタムフィールドを利用した場合に、その値を取得して出力する例となります。
また、ACFで利用できる基本的な関数については、以下のリンク先を参考にしてみてください。
【ACF】フィールドタイプ「画像」のカスタムフィールドについて
ACFでフィールドタイプが「画像」のカスタムフィールドを追加すると、画像をアップロードできます。
その画像のカスタムフィールドの値は、デフォルト設定では画像データの連想配列となり、今回の例ではその連想配列から指定した値を取得して出力します。
【ACF】画像のデータを取得して表示する例
以下、フィールドタイプが「画像」のカスタムフィールドの値を取得して、ページ内に画像を表示する例となります。
<?php
// カスタムフィールドの値を取得
$img_field = get_field('img');
if($img_field){
// 画像・キャプションを出力
?>
<figure>
<img
src="<?php echo esc_url($img_field['url']) ?>"
alt="<?php echo esc_attr($img_field['alt']) ?>"
>
<figcaption><?php echo esc_html($img_field['caption']) ?></figcaption>
</figure>
<?php } ?>
例では、画像のカスタムフィールドの値を取得し、その値の連想配列から、次のキーで指定した画像データを取得しています。
キー | 取得できる画像データ |
url | 画像のURL |
alt | 画像に設定したした代替テキスト |
caption | 画像に設定したキャプション |
例で利用した上記の画像データ以外にも取得できるデータはあります。詳しくはvar_dump()などで、画像のカスタムフィールドの値を確認してみてください。