Written by Kasumi

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 プログラミング

【wordpress】子カテゴリページで親カテゴリの情報を取得する方法

2021.11.01
2089
WordPress

【WordPress】the_titleで出力されたタイトル内のhtmlタグを削除する方法

2022.12.14
1912
WordPress

WordPressのメニューで現在のページを表示してるメニューにCSSで装飾する方法

2022.05.01
1700
WordPress プログラミング

カスタム投稿タイプのターム(カテゴリー)の初期設定を変更する方法

2022.04.01
3192