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

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

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

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

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

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

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

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

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

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

おわり!🤞

コメントする