【画像付き】WordPressでアイキャッチ画像の設定項目が表示されない時の対処法
※本ページにはプロモーションが含まれている場合があります。
・WordPressで「アイキャッチ画像」を設定する項目が表示されない!
・アイキャッチ画像を設定できるようにしたい!
・設定はできたけど記事ページでアイキャッチ画像が表示されない!
本記事の内容
- アイキャッチ画像の設定項目が表示されない時の対処法2つ
- アイキャッチ画像の設定はできたけど、記事ページに表示されない時の対処法
- アイキャッチ画像のサイズを変更する方法
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、WordPressでアイキャッチ画像の設定項目が表示されない場合・記事ページにアイキャッチ画像が表示されない場合の対処法が画像付きでわかります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
\ 月間1300万PVのプロが解説 /
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説!
目次
WordPressでアイキャッチ画像の設定項目が表示されない!!!
WordPressで記事にアイキャッチ画像を設定したいけど、、、
使っているWordPressテーマや設定によっては上のようなアイキャッチ画像を設定する項目がないことがあります。
そんな時は以下の2つの順番で対処をする必要があります。
- アイキャッチ画像の設定項目を表示する
- WordPressテーマにアイキャッチ画像を対応させる
アイキャッチ画像の設定が表示されない時の対処法①:アイキャッチの設定項目を表示する
まずは、アイキャッチ画像の設定項目を表示するための設定を行います。
WordPressの新エディタ(Gutenberg)と旧エディタ(クラシックエディタ)で操作方法が異なるので、
それぞれ以下の見出しで解説しています。
新エディタ(Gutenberg)の場合
まずはアイキャッチ画像を設定したい記事の編集画面を開きます。
画面の右の方の項目を見ると、「アイキャッチ画像」の項目がないので、これから追加していきます。
まずは、画面右上にある3つの点のマークをクリックしましょう。
メニューが開かれるので、一番下にある「設定」をクリックします。
上のような画面になるので、「パネル」をクリックします。
ここで「アイキャッチ画像」という項目のチェックが外れていることが、アイキャッチ画像の設定項目が表示されない原因です。
「アイキャッチ画像」をクリックして、ONにします。
これで、アイキャッチ画像を設定できるようにするための設定は完了です。
記事編集画面に戻ると、無事「アイキャッチ画像」の設定項目が表示されています。
あとは、以下の記事の解説に沿ってアイキャッチ画像を設定してください。
SEOや売上に効果的なアイキャッチ画像のポイントもあわせて解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント
旧エディタ(クラシックエディタ)の場合
まずはアイキャッチ画像を設定したい記事の編集画面を開きます。
画面右上の方にある「表示オプション」をクリックします。
すると上のようなメニューが表示されます。
ここで、設定項目の表示・非表示を切り替えることができます。
「アイキャッチ画像」という項目にチェックが入っていないことが、アイキャッチ画像の設定項目が表示されないことの原因です。
「アイキャッチ画像」の項目にチェックを入れれば、無事設定は完了です。
記事の編集画面に戻ると、アイキャッチ画像の設定項目が表示されています。
あとは、以下の記事を参考にアイキャッチ画像を設定してください。
SEOや売上に効果的なアイキャッチ画像のポイントも解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント
アイキャッチ画像の設定が表示されない時の対処法②:WordPressテーマにアイキャッチ画像を対応させる
WordPressテーマによってはアイキャッチ画像に対応していない場合がある
対処法①の途中の画面で、以下のような「アイキャッチ画像」の項目自体がなかった場合は、
まずWordPressテーマがアイキャッチ画像の機能をサポートしていないので、自分で対応させる必要があります。
↓新エディタ(Gutenberg)
↓旧エディタ(クラシックエディタ)
対処法:function.phpにコードを記述する
WordPressテーマにアイキャッチ画像に対応させるには、function.phpの中の適切な箇所に、以下のコードを記述します。
add_theme_support('post-thumbnails');
function.phpを編集する前にはWordPressのバックアップを取っておきましょう。以下の記事を参考に簡単にバックアップをとることができます。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】
それでは具体的な手順を解説します。
まずはWordPressの管理画面から「外観」「テーマエディター」をクリックします。
画面右上付近で、使用しているテーマを選択し「選択」をクリックしてから「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にアイキャッチ画像を対応させて、アイキャッチ画像を設定できるようにはなりましたが、
このままではアイキャッチ画像を設定できても記事ページで出力されないので、ちゃんと表示されるようにする必要があります。
↓アイキャッチを設定できても
↓記事ページで表示されない
対処法:アイキャッチ画像の出力コードを記述しよう
記事ページでアイキャッチ画像が表示されるようにするには、記事ページのphpファイルにコードを記述します。
記事ページのphpファイルを編集する前にも、以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】
投稿は「single.php」・固定ページは「page.php」
- 投稿ページの編集は「single.php」
- 固定ページの編集は「page.php」
というファイルをそれぞれ編集します。
FTPソフトでサーバーに接続するか、レンタルサーバーのファイルマネージャーから以下のフォルダにアクセスしましょう。
すると以下のように、page.php(固定ページ)とsingle.php(投稿ページ)のファイルがあるので、両方にコードを記述していきます。
「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でアイキャッチ画像の設定が表示されない時の対処法を解説しました。
焦らずにに今回の方法で対処すればすぐに使えるようになるはずです。
アイキャッチ画像はSEOや集客・売上にも関わる大切な画像なので、しっかり設定しておきましょう。
SEOや集客に強いアイキャッチ画像のサイズは以下の記事で解説しています。
>> 【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】
WordPressでアイキャッチ画像を設定する方法は以下の記事で解説しています。
>> 【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント
サイト速度を早めてSEOを強化するために知っておきたい画像サイズ(容量)については以下の記事で解説しています。
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】