【WordPress】アイキャッチ画像のURLのみを取得する方法

WordPress2016年9月9日

公開時は実装していなかったのですが、先日ブログのサイドバーや関連リンクに記事のアイキャッチ画像を表示する仕様に変更しました。

一般的にはアイキャッチ画像をWordPressのブログに表示する際、<?php the_post_thumbnail(); ?>がよく使われると思いますが、<img>タグごと表示されてしまうことになり、title属性やalt属性を空にしたい場合など、詳細なマークアップを行いたいケースではいささか不便です。
そこでアイキャッチ画像のURLだけphpコードで取得することで、アイキャッチ表示を実装いたしましたのでその方法をご紹介いたします。

サンプルコード

<?php if ( has_post_thumbnail() ) {
$image_id = get_post_thumbnail_id ();
$image_url = wp_get_attachment_image_src ($image_id, true);
echo $image_url[0];
} else {
echo get_bloginfo( 'template_directory' ) . '//アイキャッチが存在しない場合の代替画像パスを記述';
} ?>

解説

get_post_thumbnail_id ()でアイキャッチ画像のIDを取得

変数$image_idにアイキャッチ画像のIDを格納しています。

wp_get_attachment_image_src()で画像のパスを取得

変数$image_urlにアイキャッチ画像のURLを格納し、さらに配列でURLの値を取得します。
ちなみに、配列に格納される値は以下のようになっています。

[0]：url
[1]：width
[2]：height

※[0]でURLを取得

最終的には、以下のようなソースコードでsrc属性にアイキャッチ画像URLを出力させることで、任意のマークアップで扱うことができます。

<img src="<?php if (has_post_thumbnail()){$image_id = get_post_thumbnail_id ();$image_url = wp_get_attachment_image_src ($image_id, true);echo $image_url[0];}?>" alt="">

サイドバーや関連リンク、トップページなどページや実装箇所ごとに属性を詳細にコントロールできるようになるため、非常に応用が利きます。

まとめ

このサイトではとことんセマンティックなマークアップにこだわっているため、本対応は必須でした。
細かいところですが<img>タグごと出力されてしまうと全体設計上不都合が出ることもあるため、ご紹介した方法でアイキャッチ画像URLを取得すると理想のマークアップで実装することが可能になります。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。