【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()などで、画像のカスタムフィールドの値を確認してみてください。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。