【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

WordPressの学習におすすめ書籍
1冊ですべて身につくWordPress入門講座
総合評価
( 5 )
メリット
  • サイト運営に必須のことが学べる
  • 基本的な使い方~オリジナルテーマ開発まで学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次