WordPressでアイキャッチ画像が表示されないのは、大きな問題となることがあります。
これらの画像は、訪問者の注意を引き付け、クリック率を高めるのに役立ちます。表示されないと、イライラし、サイトのパフォーマンスに影響を与える可能性があります。
私たちも時々この問題に直面しており、それがどれほど厄介かを知っています。良いニュースは、対処法を知っていることです。
このガイドでは、WordPressでアイキャッチ画像が表示されない問題を修正するための簡単な手順をいくつかご紹介します。
アイキャッチ画像とは何ですか？なぜWordPressに表示されないのですか？
アイキャッチ画像は、ブログ投稿のリストページや、投稿のヘッダーに表示されることがあります。YouTubeのサムネイルと同様に、アイキャッチ画像の目的は、ページビューを増やし、ユーザーエンゲージメントを高めることです。
さらに、アイキャッチ画像は、最近の投稿、アーカイブ、検索ページで個々の記事を表すためにも使用されます。
それ以上に、アイキャッチ画像のスタイルは、ブログ記事の残りの部分のトーンを設定します。
ほとんどすべてのWordPressテーマでアイキャッチ画像をアップロードでき、サイドバーメニューやメインコンテンツエリアなど、サイトのさまざまな領域に表示する機能が提供されています。
この問題のトラブルシューティングを行っている場合は、WordPress でアイキャッチ画像または投稿サムネイルを追加する方法に関するチュートリアルを確認することをお勧めします。まずアイキャッチ画像をアップロードする方法を知ることが重要です。
カバー画像をアイキャッチ画像の代わりに誤ってアップロードしたり、投稿の最初の画像が自動的に投稿サムネイルとして表示されるテーマを使用している場合があります。
これを踏まえ、発生する可能性のある問題を修正する方法を説明します。現在直面している問題にジャンプするには、以下のリンクを自由に利用してください。
- アイキャッチ画像をアップロードする際のHTTPエラーを修正する
- プラグインまたはテーマを修正する
- 遅延読み込みを無効にする
- 表示用にアイキャッチ画像を許可する
- ブログ投稿ギャラリーページにアイキャッチ画像が表示されない問題を修正する
- Add Custom Code to Fix Featured Image Issues
アイキャッチ画像が表示されないという悩みにさよならしましょう – 一緒にこの問題を解決しましょう！
1. アイキャッチ画像をアップロードする際のHTTPエラーを修正する
ファイルサイズの大きいフィーチャー画像をアップロードしようとすると、「HTTPエラー」というあいまいなメッセージが表示されることがあります。これは、画像ファイルが大きすぎるか、WordPressサイトでより大きなアップロードを許可するためにサイトのメモリ制限を増やす必要があることを意味している場合が多いです。
この問題を解決するには、主に2つの方法があります。しかし、まずWordPressからログアウトしてから再度ログインしてください。多くの場合、これにより通常通り画像をアップロードできるようになります。
そうでない場合は、次の2つの方法のいずれかを試してください。
- 画像ファイルのサイズを縮小します。
- WordPress のメモリ制限を増やす。
まず、より簡単な方法として、画像ファイルのサイズを小さくすることから始めましょう。サイズが問題になる場合は、WebP、JPEG、またはPNG画像フォーマットに切り替えることを検討してください。JPEGは圧縮ファイルフォーマットであり、画像の品質をわずかに低下させることで、ファイルサイズを大幅に小さくします。また、WebPファイルは最初から非常に小さいです。
次に、TinyPNGやJPGminiなどの画像圧縮ツールを使用してファイルサイズを圧縮します。
画像をツールにアップロードするだけで、ファイルの圧縮版をダウンロードできます。
ウェブサイトのパフォーマンスを品質を損なわずに最適化する方法に関するガイドをご覧ください。
画像サイズをすでに圧縮していて、まだHTTPエラーが発生している場合は、WordPressのメモリ制限を増やすことを検討してください。現在の[ウェブホスティングプロバイダー]に連絡してPHP制限の拡張を依頼するか、ホスティングプランをアップグレードすることができます。
ただし、PHPメモリ制限を変更することもできます。これには、wp-config.phpまたは.htaccessファイルを変更する必要があります。どちらの場合も、FTPクライアントまたはファイルマネージャーが必要です。
この方法では、WPCodeのようなプラグインを使用することをお勧めします。このプラグインを使用すると、ウェブサイトを壊すことなくカスタマイズを追加できます。WPCodeは、200万以上のウェブサイトで使用されている市場で最高のコードスニペットプラグインであり、コードスニペットでウェブサイトのカスタマイズを将来にわたって保護するために使用されています。
.htacessファイルを編集したい場合は、WordPressウェブサイトのルートフォルダに移動する必要があります。次に、「#END WORDPRESS」という行の前に、次のコードを貼り付けることができます。
define( 'WP_MEMORY_LIMIT', '256M' );
メモリ制限を増やす方法の詳細については、PHPメモリを増やすためのWordPressメモリ枯渇エラーの修正方法に関するチュートリアルをご覧ください。
2. プラグインまたはテーマを修正する
一部の WordPress テーマやプラグインが、画像の表示を制限している可能性があります。
ほとんどのWordPressテーマはアイキャッチ画像を自動的に表示しますが、一部のテーマでは管理者による手動設定が必要です。その場合は、WordPressテーマの設定を確認するか、テーマのサポートに問い合わせてヘルプを得る必要があるかもしれません。
詳細については、WordPressテーマカスタマイザーをプロのように使いこなすための究極ガイドをご覧ください。
テーマが原因でない場合は、プラグインが主な原因であるかどうかを確認することもできます。
まず、すべてのプラグインを更新することができます。それでも問題が解決しない場合は、すべてのプラグインを一度無効化してから、1つずつ再度有効化してください。
各インストール後、アイキャッチ画像が正しく表示されているか確認できます。アイキャッチ画像が表示されない場合は、どのプラグインが問題を引き起こしているかがわかります。
Health Check & Troubleshootingプラグインを使用することもできます。この無料プラグインは、プラグインとテーマの設定および既知のエラーを検出するために一連のチェックを実行します。
インストールにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。
有効化したら、ツール » サイトヘルスに移動してください。ここから、WordPressのセキュリティとパフォーマンスを向上させるための推奨事項のリストが表示されます。
ここで、インストールされているプラグインやテーマの多くが古く、非アクティブであり、対処が必要であることがわかります。提供されているリンクをクリックするだけで、プラグインを管理または更新できます。
3. 遅延読み込みを無効にする
遅延読み込みは、ページ速度とWordPressのパフォーマンスを向上させる機能で、コンテンツと表示領域を最初にすばやく追加します。
ウェブサイトの表示速度が速くなると、[ウェブサイトのランキングが向上します] 。検索エンジン（Googleなど）は、表示速度を重要なランキング要因と見なしているためです。
基本的に、遅延読み込みは、画像が画面に表示されるまで、ページの画像の読み込みを停止します。たとえば、長いブログ投稿の最後の画像は、ユーザーが実際に下にスクロールしてその画像に到達するまで読み込む必要はありません。
ただし、遅延読み込みプラグインの中には、アイキャッチ画像を通常の写真として扱うものがあるため、遅延読み込みはアイキャッチ画像の問題を引き起こす可能性があります。これにより、アイキャッチ画像の読み込みが遅くなったり、最新の投稿リストに表示されなくなったりする可能性があります。
また、一部の画像最適化プラグインには、アドオンとして遅延読み込み機能が搭載されています。そのため、インストールされている各プラグインを確認して、この機能が有効になっているかどうかを確認する必要があります。
プラグインの遅延読み込み機能をオフにし、キャッシュをクリアして、フィーチャー画像の問題が解決するかどうかを確認してください。
一部のプラグインでは、特定の写真を遅延読み込みから除外できます。その場合、ブログ投稿の最初の画像に対してのみこの機能を無効にすることで、遅延読み込みのメリットを享受しつつ、アイキャッチ画像に影響を与えないようにすることができます。
WPCode を使用してコードスニペットをカスタマイズすることで、コードを簡単に無効にできます。まず、WordPressダッシュボードから Code Snippets » + Add Snippet ページに移動する必要があります。
次に、このPHPコードを「コードプレビュー」ボックスにコピー＆ペーストします。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
ペーストすると、このようになります。
「コードタイプ」として「PHPスニペット」も選択するようにしてください。
最後に、プラグインを有効にしてアクティブにし、「スニペットを保存」ボタンをクリックします。
詳細については、WordPressで遅延読み込みを正しく無効にする方法に関するステップバイステップチュートリアルをご覧ください。
4. アイキャッチ画像のアップロードを許可するようにユーザーロールの権限を変更する
WordPress には、サイト上のすべてのユーザーのアクセスとアクションを管理するための 6 つのデフォルトのユーザーロールがあります。
ウェブサイトの所有者でない場合、アイキャッチ画像をアップロードまたは表示するために必要なユーザーロールを持っていない可能性があります。
やるべきことは、ユーザーの役割と権限が正しく設定されていることを確認することだけです。
この問題を解決する簡単な方法は、User Role Editor のようなプラグインを使用することです。これにより、ロールと権限を 1 か所で変更できます。
WordPressダッシュボードのユーザー » ユーザーロールエディターに移動するだけです。
ここから、「Select Role」の下で変更したいロールを選択し、その権限を変更します。この場合、「Author」を選択します。
次に、「クイックフィルター」オプションを使用して、「upload_files」を探します。
最後に、「更新」ボタンをクリックするだけで、その変更が適用されます。
このプラグインでは、新しいカスタムロールを作成し、選択した権限へのアクセスを付与することもできます。
5. ブログ投稿ギャラリーページにアイキャッチ画像が表示されない問題を修正する
アイキャッチ画像を最も効果的に活用する方法の1つは、ウェブサイトのホームページにブログ記事を表示することです。
しかし、ブログページにアイキャッチ画像が表示されない場合はどうでしょうか？
この問題を解決するには、ホームページまたはフィーチャー画像を表示したい任意のページを編集してください。
次に、「+」アイコンをクリックして、「最新の投稿」ブロックをページ上の投稿に追加します。ここから、最近の投稿へのリンクが表示されます。
ブロックをクリックして、「フィーチャー画像を表示」オプションを有効にするだけです。
次に、ページに合わせて、配置やアイキャッチ画像のサイズなどの他の設定を調整できるようになります。
ここから、アイキャッチ画像がブログ投稿ギャラリーに表示されるはずです。
アイキャッチ画像が表示されると、このようになります。
6. カスタムコードを追加してアイキャッチ画像の問題を修正する
現在のWordPressテーマが特定の機能に対応していないため、投稿のサムネイルがクリックできない場合があります。
RSSフィードにアイキャッチ画像を追加したい場合や、管理画面の投稿リストにアイキャッチ画像を表示したい場合があります。
これらすべてはWPCodeで実行できます。
アクティベートしたら、Code Snippets » + Add Snippetに移動します。事前に作成されたカスタムコードオプションのライブラリが表示されます。
検索バーに「アイキャッチ画像」と入力すると、ウェブサイトにアイキャッチ画像を追加するためのカスタムコードオプションがすべて表示されます。
ここから、目的のオプションを選択するだけです。
例えば、WordPressの管理画面にアイキャッチ画像の列を追加したいとしましょう。オプションにカーソルを合わせ、「スニペットを使用」を選択します。
次に、スニペットを編集できるページに移動します。幸いなことに、コードはすでにプリセットされているため、コードや設定をいじる必要はありません。
ただし、コードを手動で入力する必要がある場合は、以下からコピーして貼り付けることができます。
add_filter( 'manage_posts_columns', function ( $columns ) {
// You can change this to any other position by changing 'title' to the name of the column you want to put it after.
$move_after = 'title';
$move_after_key = array_search( $move_after, array_keys( $columns ), true );
$first_columns = array_slice( $columns, 0, $move_after_key + 1 );
$last_columns = array_slice( $columns, $move_after_key + 1 );
return array_merge(
$first_columns,
array(
'featured_image' => __( 'Featured Image' ),
),
$last_columns
);
} );
add_action( 'manage_posts_custom_column', function ( $column ) {
if ( 'featured_image' === $column ) {
the_post_thumbnail( array( 300, 80 ) );
}
} );
次に、カスタムコードスニペットをオンにするボタンを切り替え、[Update] をクリックします。
これで、先ほど行ったすべての変更が保存されます。
次に、管理画面の Posts » All Posts ページに移動します。
このページでは、投稿のサムネイルが専用の列に表示されていることがわかります。
次に、WordPressでフィーチャー画像を投稿に自動的にリンクする方法に関する投稿や、WordPressのRSSフィードに投稿サムネイルを追加する方法に関するチュートリアルを読むことも検討してください。
WordPressのアイキャッチ画像が正しいサイズで表示されない問題を修正する
WordPressのアイキャッチ画像が適切なサイズで表示されないことがあります。問題が発生するのを避けるために、アイキャッチ画像のベストプラクティスを理解しておくのが最善です。
アイキャッチ画像に適したグラフィックを選択する
長方形のアイキャッチ画像の最適なサイズは1200 x 687ピクセルです。ただし、正方形のアイキャッチ画像を使用するテーマの場合、最適なサイズは600 x 600ピクセルです。
詳細については、WordPressで基本的な画像編集を行う方法（切り抜き、回転、拡大縮小、反転）に関するガイドをお読みください。
WordPress のデフォルト画像サイズを変更する
ブログのサムネイルが大きすぎたり小さすぎたりする場合は、デフォルトの画像サイズを手動で編集できます。
WordPress は、ウェブサイトのさまざまな領域（ブログページ、アーカイブページ、ホームページなど）に追加するために、アイキャッチ画像のコピーを自動的に作成します。
WordPressテーマには独自の画像サイズがありますが、それでもアイキャッチ画像のサイズを調整したい場合があります。
これを行うには、WordPress管理画面から「設定 » メディア」に移動します。次に、「サムネイル」のサイズフィールドで、アイキャッチ画像の新しい寸法を入力します。
詳細な手順については、WordPressの画像サイズに関する初心者向けガイドをご覧ください。
Facebookでアイキャッチ画像が表示されない
アイキャッチ画像はWordPressから取得され、Open Graphを介してソーシャルメディアプラットフォームで人気があります。Open Graphは、Facebookのようなソーシャルメディアサイトがウェブサイトのコンテンツを理解して表示できるようにするテクノロジーです。
Open Graphメタタグは、個々の投稿やページに追加して、共有されたときの表示方法を制御できます。これらのタグには、コンテンツのタイトル、説明、アイキャッチ画像などの情報が含まれます。
すべてのフィーチャー画像がFacebookに表示されるようにする最も簡単な方法は、All in One SEOを使用することです。これは、検索ランキングを向上させるための最高のWordPress SEOプラグインです。
有効化したら、All in One SEO » Social Networksに移動できます。次に、「Facebook」タブの下で、「Open Graph Markupを有効にする」オプションを有効にしてください。
これにより、アイキャッチ画像と短いテキスト抜粋付きのブログ投稿のプレビューが自動的に表示されます。
WordPressテーマにFacebookのOpen Graphメタデータを追加する方法に関するガイドで、詳細をご確認ください。
リマインダー – WPBeginner Pro Services は、お客様のサイトの画像の問題を解決するお手伝いができます！手頃な価格の緊急 WordPress サポートを提供しており、画像の問題やその他のウェブサイトの問題を迅速に解決します。ストレスを解消して、今日サポートをスケジュールしてください！
この記事が、WordPressでアイキャッチ画像が表示されない問題を解決するのに役立ったことを願っています。また、最も一般的なWordPressのエラーとその解決方法のリストや、削除されたページを復旧・復元する方法に関するガイドも確認することをお勧めします。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
ARe
記事をありがとうございます！本当に助かりました！
WPBeginnerサポート
Glad our guide was able to help!
管理者
Dayo Olobayo
アイキャッチ画像がこんなに重要だとは知りませんでした！ただ見た目が良いだけだと思っていました。しかし、SEO やユーザーエンゲージメントに役立つというのは理にかなっています。正しく表示されない場合の修正方法に関するヒントをありがとうございます。