WordPress

【WordPress/PHP】アイキャッチ(サムネイル)画像の有効化・表示する方法

本記事では、WordPressでアイキャッチ(サムネイル)画像の有効化・表示する方法について解説しています。

カスタム投稿タイプのアイキャッチ画像を有効化・表示したい方は下記の記事をご参考にしてください。

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報
著者Mana
発売日2022/3/22
ページ数344ページ
Kindle版
レビュー
(Amazon)
(217件)

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報
著者清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日2022/1/13
ページ数416ページ
Kindle版
レビュー
(Amazon)
(53件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

アイキャッチ画像の有効化

WordPressのテーマを使用してWebサイトを運用したことがある人は、最初からアイキャッチ画像は設定できるものだと認識している人も多いかと思います。しかし、実際はアイキャッチ画像は最初は使えず自分でphpコードを記述し有効化する必要があります。

function enable_thumbnails()
{
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'enable_thumbnails');

上記のコードは、functions.phpに記述されたアイキャッチ画像を有効化するphpコードです。もし、after_setup_themeのフックを使用している関数があれば、「add_theme_support(‘post-thumbnails’);」をその関数内に入れても問題ありません。

after_setup_themeは、functions.phpを読み込んだ直後に実行されるフックです。そのため、add_theme_support(‘post-thumbnails’);を関数内に配置しない場合でも動作します。

管理画面から投稿ページを開き、アイキャッチ画像が有効化されているか確認してみましょう。

アイキャッチ画像

上記画像のようにアイキャッチ画像が選択できるようになっていれば問題なく有効化されています。もし、アイキャッチ画像が選択されていない場合はコードの記述ミスはファイル名が間違えているなどの原因が挙げられます。

アイキャッチ画像の表示

アイキャッチ画像を有効化する設定が完了したら、アイキャッチ画像を表示してみましょう。アイキャッチ画像を表示するには、the_post_thumbnail関数を使用します。基本的な使い方は以下のとおりです。

<?php the_post_thumbnail( $size, $attr ); ?>
引数の詳細
  • $size(省略可):表示させる画像のサイズを指定します。指定できる画像サイズはWordPressの管理画面「設定」→「メディア」で設定されている(thumbnail, medium, large, full)と、functions.phpファイル内のadd_image_size関数で定義されたカスタムサイズです。初期値はアップロードされた画像サイズを表すpost-thumbnailです。
  • $attr(省略可):アイキャッチ画像を表示するimgタグに含める属性/値を連想配列で指定します。

the_post_thumbnail関数はループ内でのみ使用することが出来ます。

サムネイル画像は必須項目ではないため、設定していないページが混在してしまう場合があります。そのような時にもデフォルトで何かしらの画像を表示させたい場合は、サムネイル画像が設定されているか判別することが出来るhas_post_thumbnail関数を条件分岐で使用します。

<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(); ?>
<?php else : ?>
    <img src="<?php echo esc_url(get_theme_file_uri('/assets/images/no-eye-catching.jpg')); ?>" />
<?php endif; ?>

実際にthe_post_thumbnail関数/has_post_thumbnail関数を使用してアイキャッチ画像を表示させるサンプルコードを用意したのでご参考にしてください。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <article class="article">
            <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail(); ?>
            <?php else : ?>
                <img src="<?php echo esc_url(get_theme_file_uri('/assets/images/no-eye-catching.jpg')); ?>" />
            <?php endif; ?>
        </article>
    <?php endwhile; ?>
<?php endif; ?>

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村