[WP]WordPress でアイキャッチの画像とパスを取得する方法
スポンサード
※functions.php に以下のコードの記述がなければ追記します。
テンプレートタグ
第3引数
まずはテンプレートタグ
第2引数の
スポンサード
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] => heightURL を取得することができます。
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) ); ?>
参考ページ
テンプレートタグ/get the post thumbnailテンプレートタグ/get post thumbnail idFunction Reference/wp get attachment image src
テンプレートタグ/get the post thumbnailテンプレートタグ/get post thumbnail idFunction Reference/wp get attachment image src
スポンサード
勝手にリサイズされた画像を読み込まれてしまい、画像がボケボケで困っていました。こちらの設定をしたら綺麗に表示されました!ありがとうございます!容量も軽くなるし一石二鳥!