【WordPress】アイキャッチ画像を投稿ページや固定ページに表示させる方法

2018年01月29日2023年10月15日

カスタマイズ

アイキャッチ画像は、バージョン3.0から実装された機能のため、使用するテーマによってはアイキャッチ画像の実装がされていなかったり、テーマによってはそもそも表示しないといった仕様といったことがあります。

そこで、記事やページでアイキャッチ画像を表示する方法を解説します。

アイキャッチ画像を表示する上で必要な作業

アイキャッチ画像を表示するために3箇所修正するファイルが出てきます。

（固定ページでアイキャッチ画像の表示が不要であれば修正箇所は２か所となります。）

functions.php：アイキャッチを使用するためにコード追記が必要
single.php（投稿ページ）：アイキャッチを表示させるためにコード追記が必要
page.php（固定ページ）：アイキャッチを表示させるためにコード追記が必要

それでは早速修正していきましょう。

functions.phpファイルにコードを追記する

アイキャッチ画像を使用するには、使用中のテーマのfunctions.phpにアイキャッチ機能を有効にするためのコードを追記する必要があります。

1「テーマの編集」を開く

WordPressにログイン後、左メニューから「外観」→「テーマの編集」をクリックします。

2「functions.php」を開く

右にあるファイル一覧から「functions.php」ファイルをクリックします。

3PHPコードを追記する

アイキャッチ画像を有効にするためにfunctions.phpファイルの最下部に下記コードを追記します。

最下部が「?>」となっている場合は、「?>」の前の行に追記してください。無ければ最下部に追記します。

/**
 * アイキャッチ画像に対応する
 */
function my_after_setup_theme(){
	// アイキャッチ画像を有効にする
	add_theme_support( 'post-thumbnails' ); 
	// アイキャッチ画像サイズを指定する（横：640px 縦：384）
	// 画像サイズをオーバーした場合は切り抜き
	set_post_thumbnail_size( 640, 384, true ); 
}
add_action( 'after_setup_theme', 'my_after_setup_theme' );

set_post_thumbnail_size（横幅,縦幅,切り抜きの有無）はアイキャッチ画像の最大サイズを指定する関数です。最大サイズを超える場合は、切り抜きの有無が「true」の場合画像を切り抜きます。切り抜きをしたくない場合は、falseに変更するこどで切り抜かずに表示することができます。

4ファイルを更新する

PHPコードの追記ができたら「ファイルを更新する」ボタンをクリックして保存をします。

保存後、「ファイルの編集に成功しました。」とメッセージが表示されたら追記完了です。

single.php（投稿ページ）にアイキャッチ表示のコードを追記する

つぎに、投稿ページでアイキャッチ画像を表示させるための対応をおこないます。

1「single.php」を開く

テーマの編集画面の右側にあるファイル一覧から「single.php」ファイルをクリックして開います。

2PHPコードを追記する

アイキャッチ画像を表示したい箇所に下記PHPコードを追記します。

■テーマによって別ファイルを読み込んでいる場合がある

テーマによって「single.php」ファイル内で別ファイルを読み込んでいる場合があります。その場合は読み込んでいるファイルを確認してください。
テーマ「Twenty Ten」の場合は「loop-single.php」に追記する必要があります。

■追記する場所の探し方

the_content()と書かれている部分が、本文が表示されるところになります。追記する場所がわからない場合は、「the_content()」で検索してその前の行に追加してみてください。

<div class="post_thumbnail">
    <?php the_post_thumbnail(); ?>
</div>

アイキャッチを指定しないページで代替画像を表示したい場合は、下記コードを追記してください。

アイキャッチが画像が設定されていない場合は、代替画像が表示されるようになります。

<div class="post_thumbnail">
<?php 
// アイキャッチ画像が設定されているかチェック
if(has_post_thumbnail()){
    // アイキャッチ画像を表示する
    the_post_thumbnail();
}else{
    // 代替画像を表示する
    echo '<img src="【画像のURLを記入する】" width="640" height="384" alt="No Image" />';
}
?>
</div>