WordPressのアイキャッチ画像を自動設定！プラグインで表示されない時の対処法

2017年8月28日 2020年6月20日

webcode編集部

あなたのWebサイトではアイキャッチが用意されているでしょうか？

アイキャッチを用意することで、多くの人々がWebサイトに訪れてくれたり、投稿記事を見てくれたりします。そこで今回は、Wordpressでのアイキャッチの設定方法についてお伝えします。

CONTENTS

1 アイキャッチとは？
2 アイキャッチ画像とサムネイル画像の違い
3 アイキャッチ画像をプラグインで自動生成する方法
- 3.1 Auto Post Thumbnailを使う上での注意点
- 3.2 Auto Post Thumbnailの便利な機能
4 アイキャッチ画像のサイズを自由に設定する方法
5 アイキャッチをトリミングしてサイズを調整する方法
- 5.1 切り抜きの場合
- 5.2 リサイズの場合
6 アイキャッチ画像を非表示にする方法
- 6.1 詳細オプションで設定する
- 6.2 single.phpで設定する
7 アイキャッチ画像が表示されない原因と対処法
- 7.1 非表示設定になっている
- 7.2 使用しているテーマでサポートされていない
8 Facebookでシェアした時にアイキャッチが表示されない場合は？
9 WordPressのアイキャッチ画像に関するまとめ

アイキャッチとは？

まずは「アイキャッチとは何なのか」理解していきましょう。

アイキャッチは、ターゲットとなるユーザーの注意を引いて記事に誘導させ、クリック意欲を刺激することなどを目的とした画像イメージです。（LIGより）

Webサイト上においては、画像の配置やレイアウト、ユーザーを引き付けるような画像やアイコンのことを「アイキャッチ」と呼んでいます。

簡単に言うと、ユーザーの目を引き付けるための画像です。

アイキャッチ画像を設定することによって、SNSでシェアした際にURLと一緒に画像が表示されるようになります。画像が一緒に表示されることで、より多くのユーザーがあなたのサイトに訪れるようになるでしょう。

アイキャッチ画像とサムネイル画像の違い

続いて、アイキャッチと間違えられやすいのがサムネイルです。

サムネイルとは、いくつかの画像や動画などの読み込みに時間のかかる情報を大まかに把握するために作られた縮小画像のことを指しています（ferretより）。

アイキャッチとサムネイルの大きな違いは、「画像が縮小されているかどうか」です。サムネイルは、アイキャッチ画像を縮小してサムネイル画像として表示しています。

実際に２つの画像を見比べてみましょう。

赤枠で囲んであるのが「アイキャッチ画像」、青枠で囲んであるのが「サムネイル画像」です。

ただし、FacebookやTwitterでシェアしたときに表示する画像を「サムネイル画像」と呼ぶこともありますので、混同しないように注意しましょう。

アイキャッチ画像をプラグインで自動生成する方法

ここからは、WordPressでのアイキャッチ画像の使い方についてお伝えします。

通常、WordPressでアイキャッチ画像を設定する場合は、記事作成中にアイキャッチ画像を設定する必要があります。これって意外と面倒な作業ですよね…。

そんな面倒な作業を省くことができるのです。

自動でアイキャッチを生成するときに必要になるのが「Auto Post Thumbnail」というプラグインです。まずは、このプラグインのインストールと有効化をしましょう。

プラグインの細かな設定は一切ないので、プラグインの有効化さえ行えば、すぐに使えるようになります。

Auto Post Thumbnailを使う上での注意点

ただし、Auto Post Thumbnailを使う上で1つだけ注意点があります。

それは、記事本文の中に画像を使うことです。記事本文の中で最初に使用した画像をアイキャッチ画像として設定してくれます。

そのため、記事本文の中に画像が1枚もなければ、アイキャッチ画像は表示されることはないのです。

Auto Post Thumbnailの便利な機能

Auto Post Thumbnailには、「過去の記事のアイキャッチ画像も一括で設定できる」という便利な機能が用意されています。

ただし、この機能は有効化しただけでは反映されません。左側の「設定」→「Auto Post Thumbnail」をクリックして設定画面に移動しましょう。

そこで、表示されている「Generate Thumbnails」をクリックしてください。

これだけで、過去の記事にもアイキャッチ画像が設定されます。

アイキャッチ画像のサイズを自由に設定する方法

WordPressの場合は、デフォルトでアイキャッチ画像やサムネイル画像のサイズが指定されています。左側のメニューの「設定」→「メディア」で確認できます。

この画面でサイズ変更してしまうと、他の投稿ページでの画像のサイズもすべて変わってしまいます。

また、縦横比率がバラバラになってしまい、画像のバランスも悪くなってしまいます。この画面では極力変更しないようにしましょう。

好みのサイズにするにはfunctions.phpにコードを追記

好みのサイズに設定するためには、「functions.php」に以下のコードを追記しましょう。コードに記載されているサイズは変更してOKです。

以下のコードでは、「90×90」、「615×115」、「150×75」の３種類のサイズのアイキャッチ画像を追加して定義する設定です。

add_action( 'after_setup_theme', 'baw_theme_setup' );
function baw_theme_setup() {
 add_image_size('small_thumbnail', 90, 90 ,true );
 add_image_size('page_eyecatch-image', 615, 115, true );
 add_image_size( '150_thumbnail', 150, 75, true );
}

add_action( 'after_setup_theme', 'baw_theme_setup' );

function baw_theme_setup() {

add_image_size('small_thumbnail', 90, 90 ,true );

add_image_size('page_eyecatch-image', 615, 115, true );

add_image_size( '150_thumbnail', 150, 75, true );

}

サイズは自由に設定できますが、以下の注意点には気を付けてくださいね。

サイズの単位はすべてpx（ピクセル）
幅×高さの順に記述する
「,true」と記述すると、切り抜き指定できる（切り抜きしたくない場合は「,true」は記述しない）
それぞれの指定要素はカンマで区切る
必要なサイズのみ記述する（多く記述すると、その分画像が作成されてデータ量が多くなってしまう）

この5つの注意点に気を付けて設定してください。

URLだけを取得する方法

続いて、アイキャッチ画像を表示させたい場合は、「the_post_thumbnail()」と記述すればOKです。実際には、アイキャッチ画像が正しく登録されているかどうか調べてから出力します。

<?php
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
}
else {
	echo '<img src="' . get_bloginfo( 'template_direction' ) . '/images/thumbnail.png">';
}
?>

<?php

if ( has_post_thumbnail() ) {

the_post_thumbnail();

}

else {

echo '<img src="' . get_bloginfo( 'template_direction' ) . '/images/thumbnail.png">';

}

ただし、この記述では、<img>タグ付きで画像が表示されてしまいます。URLだけを取得して表示させたい場合は以下の方法で行いましょう。

使う関数は以下の２つです。

wp_get_attachment_image_src()（登録したアイキャッチ画像のパス、サイズを配列で返す）
get_post_thumbnail_id()（アイキャッチ画像のIDを取得する）

「wp_get_attachment_image_src()」で取得できる配列の中身は以下の3つです。

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

見ていただくとわかるかと思いますが、画像の「URL」、「幅」、「高さ」の3つが格納されています。

以下のコードを記述することで、アイキャッチ画像のURLだけを出力することができます。

<?php if ( has_post_thumbnail() ) {
	$img_id = get_post_thumbnail_id ();
	$img_url = wp_get_attachment_image_src ($img_id, true);
	echo $img_url[0];
} else {
	echo get_bloginfo( 'template_direction' ) . '/images/thumbnail.png';
} ?>

<?php if ( has_post_thumbnail() ) {

$img_id = get_post_thumbnail_id ();

$img_url = wp_get_attachment_image_src ($img_id, true);

echo $img_url[0];

} else {

echo get_bloginfo( 'template_direction' ) . '/images/thumbnail.png';

} ?>

パスとURLを取得する方法

先ほどはURLだけを取得する方法をお伝えしました。それを踏まえて、ここではパスとURLの両方を取得する方法をお伝えします。

まずは、パスの取得を取得しましょう。テンプレートタグの「get_post_thumnail_id」を使って取得できます。

<?php if ( has_post_thumbnail() ) {
 $img_id = get_post_thumbnail_id();
$img_thumbnail = wp_get_attachment_image_src( $img_id , true');
echo $img_thumbnail[0];
} else {
} ?>

<?php if ( has_post_thumbnail() ) {

$img_id = get_post_thumbnail_id();

$img_thumbnail = wp_get_attachment_image_src( $img_id , true');

echo $img_thumbnail[0];

} else {

} ?>

これでパスの取得ができました。

次に、URLを取得する方法を記述すればOKです。記述するコードは、URLだけを取得する方法のときと同じように記述してください。

アイキャッチをトリミングしてサイズを調整する方法

アイキャッチ用の画像をトリミングして、サイズを調整したい場合もあるでしょう。

そんな時は、まずは「functions.php」に以下のコードを記述して、アイキャッチ画像を使えるようにしましょう。

add_theme_support( 'post-thumbnails' );

1	add_theme_support( 'post-thumbnails' );

切り抜きの場合

次に、表示サイズを指定するコードを記述します。

数値は縦幅、横幅の順に記述します。「true」は、画像をトリミング（切り抜く）場合のみ記述してください。

set_post_thumbnail_size(520, 220, true );

1	set_post_thumbnail_size(520, 220, true );

今回の場合は、アップロードした画像（640×480）の比率を変えずに縮小（520×390）に縮小してから余りの部分をカットして、520×220のサイズに自動で行います。

リサイズの場合

set_post_thumbnail_size(520, 220 );

1	set_post_thumbnail_size(520, 220 );

このように「true」を記述しない場合は、自動リサイズすることになります。

縮小する際に縦横比が変わってしまいます。そのため、足りない部分が出てしまうことがあります。

アイキャッチ画像を非表示にする方法

続いて、時折記事内にはアイキャッチ画像を表示したくないこともあるでしょう。そんなときに、アイキャッチ画像を非表示にする方法を紹介します。

アイキャッチ画像を非表示する方法は、以下の2つの方法があります。

詳細オプションで設定する
「single.php」で設定する

詳細オプションで設定する

この場合、直接コードを編集しなくて済むので、簡単に設定できます。ただし、テーマによっては「詳細オプション」がない場合があります。

その場合は「single.phpで設定する」方法を参考にしてください。

左側のメニューから「外観」→「アイキャッチの表示選択」→「記事にアイキャッチを非表示」とクリックします。完了したら、変更を保存しましょう。

single.phpで設定する

この場合は、直接コードを編集して、設定する手順で行います。「single.php」にある以下のコードをコメントアウトまたは削除してください。

<div class="post_thumb">
<?php if($options['show_date']){
 　　echo the_post_thumbnail('single_size');
 }else{ echo the_post_thumbnail('single_size2');
 }; ?>
</div>