検索ボックスの作成〜カテゴリ別で検索など

検索機能はウィジェットを使用すれば簡単ですが、少しカスタマイズしようとなると自分で作成しなければなりません。

ノーマルな検索ボックスの作成とその仕組み

サーチボックスはinputタグで簡単に作成できます。
問題はWordPressの検索機能の仕組みです。一見難しそうですが、仕組みを利用するのはアドレスをうまく使えば簡単にできます。

検索用のURLはサイトアドレスの後に「?s=検索キーワード」をつけるだけです。あとはWordPressが検索してくれます。
この仕組みさえ解れば自作のサーチボックスを動かすことができます。

具体的なコードです。

<form method="get" action=" <?php echo home_url(); ?>/">
<input type="search" placeholder="キーワード" name="s">
<input type="submit" class="button" value="検索">
</form>

ポイントはactionにphpでecho home_url();　としてサイトアドレスを呼び出します。php終了後に/を入れています。
ここのサイトだと itstudio.co/ となります。
次に「?s=検索キーワード」部分はname=“s”とすることでsubmitボタンをクリックするとgetでinputタグに入力された値が検索キーワードとなって送られます。
ここのサイトだと　「itstudio.co/?s=検索キーワード」の状態になってくれます。
つまりinput type=”search” name=“s”のサーチボックスに入力した値が検索されることになるのです。

上記のコードのサーチボックスは使い回しをできるように別ファイルとして保存します。
ファイル名は「searchform.php」とします。
「searchform.php」を呼び出すテンプレートタグは以下です。

<?php get_search_form(); ?>

検索ボックスで検索した後その結果を表示するテンプレートはテンプレート階層に従って「search.php」が無ければ「index.php」で表示されます。
「search.php」は作成しておいた方が良いでしょう。

「search.php」のコード例です。

<?php get_header(); ?>
  <section>
			<h1><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h1>
			<?php if(have_posts()) : ?>
				<ul class="PostList">
				<?php while(have_posts()):the_post(); ?>
					<li>
						<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
						<h2><?php the_title(); ?></h2>
						<?php echo mb_substr(get_the_excerpt(),0, 150); ?><br />
						</a>
					</li>
				<?php endwhile; ?>
				</ul>
			<?php else: ?>
				<div>
					<p>該当する記事はありませんでした。</p>
				</div>
			<?php endif; ?>
			<div id="pager">
				<?php if ( $wp_query->max_num_pages > 1 ): ?>
					<div id="prev"><?php next_posts_link('PREV'); ?></div>
					<div id="next"><?php previous_posts_link('NEXT'); ?></div>
				<?php endif; ?>
			</div>
  </section>
<?php get_footer(); ?>

カテゴリ内の検索を表示したい

あるカテゴリ内だけの検索を表示したい場合はURLはサイトアドレスの後に「?s=玉子&cat=4」をつけるだけです。これもformタグ内にselectタグなどでname=”cat”として値に選択したいカテゴリを設定しておきます。以下具体的なコードです。

<form method="get" action=" <?php echo home_url(); ?>/">
<input type="search" class="searchText" placeholder="キーワード" name="s" x-webkit-speach lang="ja">
<select name="cat">
  <option value="4">洋食</option>
  <option value="2">和食</option>
  <option value="5">中華</option>
</select>
<input type="submit" class="button" value="検索">
</form>

検索の出口でWP_Queryをカスタマイズするよりも入り口で指定してしまえばよいという考え方です。