[WordPress] 検索キーワードに色をつけて目立たせたい

公開日:2024/06/20

検索結果からそれぞれのページに遷移したとき、検索したキーワードが書かれている箇所がわかりやすくなるよう、キーワードの部分を色付けしたい場合があります。
本記事ではGETパラメーターを使って検索キーワードの色付けを行うサンプルコードを紹介します。

検索結果テンプレート（search.php）

$keyword = $_GET['s'];
$url = get_the_permalink() .'?keyword='. $keyword;

検索結果に表示された各ページのURLの末尾に「keyword」という名前のGETパラメーターを設定しています。
これでリンク先のページに検索されたキーワードの情報を引き継いでいます。

jQuery

jQuery(function($) {
    const keyword = new URLSearchParams(window.location.search).get('keyword');
    if(keyword.length) {
        const splitKeywords = keyword.split(/\s+/);
        const content = $('article > .container');
        let html = content.html();
        splitKeywords.forEach(function(keyword) {
            html = html.replace(new RegExp(keyword, 'g'), '<mark>' + keyword + '</mark>');
        });
        content.html(html);
    }
});

GETパラメーターとして設定された値を取得します。キーワードに半角スペースが含まれている場合は分割した上で、文中にキーワードが使用されている箇所があれば、markタグで囲む形式に置換します。
markタグには適宜スタイルを設定してください。

const content = $('article > .container');

置換対象となる文章は上記の一文で指定します。ヘッダーやフッターなど、色付けしたくない部分が含まれないよう、サイトの作りによって要素の指定方法を変えてください。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。