• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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

functions.php の編集

アイキャッチを有効にするには、使用しているテーマの functions.php で
add_theme_support('post-thumbnails') を有効にします。
※functions.php に以下のコードの記述がなければ追記します。
<?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">';
} ?>

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=独自のクラス名'
	);
?>


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

アイキャッチの「画像パス」だけ取得することもできますので、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';
} ?>


wp_get_attachment_image_src()

次に、アイキャッチの情報を取得できる wp_get_attachment_image_src() を使うことで、画像の「URL、幅、高さ」が配列で返ってきますので、
[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'
	);
?>
array(200,200) のように、ピクセルでサイズを指定することもできます。
<?php
	$image_url = wp_get_attachment_image_src(
		$image_id,
		array(200,200)
	);
?>



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. 勝手にリサイズされた画像を読み込まれてしまい、画像がボケボケで困っていました。こちらの設定をしたら綺麗に表示されました!ありがとうございます!容量も軽くなるし一石二鳥!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください