WordPressでアイキャッチ(サムネイル)を表示させるメモ

WordPressには、投稿や固定ページでページ毎に画像を1枚指定して、詳細ページのメイン画像や、一覧ページのサムネイル画像として表示させる事ができる「アイキャッチ」という機能があります。

アイキャッチを表示させる事によって、どんな内容が書かれているページなのかが視覚的にわかりやすくなったり、興味を引いてページを読んでもらいやすくなるというようなメリットが期待できます。
またブランドイメージやサイトの雰囲気に合わせた画像を配置して、見た目をカッコ良くするという目的で使用する場合もあるでしょう。

アイキャッチの機能を有効にする

アイキャッチの機能はそのままでは使えませんので、まずは機能を使えるようにするための設定が必要です。「functions.php」に次の1行を追加すると、記事の編集画面のサイドバーに「アイキャッチ画像」という項目が表示され、アイキャッチの機能を使用できるようになります。

アイキャッチ

「アイキャッチ画像を設定」をクリックし、通常のメディアを追加する要領で画像をアップロードして選択するだけです。

functions.php
add_theme_support('post-thumbnails');//両方
add_theme_support('post-thumbnails',array('post'));//投稿ページ
add_theme_support('post-thumbnails',array('page'));//固定ページ

特に理由がなければ両方使えるようにしておいて問題ないと思います。

アイキャッチを表示させる

アイキャッチ画像を表示させるためにはテンプレートのループ内に次の1行を追加します。パラメータにサイズを指定する事で、いろいろなサイズのアイキャッチを表示させる事ができます。

アイキャッチのサイズは管理画面の「設定→メディア設定」で設定されているサイズがそれぞれ適用されます。その他のサイズを指定すると、新しい画像が作成されるわけではなく、近いサイズの画像がリサイズされた形で表示されます。

テンプレート
//サイズを指定しない場合
<?php the_post_thumbnail();?>//元のサイズ

//サイズを指定する場合
<?php the_post_thumbnail('thumbnail');?>//サムネイルのサイズ
<?php the_post_thumbnail('medium');?>//中サイズ
<?php the_post_thumbnail('large');?>//大サイズ
<?php the_post_thumbnail('full');?>//元のサイズ

//その他のサイズを指定する場合
<?php the_post_thumbnail(array(100,100));?>

毎回アイキャッチがある場合は上記の一行だけでもいいですが、記事によってはアイキャッチがない場合もあるかもしれません。そんなときはアイキャッチの有無を判定して、ない場合は、いわゆる「No Image」を表示させる事ができます。

テンプレート
<?php if(has_post_thumbnail()):?>
	//アイキャッチがあるとき
	<?php the_post_thumbnail('medium');?>
<?php else:?>
	//ないとき
	<img src="<?php bloginfo('template_directory');?>/images/no-image.jpg">
<?php endif;?>

新しいアイキャッチサイズを追加する

画像をアップロードすると、元のサイズの画像の他に「サムネイル」「中」「大」のサイズが自動的に生成されますが、「add_image_size」を使うと、さらにこれ以外のサイズの画像を生成する事ができます。

<?php add_image_size(画像サイズの名前,横のサイズ,縦のサイズ,画像を切り抜くか);?>

「画像サイズの名前」はテンプレートから呼び出す時に使用する名前で、「thumbnail(thumb)」「medium」「large」「full」以外の名前を自由につけます。今回は「my_size」にします。第4パラメータの部分は指定したサイズに画像を切り抜くかどうかを「true/false」で指定します。デフォルト値は「false」なので切り抜かない場合は空欄でかまいません。以下は「functions.php」への記入例です。

functions.php
<?php add_image_size('my_size',200,150);?>

新しく追加したアイキャッチを表示させる

新しく追加したアイキャッチを表示させるには、通常のアイキャッチを表示させるのと同じで、パラメータ部分に先ほど自由につけた名前「my_size」を入れるだけです。

テンプレート
<?php the_post_thumbnail('my_size');?>;

カスタム投稿でアイキャッチを使う

カスタム投稿では、はじめに述べた「add_theme_support('post-thumbnails');」だけではアイキャッチが使えません。「functions.php」のカスタム投稿の設定が書いてある部分の「supports」内に「thumbnail」を追加するとアイキャッチが使用できるようになります。

functions.php
register_post_type('my_postname',
	array(
		'supports' => array('title','editor','author','thumbnail','excerpt'),
	)
);

カスタム投稿の場合でも表示方法は投稿や固定ページのときと同じです。

記事内の最初の画像をアイキャッチにする

毎回アイキャッチを設定するのがめんどくさい、すでに記事が数百あって今からアイキャッチを導入したいけど全部の記事一つ一つアイキャッチを設定していくのは無理・・・という場合もあります。

そんなとき、記事内の一番最初の画像を取得して、アイキャッチとして表示させる方法もあります。こちらはいろいろ方法があるみたいなので、ぐぐってみてください。

ぐぐってみてください

アイキャッチ画像のURLを取得

アイキャッチの画像をクリックしたら拡大表示させたいなど、アイキャッチ画像のURLだけを取得したい場合があります。アイキャッチ画像を表示させるときと同じように、テンプレートのループ内に以下のように記述します。

$thumb_id   = get_post_thumbnail_id();//アイキャッチのID
$thumb_data = wp_get_attachment_image_src($thumb_id,'medium');//配列
$thumb_url  = $thumb_data[0];//アイキャッチのURL

「wp_get_attachment_image_src」のパラメータにアイキャッチのサイズ(full・large・medium・thumbnail)を指定するとそれぞれのURLを取得する事ができます。

または

$thumb_url = get_the_post_thumbnail_url('','medium');

第1パラメータには投稿ID「get_the_ID()または数字」がセットできますが、ループ内で使う分には空欄でかまいません。

アイキャッチ画像の縦横サイズを取得

先ほどの「wp_get_attachment_image_src」を使って、指定したサイズの画像の縦横のサイズを取得する事ができます。

$thumb_id     = get_post_thumbnail_id();//アイキャッチのID
$thumb_data   = wp_get_attachment_image_src($thumb_id,'medium');//配列
$thumb_width  = $thumb_data[1];//アイキャッチの横のサイズ
$thumb_height = $thumb_data[2];//アイキャッチの縦のサイズ

アイキャッチ画像の代替テキスト (alt) を取得

$thumb_id  = get_post_thumbnail_id();//アイキャッチのID
$thumb_alt = get_post_meta($thumb_id,'_wp_attachment_image_alt',true);//アイキャッチの代替テキスト

アイキャッチ画像の説明・タイトル・キャプションを取得

あまり使い道はないかもしれませんが「説明・タイトル・キャプション」も取得できます。altの他に追加情報がある場合に使うくらいでしょうか。

$thumb_id      = get_post_thumbnail_id();//アイキャッチのID
$thumb_desc    = get_post($thumb_id)->post_content;//アイキャッチの説明
$thumb_title   = get_post($thumb_id)->post_title;//アイキャッチのタイトル
$thumb_caption = get_post($thumb_id)->post_excerpt;//アイキャッチのキャプション
最終更新日:2017/08/17