【WordPress】検索キーワードを強調表示する方法

WordPressの検索結果ページでユーザーが入力した検索キーワードを目立たせたいと考えたことはありませんか？この記事では、JavaScriptとCSSを使用して検索キーワードを強調表示する方法を紹介します。これにより、ユーザーの検索体験を向上させることができます。

functions.phpにコードを追加する

まず、functions.phpに以下のコードを追加して、必要なスクリプトを読み込みます。

function enqueue_highlight_script() {
    wp_enqueue_script('highlight-search-keyword', get_template_directory_uri() . '/js/highlight-search-keyword.js', array('jquery'), '1.0', true);
    wp_enqueue_style('highlight-search-keyword', get_template_directory_uri() . '/css/highlight-search-keyword.css');
}
add_action('wp_enqueue_scripts', 'enqueue_highlight_script');

JavaScriptファイルを作成する

次に、テーマディレクトリにjsフォルダを作成し、その中にhighlight-search-keyword.jsというファイルを作成して、以下のコードを追加します。

jQuery(document).ready(function($) {
    var searchKeyword = new URLSearchParams(window.location.search).get('s');
    if (searchKeyword) {
        $('body').highlight(searchKeyword);
    }
});

// highlight.js jQuery plugin
jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType === 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

CSSファイルを作成する

次に、テーマディレクトリにcssフォルダを作成し、その中にhighlight-search-keyword.cssというファイルを作成して、以下のコードを追加します。

.highlight {
    background-color: yellow; /* 任意の色を指定 */
    font-weight: bold;
}

まとめ

これらの手順を実行することで、WordPressサイトの検索結果ページで検索キーワードを強調表示することができます。JavaScriptとCSSを使用する方法はカスタマイズ性が高く、自分のテーマに合わせたスタイルを適用できます。ユーザーの検索体験を向上させるために、ぜひ試してみてください。