このブログ(WordPress)のクオリティを上げていく連載の第7弾。
今回は検索結果にマッチした箇所が表示されるようにする。
というのも、例えばnpm
で検索しても、その記事のどんな文章がマッチしたかがわからないので複数記事がヒットした場合、記事を開かなければならず確認しにくいから。
これを改善したい😤
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-156.png)
Relevanssiという既存の検索を置き換えるプラグインをインストールしてみる。
PRO版があるそうなのでとりあえずフリー版でどんな事ができるのか確認していく。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-152.png)
設定画面を見てみる。
インデックスを作れとの事。
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-153.png)
Build the index
でインデックスを作成する
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-154.png)
検索してみる。
マッチした部分が表示される様になった。
あっさりできてしまった🤣
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-155.png)
マッチ箇所にスタイルをあてる
「外観」→「カスタマイズ」→「追加CSS」から以下のCSSを追加した。
/** 検索結果 **/ .search-results .entry-summary strong { background-color: yellow; }
こんな感じでマッチ箇所が黄色でハイライトされる様になる😎
![](http://t-kuni.sub.jp/wp-content/uploads/2020/05/image-157.png)
おわり!🤞
Webエンジニアをやっています
UX/UIデザインからプログラミング、DB設計、SEO、インフラ構築など幅広く対応してます
PHP/PHPUnit/Laravel/Vue/Nuxt/Docker/Terraform
ご連絡はTwitterのDMまで。