WordPressで検索した文字列をハイライトする方法

WordPressの検索結果ページで、記事タイトルに検索した文字列が含まれていたら、その部分をハイライトしたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

search.phpのタイトル出力タグを修正

<?php
  $sr = get_query_var('s');
  $keys = explode(" ", $sr);
  $title = get_the_title();
  $highlight_title = preg_replace('/(' . implode('|', $keys) . ')/iu', '<span class="highlight">' . $sr . '</span>', $title);
  echo $highlight_title;
?>

検索結果ページのテンプレートファルsearch.phpを開きます。

記事タイトルを出力してるthe_title() 、get_the_title()部分を上記コードに差し替えます。

検索された文字が記事タイトルに含まれていたらその部分をhighlightクラスのspanタグで囲ってくれます。

CSSでハイライトする

.highlight {
      background:linear-gradient(transparent 0%,yellow 0%);
}

最後にCSSでhighlightクラスのspanタグを装飾します。

background:linear-gradient();を使う事で、テキストに背景色を入れることができます。

以上で検索文字がハイライトされます。

文字数制限されてる場合

<?php
  $sr = get_query_var('s');
  $keys = explode(" ", $sr);
  if (mb_strlen(get_the_title(), 'UTF-8') > 制限する文字数) {
    $title = mb_substr(get_the_title(), 0, 制限する文字数, 'UTF-8') . '……';
  }else{
    $title = get_the_title();
  }
  $highlight_title = preg_replace('/(' . implode('|', $keys) . ')/iu', '<span class="highlight">' . $sr . '</span>', $title);
?>

文字数制限されてる場合は上記コードを記述します。

【制限する文字数】に文字数を記述します。

記事タイトルが指定の文字数だけ出力され、3点リーダーを末尾に付与します。

上記制限された記事タイトルに検索文字が入っていたら、ハイライトします。

以上で実装完了です。

まとめ

WordPressで検索した文字列をハイライトする方法を紹介しました。

以上で解説を終わります。

関連記事

WordPress

投稿タイプのカテゴリーページでURLから categoryを削除する方法【ワードプレス】

更新日:2019.11.28
160
WordPress

【WordPress】特定のタクソノミー・タームだけテンプレートを分ける方法

2022.07.08
78
WordPress

WordPressの投稿一覧で、最初もしくは最後の記事かを判別する方法

2022.06.23
60
WordPress プログラミング

ワードプレスの管理画面をアクセス制限(IP制限)してセキュリティを強化しよう

2021.03.01
225