【WordPress】検索キーワードを強調表示する方法｜複数単語対応・esc_attr()の罠に注意

$search_query = get_search_query( false );

function highlight_search_keywords( $text ) {
    if ( ! is_search() ) {
        return $text;
    }

    $query = get_search_query( false ); // 生の検索語を取得（esc_attr()されていない）

    if ( '' === trim( $query ) ) {
        return $text;
    }

    // 検索語をスペースで分割し、単語ごとにハイライト対象にする
    $terms = preg_split( '/\s+/u', trim( $query ), -1, PREG_SPLIT_NO_EMPTY );

    if ( empty( $terms ) ) {
        return $text;
    }

    $quoted_terms = array_map(
        function ( $term ) {
            return preg_quote( $term, '/' );
        },
        $terms
    );

    $pattern = '/(' . implode( '|', $quoted_terms ) . ')/iu';

    return preg_replace( $pattern, '<span class="highlight">$1</span>', $text );
}

<h2><?php echo highlight_search_keywords( get_the_title() ); ?></h2>

<p><?php echo highlight_search_keywords( get_the_excerpt() ); ?></p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}