Pocket

WordPressにはアイキャッチ画像という投稿記事の印象付けをサムネイル画像で表示させる機能があります。
この機能を使うと、簡単に投稿記事へサムネイル画像を出力することができますが、テンプレートのコーディングを進めていて、よくアイキャッチ画像のURLだけを取得したい時があります。

20141027_00

例えば、WordPressでアイキャッチ画像を簡単に表示させる場合には、ループ内で the_post_thumbnail() を使いますが、この関数を使うとイメージタグを上図のように出力してしまうので、HTML5のカスタムデータ属性「data-*」や、任意のIDを持たせたい時など、思うようにカスタマイズできなくて困る時があります。

そこで今回は、アイキャッチ画像のURLだけを取得して、イメージタグに属性を追加する方法をご紹介したいと思います。

 

ポイントは wp_get_attachment_image_src() 関数にあり!

アイキャッチ画像からURLだけを取得するには、テンプレートのループ内で wp_get_attachment_image_src() を使うと便利です。簡単に、wp_get_attachment_image_src() についてご説明をさせていただきますと、この関数は、登録した画像のパスやサイズを配列で返してくれる関数です。

例えば、wp_get_attachment_image_src() を使って得られた配列を PHPの「print_r」 などで確認をしてみると、以下の内容が確認できます。

[0]が画像のURLで、[1]と[2]が、画像の縦横サイズになります。
このことから、上記配列の0行目を抜き出せさえすれば、アイキャッチ画像のURLだけをうまく取得できそうです。

 

wp_get_attachment_image_src() の使い方

wp_get_attachment_image_src() の使い方ですが、テンプレートのループ内で以下のように使います。
以下のコードでは、念のため、PHPの「print_r」 を使って配列の内容を確認しています。

 

WordPressでは、管理画面のメディアで設定した内容にて画像アップロード時に複数枚の画像が作成されますが、取得したい画像のサイズをwp_get_attachment_image_src() の引数に渡してあげることで、目的の画像の詳細(URLやサイズなど)を得ることができます。

 

20141027_02

また、wp_get_attachment_image_src()を使う際には、上図のようにアイキャッチ画像のID を指定する必要がありますが、 get_post_thumbnail_id() を使うと簡単にアイキャッチ画像のIDを取得することができます。

 

■引数に渡せる画像のサイズ

サムネイル thumbnail
中サイズ medium
大サイズ large
フルサイズ full

 

■画像のサイズと管理画面の設定内容

20141027_01

 

上記の内容を踏まえて、独自のアイキャッチ画像を出力するサインプルコードは以下のようになります。
自分でイメージタグを形成するので、HTML5のカスタムデータ属性「data-*」を追加した形でイメージタグを出力します。

 

いかがでしたでしょうか?
ループ内で the_post_thumbnail() を使えば簡単にアイキャッチ画像の表示ができますが、独自に属性を追加したい場合など今回ご紹介させていただいた方法がきっと役に立つのではないかと思います。

 

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。