本記事では、WordPressでアイキャッチ(サムネイル)画像の有効化・表示する方法について解説しています。
カスタム投稿タイプのアイキャッチ画像を有効化・表示したい方は下記の記事をご参考にしてください。
- サイト運営に必須のことが学べる
- 基本的な使い方～オリジナルテーマ開発まで学べる
ポチップ
先輩くん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’);」をその関数内に入れても問題ありません。
管理画面から投稿ページを開き、アイキャッチ画像が有効化されているか確認してみましょう。
上記画像のようにアイキャッチ画像が選択できるようになっていれば問題なく有効化されています。もし、アイキャッチ画像が選択されていない場合はコードの記述ミスはファイル名が間違えているなどの原因が挙げられます。
アイキャッチ画像の表示
アイキャッチ画像を有効化する設定が完了したら、アイキャッチ画像を表示してみましょう。アイキャッチ画像を表示するには、the_post_thumbnail関数を使用します。基本的な使い方は以下のとおりです。
<?php the_post_thumbnail( $size, $attr ); ?>- $size(省略可)：表示させる画像のサイズを指定します。指定できる画像サイズはWordPressの管理画面「設定」→「メディア」で設定されている（thumbnail, medium, large, full）と、functions.phpファイル内のadd_image_size関数で定義されたカスタムサイズです。初期値はアップロードされた画像サイズを表すpost-thumbnailです。
- $attr(省略可)：アイキャッチ画像を表示するimgタグに含める属性/値を連想配列で指定します。
サムネイル画像は必須項目ではないため、設定していないページが混在してしまう場合があります。そのような時にもデフォルトで何かしらの画像を表示させたい場合は、サムネイル画像が設定されているか判別することが出来る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; ?>
