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>
よくある質問（FAQ）
Q. WordPress記事に関連キーワードをメタ情報として保存・表示する方法は？
A. カスタムフィールドにキーワードをカンマ区切りで保存するか、カスタムタクソノミーとして登録します。タクソノミーにするとタグのような管理が可能で、アーカイブページも自動生成されます。
Q. 記事のタグを関連キーワードとして表示するコードは？
A. the_tags(‘キーワード: ‘, ‘, ‘, ”)でタグをリスト表示できます。またはget_the_tags()で配列取得してforeachでカスタムデザインにすることも可能です。
Q. SEOのためにキーワードを構造化データとして記述するには？
A. JSON-LD形式のschema.orgマークアップに”keywords”プロパティとして記事のタグやカスタムフィールドのキーワードを出力します。wp_head アクションフックでhead内に出力するのが一般的です。
まとめ
検索結果におけるキーワードのハイライト表示は、ユーザー体験の向上や検索結果の視認性向上に有効です。今回紹介した方法を使えば、functions.php に関数を追加し、表示テンプレートを少しカスタマイズするだけで簡単に実装できます。
