WordPressでアイキャッチ画像が表示されないのを修正する方法

WordPressでアイキャッチ画像が表示されないのを直す方法をお探しですか？

アイキャッチ画像は、あなたのブログ投稿やページで何が行われるかを訪問者に垣間見せるものです。そのため、それらがサイトに表示されないと、イライラさせられ、すぐにクリックスルー率に響いてしまいます。

そこでこの投稿では、WordPressで表示されないアイキャッチ画像を修正し、コンテンツがより多くのクリックとエンゲージメントを得られるようにする方法を紹介する。

WordPressでアイキャッチ画像が表示されないのはなぜ？

アイキャッチ画像はブログ記事の一覧ページや、時には投稿のヘッダーに表示されます。YouTubeのサムネイルと同様、アイキャッチ画像の目的はページビューと ユーザーエンゲージメントを 高めることです。

さらに、アイキャッチ画像は最近の投稿やアーカイブ、検索ページで個々の記事を表現するためにも使用される。

それ以上に、アイキャッチ画像のスタイルは、ブログ投稿の残りの部分のトーンを設定します。

ほとんどすべてのWordPressテーマでは、アイキャッチ画像をアップロードし、サイドバーメニューやメインコンテンツエリアなど、サイトのさまざまなエリアに表示することができます。

この問題のトラブルシューティングを行う場合は、WordPressでおすすめ画像や投稿サムネイルを追加する方法のチュートリアルをご覧ください。まずはアイキャッチ画像のアップロード方法を知っておくことが重要です。

また、投稿の最初の画像が自動的に投稿サムネイルとして表示されるテーマを使用している場合もあります。

このことを念頭に置いて、出てくる可能性のある問題を解決する方法に飛び込んでみましょう。あなたが今直面している問題にジャンプするには、私たちのリンクを自由に使ってください。

1.アイキャッチ画像アップロード時のHTTPエラーを修正する

ファイルサイズの大きいアイキャッチ画像をアップロードしようとすると、「HTTPエラー」という曖昧なメッセージが表示されることがあります。多くの場合、これは画像ファイルが大きすぎるか、WordPressサイトに大きなサイズのアップロードを可能にするためにサイトのメモリ制限を増やす必要があることを意味します。

この問題を解決するには、主に2つの方法があります。まず、WordPressからログアウトしてからログインし直してください。多くの場合、これで再び通常通りに画像をアップロードできるようになります。

そうでない場合は、次の2つの方法のいずれかを試してください：

1. 画像のファイルサイズを小さくする。
2. WordPressのメモリ制限を増やす。

まず、簡単な方法として、画像のファイルサイズを小さくすることから始めましょう。サイズが問題であれば、画像フォーマットをWebP、JPEG、PNGに切り替えるとよいでしょう。JPEGは、画質をわずかに落としてファイルサイズを大幅に小さくする圧縮ファイル形式ですし、WebPファイルはもともと非常に小さいファイルです。

次に、TinyPNGやJPGminiなどの画像圧縮ツールを使ってファイルサイズを圧縮する。

ツールに画像をアップロードするだけで、圧縮されたファイルをダウンロードできる。

詳しくは、品質を落とさずにウェブパフォーマンスのために画像を最適化する方法をご覧ください。

すでに画像サイズを圧縮しているにもかかわらずHTTPエラーが発生する場合は、WordPressのメモリ制限を増やすことをお勧めします。現在利用しているホスティングサービスプロバイダーに連絡して、PHPの上限を拡大するか、ホスティングプランをアップグレードするようリクエストするだけです。

ただし、PHPのメモリ制限を変更することも可能で、その場合はwp-config.phpまたは.htaccessファイルを変更する必要があります。どちらの場合も、FTPクライアントまたはファイルマネージャが必要です。

この方法では、サイトを壊すことなくカスタマイザーを追加できるWPCodeのようなプラグインを使用することをお勧めします。WPCodeは、市場で最高のコードスニペットプラグインであり、コードスニペットによるウェブサイトのカスタマイゼーションの将来性を確保するために2,000,000,000以上のサイトが使用しています。

.htacessファイルを編集したい場合は、WordPressサイトのルート・フォルダーに移動する必要がある。そして、「#END WORDPRESS」という行の前に、以下のコードを貼り付ける：

define( 'WP_MEMORY_LIMIT', '256M' );

メモリの上限を増やす方法の詳細については、WordPressのメモリを使い果たしたエラーを修正する方法のチュートリアルで、PHPのメモリを増やす方法をご確認ください。

2.プラグインやテーマを修正する

WordPressのテーマやプラグインによっては、画像の表示が制限されている可能性があります。

ほとんどのWordPressテーマは自動的にアイキャッチ画像を表示しますが、管理者による手動設定が必須のものもあります。その場合は、WordPressテーマの設定を確認するか、テーマのサポートにお問い合わせください。

詳しくは、WordPressテーマカスタマイザーの究極の使い方をご覧ください。

テーマが問題を引き起こしていない場合は、プラグインが主な原因かどうかを確認することもできます。

プラグインをすべて更新することから始めましょう。

それでも問題が解決しない場合は、プラグインをすべて無効化してから、ひとつずつ有効化してください。

各インストール後、アイキャッチ画像が表示されているかどうかを確認することができます。アイキャッチ画像が表示されない場合は、どのプラグインが問題を引き起こしているかがわかります。

Health Check & Troubleshootingプラグインを使用することもできます。この無料プラグインは、プラグインやテーマの設定や既知のエラーを検出するための一連のチェックを実行します。

インストールでお困りの場合は、WordPressプラグインのインストール方法をご覧ください。

有効化したら、ツール ” サイトヘルスにアクセスしてください。ここから、WordPressのセキュリティとパフォーマンスを向上させるための推奨事項のリストが表示されます。

ここには、対処が必要な、古く非アクティブなプラグインやテーマが多数インストールされていることがわかります。プラグインを管理または更新するには、指定されたリンクをクリックしてください。

3.レイジーローディングの無効化

レイジーローディングは、コンテンツと表示エリアを最初に素早く追加することで、ページ速度とWordPressのパフォーマンスを向上させる機能です。

Googleのような検索エンジンは、速度を重要なランキング要素とみなしているため、より高速なサイトはウェブサイトのランキングを向上させます。

基本的に、レイジーローディングはページ上の画像が画面に表示されるまで読み込みを停止します。例えば、長いブログ投稿の最後の画像は、ユーザーが実際にスクロールダウンしてその画像に到達するまで読み込む必要はありません。

というのも、一部の遅延読み込みプラグインは、アイキャッチ画像を通常の写真として扱う可能性があるからです。これにより、アイキャッチ画像の読み込みが遅くなったり、最近の投稿リストに表示されないようにブロックされる可能性があります。

また、一部の画像最適化プラグインは、アドオンとして遅延読み込み機能を備えています。したがって、この機能が有効化されているかどうか、インストールされている各プラグインをチェックしたい。

プラグインのレイジーローディング機能をオフにし、キャッシュをクリアして、機能画像の問題を解決するかどうかを確認するとよいでしょう。

プラグインによっては、特定の写真を遅延読み込みから除外できるものもあります。その場合は、ブログ投稿の最初の画像のみこの機能を無効化することで、アイキャッチ画像に影響を与えることなく遅延読み込みの恩恵を受けることができます。

WPCodeでコードスニペットをカスタマイズすることで、簡単にコードを無効化することができます。まず、WordPressのダッシュボードからコードスニペット ” + スニペットを追加” のページにアクセスします。

あとは、このPHPコードをコピー＆ペーストして「コード・プレビュー」ボックスに貼り付けるだけだ：

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

このように貼り付ける。

コードタイプとして’PHP Snippet’を選択してください。

最後に、プラグインを有効化するようにオンにして、「Save Snippet」ボタンを押す。

詳しくは、WordPressで遅延ロードを適切に無効化する方法についてのステップバイステップのチュートリアルをご覧ください。

4. ユーザー権限グループを変更し、アイキャッチ画像のアップロードを許可する。

WordPressは、サイト上のすべてのユーザーのアクセスとアクションを管理するための6つの初期権限グループを提供しています。

もしあなたがサイトのオーナーでない場合、アイキャッチ画像のアップロードや表示に必要なユーザー権限グループを持っていない可能性があります。

あなたがしなければならないことは、ユーザー権限グループが適切に設定されていることを確認することだけです。

この問題を解決する簡単な方法は、User Role Editorのようなプラグインを使用することで、権限グループと能力を一箇所で変更することができます。

WordPressダッシュボードのUsers ” User Role Editorに アクセスしてください。

ここから、「Select Role」で変更したい権限グループを選択し、その能力を変更します。今回は投稿者を選択します。

次に、「クイックフィルター」オプションを使って、「upload_files」を探す。

最後に、「更新」ボタンをクリックして変更を加える。

このプラグインでは、カスタマイザーを新規作成し、選択した権限にアクセスできるようにすることもできます。

5.ブログ投稿ギャラリーページでおすすめ投稿画像が表示されない場合の修正

アイキャッチ画像を使う最も良い方法のひとつは、ブログ投稿をサイトのトップページで紹介することです。

しかし、もしアイキャッチ画像がブログページに表示されなかったら？

この問題を解決するには、トップページやアイキャッチ画像を表示させたいページを編集してください。

のアイコンをクリックし、ページの投稿に「最新の投稿」ブロックを追加します。ここから最近の投稿へのリンクが表示されます。

ブロックをクリックし、「アイキャッチ画像を表示」オプションを有効化する。

その他の設定、例えば配置やアイキャッチ画像のサイズなどは、あなたのページに合わせて調整することができます。

ここから、おすすめ投稿画像がブログ投稿ギャラリーに表示されるはずです。

アイキャッチ画像が表示されるとこんな感じになります。

6. カスタムコードを追加してアイキャッチ画像の問題を解決する

投稿サムネイルがクリックできないのは、現在のWordPressテーマがその特定の機能をサポートしていない可能性があります。

RSSフィードにアイキャッチ画像を追加したり、管理エリアの投稿リストにアイキャッチ画像を表示したい場合もあるでしょう。

これらはすべてWPCodeでできる。

有効化したら、 Code Snippets ” + Add Snippetにアクセスしてください。あらかじめ用意されたカスタムコードオプションのライブラリが表示されます。

検索バーに「featured image」と入力すると、サイトにアイキャッチ画像を追加するためのカスタムコード設定がすべて表示されます。

ここから希望のオプションを選択する。

例えば、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 ) );
	}
} );

そして、ボタンを切り替えてカスタムコードスニペットをオンにし、「更新」を押すだけです。

その後、管理画面の投稿 ” すべての投稿ページに移動します。

投稿サムネイルが外観表示されるはずです。

また、WordPressでおすすめ投稿にアイキャッチ画像を自動的にリンクさせる方法や、WordPressのRSSフィードに投稿サムネイルを追加する方法のチュートリアルもあわせてご覧ください。

WordPressのアイキャッチ画像が適切なサイズで表示されない場合の対処法

WordPressのアイキャッチ画像が適切なサイズで表示されないことがあります。アイキャッチ画像のベストプラクティスを理解して、問題を未然に防ぎましょう。

アイキャッチ画像に適したグラフィックを選ぶ

長方形のアイキャッチ画像に最適なサイズは1200×687ピクセルです。ただし、Square（正方形）のアイキャッチ画像を使用するテーマの場合、最適なサイズは600 x 600ピクセルです。

詳しくは、WordPressで基本的な画像編集を行う方法をご覧ください。

WordPressで初期設定の画像サイズを変更する

ブログのサムネイルが小さすぎたり大きすぎたりする場合は、初期設定の画像サイズを手動で編集することができます。

WordPressは自動的にアイキャッチ画像のコピーを作成し、ブログページ、アーカイブページ、ホームページなど、サイトのさまざまなエリアに追加します。

WordPressテーマには独自の画像サイズが用意されていますが、時にはアイキャッチ画像のサイズをいじりたくなることもあるでしょう。

WordPressの管理エリアから設定 ” メディアに移動します。そして、サムネイルサイズの欄にアイキャッチ画像の新規サイズを入力してください。

詳しくは、WordPressの画像サイズに関する初心者ガイドをご覧ください。

アイキャッチ画像がFacebookに表示されない

アイキャッチ画像はWordPressから取得され、Open Graphを使用してソーシャルメディアプラットフォームで人気があります。

これは、Facebookのようなソーシャルメディアサイトがウェブサイトのコンテンツを理解し、表示することを可能にする技術です。オープングラフのメタ情報を個々の投稿やページに追加することで、共有時の表示をコントロールすることができます。これらのタグには、コンテンツのタイトル、説明、アイキャッチ画像などの情報が含まれます。

すべてのアイキャッチ画像がFacebookに表示されるようにする最も簡単な方法は、All In One SEOを使用することです。All in One SEOは、検索順位を上げるためにサイトを改善し最適化するのに役立つ最高のWordPress SEOプラグインです。

有効化したら、All In One SEO ” ソーシャルネットワークに移動します。そして、Facebookタブの下にあるオプション「Enable Open Graph Markup」を有効化してください。

これは、あなたのブログ投稿のプレビューを、おすすめ画像と短い抜粋テキストで自動的に表示します。

詳しくは、WordPressテーマでFacebookオープングラフのメタ情報を追加する方法をご覧ください。

この投稿が、WordPressでアイキャッチ画像が表示されないのを直すのにお役に立てば幸いです。また、WordPressのよくあるエラーとその修正方法のリストや、ブログのトラフィックを増やす方法のガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.