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

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

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

ハイライトされた検索語を設定することは、サイトをすぐに洗練され、ユーザーフレンドリーに感じさせる簡単な改善の1つです。

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

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

そのため、プラグインを使用する場合でもカスタムコードを追加する場合でも、WordPressサイトで検索語のハイライト表示を取得するための2つの簡単な方法を説明します。

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

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

ユーザーが サイトの検索バーにキーワードを入力すると、結果の中からその単語を探します。目立つものがなければ、気づかずに役立つコンテンツをスキップしてしまう可能性があります。

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

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

WPBeginnerでは、検索結果のキーワードを太字で表示しています。これはハイライト表示と同じように機能します。些細なことですが、ユーザーが探しているものをより速く見つけるのに役立ちます。

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

• 方法1: SearchWPを使用して検索語をハイライト表示する – 推奨
• 方法2：カスタムコードを使用した検索語のハイライト – 無料
• ボーナス：ライブAjax検索で検索をさらに高速化🚀
• よくある質問: WordPressで検索語をハイライト表示する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SearchWP を使用して WordPress の検索を改善する方法についての完全なガイドも作成しました。さらに詳しく知りたい場合は、SearchWP を使用して WordPress の検索を改善する方法をご覧ください。

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

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

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

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

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

予算が限られている場合、SearchWP は無料プランにこの機能が含まれていないため、適切な選択肢ではないかもしれません。

良いニュースは、サイトのfunctions.phpファイルにPHPコードスニペットを追加することで、検索語をハイライト表示できることです。

主な違いは、長期的なメンテナンスにあります。SearchWPのようなプラグインは、WordPressの新バージョンとの互換性を確保するために、開発者によって定期的に更新されます。

ただし、カスタムコードスニペットを使用する場合、将来のアップデート後も正しく機能することを確認するのはご自身の責任となります。

ただし、テーマファイルを直接編集することもリスクが伴います。

わずかな間違いでもサイトがクラッシュし、管理ダッシュボードからロックアウトされる可能性があります。これはしばしば「ホワイトスクリーンオブデス」と呼ばれ、開発者でない場合は修正がストレスになることがあります。

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

これは、WPCodeがスニペットを個別の安全な環境で実行するためです。これにより、タイプミスでサイトがクラッシュするのを防ぎ、トグルでスニペットを簡単にオン/オフできます。

さらに、その無料プランはこの方法で完全に機能します。

私は 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 Lite Search プラグインを併用している場合、ハイライトされた用語はライブ検索結果にも表示されます。ページのリロードは不要です。

両方のツールは同じチームによって開発されているため、すぐに連携してシームレスに動作します。

ただし、別のライブ検索プラグインまたはカスタムAJAX検索設定を使用している場合は、互換性をテストする必要があります。

すべてのプラグインが動的な結果でタームハイライトをサポートしているわけではないため、すべてが正しく表示されることを確認するために、まずステージングサイトでテストすることをお勧めします。

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

いいえ、それほどではありません。私が説明した両方の方法（SearchWP を使用する方法と WPCode でカスタムコードを追加する方法）は軽量で、パフォーマンスが最適化されています。

ハイライト自体はフロントエンドで実行されるため、サーバーに大きな負荷はかかりません。

それでも、サイトに多数の検索結果がある場合や、カスタムスタイルが重い場合は、まずテストすることをお勧めします。ハイライトがうまく表示され、ライブに展開する前にスムーズに実行されることを確認するために、ステージング環境で試してみることをお勧めします。

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

はい、もちろんです！SearchWPを使用している場合、カスタム投稿タイプやWooCommerceの商品とすぐに連携するように設計されています。商品SKUやカスタムフィールドを含む、検索対象を完全に制御できます。

方法2のカスタムコードスニペットは、テーマが the_title() のような標準的なWordPress関数を使用してコンテンツを表示している限り、カスタム投稿タイプでも機能します。ただし、最も信頼性が高く強力な結果を得るには、特にeコマースストアの場合は、SearchWPが最善のソリューションです。

この記事が、WordPressで検索結果の検索語を簡単にハイライトする方法を学ぶのに役立ったことを願っています。また、スマートなWooCommerce商品検索を作成する方法に関する究極のガイドや、WordPressサイトに音声検索機能を追加する方法に関するチュートリアルも参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。