SHU BLOG

News

BLOG NEWS

TITLE

【WordPress】デフォルトのアイキャッチ画像を設定する方法

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
公開日: 2020.01.19 / 更新日: 2026.10.19
今回は【WordPress】デフォルトのアイキャッチ画像を設定する方法についての解説になります!

こんな方に読んでほしい

  • アイキャッチ画像の設定を忘れてしまう方
    投稿のたびに設定する手間を減らしたい方です。
  • 「NO IMAGE」の表示が気になっている方
    一覧ページで画像がない記事の見た目を整えたい方です。
  • functions.phpの基本的な使い方を学びたい方
    コピペで使えるコードを用意して、解説しています。

アイキャッチ画像を設定する理由とは

アイキャッチ画像は、記事一覧やSNSでシェアされたときに最初に目に入る画像です。タイトルだけでは伝わりにくい記事の内容を、ひと目で伝える役割があります。

では、アイキャッチ画像がない場合と、ある場合では、どれくらい印象が変わるのでしょうか。
下記の画像をご覧ください。

「NO IMAGE」が表示されている例とアイキャッチ画像が設定されている例の比較

上の画像では、次の2つのパターンを比較しています。

  • 1番:アイキャッチ画像が未設定
    「NO IMAGE」の画像が表示されている状態です。
  • 2番:アイキャッチ画像が設定済み
    記事の内容に合った画像が表示されている状態です。

どちらの記事を読みたくなるかは、ひと目で分かるのではないでしょうか。

デフォルト画像を1つ用意すれば解決します

そこで今回は、デフォルトのアイキャッチ画像を1つ作成しておく方法を紹介します。この方法なら、次のようなメリットがあります。

  • アイキャッチ画像の設定を忘れても「NO IMAGE」にならない
  • 記事ごとに画像を変えたいときは、あとから自由に変更できる

それでは、設定方法を見ていきましょう。

WordPressでアイキャッチ画像を設定する方法

まずは、投稿画面にアイキャッチ画像の項目を表示させる手順です。すでに項目が表示されている方は、デフォルト画像の設定に進んでください。

アイキャッチ画像の項目を表示させる手順

1管理画面にログインします。

WordPressの管理画面

2投稿 >> 新規追加を選択します。

投稿の新規追加を選択する画面

3新規追加画面に、アイキャッチ画像の項目があるか確認します。ない場合は、次の手順に進みます。

アイキャッチ画像の項目がない新規追加画面

4表示オプション >> アイキャッチ画像にチェックを入れます。

※表示オプションにアイキャッチ画像のチェックボックスがない場合は、次の手順に進みます。

表示オプションでアイキャッチ画像にチェックを入れる画面

なお、ブロックエディタ(Gutenberg)の場合は、右サイドバーの「投稿」タブ内にアイキャッチ画像の項目が表示されます。

functions.phpにアイキャッチ画像の機能を追加する

5テーマのfunctions.phpに、次の1行があるか確認してください。ない場合は、この1行を追加します。

// アイキャッチ画像を有効にする
add_theme_support('post-thumbnails');
●①add_theme_support
add_theme_support()は、テーマに機能を追加するWordPressの関数です。
●②post-thumbnails
'post-thumbnails'を指定すると、投稿画面にアイキャッチ画像の項目が表示されます。
アイキャッチ画像の項目が表示された投稿画面

アイキャッチ画像の項目が表示されました。次に、デフォルトのアイキャッチ画像を準備します。

デフォルトのアイキャッチ画像を設定する方法

1今回は「default.png」という名前で、画像を用意しました。

メディアの新規追加画面

2メディア >> 新規追加を選択し、ドラッグ&ドロップで画像をアップロードします。アップロード完了後、右下の「編集」をクリックしてください。

メディア編集画面のアドレスバー
アドレスバーを拡大しております

3アドレスバーの「post=2404」を確認してください。この「2404」が画像のIDです。数値をコピーしておきます。

functions.phpにデフォルト画像のコードを追加する

テーマのfunctions.phpに、次のコードを追加します。投稿を保存したときに、アイキャッチ画像が未設定なら、デフォルト画像を自動で設定するコードです。

// デフォルトのアイキャッチ画像を設定する
add_action( 'save_post', 'save_default_thumbnail' );
function save_default_thumbnail( $post_id ) {
  // リビジョン(自動保存された履歴)は処理しない
  if ( wp_is_post_revision( $post_id ) ) {
    return;
  }
  // アイキャッチ画像が未設定の場合のみ、デフォルト画像を設定する
  if ( ! has_post_thumbnail( $post_id ) ) {
    set_post_thumbnail( $post_id, 2404 );
  }
}
●①save_postフック
add_action( 'save_post', ... )で、投稿が保存されるタイミングに関数を実行します。
●②リビジョンの除外
wp_is_post_revision()で、リビジョン(履歴)の場合は処理を終了します。
●③未設定かどうかの判定
has_post_thumbnail()は、アイキャッチ画像が設定済みかを調べる関数です。!を付けて「未設定の場合」にしています。
●④デフォルト画像の設定
set_post_thumbnail( $post_id, 2404 )で、画像ID「2404」をアイキャッチ画像に設定します。
注目ポイント
画像IDの数値「2404」に注目!

set_post_thumbnail()の2つ目の値「2404」を、ご自身が用意したデフォルト画像のIDに書き換えてください。

デフォルト画像のIDを確認する画面

動作を確認する

1投稿 >> 新規追加を選択し、アイキャッチ画像にデフォルト画像が反映されていれば成功です。

追加したデフォルト画像は、あとから別の画像に差し替えられます。記事ごとに画像を変えたい場合は、通常どおりアイキャッチ画像を設定してください。

注意点
  • 過去に公開した記事には反映されません。手動で設定してください。
  • 固定ページなど、投稿以外にも保存時に設定されます。投稿だけに絞りたい場合は、投稿タイプを判定する条件を追加します。
  • functions.phpの編集前には、バックアップを取っておくと安心です。

まとめ

今回は、デフォルトのアイキャッチ画像を設定する方法を紹介しました。画像を1つ用意してfunctions.phpにコードを追加するだけで、設定忘れによる「NO IMAGE」の表示を防げます。

アイキャッチ画像は、作成するのが大変で後回しにしてしまいがちです。ですが、あるかないかで、ホームページの見え方は大きく変わります。この機会に、ぜひ設定してみてください。

POINT
  • アイキャッチ画像がないと「NO IMAGE」が表示され、手抜きの印象を与えてしまいます。
  • アイキャッチ画像の項目が表示されない場合は、add_theme_support('post-thumbnails');を追加します。
  • デフォルト画像は、メディアにアップロードしてから画像IDを確認します。
  • set_post_thumbnail()の画像IDは、必ずご自身の画像のIDに書き換えます。
  • 設定済みの投稿は上書きされず、未設定の投稿だけにデフォルト画像が入ります。
  • 過去の記事には反映されないため、手動で設定します。

テンプレートを見る

Web・デザインの本棚

Web・デザインの本棚を見る

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

オススメ記事

カテゴリー

月別アーカイブ

Others Posts記事

NEW
本の紹介