私は、WordPressのテーマを自作すると、デザイン関係の処理ばかり対応してしまい、ついつい検索機能の設置が面倒くさくて対応しないことが多いです。
ちゃんとしろよ！
CSSやJavaScriptを使って、狙い通りのデザインに仕上げていく作業はホントに楽しい！
自然と口角が上がりながら作業していると思います。それこそ、時間の感覚を忘れるぐらい。
ところが、検索機能の実装となるとそうはいかない。
デザインのコーディング作業があらかた終わりかけのときに出てくる作業になってしまうことが多く、次のサイトのコーディングに移行してしまっている状態が多いです。
なんとなく、面倒くさい気配をプンプン感じてしまうんでしょうね。
おい！
大人として、これではいけません！
そこで今回は、イチからWordPressの検索機能をキチンと実装してみようと思います。
※今回は、Googleのサイト内検索は実装しません。
実装するには？
WordPressの検索機能は、searchform.php（検索フォーム）とsearch.php（検索結果を表示する）テンプレートで実装できます。
searchform.php
searchform.phpは、検索フォームのテンプレートです。
自分のテーマ内の表示したい箇所に読み込んで使用します。
今回は、検索ボックス内にFontAwesomeの虫眼鏡アイコンを表示するシンプルなものを作ってみます。
<form action="自分のサイトURL" method="get" id="">
<input type="text" id="s" name="s" placeholder="キーワードを入力"><button type="submit" id=""><i class="fas fa-search"></i></button>
</form>Check！
- formタグのaction属性の値は「自分のサイトのURL」
- formタグのmethod属性の値は「get」
- inputタグのname属性の値は「s」
search.php
search.phpは、検索フォームで入力された検索結果を表示するテンプレートです。
検索結果ページは、カテゴリーやタグアーカイブのような一覧画面を表示させたいので、そのテンプレートファイルを修正して使用します。
<?php
if(have_posts() ):
// 検索結果の有無
if ( isset($_GET['s']) && empty($_GET['s']) ) {
// 検索キーワードが未入力の場合
echo '<h2 class="text-center">検索キーワード未入力</h2>';
} else {
// 検索キーワードと該当件数を表示
echo '<h2 class="text-md-center">“' . $_GET['s'] . '”の検索結果： ' . $wp_query->found_posts . ' 件</h2>';
}
while(have_posts() ): the_post();
// 検索内容に一致する記事をループ
endwhile;
else:
// 検索結果がない場合
echo '<h2 class="text-md-center">検索されたキーワードにマッチする記事はありませんでした。</h2>';
endif;
?>検索フォームを表示する
get_search_form() で、作成した検索フォームを表示したい箇所で呼び出します。
<?php get_search_form(); ?>これで、検索フォームが表示されます。
まとめ
いかがでしょうか？
結構、難しくなかったんじゃないかなと思います。
ページの多いサイト運営していくと、サイトに訪れたユーザーのために検索窓を設置して、サイトの利便性を図るということも大事になってきます。
また、ユーザーはどのようなキーワードで検索しているかなどの有益な情報を得ることもできます。
ぜひ、検索フォームを設置して、ユーザーも運営者も使いやすいサイトにしていきましょう！
最後まで読んでいただきありがとうございました。ではまた。バイバイ！