ページ内には広告が含まれます広告ポリシー
WordPressの自作テーマで、投稿画面にアイキャッチ画像を有効化し、記事ページや一覧ページに表示する方法を解説します。functions.phpに追加するコード、テンプレートファイルで使うタグ、キャプションやalt属性の設定場所まで、最小構成でわかりやすくまとめました。
アイキャッチ画像をテーマで有効化する
WordPressのアイキャッチ画像は、記事ごとに設定できる代表画像です。記事一覧のサムネイル、記事ページのメイン画像、SNSで共有されたときの画像など、サイト内外の見た目に関わる重要な画像です。
最近のWordPressテーマでは最初から対応していることも多いですが、自作テーマやシンプルなテーマでは、投稿画面にアイキャッチ画像の設定欄が表示されていない場合があります。まずは投稿編集画面を開き、右側の設定パネルにアイキャッチ画像の項目があるかを確認してください。
アイキャッチ画像の設定欄が表示されていない場合は、functions.phpに以下のコードを追加します。
// 1. アイキャッチ画像を有効化
function codepia_theme_setup() {
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'codepia_theme_setup');
// 2-1. 投稿一覧にアイキャッチ画像の列を追加
function codepia_add_featured_image_column($columns) {
$columns['featured_image'] = 'アイキャッチ';
return $columns;
}
add_filter('manage_posts_columns', 'codepia_add_featured_image_column');
// 2-2. 投稿一覧のアイキャッチ画像列にサムネイルを表示
function codepia_show_featured_image_column($column_name, $post_id) {
if ('featured_image' === $column_name) {
echo get_the_post_thumbnail($post_id, 'thumbnail');
}
}
add_action('manage_posts_custom_column', 'codepia_show_featured_image_column', 10, 2);
前半のadd_theme_support('post-thumbnails');が、テーマでアイキャッチ画像を使えるようにするためのコードです。後半(2-1, 2-2)のコードはオプションで、WordPress管理画面の投稿一覧にアイキャッチ画像の列を追加するためのものです。
投稿一覧にもサムネイルが表示されると、どの記事にアイキャッチ画像を設定済みか確認しやすくなります。
アイキャッチ画像を記事ページに表示する
投稿画面でアイキャッチ画像を設定しただけでは、テーマ側に表示用のコードがない場合、サイト上には表示されません。記事ページに表示したい場合は、single.phpなどのテンプレートファイルにアイキャッチ画像を呼び出すコードを追加します。
たとえば、記事タイトルの下にアイキャッチ画像とキャプションを表示するなら、以下のように書きます。
<?php if (has_post_thumbnail()) : ?>
```
<figure class="post-thumbnail">
<?php the_post_thumbnail('large'); ?>
<?php if (get_the_post_thumbnail_caption()) : ?>
<figcaption><?php the_post_thumbnail_caption(); ?></figcaption>
<?php endif; ?>
</figure>
```
<?php endif; ?>
has_post_thumbnail()は、記事にアイキャッチ画像が設定されているか確認するための条件分岐です。アイキャッチ画像がある場合だけthe_post_thumbnail()で画像を出力し、キャプションがある場合だけthe_post_thumbnail_caption()でキャプションを表示します。
the_post_thumbnail('large')のlargeは、表示する画像サイズの指定です。テーマや表示場所に応じて、thumbnail、medium、large、fullなどに変更できます。
一覧ページにアイキャッチ画像を表示する
トップページやカテゴリーページなどの記事一覧にサムネイルを表示したい場合は、index.php、archive.php、category.phpなどのループ内に以下のコードを追加します。
<?php if (has_post_thumbnail()) : ?>
```
<a href="<?php the_permalink(); ?>" class="post-card-thumb">
<?php the_post_thumbnail('medium'); ?>
</a>
```
<?php endif; ?>
記事一覧では、キャプションまで表示すると情報量が多くなりやすいため、基本的には画像だけを表示する形で十分です。画像全体を記事リンクにしたい場合は、上のようにaタグで囲っておくと使いやすくなります。
キャプションとalt属性を設定する
アイキャッチ画像のキャプションは、メディアライブラリの画像詳細画面にある「キャプション」欄から設定できます。ここに入力した内容が、the_post_thumbnail_caption()で呼び出されます。
ただし、キャプションとalt属性は別物です。キャプションは読者に見える説明文で、alt属性は画像が表示されないときや、スクリーンリーダー、検索エンジンなどに画像の内容を伝えるための代替テキストです。画像の意味を伝えるために、代替テキストもあわせて設定しておくのがおすすめです。
アイキャッチ画像に文字が入っている場合でも、画像内の文字だけに頼るのは避けたほうが安全です。画像の内容がわかるように、代替テキストやキャプションで補足しておくと、読者にも検索エンジンにも伝わりやすくなります。
CSSで表示を整える
アイキャッチ画像を表示できたら、必要に応じてCSSで見た目を整えます。画像を本文幅に合わせて表示し、キャプションを中央寄せにするなら、以下のようなCSSを追加します。
.post-thumbnail{
margin: 1.5em auto;
}
.post-thumbnail img{
display: block;
width: 100%;
height: auto;
}
.post-thumbnail figcaption{
margin-top: .5em;
color: #666;
font-size: .9em;
text-align: center;
}
width: 100%;とheight: auto;を指定しておくと、画像の縦横比を保ったまま、表示エリアに合わせて自然に縮小されます。
アイキャッチ画像が表示されないときは
アイキャッチ画像が表示されない場合は、まずfunctions.phpでadd_theme_support('post-thumbnails');が有効になっているか確認します。次に、投稿画面で実際にアイキャッチ画像が設定されているか、テンプレートファイルにthe_post_thumbnail()が書かれているかを確認してください。
コードが正しくても表示されない場合は、CSSで画像が非表示になっていないか、画像サイズが極端に小さくなっていないかも確認します。特に自作テーマでは、PHP側の出力とCSS側の表示調整をセットで確認することが大切です。
まとめ
WordPressでアイキャッチ画像を使うには、まずfunctions.phpでテーマ側のサポートを有効化し、投稿画面から画像を設定します。そのうえで、single.phpやindex.phpなどのテンプレートファイルにthe_post_thumbnail()を追加すれば、記事ページや一覧ページにアイキャッチ画像を表示できます。
あわせて、キャプションやalt属性も設定しておくと、画像の内容が読者に伝わりやすくなります。自作テーマでは、アイキャッチ画像を表示するコードとCSSを整えておくだけで、記事全体の見た目やわかりやすさを大きく改善できます。
