本記事ではアイキャッチ画像の設定方法を解説します。
・アイキャッチとは何か
・画像の設定方法
・phpコードでアイキャッチ画像を埋め込む方法（テーマ自作の場合）
アイキャッチ画像 = サムネイル
アイキャッチ画像とはサムネイルのことです。読者の「目を引く」ために設定します。ブログやニュースメディアの記事一覧ページにおいて、各記事に添えられている写真です。
ウェブサイトからアイキャッチ画像を全て取り除いたとしたら、随分と貧相な仕上がりになってしまいます。内容はさることながら、見た目も大切なWebサイト。実は、自分のサイトのみならずSNSなどでシェアするときも、アイキャッチ画像は役立ちます。
アイキャッチ画像のメリット
SNSで記事のURLをシェアしただけで、その投稿にアイキャッチ画像が付随します。
画像は、Twitterでシェアされたニュース記事です。ツイートした人はURLを入力しただけなのに、自動でアイキャッチやタイトルが表示されるようになっています。
この機能について、自作テーマの場合は、自分で設定する必要がありますが、有料テーマやcocoonのような高性能無料テーマを使用している場合は大抵は機能します。アイキャッチ画像さえ設定されていれば。
というわけで、アイキャッチ画像の設定方法を見ていきたいと思います。
アイキャッチ画像の設定方法
記事作成画面の右側で、アイキャッチ画像を設定することができます。
右側のタブが表示されていない場合は、右上の歯車マークをクリックしてタブを表示します。さらに、「投稿」「ブロック」の二つのタブがありますが、アイキャッチ画像は「投稿」タブでアクセスできます。
タブが開かれているのに、設定コーナーがない場合は、設定で表示させます。
右上の「オプション」→「設定」と進みます。
アイキャッチ画像をオンにすれば、アイキャッチ画像を設定できるようになります。
WordPressテーマでアイキャッチ画像を設定する
自分でテーマを作る際は、テンプレートタグというWordPressが用意しているphp関数を使用します。
<?php if(have_posts()): ?> <!-- WordPressループ -->
<?php while(have_posts()): the_post(); ?> <!-- WordPressループ -->
<?php the_post_thumbnail(); ?> <!-- アイキャッチ用ののテンプレートタグ -->
<?php endwhile; ?>
<?php endif; ?>必ず、WordPressループの中で使用します。<?php the_post_thumbnail(); ?>のタグを埋め込むと、その部分にアイキャッチ画像が表示されます。
ただし、これだけでは表示されない場合があります。その時は、functions.phpに次のように記述する必要があります。
<?php
function theme_setup() {
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme','theme_setup');
?>Appendix
参考文献：［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］
