WordPressでアイキャッチ画像のURLを取得して表示する

thumbnails_url

今回は、WordPressのアイキャッチ画像のURL・幅・高さなどを取得して表示する方法のご紹介です。
この方法を使う場面が、ありましたので自分の備忘録としてもメモとして残しておきます。

そんなに頻繁に使いたい場面はありませんが、アイキャッチ画像のURLをimg要素の属性に追加したり、投稿記事のOGPタグなどに出力したりとちょいちょい利用する場面があります。
または、add_image_sizeを使ってアイキャッチ画像に任意のサイズを登録すると、そのサイズの画像が【uploads】に新しく生成されるのが嫌な場合がありますので、こちらの方法を使ってアイキャッチ画像のURLだけを取得してwidhtとheightを任意のサイズに指定する方法もあります。

通常WordPressのアイキャッチ画像を表示する場合は、テンプレートタグの【the_post_thumbnail()】を使用しますが、この方法だと、img要素毎表示してしまいますし、幅だけを任意のサイズに指定して表示させたいときなどには不便になります。
なので、アイキャッチ画像のURLや幅だけを任意のサイズに指定して表示する場合は、【wp_get_attachment_image_src()】という関数を利用します。

wp_get_attachment_image_src()

アイキャッチ画像のURLを取得して表示する

アイキャッチ画像のURLを表示する場合は、下記コードを【functions.php】に記述して下さい。

/*-------------------------------------------*/
/*	アイキャッチ画像のURLだけを指定し出力
/*-------------------------------------------*/
function thumbnails_url(){
// 画像idを取得する
$thumbnail_id = get_post_thumbnail_id( $thumbnail_id ); 
/*
* 返ってくる引き数は配列
* [0]アイキャッチ画像のURL
* [1]幅
* [2]高さ
*/
$thumbnail = wp_get_attachment_image_src( $thumbnail_id, "none" );
//URLを出力
echo $thumbnail[0];
}

wp_get_attachment_image_srcの引数【none】ですが、取得したいサイズを指定出来ます。
なので、【medium】のサイズのアイキャッチの情報を取得したい場合は、noneをmediumに変更します。
画像のサイズは、【thumbnail】【post-thumbnail】【small】【medium】【large】などがあり、また下記のようにサイズを指定することも可能です。

$thumbnail = wp_get_attachment_image_src( $thumbnail_id, array(150,100) );

それでは、先ほど【functions.php】に記述したアイキャッチ画像のURL出力する関数を利用したいと思います。
今回はimg要素に幅だけを任意のサイズに指定して下記のように出力してみました。

<img src="<?php thumbnails_url();?>" width="300">

今回の方法は、意外と使える方法なのできっといつか役に立つと思います。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS jquery-rcrumbs

jQueryプラグインを使ってパンくずリストをレスポンシブ化する

NEXT lazyload0

WordPressプラグイン画像を遅延して読込する【Lazy Load】