【画像付き】WordPressでアイキャッチ画像の設定項目が表示されない時の対処法

ブログ

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・WordPressで「アイキャッチ画像」を設定する項目が表示されない!
・アイキャッチ画像を設定できるようにしたい!
・設定はできたけど記事ページでアイキャッチ画像が表示されない!

本記事の内容

  • アイキャッチ画像の設定項目が表示されない時の対処法2つ
  • アイキャッチ画像の設定はできたけど、記事ページに表示されない時の対処法
  • アイキャッチ画像のサイズを変更する方法
以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪
なべたろの実績

  • ライター100名以上の組織の法人を経営→株式譲渡
  • 立ち上げから半年で月間1,000万PVを達成
  • 1年で月間1200万PVを達成
  • 年商約1億円を達成
  • 法人向けコンサル1社あたり月額60~100万円
  • PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

本記事を読むと、WordPressでアイキャッチ画像の設定項目が表示されない場合・記事ページにアイキャッチ画像が表示されない場合の対処法が画像付きでわかります。

\ 月間1300万PVのプロが解説 /
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説!

WordPressでアイキャッチ画像の設定項目が表示されない!!!

①WordPressでアイキャッチ画像の設定項目が表示されない!!!
WordPressで記事にアイキャッチ画像を設定したいけど、、、
WordPressにアイキャッチ画像の設定項目が表示されない:例
使っているWordPressテーマや設定によっては上のようなアイキャッチ画像を設定する項目がないことがあります。

そんな時は以下の2つの順番で対処をする必要があります。

  1. アイキャッチ画像の設定項目を表示する
  2. WordPressテーマにアイキャッチ画像を対応させる
※1つ目の「アイキャッチ画像の設定項目を表示する」だけで解決できた場合は②の「WordPressテーマにアイキャッチ画像を対応させる」は不要です。
それぞれやり方を順番に解説していくよ♪

アイキャッチ画像の設定が表示されない時の対処法①:アイキャッチの設定項目を表示する

②アイキャッチ画像の設定が表示されない時の対処法①:アイキャッチの設定項目を表示する
まずは、アイキャッチ画像の設定項目を表示するための設定を行います。

WordPressの新エディタ(Gutenberg)と旧エディタ(クラシックエディタ)で操作方法が異なるので、

それぞれ以下の見出しで解説しています。

まずは新エディタから解説!

新エディタ(Gutenberg)の場合

WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-1
まずはアイキャッチ画像を設定したい記事の編集画面を開きます。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-2
画面の右の方の項目を見ると、「アイキャッチ画像」の項目がないので、これから追加していきます。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-3
まずは、画面右上にある3つの点のマークをクリックしましょう。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-4
メニューが開かれるので、一番下にある「設定」をクリックします。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-5
上のような画面になるので、「パネル」をクリックします。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-6
ここで「アイキャッチ画像」という項目のチェックが外れていることが、アイキャッチ画像の設定項目が表示されない原因です。

※そもそもこの画面にも「アイキャッチ画像」の項目がない場合は、WordPressテーマにアイキャッチ画像を対応させる必要があるので、このまま「アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させる」に進んでください。

WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-7
「アイキャッチ画像」をクリックして、ONにします。

これで、アイキャッチ画像を設定できるようにするための設定は完了です。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:新エディタ(Gutenberg)-8
記事編集画面に戻ると、無事「アイキャッチ画像」の設定項目が表示されています。

あとは、以下の記事の解説に沿ってアイキャッチ画像を設定してください。

SEOや売上に効果的なアイキャッチ画像のポイントもあわせて解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント

旧エディタ(クラシックエディタ)の場合

今度は旧エディタ(クラシックエディタ)のやり方を解説♪

WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-1
まずはアイキャッチ画像を設定したい記事の編集画面を開きます。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-2
画面右上の方にある「表示オプション」をクリックします。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-3
すると上のようなメニューが表示されます。

ここで、設定項目の表示・非表示を切り替えることができます。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-4
「アイキャッチ画像」という項目にチェックが入っていないことが、アイキャッチ画像の設定項目が表示されないことの原因です。

※そもそもこの画面にも「アイキャッチ画像」が表示されていない、あるいはチェックを入れてもうまくいかない場合はWordPressテーマにまずアイキャッチ画像に対応させる必要があります。このまま「アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させる」の見出しまで進んでください。

WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-5
「アイキャッチ画像」の項目にチェックを入れれば、無事設定は完了です。
WordPressでアイキャッチ画像の設定が表示されない時の対処法①:旧エディタ(クラシックエディタ)-6
記事の編集画面に戻ると、アイキャッチ画像の設定項目が表示されています。

あとは、以下の記事を参考にアイキャッチ画像を設定してください。
SEOや売上に効果的なアイキャッチ画像のポイントも解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント

アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させる

③アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させる

WordPressテーマによってはアイキャッチ画像に対応していない場合がある

対処法①の途中の画面で、以下のような「アイキャッチ画像」の項目自体がなかった場合は、

まずWordPressテーマがアイキャッチ画像の機能をサポートしていないので、自分で対応させる必要があります。

↓新エディタ(Gutenberg)
WordPressにアイキャッチ画像の設定項目が表示されない時の対処法②-2
↓旧エディタ(クラシックエディタ)
WordPressにアイキャッチ画像の設定項目が表示されない時の対処法②-1

とっても簡単だから安心してね♪

対処法:function.phpにコードを記述する

WordPressテーマにアイキャッチ画像に対応させるには、function.phpの中の適切な箇所に、以下のコードを記述します。

add_theme_support('post-thumbnails');
注意

function.phpを編集する前にはWordPressのバックアップを取っておきましょう。以下の記事を参考に簡単にバックアップをとることができます。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】

それでは具体的な手順を解説します。
WordPressにアイキャッチ画像の設定項目が表示されない時の対処法②-3
まずはWordPressの管理画面から「外観」「テーマエディター」をクリックします。
WordPressにアイキャッチ画像の設定項目が表示されない時の対処法②-4
画面右上付近で、使用しているテーマを選択し「選択」をクリックしてから「function.php」をクリックします。

するとfunction.phpの編集ページが表示されるので、以下のコードを

add_theme_support('post-thumbnails');

以下のようにadd_action('after_setup_theme', 'theme_setup');で定義されているfunctionの中に記述しましょう。

function theme_setup() {
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'theme_setup');

上の例では、add_action('after_setup_theme', '〇〇');の〇〇の箇所がtheme_setupなので

function theme_setup(){
    (中略)
}

の中に記述しています。

記述できたら編集を保存すれば設定は完了です。

記事編集画面を見ると、アイキャッチ画像の設定項目が表示されるはずです。

注意

アイキャッチ画像を設定できても、このままでは記事の画面に表示されないので、次の「アイキャッチ画像の設定はできたけど投稿画面に表示されない時は」の見出しを参考に出力コードを記述する必要があります。

アイキャッチ画像の設定はできたけど投稿画面に表示されない時は

④アイキャッチ画像の設定はできたけど投稿画面に表示されない時は
WordPressにアイキャッチ画像を対応させて、アイキャッチ画像を設定できるようにはなりましたが、

このままではアイキャッチ画像を設定できても記事ページで出力されないので、ちゃんと表示されるようにする必要があります。

↓アイキャッチを設定できても
WordPressのアイキャッチ画像が表示されない-1
↓記事ページで表示されない
WordPressのアイキャッチ画像が表示されない-2

対処法:アイキャッチ画像の出力コードを記述しよう

記事ページでアイキャッチ画像が表示されるようにするには、記事ページのphpファイルにコードを記述します。

注意

記事ページのphpファイルを編集する前にも、以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】

投稿は「single.php」・固定ページは「page.php」

  • 投稿ページの編集は「single.php」
  • 固定ページの編集は「page.php」

というファイルをそれぞれ編集します。

FTPソフトでサーバーに接続するか、レンタルサーバーのファイルマネージャーから以下のフォルダにアクセスしましょう。

「public_html」 > [ドメイン名] > 「wp-content」 > 「themes」 > [テーマ名]

すると以下のように、page.php(固定ページ)とsingle.php(投稿ページ)のファイルがあるので、両方にコードを記述していきます。
WordPressの投稿・固定ページでアイキャッチ画像が表示されない時の対処法

「the_post_thumbnail」を記述する

  • page.php(固定ページ)
  • single.php(投稿ページ)

の両方に、アイキャッチ画像を表示させたい場所に以下のコードを記述しましょう。

<?php
if(has_post_thumbnail()):
    the_post_thumbnail();
endif; ?>

<h1>タグが記事ページのタイトルなので、<h1>タグを探すと場所が分かりやすいと思います。

これで無事アイキャッチ画像が出力されるはずです。

アイキャッチ画像のサイズを変更したい!

⑤アイキャッチ画像のサイズを変更したい!
記事ページで表示されるアイキャッチ画像のサイズを変更したい!

という場合は

set_post_thumbnail_size()

というコードをfunction.phpに記述します。

アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させるで記述したコードの下に、以下の赤文字のコードを記述しましょう。

function theme_setup() {
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(1200,630)
}
add_action('after_setup_theme', 'theme_setup');

1200という数字は画像の横幅、630という数字は画像の高さをピクセルで指定しているので、ここを変更すればサイズを変更できます。

SEOや集客に強いアイキャッチ画像のおすすめサイズは以下の記事で解説しています。
>> 【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】

WordPressでアイキャッチ画像の設定が表示されなくてもすぐ解決!

⑥WordPressでアイキャッチ画像の設定が表示されなくてもすぐ解決!
WordPressでアイキャッチ画像の設定が表示されない時の対処法を解説しました。

焦らずにに今回の方法で対処すればすぐに使えるようになるはずです。

アイキャッチ画像はSEOや集客・売上にも関わる大切な画像なので、しっかり設定しておきましょう。

SEOや集客に強いアイキャッチ画像のサイズは以下の記事で解説しています。

>> 【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】

WordPressでアイキャッチ画像を設定する方法は以下の記事で解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント

サイト速度を早めてSEOを強化するために知っておきたい画像サイズ(容量)については以下の記事で解説しています。

>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】


\【無料ブログ講座】LINE限定でノウハウを配信/

ブログの無料講座:公式LINE

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声


400名が以上参加中!無料で読めます♪

\ 最短で収益化 /公式LINEで無料で学ぶ

\年商1億超えのプロが解説!ブログの収益化方法/
無料で受け取る
\ 年商1億超えのプロが解説!ブログの収益化方法 /
無料で受け取る