アイキャッチ画像は、ブログで最初に注目されることが多い要素です。読者の注意を引きつけ、記事の世界観を設定します。
しかし、一部のWordPressテーマでは、アイキャッチ画像をクリックしても訪問者はどこにも移動しません。投稿が開かれる代わりに、そのまま表示されるだけです。
これは大きなことではないように聞こえるかもしれませんが、訪問者を混乱させ、読書を続ける可能性を低くする可能性があります。これは小さくても深刻な問題です。
幸いなことに、簡単な解決策があります。WordPressでアイキャッチ画像を clickable にする方法を紹介します。これにより、訪問者は期待通りのスムーズな体験を得られます。
WordPressでアイキャッチ画像を投稿にリンクする理由
理由は簡単です。訪問者は画像がリンクのように機能することを期待しています。アイキャッチ画像を見ると、フル投稿を開くために自然にクリックしたくなります。
アイキャッチ画像は通常、大きくてカラフルで、より多くのスペースを占めるため、訪問者は最初にそれに気づく傾向があります。また、電話やタブレットを使用して投稿をタップしやすくなります。
しかし、注目の画像がクリックできない場合、訪問者を混乱させる可能性があります。😕
画像をタップして投稿が開かれることを期待しても、何も起こらないことに気づくだけかもしれません。その小さなフラストレーションが原因で、一部のユーザーはサイトから早く離れてしまう可能性があり、エンゲージメントに悪影響を与える可能性があります。
また、サイトのアクセシビリティも低下します。より大きな画像は、特に運動能力に困難がある人や小さな画面を使用している人にとって、クリックまたはタップしやすくなります。
多くの最新のWordPressテーマはアイキャッチ画像を投稿にリンクしていますが、そうでないものもあります。お使いのテーマがそうでない場合、その修正方法を正確に説明します。
次のセクションでは、WordPressでアイキャッチ画像を投稿に自動的にリンクする方法を教えます。そして、このガイドでカバーするすべてを紹介します。
- WordPressでアイキャッチ画像を自動的に投稿にリンクさせる
- ボーナスヒント：アイキャッチ画像をスピードのために最適化する
- よくある質問：注目の画像をWordPress投稿に自動的にリンクする
- WordPressでの画像の利用に関するその他のガイド
さあ、始めましょう。
WordPressでアイキャッチ画像を自動的に投稿にリンクさせる
この方法では、WordPressファイルにコードを追加する必要があります。以前にこのような作業をしたことがない場合は、Web上のスニペットをWordPressに貼り付けるための初心者ガイドをご覧ください。
コードをテーマのfunctions.phpに追加することは可能ですが、代わりにコードスニペットプラグインを使用することをお勧めします。はるかに安全で管理しやすく、テーマを更新または切り替えても変更が失われることはありません。
私たちのおすすめはWPCodeです。WordPress向けの最高のコードスニペットプラグインです。テーマファイルを変更せずにカスタムコードを追加および管理できるため、ウェブサイトを壊すリスクがありません。
さらに、信頼性と使いやすさから、多くのパートナーブランドに信頼されています。当社のWPCodeの全レビューで詳細を確認できます。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するチュートリアルに従って、ステップバイステップの説明を確認してください。
💡 注：このチュートリアルでは、WPCodeの無料版を使用できます。コードスケジューリング、条件付きロジック、完全な改訂履歴などの高度な機能が必要な場合は、WPCode Proバージョンを検討することをお勧めします。
プラグインがアクティブ化されたら、WordPress管理エリアのCode Snippets » Add Newに移動できます。
次に、「スニペットを追加」ページが表示されます。
「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「+ カスタムスニペットを追加」ボタンをクリックできます。
次の画面で、スニペットのコードタイプを選択します。
ここで、「PHPスニペット」ボックスをクリックします。
ここで WPCode エディターに移動します。
ここで最初に行うことは、コードスニペットに名前を付けることです。これは参照用なので、スニペットが何であるかをすぐに理解するのに役立つものであれば何でも構いません。
次に、次の2つのコードスニペットのいずれかを「コードプレビュー」ボックスに貼り付けます。どちらか一方を使用するだけで十分です。
1つ目は、アーカイブ、ホームページ、および個別投稿ページを含む、どこでもアイキャッチ画像をクリック可能にする簡単なオプションです。
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
2番目の方法は少し異なります。訪問者が特定の投稿ページにすでにいる場合に、そのサムネイル画像をクリックできないようにします。これはユーザーエクスペリエンスにとってより良いです。
これは、ホームページ、ブログインデックス、または WordPressブログのカテゴリページのような、シングルビューではないページでのみサムネイル画像にリンクしたい場合に役立ちます。
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
if (! is_singular()) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
} else {
return $html;
}
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
最高のユーザーエクスペリエンスのためには2番目のスニペットをお勧めしますが、どちらでも目的は達成できます！ 👍
スニペットを追加したら、WPCodeエディタで次のように表示されるはずです。
次に、ページを下にスクロールして「挿入」セクションに移動しましょう。
「自動挿入」メソッドのままにしておけば、コードスニペットが適切な場所に自動的に挿入および実行されます。
最後に、トグルを「非アクティブ」から「アクティブ」に切り替えます。
次に、「スニペットの保存」ボタンをクリックします。
これで完了です。これで、アイキャッチ画像が自動的に投稿にリンクされるようになります。
ボーナスヒント：アイキャッチ画像をスピードのために最適化する
アイキャッチ画像がクリック可能になったので、それらが迅速に読み込まれるようにすることが重要です。大きすぎる最適化されていない画像は、サイトの速度を低下させ、ユーザーエクスペリエンスとSEOランキングの両方に悪影響を与えます。
WordPressにアイキャッチ画像（サムネイル画像）をアップロードする前に、テーマのコンテンツ幅に合わせて画像のサイズを変更し、ファイルサイズを小さくするために圧縮することをお勧めします。これは、画像編集ツールまたは画像圧縮プラグインで簡単に行えます。
他にも役立つテクニックがあります。
例えば、遅延読み込みを有効にしたり、次世代画像フォーマット（WebPなど）を使用したり、CDNを有効にしてさまざまな場所で高速配信したりできます。
詳細については、ウェブパフォーマンスのために画像を最適化する方法に関する完全ガイドをご覧ください。
よくある質問：注目の画像をWordPress投稿に自動的にリンクする
さて、WordPressでアイキャッチ画像をリンクすることに関する一般的な懸念をいくつか解消しましょう。
なぜデフォルトでアイキャッチ画像がクリックできないのですか？
アイキャッチ画像がクリック可能かどうかは、完全にWordPressテーマによって異なります。一部のモダンなテーマにはデフォルトで含まれていますが、そうでないものもあります。
このコードをテーマのfunctions.phpファイルに追加しても安全ですか？
分かります。テーマファイルを編集するのはリスクが高いと感じるかもしれません。実際、その通りです。functions.phpファイルに小さなタイプミスがあると、ウェブサイトにアクセスできなくなったり、「ホワイトスクリーンオブデス」が発生したりする可能性があります。
そのため、WPCodeのようなプラグインの使用をお勧めします。サイトにコードを追加する、はるかに安全で初心者向けの簡単な方法です。
このコードスニペットを追加すると、私のウェブサイトは遅くなりますか？
良いニュースです。問題ありません。このコードは標準のWordPress機能を使用しているため、非常に軽量で効率的です。 速度やパフォーマンスに違いは感じられないでしょう。
WordPressでの画像の利用に関するその他のガイド
この記事が、WordPressでアイキャッチ画像を投稿に自動的にリンクさせる方法を学ぶのに役立ったことを願っています。このガイドがお役に立った場合は、WordPressサイトでの画像の利用方法を改善するのに役立つ他のチュートリアルも用意しています。
- WordPressブロックエディターにおけるカバー画像と注目の画像
- WordPressでデフォルトのアイキャッチ画像を設定する方法
- WordPressでアイキャッチ画像または投稿サムネイルを追加する方法
- WordPressでアイキャッチ画像が表示されない問題を修正する方法
- WordPressでアイキャッチ画像にキャプションを追加する方法
- WebP vs PNG vs JPEG: WordPressに最適な画像フォーマット
- 最適なウェブデザインソフトウェアの選び方
- WordPressの画像サイズ入門
- 画像SEOの初心者向けガイド
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Fredrick John
うまく機能しました、ありがとうございます。
WPBeginnerサポート
どういたしまして！
管理者
Nelson Nchopereu
WhatsAppやFacebookで投稿リンクが共有された際に、アイキャッチ画像が表示されるようにするにはどうすればよいですか？
ありがとうございます
WPBeginnerサポート
そのために、以下のガイドでソーシャルメタ情報を含めて説明します。
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
管理者
アナス
素晴らしいです、うまくいきました…。
WPBeginnerサポート
Thank you, glad our content was helpful
管理者
Rohit Sharma
wpbeginnerは、注目の画像とYouTubeサムネイルをどのようにデザインしていますか？
どのようなツール/アプリ/ソフトウェアを使用していますか？
とても素晴らしいですね。
あなたのウェブサイトのブループリントの記事にはこれが見つかりませんでした。ここで尋ねようと思いました。
返信をお待ちしています..！
WPBeginnerサポート
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
管理者
özkan
Hello,
うまくいったと言う人たちみんなが羨ましいです。
私のサイトでは機能しません。誰か助けてもらえませんか？
ありがとうございます。
WPBeginnerサポート
テーマ固有の設定がこれを上書きしているかどうかを確認するために、お使いのテーマのサポートに問い合わせることをお勧めします。
管理者
Faizan
うまくいきました！ありがとう
カルロス・アルベルト・ロマ
こんにちは！素晴らしい記事です。私はその逆を行う必要があります。画像、タイトル、またはテキストから任意のURLへのリンクをすべて回避する方法を発見する必要があります。どうすればこれを実行できますか？つまり、私のウェブサイトにアクセスしてブログを見ても、画像、テキスト、またはタイトルをクリックすることはできません。これは可能ですか？ありがとうございます。
Jennifer
こんにちは、どうもありがとうございます。
ウェブサイトで使用しました。
特定のサイズのサムネイルにリンクを追加するにはどうすればよいですか？
pete
うまくいきました、ありがとう!!
Stuart Campbell
この方法を使って、アイキャッチ画像が別のURLにリンクするようにするにはどうすればよいですか？何が足りないのでしょうか？よろしくお願いします
サンディープ
私のブログでは、アイキャッチ画像がクリックできません。そのため、ユーザーがブログに移動するのが少し難しくなります。
私が使用しているテーマがそれをサポートしていないと思います。
しかし、あなたが言及したコードは試してみます。
試してみて、うまくいけば素晴らしいでしょう。
スーザン・ホーワース
Thank you so much for this!! I was worried this issue would take a lot of time and energy to figure out. After a quick copy and paste of your code, and it worked perfectly!
Deepak
うまくいきました。PHPステートメントを閉じる方法を知りたいです。最後に } を使用すると、サイトで500エラーが発生します
イヴァン
うまくいきました！素晴らしい！ありがとうございます
modo seyoum
サムネイル画像にリンクを追加する最良の方法を探しています。たとえば、下のリンクをクリックすると、ヘッダー画像が表示され、次にコンテンツ領域に2つのリンクが表示されます。レスポンシブデザインを損なうことなく、ヘッダーにこれらの2つのリンクを表示したいと考えています。いくつかアイデアがありますが、別の視点から聞きたいです…
ジート・サンドゥ
こんにちは、別の質問があります。'post in page' プラグインを使用して、特定のページに特定の投稿を表示しようとしました。しかし、投稿に設定したアイキャッチ画像がページに表示されません。つまり、投稿のタイトルだけが表示されますが、すべての投稿のアイキャッチ画像も表示したいのです！これを達成するのに役立つ方法やプラグインを提案してもらえませんか？ウェブ全体を検索しましたが、誰も答えを持っていません。助けていただければ幸いです。
malik aadil
私は新しいブロガーです。この記事は私に大いに役立ちました。
画像内のリンクを使用していましたが、問題は画像は開くものの、リンクされた記事に移動しないことでした
WPBeginnerサポート
マリクさん、
We are glad you found this article helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
Sulman Qamar
hey dear ,
here isn’t concerning solely featured pictures however additionally concerning committal to writing . …
in some model that’s operating.. most of your data is nice on behalf of me and my members ..
we follow principally .:)
in this richest article I actually have found totally different sort of data ..
Hope you best for your blogging future
~salman qamar
Dale Reardon
こんにちは、
この便利なコードを本当にありがとうございます。
これは、投稿のタイトルをaltテキストとして、リンクされた画像にALTタグを追加する方法（関数コードを教えていただけますか）ですか？
私は視覚障害があり、現在リンクは画像ファイル名と表示されるだけで、ほとんどの場合役に立ちません。
ありがとう、
デール。
Ankit Agarwal
このチュートリアルをありがとうございます。ブログでこれを試しましたが、サムネイルに表示される画像がアイキャッチ画像ではなく、投稿で使用している最初の画像であることがわかりました。おそらくMotoPressページビルダープラグインを使用しているためです。
このコードとMotopressプラグインの間で競合があるようです。
デール・リアードン - 私の障害は重要です
こんにちは、
それは素晴らしく機能しました。
もう一つ質問があります。私のウェブサイトはすべて障害問題に関するものです。
なので、私は物事がアクセスしやすいことを望んでおり、私自身も盲目なので、すべてのサイトがその役割を果たしてくれることに感謝しています。
リンク先のページのタイトルで構成されたこの画像リンクにALTテキストを割り当てる方法はありますか？現在、私のスクリーンリーダーは画像ファイル名を読み上げるだけで、それが役に立たない場合があります。
ご協力に感謝いたします。
Dale.