【wordpress】Secure Custom Fields(Advanced Custom Fields)での画像の出力方法3パターン

wordpress

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。

カスタムフィールドで画像フィールドを作成する際、戻り値を画像配列・画像URL・画像IDの3つの中から選べますが、それぞれの出力方法についてまとめてみたいと思います。※ここでは出力するフィールド名を”image_field”としています。

①画像配列

ループ内で出力する場合

<?php $image = get_field('image_field'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">       
<?php endif;?> 

ループ外で出力する場合

<?php $image = get_field('image_field','投稿ID'); if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">       
<?php endif;?>

②画像URL

画像URLのみが出力されます。

ループ内で出力する場合

<?php $image_url = get_field('image_field'); if( !empty($image_url ) ): ?>
<img src="<?php echo $image_url ; ?>">
<?php endif; ?>

ループ外で出力する場合

<img src="<?php echo wp_get_attachment_image_url(get_post_meta('投稿ID','image_field',true),'full'); ?>">

wp_get_attachment_image_urlを使って画像のURLを取得します。

サイズは’full’以外にも,thumbnail.small,medium,largeなど、または配列(幅と高さのピクセル値)で指定します。デフォルトではthumbnailになります。

③画像ID

ループ内で出力する場合

<?php $image = get_field('image_field'); if( !empty($image) ): ?>
<?php echo wp_get_attachment_image($image, 'full'); ?> 
<?php endif;?>  

wp_get_attachment_imageはimgタグを生成して出力します。登録されている場合、altも出力されます。(サイズについては画像URLと同様です。)

ループ外で出力する場合

<?php echo wp_get_attachment_image(get_post_meta('投稿ID','image_field',true),'full'); ?>

まとめ

画像フィールド出力3パターンについてでした。

ループ内の出力の場合ですが、画像配列、または画像IDを選択するとaltも一緒に出力してくれます。必要に応じて使い分けたいですね!

wordpress
スポンサーリンク
Web Parts Box
タイトルとURLをコピーしました