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

WordPressサイトで検索機能を提供している場合、検索結果ページでキーワードがハイライト表示されていると、ユーザーが目的の情報にたどり着きやすくなります。この記事では、検索キーワードを検索結果ページ内で自動的に強調表示する方法を紹介します。

検索キーワードを取得する

まず、検索結果ページ（search.php または archive.php など）で現在の検索キーワードを取得するには、以下のように get_search_query() を使います。

<?php
$search_query = get_search_query();
?>

本文内のキーワードをハイライト表示する関数を作成

次に、検索キーワードに一致する部分を <span class="highlight"> で囲む関数を functions.php に追加します。

function highlight_search_keywords($text) {
  if (is_search()) {
    $query = get_search_query();
    if (!empty($query)) {
      $pattern = '/(' . preg_quote($query, '/') . ')/iu';
      $text = preg_replace($pattern, '<span class="highlight">$1</span>', $text);
    }
  }
  return $text;
}

the_title や the_excerpt に適用する

表示部分で the_title() や the_excerpt() を使用している場合は、次のように置き換えて適用します。

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

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

スタイルを適用する

最後に、強調表示の見た目を整えるため、CSSでスタイルを設定します。以下は例です。

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

まとめ

検索結果におけるキーワードのハイライト表示は、ユーザー体験の向上や検索結果の視認性向上に有効です。今回紹介した方法を使えば、functions.php に関数を追加し、表示テンプレートを少しカスタマイズするだけで簡単に実装できます。