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で検索した文字列をハイライトする方法を紹介しました。
以上で解説を終わります。
目次