WordPressで検索結果の検索語をハイライトする方法（2つの方法）

サイトで何かを検索した最後の時間を考えてみてください。キーワードを探して結果をスキャンしたはずですよね？ 🔍

それはまさに、ウェブサイトの訪問者がサイトを検索するときに行っていることです。ただし、WordPressはデフォルトではそれらの用語をハイライトしません。

ハイライトされた検索語句の設定は、サイトをすぐに洗練されたものに見せる簡単な改善の1つです。

訪問者が検索結果が検索に一致する理由をすぐに確認できれば、クリックしてコンテンツにエンゲージする可能性が高まります。

長年にわたりWordPressサイトを構築・管理してきた経験から、これらの小さなユーザーエクスペリエンスの改善が大きな影響を与えることに気づきました。📝

そのため、WordPressサイトで検索語句をハイライト表示する2つの簡単な方法を順を追って説明します。

なぜウェブサイトで検索語をハイライト表示する必要があるのですか？

検索語をハイライト表示すると、訪問者は探しているコンテンツをすばやく見つけることができます。

ユーザーがサイトの検索バーにキーワードを入力すると、その正確な単語を結果からスキャンします。何も目立たない場合、気付かずに役立つコンテンツをスキップしてしまう可能性があります。

検索語を強調することで、結果を読みやすくし、どの記事が最も関連性が高いかをすぐに示すことができます。

これはユーザーエクスペリエンスを向上させ、訪問者が情報をより速く見つけるのを助け、彼らが正しい場所にいることを安心させます。ユーザーがあなたのサイトに長く滞在することを奨励することさえできます。

WPBeginnerでは、検索結果で一致するキーワードを太字にしています。これはハイライトと同じように機能します。わずかな工夫ですが、人々が探しているものをより速く見つけるのに役立ちます。

とはいえ、WordPressで検索語を簡単にハイライトする方法をご紹介します。2つの方法について説明します。お好みの方法にジャンプするには、以下のリンクをご利用ください。

方法1: SearchWPを使用して検索語をハイライト表示する – 推奨

WordPressの結果で検索語句をハイライトする、迅速で手間のかからない方法を探しているなら、SearchWPを使用するのが最善です。

SearchWPはサイトの検索エクスペリエンスを向上させるための最高のツールです。

デフォルトのWordPress検索よりもはるかに関連性の高い結果が得られ、さらに良い点は？検索語のハイライトが信じられないほど簡単になります。スイッチを切り替えるだけで完了です。

デモサイトでSearchWPを徹底的にテストしましたが、結果は印象的でした。シームレスに動作し、組み込みのハイライト機能は手動設定と比較して多くの時間を節約できます。

また、すべての機能とその仕組みを確認したい場合は、SearchWPの完全レビューもあります。

まず、SearchWPプラグインをインストールして有効化する必要があります。手順については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

プラグインを有効化したら、WordPressダッシュボードの「SearchWP » 設定」ページに移動してください。

ここで、ライセンスキーを入力する必要があります。

このライセンスキーは、SearchWPのウェブサイトのアカウントの下で見つけることができます。コピーして貼り付けるだけです。

その後、「一般設定」までスクロールし、「用語のハイライト」スイッチを「オン」に切り替えます。

有効にするとすぐに、訪問者が使用したキーワードが検索結果で自動的にハイライトされ、関連コンテンツを簡単に見つけられるようになります。

このセクションでは、検索結果を改善できる追加の設定も見つかります。

あいまい検索や引用符付き検索などの機能は、コンテンツが多いWordPressブログに特に役立ちます。

この機能により、訪問者はわずかなタイプミスをしても正しいコンテンツを見つけることができます。これにより、イライラする「結果が見つかりませんでした」ページにたどり着くのを防ぐことができます。

一方、引用検索では、Google のように引用符で囲むことで、ユーザーは正確なフレーズを検索できます。

すべての設定は自動的に保存されることに注意してください。

一般設定に満足したら、SearchWP の他のカスタマイズオプションも検討することをお勧めします。

ダッシュボードの「SearchWP » アルゴリズム」ページに移動して、検索結果のランキング方法を微調整できます。

このセクションは、コンテンツのさまざまな部分の重み（重要度）を制御できるため非常に役立ちます。検索結果の採点システムのようなものと考えてください。

例えば、タイトルに重みを与えるということは、投稿タイトルの一致が本文コンテンツの一致よりも上位に表示されることを意味します。これにより、最も関連性の高いコンテンツが最初に表示されます。

「ソースと設定」ボタンをクリックすると、検索インデックスに含めるものを決定することもできます。

投稿やページだけでなく、コメント、カスタム投稿タイプ、WooCommerce製品、SKUなどを追加できます。

ブログやオンラインストアを運営している場合、これにより検索がはるかに便利になります。

例えば、デフォルトのWordPress検索ではできないSKU（例：「TSHIRT-BLUE-LG」）で商品を顧客が見つけられるように支援できます。

さらに深く知りたい場合は、SearchWPでWordPressの検索を改善する方法に関する完全ガイドも作成しました。

設定を保存すると、SearchWPは既存の検索フォームを自動的に引き継ぎます。追加の手順は不要です。

サイトにアクセスして簡単な検索を実行してください。ハイライトされたキーワードがすぐに表示されます。

まだサイトに検索フォームを追加していない場合でも、心配いりません。WordPressで検索フォームを追加する方法に関するステップバイステップのチュートリアルに従うことができます。

これで設定は完了です。訪問者は最初から、はるかに優れた検索体験を楽しむことができます。

方法2：カスタムコードを使用して検索語をハイライト表示 – 無料

予算が限られている場合は、カスタムコードを使用して検索語句をハイライト表示できます。通常、これにはテーマファイルを直接編集することが含まれます。

しかし、わずかな間違いでもサイトがクラッシュし、「White Screen of Death」エラーが発生する可能性があります。

そのため、代わりにWPCodeを使用することをお勧めします。これは最高のWordPressコードスニペットプラグインであり、テーマファイルを編集せずにカスタムコードを追加する最も安全な方法です。

WPCodeをさまざまなセットアップで徹底的にテストしましたが、毎回確実に機能します。提供されているすべての機能に興味がある場合は、後で確認できる詳細なWPCodeレビューもあります。

しかし、まずはサイトで検索語句をハイライトするためにどのように使用するかを見ていきましょう。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストールに関するガイドをご覧ください。

プラグインを有効化したら、ダッシュボードから コードスニペット » + スニペットを追加 ページにアクセスしてください。

ここで、「カスタムコードを追加（新規スニペット）」オプションの下にある「+ カスタムスニペットを追加」ボタンをクリックします。

新しい画面に移動し、コードタイプとして「PHPスニペット」を選択する必要があります。それが完了したら、コードスニペットに名前を付けます。

この名前は訪問者には表示されません。あなた自身の参照用です。そのため、ハイライト検索語のように、認識しやすい説明的なものを使用することをお勧めします。

後で編集または無効にしたい場合に、スニペットをすばやく見つけて管理するのに役立ちます。

その後、次のカスタムコードを「コードプレビュー」ボックスにコピーして貼り付けます。

このコードは、訪問者が検索したキーワードを見つけ、そのキーワードを特別なタグで囲み、背景色を追加することで機能します。

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

コードを貼り付けた後、スニペット内で下にスクロールしてスタイリングセクションを見つけます。これは echo '<style> ... </style>'; ブロック内にあります。変更したい特定の行は次のとおりです。

                        background-color: yellow;

デフォルトでは、プラグインはハイライトされた用語の背景色を黄色、テキストを黒に設定します。しかし、その行を編集することで簡単にカスタマイズできます。

yellow をお好みの色の16進数コードに置き換えるだけです。例えば、ハイライトを水色に変更するには、#aeeffc を使用できます。末尾のセミコロンを忘れないでください！

ブランドのスタイルに合った背景色と文字色を選択することをお勧めします。これにより、サイトの他の部分と自然に調和します。

このセクションでは、フォントの太さ、境界線の半径、パディングも調整して、ハイライトボックスの外観を微調整できます。

スタイリングに満足したら、一番上までスクロールし、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックして設定を保存します。

サイトにすでに検索フォームがある場合、スニペットはすぐに機能し始め、検索語を自動的に強調表示します。

まだ検索フォームを追加していない場合は、WordPressで検索フォームを追加する方法のチュートリアルに従ってください。

最後に、ウェブサイトにアクセスして簡単な検索を実行すると、新しくハイライトされた用語が機能しているのがわかります。

ボーナス：ライブAjax検索で検索をさらに高速化🚀

検索語のハイライト表示を追加したら、訪問者が入力するたびに結果を表示することで、さらに一歩進めたいと思うかもしれません。

これはライブAjax検索と呼ばれ、Googleのオートコンプリートのように機能します。ページをリロードせずに、インスタントな提案を提供します。

サイトをより高速でインタラクティブにするための優れた方法です。訪問者は探しているものをほぼ瞬時に見つけることができるため、エンゲージメントが向上する可能性があります。

これを設定するには、プレミアムSearchWPツールと連携してうまく機能するSearchWP Live Ajax Lite Searchプラグインをお勧めします。

無料で、ほとんどのWordPressテーマとシームレスに連携し、すべてを自動的に処理します。徹底的にテストしましたが、常に優れた、より高速な検索エクスペリエンスを提供します。

他の WordPress プラグインと同様にプラグインをインストールし、有効化してから、SearchWP の設定でライブ検索を有効にするだけです。

検索フォームは、任意の投稿、ページ、サイドバー、またはウィジェットエリアに簡単に追加できます。

開始のヘルプが必要ですか？WordPressサイトにライブAjax検索を追加する方法に関する完全なチュートリアルをご覧ください。

WordPressで検索語句をハイライト表示することに関するよくある質問

WordPressで検索語をハイライト表示することについて、よく聞かれる質問をいくつかご紹介します。

AJAXまたはライブ検索結果で用語をハイライト表示できますか？

はい。SearchWPとSearchWP Live Ajax Searchプラグインを組み合わせると、ハイライトされた用語がライブドロップダウン結果に自動的に表示されます。ページのリロードは必要ありません。

別のライブ検索プラグインまたはカスタム AJAX セットアップを使用している場合は、強調表示を有効にするために、検索結果テンプレートに手動で CSS クラスを追加する必要がある場合があります。

これらのハイライト機能はパフォーマンスやサイトの速度に影響しますか？

いいえ、検索用語の強調表示はサイトのパフォーマンスにほとんど影響しません。SearchWP の方法とカスタムコードの方法の両方がフロントエンド（クライアントサイド）で実行され、非常に軽量です。

サーバーの負荷やデータベースクエリ時間を増加させることはありません。ただし、特定のテーマで正しく表示されることを確認するために、新しい機能を最初にステージングサイトでテストすることを常にお勧めします。

カスタム投稿タイプやWooCommerceでも検索語のハイライトは機能しますか？

はい。SearchWPでは、カスタム投稿タイプ、WooCommerce製品、さらには製品SKUのハイライトを有効にすることができます。インデックス作成およびハイライトされるコンテンツタイプを完全に制御できます。

カスタムコードの方法（方法 2）は、テーマが結果を表示するために the_title() や the_excerpt() のような標準的な WordPress 関数を使用している場合、カスタム投稿タイプにも機能します。

この記事で、WordPressの結果で検索用語を簡単にハイライトする方法を学べたことを願っています。また、スマートなWooCommerce製品検索を作成する方法に関する究極のガイドや、WordPressサイトに音声検索機能を追加するチュートリアルもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。