【WordPress】サイト内検索機能の実装方法について。

どうも、おぎくぼです。

今回はWordPressでサイト内検索機能を実装する方法について紹介します。

サイト内検索機能を追加することで、目的の記事を探しやすくなり、CVRの向上などにつながります。

サイトが大きくなるにつれ、あった方がいい機能なので早めに実装してしまいましょう。

作成するページ

作成するページは以下の2つです。

・search.php
・searchform.php

ちなみにsearchform.phpはなくても動きます。ない場合はデフォルトのサーチボックスが表示されます。

サーチボックスをいい感じにカスタマイズしたい方は、searchform.phpがあった方が簡単に実装できます。

デフォルトをいじることもできますが、自分で作った方が楽ですよ。

search.php

このページは検索結果を表示するページです。

本サイトではsearch.phpで検索ワード、検索結果数の表示、該当記事の表示をしているので、この2つのコードを紹介します。

検索ワード、検索結果数の表示

検索ワード、検索結果数の表示は以下のコードです。

*コードが長いので改行しました。表示が汚いのはご了承ください。

このコードで検索したワードを表示することができます。

本サイトでは検索ワードがわかりやすいように“ ”で囲んでいます。

そしてこのコードで検索結果の数を表示することができます。簡単ですね。

該当記事の表示

コードは以下です。

該当記事の表示は検索結果数が1以上の時に表示します。

もし該当する記事がなければ、「(検索ワード)に一致する結果はありませんでした。」と返すようにします。

まずはこちらを簡単に解説します。

このコードで検索結果数が0件より多い場合という条件を追加しています。

これははお決まりの記事があたらってやつ。

このコードでループ処理を開始しています。そしてこの後に表示したい内容が入ります。

ここではループ処理と検索結果数が0より多い時の条件の終了、もし検索結果がなかったときの処理をしています。

endwhile;がないと処理が終わらないので大変なことになります。お忘れなく。

endif; でifの条件がtrue(検索結果数が0より多い時)の場合の処理を終わらせ、false(検索結果がないとき)の場合の処理をelse:で開始します。

そして、「(検索ワード)に一致する結果はありませんでした。」と表示するようにしています。

このコードでfalseの処理を終わらせています。簡単ですね!

search.phpはこんな感じです。

searchform.php

このページでは表示したいフォームを作成しましょう!

本サイトは以下のHTMLにスタイルを当てています。

こんな感じです。ポイントは1行目の

です。こちらではページの飛び先をエスケープして指定しています。

検索するとホームURL+検索ワードがURLとして表示されます。

例えば“寿司”と私のサイトで検索した場合、https://ogi-dai.com/?s=寿司となります。

フォームで入力した文字がそのままURLパラメーターとして渡るのでエスケープ処理を挟む必要があります。

エスケープとは?

簡単にいうと安全な文字に加工するということです。つまりセキュリティ対策です。

エスケープしない場合、JavaScriptを仕込んで悪さをできるので、安全な文字列に変えてあげる必要があります。

フォームはユーザーから情報を受け取る場所なので、攻撃には狙われやすいです。

しっかり対策しましょう!

あとはフォームを設置

ここまでで

・search.php
・searchform.php

を作成しました。あとはフォームを好きな場所に設置するだけです。

私はsidebar.phpでウィジェットとして検索フォームを設置しています。

コードはこんな感じです。ポイントは3行目です。

これを書くだけで検索機能のいろいろを勝手に作ってくれます。

さすがWordPress!簡単に機能を追加できるのはすばらしいですね!

まとめ

今回はWordPressでサイト内検索機能の実装方法について紹介しました。

・search.php
・searchform.php

この2つのページを作成し、あとはフォームを設置するだけですぐにできましたね。

意外と簡単に実装できるのでぜひやってみてください。

ではまた。