【WordPress】アイキャッチ画像の表示とサイズ変更

WordPressで投稿などに設定するアイキャッチ画像は目にとまりやすいため、読者の注意を引くのに役立ちます。この記事では、phpを使ってWordPressのアイキャッチ画像を表示する方法、およびサイズ変更時のオプションについて紹介します。

アイキャッチ画像とは

アイキャッチ画像は、WordPressの記事やページのサムネイルとして表示される画像です。
画像を使うことで読者に内容を視覚的に伝え、興味を引きだします。

アイキャッチを登録

1. 投稿を編集
   まず、アイキャッチ画像を表示したい投稿を開きます。
2. アイキャッチ画像を設定
   投稿編集画面に「アイキャッチ」オプションがあります。ここをクリックし、アイキャッチ画像を選択またはアップロードします。
   もしも表示されていなかった場合は、管理画面右上にある表示オプションを開き、「アイキャッチ画像」というチェックボックスにチェックが入っているか確認してください。
3. 保存
   変更を保存して、投稿を更新します。

これでアイキャッチ画像の設定が終わりました。

phpを使用してアイキャッチ画像を表示する方法

アイキャッチ画像を設定したところでphpを使って任意の位置に表示させてみましょう。

任意のテーマファイル（例：news.php）の記事表示用phpループ内に下記php関数を挿入することで、記事に登録したアイキャッチ画像が表示されるようになります！

<?php if (has_post_thumbnail()) {
    the_post_thumbnail();
} ?>

さて、せっかく表示できたアイキャッチ画像ですが、出力サイズが指定できないと少し不便です。そのため、必要に応じて次の工程に移ります。

アイキャッチ画像のサイズを「メディア設定」に合わせる方法

先ほどのコードだと、アイキャッチ画像を「メディア設定」に従ったサイズに表示します。
WordPressの「設定」→「メディア」で設定することができ、設定されていなければデフォルト値で表示されます。

WordPressの「設定」→「メディア」では「サムネイル」「中サイズ」「大サイズ」の3つのサイズを設定することができ、アイキャッチ画像として登録した画像のフルサイズで使うこともできます。

<?php if (has_post_thumbnail()) {
    the_post_thumbnail('thumbnail'); // 「サムネイル」で指定したサイズ
    the_post_thumbnail('medium'); // 「中サイズ」で指定したサイズ
    the_post_thumbnail('large'); // 「大サイズ」で指定したサイズ
    the_post_thumbnail('full'); // 登録画像のフルサイズ
} ?>

これで、「メディア設定」に合わせたサイズでアイキャッチを表示することができました。

phpを使用してアイキャッチ画像のサイズを細かく変更する方法

案件によっては「メディア設定」でサイズを変更しづらい場合もあるかと思います。そんな場合は、任意のサイズに表示する方法もあります。

下記のコードを活用すると、アイキャッチ画像を任意のサイズで表示することができます。

<?php if (has_post_thumbnail()) {
    // 横300px、縦250pxでアイキャッチ画像を表示
    the_post_thumbnail(array(300, 250));
} ?>

アイキャッチを設定していなかった場合の分岐

ここまでで書いたコードは、「アイキャッチ画像があれば」→「それを表示」というものでしたので、アイキャッチ画像がない場合をカバーできていません。
「アイキャッチ画像がなければ」→「noimage.svgを表示する」という応用コードがこちらです。

<?php if (has_post_thumbnail()) { // アイキャッチ画像があれば
        the_post_thumbnail(array(300, 250)); // 横300px、縦250pxでアイキャッチ画像を表示
    } else { // 「アイキャッチ画像があれば」以外なら
        echo '<img src="' . get_template_directory_uri() . '/img/noimage.svg" alt="">'; // noimage.svgを表示（パスは適宜変更してください）
} ?>

シンプルですが、意外と忘れがちな一工夫ですね。

まとめ

WordPressでは、アイキャッチ画像のデフォルトのサイズオプションとして thumbnail、medium、large が用意されていますが、テーマやプラグインをカスタマイズして独自のサイズオプションを追加することも可能です。
この記事ではWordPressのアイキャッチ画像の表示方法についての基本を理解し、カスタマイズする方法をご紹介しました。
これらのテクニックを取り入れて、より魅力的なウェブ制作を心がけましょう！