プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法
2017年4月28日
当ブログはWordPressで作成されているのですが、最近まで検索機能をつけておらずやっぱりサイト内検索があった方が便利だ!と、ブログ開設から1年経った今さらながら思ったので、検索機能を実装することにしました。
調べてみるとプラグインを使って実装する方法が多く紹介されていたのですが、僕の場合はキーワード検索のみができればいいと思ったのでプラグインを使わなくても簡単に実装できる方法を選択しました!
下記に検索機能の実装方法を記載しますので、どなたかの参考にでもなれば幸いです。
検索機能に必要な関数
1 |
<?php get_search_form(); ?> |
極論、このget_search_form()関数を検索フォームを表示したい箇所に記述するだけで検索機能が実装できます!笑
しかし、上記の関数のみだと下のような味気ないデフォルトの検索フォームが表示され、カスタマイズもできないので寂しい感じに、、、

これだとさすがに検索する気がなくなるので、もう一手間加えて自分好みの検索フォームに変えていきたいと思います!
そこで「searchform.php」というテンプレートを作って、使用しているthemesディレクトリ直下に入れてあげます。
searchform.phpテンプレートを作ることで、先ほどのデフォルトの検索フォームからカスタマイズができるようになります。
簡単に言うと、classをつけてcssを適用できるようにするって感じですかね。
そのsearchform.phpテンプレートの中身はこのように記述します。
1 2 3 4 5 6 7 8 9 |
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div> <label class="screen-reader-text">キーワードで探す</label> <div class="serchformWrap"> <input type="text" value="" name="s" id="s" class="searchEl searchText" placeholder="search" /> <input type="submit" id="searchsubmit" class="searchEl searchBtn" value="検索する" /> </div> </div> </form> |
- form要素のaction属性にはWordPressのホームURL(home_url関数)を指定してあげる
- name属性には、「s」のinput要素を入れる
※home_url関数部分については、/でも問題なく動いていました。
ここで注意したいのが、name属性に「s」以外の文字を入れるとフォームが動作しなくなるのでそこは気をつけた方が良いかと思います。理由はわかっていないのですが、WordPressの仕様の問題なのですかね。
これでcssを適用することができるので、僕もとりあえず装飾をしてみました!

このようにプラグインを使わなくても、検索機能は簡単に実装できるので、ぜひ試してみてください!