アイキャッチ画像は、ブログで最初に注目されることが多い要素です。読者の注意を引きつけ、記事の世界観を設定します。
しかし、一部のWordPressテーマでは、アイキャッチ画像をクリックしても訪問者はどこにも移動しません。投稿が開かれる代わりに、そのまま表示されるだけです。
これは大きなことではないように聞こえるかもしれませんが、訪問者を混乱させ、読書を続ける可能性を低くする可能性があります。これは小さくても深刻な問題です。
幸いなことに、簡単な解決策があります。WordPressでアイキャッチ画像を clickable にする方法を紹介します。これにより、訪問者は期待通りのスムーズな体験を得られます。
WordPressでアイキャッチ画像を投稿にリンクする理由
理由は簡単です。訪問者は画像がリンクのように機能することを期待しています。アイキャッチ画像を見ると、フル投稿を開くために自然にクリックしたくなります。
アイキャッチ画像は通常、大きくてカラフルで、より多くのスペースを占めるため、訪問者は最初にそれに気づく傾向があります。また、携帯電話やタブレットで投稿をタップしやすくなります。
しかし、注目の画像がクリックできない場合、訪問者を混乱させる可能性があります。😕
投稿を開くことを期待して画像にタップしようとしても、何も起こらないことに気づくかもしれません。その小さなフラストレーションが原因で、一部のユーザーはサイトからより速く離れてしまう可能性があり、エンゲージメントを損なう可能性があります。
また、サイトのアクセシビリティも低下します。大きな画像は、特に運動能力に困難がある人や小さな画面を使用している人にとって、誰にとってもクリックまたはタップしやすくなります。
多くの最新のWordPressテーマはアイキャッチ画像を投稿にリンクしていますが、そうでないものもあります。お使いのテーマがそれらのいずれかである場合は、修正方法を正確に説明します。
次のセクションでは、WordPressでアイキャッチ画像を投稿に自動的にリンクする方法を教えます。そして、このガイドでカバーするすべてを紹介します。
さあ、始めましょう。
WordPressでアイキャッチ画像を自動的に投稿にリンクさせる
この方法では、WordPressファイルにコードを追加する必要があります。以前にこれを行ったことがない場合は、WebからWordPressにスニペットを貼り付けるに関する初心者向けガイドを参照してください。
テーマのfunctions.phpにコードを追加することはできますが、代わりにコードスニペットプラグインを使用することをお勧めします。はるかに安全で管理しやすく、テーマを更新または切り替えても変更は失われません。
私たちのお気に入りは、WordPress向けの最高のコードスニペットプラグインであるWPCodeです。テーマファイルを触らずにカスタムコードを追加および管理できるため、ウェブサイトを壊すリスクはありません。
さらに、信頼性と使いやすさから、多くのパートナーブランドに信頼されています。私たちのWPCodeの全レビューで詳細を確認できます。
まず、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のチュートリアルに従って、手順を確認してください。
💡 注：このチュートリアルでは、WPCodeの無料版を使用できます。コードのスケジュール設定、条件付きロジック、完全な改訂履歴などの高度な機能が必要な場合は、WPCode Proバージョンを検討することをお勧めします。
プラグインがアクティブ化されたら、WordPress管理エリアのCode Snippets » Add Newに移動できます。
次に、「スニペットを追加」ページが表示されます。
「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「+ カスタムスニペットを追加」ボタンをクリックできます。
次の画面で、スニペットのコードタイプを選択します。
ここで、「PHPスニペット」ボックスをクリックします。
ここで WPCode エディターに移動します。
ここで最初に行うことは、コードスニペットに名前を付けることです。これは参照用なので、スニペットが何であるかをすぐに理解するのに役立つものであれば何でも構いません。
次に、次の2つのコードスニペットのいずれかを「コードプレビュー」ボックスに貼り付けます。どちらか一方を使用するだけで十分です。
1つ目は、アーカイブ、ホームページ、および個々の投稿ページを含む、すべての場所でアイキャッチ画像を clickable にする簡単なオプションです。
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でも私たちを見つけることができます。
フレドリック・ジョン
うまく機能しました、ありがとうございます。
WPBeginnerサポート
どういたしまして！
管理者
ネルソン・ンチョペレウ
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
管理者
ロヒット・シャルマ
wpbeginnerは、注目の画像とYouTubeサムネイルをどのようにデザインしていますか？
どのようなツール/アプリ/ソフトウェアを使用していますか？
とても素晴らしいですね。
あなたのウェブサイトのブループリントの記事にはこれが見つかりませんでした。ここで尋ねようと思いました。
返信をお待ちしています..！
WPBeginnerサポート
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
管理者
オズカン
こんにちは、
うまくいったと言う人たちみんなが羨ましいです。
私のサイトでは機能しません。誰か助けてもらえませんか？
ありがとうございます。
WPBeginnerサポート
テーマ固有の設定がこれを上書きしているかどうかを確認するために、お使いのテーマのサポートに問い合わせることをお勧めします。
管理者
ファイザン
うまくいきました！ありがとう
カルロス・アルベルト・ロマ
こんにちは！素晴らしい記事です。私はその逆を行う必要があります。画像、タイトル、またはテキストから任意のURLへのリンクをすべて回避する方法を発見する必要があります。どうすればこれを実行できますか？つまり、私のウェブサイトにアクセスしてブログを見ても、画像、テキスト、またはタイトルをクリックすることはできません。これは可能ですか？ありがとうございます。
Jennifer
こんにちは、どうもありがとうございます。
ウェブサイトで使用しました。
特定のサイズのサムネイルにリンクを追加するにはどうすればよいですか？
ピート
うまくいきました、ありがとう!!
スチュアート・キャンベル
この方法を使って、アイキャッチ画像が別の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エラーが発生します
イヴァン
うまくいきました！素晴らしい！ありがとうございます
モード・セヨウム
サムネイル画像にリンクを追加する最良の方法を探しています。たとえば、下のリンクをクリックすると、ヘッダー画像が表示され、次にコンテンツ領域に2つのリンクが表示されます。レスポンシブデザインを損なうことなく、ヘッダーにこれらの2つのリンクを表示したいと考えています。いくつかアイデアがありますが、別の視点から聞きたいです…
ジート・サンドゥ
こんにちは、別の質問があります。'post in page' プラグインを使用して、特定のページに特定の投稿を表示しようとしました。しかし、投稿に設定したアイキャッチ画像がページに表示されません。つまり、投稿のタイトルだけが表示されますが、すべての投稿のアイキャッチ画像も表示したいのです！これを達成するのに役立つ方法やプラグインを提案してもらえませんか？ウェブ全体を検索しましたが、誰も答えを持っていません。助けていただければ幸いです。
マリク・アーディル
私は新しいブロガーです。この記事は私に大いに役立ちました。
画像内のリンクを使用していましたが、問題は画像は開くものの、リンクされた記事に移動しないことでした
WPBeginnerサポート
マリクさん、
We are glad you found this article helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
スルマン・カマル
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
デール・レアードン
こんにちは、
この便利なコードを本当にありがとうございます。
これは、投稿のタイトルをaltテキストとして、リンクされた画像にALTタグを追加する方法（関数コードを教えていただけますか）ですか？
私は視覚障害があり、現在リンクは画像ファイル名と表示されるだけで、ほとんどの場合役に立ちません。
ありがとう、
デール。
Ankit Agarwal
このチュートリアルをありがとうございます。ブログでこれを試しましたが、サムネイルに表示される画像がアイキャッチ画像ではなく、投稿で使用している最初の画像であることがわかりました。おそらくMotoPressページビルダープラグインを使用しているためです。
このコードとMotopressプラグインの間で競合があるようです。
デール・リアードン - 私の障害は重要です
こんにちは、
それは素晴らしく機能しました。
もう一つ質問があります。私のウェブサイトはすべて障害問題に関するものです。
なので、私は物事がアクセスしやすいことを望んでおり、私自身も盲目なので、すべてのサイトがその役割を果たしてくれることに感謝しています。
リンク先のページのタイトルで構成されたこの画像リンクにALTテキストを割り当てる方法はありますか？現在、私のスクリーンリーダーは画像ファイル名を読み上げるだけで、それが役に立たない場合があります。
ご協力に感謝いたします。
デール。