カスタムフィールドの画像URLを表示させるphpコード

カスタムフィールドの画像URLを表示させるphpコード

カスタムフィールドの画像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で書き出している形です。

この記事をシェアする

人気記事

Wordpressテーマカスタマイズ系記事