あなたのWebサイトではアイキャッチが用意されているでしょうか？
アイキャッチを用意することで、多くの人々がWebサイトに訪れてくれたり、投稿記事を見てくれたりします。
そこで今回は、Wordpressでのアイキャッチの設定方法についてお伝えします。
CONTENTS
アイキャッチとは？
まずは「アイキャッチとは何なのか」理解していきましょう。
アイキャッチは、ターゲットとなるユーザーの注意を引いて記事に誘導させ、クリック意欲を刺激することなどを目的とした画像イメージです。（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」の３種類のサイズのアイキャッチ画像を追加して定義する設定です。
|
1 2 3 4 5 6 |
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です。
実際には、アイキャッチ画像が正しく登録されているかどうか調べてから出力します。
|
1 2 3 4 5 6 7 8 |
<?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
=> width
=> height
見ていただくとわかるかと思いますが、画像の「URL」、「幅」、「高さ」の3つが格納されています。
以下のコードを記述することで、アイキャッチ画像のURLだけを出力することができます。
|
1 2 3 4 5 6 7 |
$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」を使って取得できます。
|
1 2 3 4 5 6 |
$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」に以下のコードを記述して、アイキャッチ画像を使えるようにしましょう。
|
1 |
add_theme_support( 'post-thumbnails' ); |
切り抜きの場合
次に、表示サイズを指定するコードを記述します。
数値は縦幅、横幅の順に記述します。「true」は、画像をトリミング（切り抜く）場合のみ記述してください。
|
1 |
set_post_thumbnail_size(520, 220, true ); |
今回の場合は、アップロードした画像（640×480）の比率を変えずに縮小（520×390）に縮小してから余りの部分をカットして、520×220のサイズに自動で行います。
リサイズの場合
|
1 |
set_post_thumbnail_size(520, 220 ); |
このように「true」を記述しない場合は、自動リサイズすることになります。
縮小する際に縦横比が変わってしまいます。そのため、足りない部分が出てしまうことがあります。
アイキャッチ画像を非表示にする方法
続いて、時折記事内にはアイキャッチ画像を表示したくないこともあるでしょう。そんなときに、アイキャッチ画像を非表示にする方法を紹介します。
アイキャッチ画像を非表示する方法は、以下の2つの方法があります。
- 詳細オプションで設定する
- 「single.php」で設定する
詳細オプションで設定する
この場合、直接コードを編集しなくて済むので、簡単に設定できます。ただし、テーマによっては「詳細オプション」がない場合があります。
その場合は「single.phpで設定する」方法を参考にしてください。
左側のメニューから「外観」→「アイキャッチの表示選択」→「記事にアイキャッチを非表示」とクリックします。完了したら、変更を保存しましょう。
single.phpで設定する
この場合は、直接コードを編集して、設定する手順で行います。「single.php」にある以下のコードをコメントアウトまたは削除してください。
|
1 2 3 4 5 6 |
<div class="post_thumb"> echo the_post_thumbnail('single_size'); }else{ echo the_post_thumbnail('single_size2'); }; ?> </div> |
これで、アイキャッチ画像を非表示にすることができます。
アイキャッチ画像が表示されない原因と対処法
非表示設定になっている
まず、アイキャッチ画像が非表示になっていないか確認してみてください。確認するためには、投稿画面の右上にある「表示オプション」を開きましょう。
もし、アイキャッチ画像にチェックが入っていない場合は、チェックを入れましょう。
使用しているテーマでサポートされていない
あなたが今使っているテーマで、アイキャッチ画像が有効になっていないことも考えられます。
アイキャッチ画像の機能が有効になっていないと、アイキャッチ画像の設定や表示ができません。そんなときは、「functions.php」の最後に以下のコードを記述してみましょう。
|
1 |
add_theme_support('post-thumbnails'); |
これで、アイキャッチ画像を有効化することができます。
Facebookでシェアした時にアイキャッチが表示されない場合は？
正しくアイキャッチ画像を設定していても、Facebookでシェアしたときに表示されないことがあります。
基本的には3つの原因が考えられます。
- OGPイメージの設定ができていない
- Facebookのクローラーに投稿した記事が読み取ってもらえていない
- 画像のサイズが最適ではない（最適なサイズは728×381）
原因について理解したところで、対処法を紹介します。ですが、その前にOGPイメージについて簡単に説明しておきます。
OGPとは？
OGP（Open Graph Protocol）とは、FacebookなどのSNSでリンク先のWebページの内容を紹介するための規格です。
Facebookが提唱された規格ですが、はてなブックマークやGoogle+などにも利用されています。
これによって、実際にページにアクセスしなくても、Webページの内容や「誰が書いた記事なのか」という情報を知ることができます。
All in One SEO Packで、OGPイメージを設定できる状態にする
まずは、「All in One SEO Pack」のインストールと有効化を行いましょう。
有効化できたら、「機能管理」をクリックしてください。その中の「ソーシャルメディア」の「アイコン」または「Active」クリックして有効化します。
これで、「All in One SEO Pack」の準備は完了です。
記事にOGPイメージを設定する
まずは、アイキャッチ画像が正しく反映されていない記事で、投稿編集画面を開きましょう。次にアイキャッチ画像を設定しましょう。
アイキャッチ画像ができたら、既に公開している記事の場合は「更新」、または新しい記事での場合は「下書きとして保存」をクリックしましょう。
下の方にスクロールすると、「All in One SEO Pack」の設定画面が出てきます。
その中の「ソーシャル設定」のタブをクリックしましょう。その中の「画像」でFacebookに表示させたい画像を選択してください。
これでOGPイメージの設定は完了です！
WordPressのアイキャッチ画像に関するまとめ
以上、いかがでしたか？
今回は、アイキャッチ画像の自動設定方法や、アイキャッチが表示されない場合の対処法などを中心にお伝えしました。
アイキャッチとサムネイルは同じような意味で使われることも多いですが、意味は違うことだけは覚えておきましょう。
最後まで読んでいただき、ありがとうございました。
