【WordPress】アイキャッチ画像の設定方法

プログラミング

スポンサーリンク

本記事ではアイキャッチ画像の設定方法を解説します。
・アイキャッチとは何か
・画像の設定方法
・phpコードでアイキャッチ画像を埋め込む方法(テーマ自作の場合)

アイキャッチ画像 = サムネイル

アイキャッチ画像とはサムネイルのことです。読者の「目を引く」ために設定します。ブログやニュースメディアの記事一覧ページにおいて、各記事に添えられている写真です。

アイキャッチ画像
アイキャッチ画像の例

ウェブサイトからアイキャッチ画像を全て取り除いたとしたら、随分と貧相な仕上がりになってしまいます。内容はさることながら、見た目も大切なWebサイト。実は、自分のサイトのみならずSNSなどでシェアするときも、アイキャッチ画像は役立ちます。

アイキャッチ画像のメリット

SNSで記事のURLをシェアしただけで、その投稿にアイキャッチ画像が付随します。

SNS_アイキャッチ
アイキャッチ付きツイート

画像は、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対応版]

WordPress 仕事の現場でサッと使える! デザイン教科書
著者:中島 真洋
価格:2905円(Kindle)
スポンサーリンク