カスタムフィールドの画像URLを表示させるphpコード
Wordpressにカスタム設置した画像フィールドをページ上で表示させる方法をご紹介します。
要素を追加する場合は、直接追加せずにアクションフックやフィルターフックを使う事が多いです。
画像の場合はidだけを保存し、同じidを持つ別配列に格納された画像URLを読み込みます。
カスタムした画像フィールドをページに表示させる
本記事ではWordpressに追加したカスタムフィールドの画像を表示させるコードの小ネタです。
管理画面でカスタム画像フィールドの追加・差替えができるようにするコードは、よく記事で紹介されていますよね。
プラグインなしのカスタムフィールド追加
今回はプラグインなどは使わずに、functions.phpに直接追記してカスタムフィールドを準備した場合を想定しています。
特にQiita様のコードなどはそのまま使えて便利ですよね。
Qiita様の記事リンク：
作成されたカスタム画像は、管理画面上でも表示されるようになっています。
画像のURLについて
画像以外のカスタムフィールドの追加方法はそれほど難しくはありませんよね。
設定時につけたname値をそのまま出力に使えば、問題なく表示されます。
ただ画像（src内に入るURL部分）に関してはちょっと違います。
画像URLが格納されるのではなく、画像IDのみ格納する
上記コード上でinput fileのname値「hoge_thumbnail」には、画像のURLは格納されていません。
ここは画像のID（attach_id）が格納されています。
別に用意した「attachment」配列の中に画像のURL情報が格納されており、attach_idはその配列要素の一つです。
ですので他のカスタムフィールド同様にhoge_thumbnailを呼び出しても、idである「番号」しか出ないのです。
カスタムフィールドを通常通り呼び出す
テキストデータの場合
<?php echo get_post_meta($post->ID, 'hoge_name', true); ?>
上記の様に書くと、ページ上に「hoge_name」フィールドのデータが表示されます。
通常のカスタムフィールドであればこれで問題ないはずです。
画像データの場合
<?php echo get_post_meta($post->ID, 'hoge_thumbnail', true); ?>
上記では、hoge_nameと同じ配列下にあるhoge_thumbnailを呼び出しています。
この様に書いても、「hoge_thumbnail」フィールドに格納した画像idが表示されるだけです。
post配列にフックされた別配列データを呼び出す
何か要素を追加する場合、アクションフックやフィルターフックを利用して追加される事がほとんどです。
画像URLなどの情報はattach_idとともに、postとは別のattachment配列に格納されています。
ですので画像URLも、attach_idをフックにしてattachment配列の中に格納されたURLを導いてこなければなりません。
以下からは上記を踏まえて、画像URLを呼び出していきます。
single系ページでの表示の仕方
それではまずは、記事詳細ページsingle.phpで画像を表示させるコードを紹介します。
使うのはwp_get_attachment_url()です。
wp_get_attachment_url()
これにより該当記事のhoge_thumbnailと同じattach_idを持つ、attachment配列のURLを呼び出します。
例えば記事のhoge_thumbnailが「25」の場合、attach_idが25番のattachment配列のURL（保存時のURL）を表示する訳です。
single.phpコード（php部分のみ）
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> //htmlソースが入ります。 <?php echo '<img src="'.wp_get_attachment_url(get_post_meta($post->ID , 'hoge_thumbnail' ,true)). '">'; ?> <?php endwhile; endif; ?>
上記はimgタグを丸ごとechoで書き出したパターンです。
特に「"」や「'」「.」の書き方（囲み方）に注意しましょう。
一覧ページおよびindex.phpでの表示の仕方
次は記事の一覧ページや、TOPページ（index.php）でこの画像サムネイルを表示させるコードです。
基本的に記事の数だけ繰り返し処理が行われます。
下記はカスタム投稿タイプ「bukken」の記事一覧を出力しています。
archive.php・index.php出力コード例
foreach構文による呼び出し
<?php $args = array( 'numberposts' => 20, //表示する記事の数の指定 'post_type' => 'bukken' //投稿タイプの指定 ); $posts = get_posts( $args ); //繰り返し処理開始 if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post ); ?> //HTMLソースが入ります。 <div class="image"> <img alt="<?php the_title(); ?>" src="<?php echo wp_get_attachment_url(get_post_meta($post->ID , 'hoge_thumbnail' ,true)); ?>"> </div> //HTMLソースが入ります。 <?php endforeach; ?> <?php else : ?> //記事が無い場合のコード <?php endif; wp_reset_postdata(); ?>
前回の様にimgタグ丸ごとを出力するのではなく、src内のURL部分だけ出力しています。
URLのみを抽出するコード（src内）
<?php echo wp_get_attachment_url(get_post_meta($post->ID , 'hoge_thumbnail' ,true)); ?>
呼び出しの構造は先ほど紹介したものと同じですね。
返り値によって違う事に注意
今回はあくまでプラグインは使わず、functions.phpを操作してカスタムフィールド追加する事が前提です。
hoge_thumbnailの返り値が画像id（attach_id）となっていた訳ですね。
ただ今回に限らず、Advanced Custom Fieldsプラグインなどを使っている場合も注意が必要でしょう。
設定によって変数に格納される値が違う
カスタムフィールドの画像出力方法は、カスタムフィールド作成画面で指定した「返り値」の指定によって変わります。
設定によっては、変数に直接画像URLが格納されている場合もある訳です。
返り値が「画像URL」の場合
<img src="<?php the_field('image_ url'); ?>">
この場合変数に直接URL情報が格納されているのでこのまま画像URLが表示されます。
返り値が「画像ID」の場合
<?php //「hoge_thumbnail」のフルサイズ画像の情報を取得 $image = wp_get_attachment_image_src(get_field('hoge_thumbnail'), 'full'); ?> <img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('hoge_thumbnail')); ?>">
上記はまず、hoge_thumbanilの数値と同じものを持つattachment配列の画像URLを導いています。
その情報を代入した$imageの値を、echoで書き出している形です。
