例えば、このサイトを『スクロール』で検索します。
下図①のように右上のメニュー虫メガネアイコンをクリックし、検索語を入力し、検索ボタンをクリック。
すると下図②のように検索語にヒットしたリストが表示されます。

さらに検索結果リストの一番上をクリックします。
するとそのページへ遷移し表示されますが、検索文字がどこにあるのかハイライトで表示されます。
この方法のおかげでその検索結果ページの検索語のしめる割合が瞬時に理解できます。

コーナー名が妃魔人のワークショップということでチュートリアル形式で説明を
まずは検索結果ページのリスト表示される各リンクに検索語をパラメータとして挿入します。

<?php
/* hrefの箇所ですね。*/
'href=' . get_permalink().'?searchquery='.get_search_query(true);
/*・
 * get_search_query(true)は検索語を格納します。
 * ?searchquery= このパラメータ名は好きな分かりやすい名前を付けます。
 * これでクリックした遷移先のページURLにパラメータが追記され下記のようになります。
 * URL/?searchquery=検索語
 */

ページ遷移先ではURLにsearchqueryパラメータがある場合とない場合で枝分かれさせます。
ない場合は通常表示。ある場合は検索文字を全て検索しハイライト表示させます。
このハイライト処理はPHPよりJSの方が工程が少なく処理も簡単なのでJSで進めます。
ハイライトする方法はbody.innerHTMLですべてのbody内要素を検索文字で検索し、ヒットすれば<hilight></hilight>で囲みます。
これも独自タグです。
下記に簡単なコードを掲載。

const search_query= getPrm('searchquery') || ''; /* getPrmはパラメータを抽出する独自関数 */
if(search_query){/* searchquery'があればsearchQHLへ、なければ何もせず次のステップへ */
	const queries= search_query.split(' ');
	const sq= queries.join('|');/* 検索文字が複数の場合の処理。正規表現の|使用 */
	searchQHL(sq);
}
function searchQHL(sq){
	const kw= `([^=])(${sq})`;/* 複数検索用の正規表現作成。([^=])はコード内は検索しない指定 */
	const body= document.querySelector( 'body' );
	const bodytext= body.innerHTML;
	const re= new RegExp(kw,'gi');
	body.innerHTML = bodytext.replace( re,   '$1<hilight>$2</hilight>');
}

これで検索文字を<hilight></hilight>で囲むことができます。
後はCSSで色を指定すれば完了です。

search_queryがある場合とない場合の表示速度を調べてみましたがほとんど差がありませんでした。
予想ですが、PHPでこの処理をやると個別のテンプレートや、テーブルでそれぞれ検索置き換えをすることになり工数が増えますが、JSだとすでに構築されたHTMLを一括で検索置き換えできるのでそのあたりも処理速度が遅くならない理由かと感じます。