芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【WordPress】the_post_thumbnail_urlで簡単にアイキャッチのパスを取得

WordPress2018年4月16日

ずいぶん前にWordPressのアイキャッチ画像を取得するphpをご紹介させていただいたことがありましたが、has_post_thumbnail()やwp_get_attachment_image_src()を駆使するなどしてかなり冗長なコードを記述するものでした。

しかし、実はWordPress4.4からは画像のパスを取得できるthe_post_thumbnail_url()関数が用意されているとのこと。そこで本記事では、アイキャッチ画像のパスのみを一発で取得できるthe_post_thumbnail_url()関数について使い方をまとめてみました。

サンプルコード

the_post_thumbnail_url()

現在見ている投稿記事に設定されているアイキャッチ画像のパスを呼び出すことができる関数です。

<img src="<?php the_post_thumbnail_url(); ?>" alt="">

imgタグの中に記述すればアイキャッチを表示することができます。og:imageなどにも使えますね。以下のようにして引数を指定し、任意のサイズを表示することも可能です。

<img src="<?php the_post_thumbnail_url(medium); ?>" alt="">

get_the_post_thumbnail_url()

前述のthe_post_thumbnail_url()と違い、こちらはサイズに加えて投稿IDを引数に指定することができます。ただしget_the_post_thumbnail_url()単体ではソースにパスを出力しませんので、出力する際はechoと組み合わせて使用します。

<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">

使い所としては、例えば以下のように投稿IDを引数に指定し、閲覧している記事の前後の記事のアイキャッチ画像のパスを取得することができます。

<?php $prevpost = get_adjacent_post(true, '', true); if ($prevpost) : ?>
<img src="<?php echo get_the_post_thumbnail_url($prevpost->ID,'medium');?>" alt="">
<?php endif; ?>
<?php $nextpost = get_adjacent_post(true, '', false); if ($nextpost) : ?>
<img src="<?php echo get_the_post_thumbnail_url($nextpost->ID,'tmedium');?>" alt="">
<?php endif; ?>

まとめ

Web屋の芝生DIYを構築した時はWordPress4.6だったので、既にその時からこの関数は使えたんですね。。。恥ずかしながら知らなかったです。こちらの記事で紹介している方法でも相変わらずパスのみを取得することは可能ですが、the_post_thumbnail_url()関数を使えばかなりコードがスッキリしますね。

手間もかかるので既存のテンプレートソースをわざわざ置き換えるまではしませんが、今後Webサイトの改修でアイキャッチ部分を弄ぶ際は、積極的にこちらの関数を使っていこうと思います。

アイキャッチ画像のパスの取得したい際は、どうぞ本記事をご参考にしていただければ幸いです。

「WordPress」の他の記事を読む

ページの先頭に戻る