Lightningテーマの検索ワードをハイライトにする方法（タイトル部分のみ）

この記事では、WordPressの検索ページで入力されたワードを部分一致も含めて、タイトルの検索ワードをハイライト表示にする方法を解説します。Ajax検索にも対応しており、ページをリロードせずに検索結果を更新してもハイライトが適用されます。

1 実装のポイント

• 部分一致にも対応した正規表現でハイライト
• Ajax検索にも対応（動的に検索結果を更新してもハイライト可能）

2 functions.php にコードを追加

// ------------------------------
// 検索ワードを部分一致でハイライト
// ------------------------------
function highlight_search_terms_advanced($text) {
    if(is_search() && isset($_GET['s']) && $_GET['s'] != '') {
        $search_terms = explode(' ', wp_strip_all_tags($_GET['s']));
        foreach($search_terms as $term) {
            $term = trim($term);
            if($term != '') {
                $text = preg_replace(
                    '/(' . preg_quote($term, '/') . ')/i',
                    '<span class="search-highlight">$1</span>',
                    $text
                );
            }
        }
    }
    return $text;
}
add_filter('the_title', 'highlight_search_terms_advanced');
add_filter('the_content', 'highlight_search_terms_advanced');
add_filter('the_excerpt', 'highlight_search_terms_advanced');

3 汎用CSS

/* -----------------------------
/*検索ワードを部分一致でハイライト
----------------------------- */

.search-highlight {
    background-color: #fff59d; /* 背景色 */
    color: #000;               /* 文字色 */
    padding: 0 2px;            /* 左右にわずかな余白を追加 */
    border-radius: 2px;        /* 角を丸くする */
    font-weight: bold;          /* 文字を太字にする */
}

4 代用プラグイン

• 「Relevanssi」：部分一致検索＋検索ワードハイライトに対応
• 「Ajax Search Lite」：Ajax検索＋ハイライト表示

5 まとめ

• 部分一致も含めた正規表現でPHP側でハイライト
• Ajax検索やライブ検索でも動的にハイライト可能
• テーマごとのCSS調整で見やすさを最適化