本記事では、WordPressでアイキャッチ(サムネイル)画像の有効化・表示する方法について解説しています。
カスタム投稿タイプのアイキャッチ画像を有効化・表示したい方は下記の記事をご参考にしてください。
WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2022/3/22 |
| ページ数 | 344ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (217件) |
【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門
| 著者 | 清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美 |
|---|---|
| 発売日 | 2022/1/13 |
| ページ数 | 416ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (53件) |
Contents
アイキャッチ画像の有効化
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; ?>
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
