サイトに検索機能を付けたいときに必要なあれこれ【まとめ】

このブログでも使用している検索機能（右上）

恥ずかしながらこのサイトを作る時に初めて使うことになったので、今後使うときのためにメモしておきます。

ワードプレスには便利な関数などもあるので、そこまで実装に時間はかからないと思います。

検索フォームはこれをコピペでOK

検索フォームを実装するにあたり色々調べたのですが、ここではこのサイトで使っている検索フォームのコードをメモしておきたいと思います。

基本的にはコピペで使えると思いますが、お好みでCSSなどを書き換えてスタイルを変更してみてください。

まずは【searchform.php】というファイルを作る

まずはじめにテーマ内に【searchform.php】という新しいファイルを作成します。

これを作ると検索フォームの関数がこちらのファイルを参照してくれるようになります。

要はこのファイルで検索フォームのスタイルや仕様などを修正出来るようになるわけですね。

searchform.phpの中身はこんな感じです。

<form method="get" class="searchform" id="search_form" action="<?php echo esc_url( home_url('/') ); ?>">
  <input type="text" name="s" class="searchfield" id="search_word" value="" />
  <input type="submit" value="" alt="検索" title="検索" class="searchsubmit">
</form>

私は検索フォーム内にデフォルトでテキストを入れていませんが、入れたい場合は2行目の<input type=”text”>タグ内にplaceholder=””を追加するとデフォルトテキストを入れられます。

また<input type=”submit”>タグ内ではvalue=”□”にしてボタンにFontAwesomeのアイコンに変更しています。（CSS参照）

検索フォームのスタイルを書いていく

スタイルは通常通りCSSに記述していきます。

searchform.php作成時に各<input>タグにstyleをあてているので下記のように記述しています。

.searchform {
  position: relative;
}

.searchfield {
  font-size: 14px;
  width: 90%;
  margin: 3px;
  padding: 4px;
  border: solid 1px #bbb;
  border-radius: 8px;
  background-color: #efefef;
}

  .sp-search-form .searchfield {
    background-color: #fff;
    margin: 3px 4%;
  }

.searchsubmit {
  font-family: FontAwesome;
  font-size: 1.2em;
  position: absolute;
  top: 0;
  right: 8%;
  margin-top: 4px;
  padding: 0;
  cursor: pointer;
  color: #555;
  border: none;
  background: transparent;
}

.searchsubmit:hover {
  opacity: .6;
}

これに関してはあくまでこのサイトでの仕様なので、お好みで書き換えても問題ないと思います。

.searchsubmitのfont-familyでFontAwesomeを指定しています。

あとはお好みの場所に設置

searchform.phpを呼び出すにはワードプレスの関数を使います。

とてもシンプルで下記を設置したい場所に書くだけです。

<?php get_search_form(); ?>

検索結果を表示するページを作成する【search.php】

これで検索フォームを作成/設置出来るようになりましたが、検索結果が表示されるページを作る必要があります。

これもsearchform.phpと同じように【search.php】というファイルを作ると、自動的に検索結果はこちらのページを読み込んでくれます。

これを作成しないとindex.phpが読み込まれますので注意してください。

このページは検索結果の表示方法をデザインに合わせて作成すれば良いと思いますが、1点だけ【ユーザーの検索ワード】を呼び出す関数だけ普段あまり使わないのでメモしておきます。

『〇〇の検索結果』とよく表示される〇〇の部分ですね。

<?php the_search_query(); ?>

1つだけ注意点

上記で問題なく検索機能として使えるのですが、このままだと検索フォームが空欄のままでも検索をすることが出来てしまいます。

UIを考えると空欄の場合は検索が出来ない方が良いですので、jsに魔法の言葉を記入して終わります。

var search_form = $("#search_form");
search_form.submit(function(){
 var keyword = $('input[id=search_word]').val();
 if(keyword.match(/^[ 　\r\n\t]*$/)){
  return false;
 }
});

少々長くなってしまいましたがこれでこのブログと同じような検索フォームを作成することが出来ます。

また使うときのためにメモしておきます。