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

カスタム投稿タイプを含めた検索ページを作ってみよう【ワードプレス】

更新日:2019.11.28
166
WordPress プログラミング

【簡単】wordpressプラグインで投稿記事を非公開予約する方法

2022.01.05
1529
WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
108
WordPress

【簡単】contact form 7で件名・送信元が文字化けするのを解決する方法【wordpress】

更新日:2022.11.24
796