WordPress 検索ワードをハイライト表示する方法

WordPress でタグのアーカイブや検索結果ページで、指定したワードをハイライト表示する方法を紹介します。
例えば、検索結果ページの使い勝手を向上したい場合におすすめな方法です。

1. 検索ワードをハイライト表示する方法
   1. 検索結果で検索ワードをハイライト表示する方法
   2. タグアーカイブで検索ワードをハイライト表示する方法

検索ワードをハイライト表示する方法

検索ワードをハイライト表示する場合は function.php にそれぞれのコードを追加します。
紹介する方法を実行した場合は、ハイライトしたい文言には mark タグで囲われるので、装飾は各自で行ってください。
また、strip_tags などでタグの削除などを行なっていると mark タグが削除される場合もあるのでご注意ください。

検索結果で検索ワードをハイライト表示する方法

検索結果ページでハイライト表示する場合は次のコードを function.php に追加してください。

/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

  if(is_search()){ // 検索ページが表示されている時に実行

    $keys = implode('|', explode(' ', get_search_query())); // 検索ワードを分割して配列にして返す

    $text = preg_replace('/('. $keys .')/iu', '<mark>
/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

if(is_search()){ // 検索ページが表示されている時に実行

$keys = implode('|', explode(' ', get_search_query())); // 検索ワードを分割して配列にして返す

$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む

}

return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用

</mark>', $text); // 該当ワードを mark で囲む

  }

  return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用

タグアーカイブで検索ワードをハイライト表示する方法

タグアーカイブページでハイライト表示する場合は次のコードを function.php に追加してください。

/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

  if(is_tax()){

    $keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定

    $text = preg_replace('/('. $keys .')/iu', '<mark>
/*【検索カスタマイズ】検索ワードをハイライトする */

function highlight_search_word($text){ // 関数「highlight_search_word」を定義

if(is_tax()){

$keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定

$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む

}

return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用

</mark>', $text); // 該当ワードを mark で囲む

  }

  return $text; // 変更した値を呼び出し元に戻す

}

add_filter('the_title', 'highlight_search_word'); // タイトルに適用

add_filter('the_content', 'highlight_search_word'); // 本文に適用

add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用

カスタムタクソノミーなど、特定のカテゴリやタグに限定したい場合は、is_tax() に任意のスラッグを is_tax(‘exsample-tag’) のように追加してください。

まとめ

WordPress をタグのアーカイブや検索結果ページで、指定したワードをハイライト表示する方法を紹介しました。