[WP]WordPressでアイキャッチの画像とパスを取得する方法

WordPress

2012.11.10

WordPressの記事投稿時に「アイキャッチ」を利用する事が多いと思います。

例えば「最新記事をアイキャッチ付きで一覧表示」したり「OGP 設定にアイキャッチを使う」など、非常に利用頻度の高い画像ですので、今回はこのアイキャッチ画像を取得する方法をまとめました。

アイキャッチの「画像」の取得
アイキャッチの「画像パス」の取得方法
1. wp_get_attachment_image_src()

アイキャッチの「画像」の取得

まずはアイキャッチの画像を<img>タグ付きで取得する方法です。

functions.phpの編集

アイキャッチを有効にするには、使用しているテーマのfunctions.phpでadd_theme_support('post-thumbnails')を有効にします。

※functions.phpに以下のコードの記述がなければ追記します。

<?php
	add_theme_support('post-thumbnails');
?>

<?php

add_theme_support('post-thumbnails');

アイキャッチの「画像」の取得方法

アイキャッチがあれば <img> タグ付きで画像を表示し、なければ代替イメージを表示するというサンプルです。

テンプレートタグget_the_post_thumbnailでアイキャッチを取得します。

<?php
if (has_post_thumbnail() )	{
	
	//アイキャッチがあれば img タグの画像を返す。
	//画像サイズは medium で出力しています。
	echo get_the_post_thumbnail($post->ID, 'medium');
	
} else {
	
	//アイキャッチがない場合は代替画像を表示。
	echo '<img src="代替画像のURL">';
} ?>

<?php

if (has_post_thumbnail() ) {

//アイキャッチがあれば img タグの画像を返す。

//画像サイズは medium で出力しています。

echo get_the_post_thumbnail($post->ID, 'medium');

} else {

//アイキャッチがない場合は代替画像を表示。

echo '<img src="代替画像のURL">';

} ?>

get_the_post_thumbnail()

get_the_post_thumbnail()の引数は以下の通りです。

$post_id	投稿ID
$size	画像サイズ（初期値’thumbnail’）
$attr	<img>タグの属性（class=、title=、align=など）を文字列で返す。省略時はなし（false）

第3引数$attrはよく省略しますが、独自のクラスを付与したい場合は以下のような記述をします。

<?php
	get_the_post_thumbnail(
		$post->ID,
		'medium',
		'class=独自のクラス名'
	);
?>

<?php

get_the_post_thumbnail(

$post->ID,

'medium',

'class=独自のクラス名'

);

アイキャッチの「画像パス」の取得方法

アイキャッチの「画像パス」だけ取得することもできますので、OGP 設定のog:imageには <img> タグは外して、src=の値だけを表示する、なんてことが可能です。

まずはテンプレートタグget_post_thumbnail_idでアイキャッチ IDを取得します。

<?php
if (has_post_thumbnail() )	{
	
	//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得。
	//画像サイズは medium で出力しています。
	$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
	
	//URLを返す
	echo $image_url[0];
	
} else {
	
	//アイキャッチがない場合は代替画像を表示。
	echo '代替画像のURL';
} ?>

<?php

if (has_post_thumbnail() ) {

//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得。

//画像サイズは medium で出力しています。

$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');

//URLを返す

echo $image_url[0];

} else {

//アイキャッチがない場合は代替画像を表示。

echo '代替画像のURL';

} ?>

wp_get_attachment_image_src()

次に、アイキャッチの情報を取得できるwp_get_attachment_image_src()を使うことで、画像の「URL、幅、高さ」が配列で返ってきますので、

[0] => url
[1] => width
[2] => height

[0] => url

[1] => width

[2] => height

URLを取得することができます。

wp_get_attachment_image_src()の引数は以下の通りです。

$attachment_id	アイキャッチID
$size	画像サイズ（省略時’thumbnail’）
$icon	アイコン画像。使用する場合は true で省略時はなし（false）

第2引数の$sizeには「’thumbnail’、’medium’、’none’」の3種類が指定できますし、

<?php
	$image_url = wp_get_attachment_image_src(
		$image_id,
		'medium'
	);
?>

<?php

$image_url = wp_get_attachment_image_src(

$image_id,

'medium'

);

array(200,200)のように、ピクセルでサイズを指定することもできます。

<?php
	$image_url = wp_get_attachment_image_src(
		$image_id,
		array(200,200)
	);
?>

<?php

$image_url = wp_get_attachment_image_src(

$image_id,

array(200,200)

);

参考ページ
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_post_thumbnail
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_post_thumbnail_id
Function Reference/wp get attachment image src