WordPressの検索結果にマッチ箇所を表示する様にする

このブログ(WordPress)のクオリティを上げていく連載の第７弾。
今回は検索結果にマッチした箇所が表示されるようにする。
というのも、例えばnpmで検索しても、その記事のどんな文章がマッチしたかがわからないので複数記事がヒットした場合、記事を開かなければならず確認しにくいから。
これを改善したい😤

Relevanssiという既存の検索を置き換えるプラグインをインストールしてみる。
PRO版があるそうなのでとりあえずフリー版でどんな事ができるのか確認していく。

設定画面を見てみる。
インデックスを作れとの事。

Build the indexでインデックスを作成する

検索してみる。
マッチした部分が表示される様になった。
あっさりできてしまった🤣

マッチ箇所にスタイルをあてる

「外観」→「カスタマイズ」→「追加CSS」から以下のCSSを追加した。

/** 検索結果 **/
.search-results .entry-summary strong {
	background-color: yellow;
}

こんな感じでマッチ箇所が黄色でハイライトされる様になる😎

おわり！🤞