Advanced Custom Fields の画像が取得できない

Question

前提・実現したいこと

一般のページはBootstrap4で、投稿ページはWordPressでページを作成しています。ユーザの投稿しやすい投稿ページを作りたいと思い、初めてAdvanced Custom Fields、Custom Post Type UIプラグインを使用しました。

投稿ページは最終的に前後の比較写真を掲載できるよう画像を2種類、その他にタイトルや説明文を入れたいと思っています。まずはテストで商品情報を扱っています。タイトルや説明文のテキストは取得できましたが、画像だけが取得できません。

該当のソースコード

![
返り値のフォーマットは画像URLを選択しました。

//single.php内

<p>
	商品概要　<?php the_field('item_description'); ?>
</p>
<p>
	商品画像　<?php if( get_field('item_image') ): ?>
	<img src="<?php the_field('item_image'); ?>" />
	<?php endif; ?>
</p>
<p>
	価格　<?php the_field('item_price'); ?>
</p>

試したこと

フィールド名が間違っているのではないか、また、返り値のフォーマットを変更してみたりもしましたが、現象変わりませんでした。

画像配列のとき

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

画像IDのとき

<?php $image = get_field('item_image'); $size = 'full'; // (thumbnail, medium, large, full or custom size) if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?>

一般ページとは階層を分け、wpフォルダ以下にWordPressをインストールしています。wp/wp-content/uploads以下に保存されているのかと探しましたが、こちらにはAdvanced Custom Fieldsを使わない一般の投稿記事の画像しかありませんでした。
Advanced Custom Fieldsをインストールしてテスト環境だけで二日間かかりましたが、画像取得だけができません。どうかご教示いただけないでしょうか。

補足情報（FW/ツールのバージョンなど）

Advanced Custom Fields 5.8.1
Custom Post Type UI 1.6.2

Comments

[CHERRY]

> タイトルや説明文のテキストは取得できましたが、画像だけが取得できません。

それぞれの返り値を選択した際に、何が返ってきているのでしょうか？
どのような値が返ってきているか var_dump 等で、確認してみましたか？

[sho.duck]

初めてなことばかりで手間取りながらですが、大変感謝しております。
確認しましたが、商品画像はNULLでした。商品概要、価格はstring(桁数)が返ってきました。
何も取得できていないということですよね、、

[yukikp]

管理画面上で記事の編集画面を開いたときに、「商品画像」のところでサムネイルは表示されていますか？

[sho.duck]

コメントありがとうございます。
時間がなくなってしまい、以前の環境を削除してしまっていました。

再構築し確認したところ、最初はサムネイル表示されていませんでしたので、ここが問題だったかもしれません。正しく画像追加後は表示できました。

ありがとうございました。

Answer 1

//画像(返り値は「画像ID」)
$img = get_field('item_image');
$imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更
if($imgurl){
?><img src="<? echo $imgurl[0]; ?>" alt=""></p>
}

で解決できないでしょうか？

Comments

[sho.duck]

ありがとうございます！
また検証結果を報告させていただきます。

[sho.duck]

<p>
<?php
$img = get_field('item_image');
$imgurl = wp_get_attachment_image_src($img, 'full');
if($imgurl){
?>
<img src="<?php echo $imgurl[0]; ?>" alt="">
<?php } ?>
</p>

で解決できました。
ありがとうございました！！