サーチフォームを入れる
サイト内で検索させるためのサーチフォームというのは各サイト必ずと言ってついている。サイト内を見て回ってもらうためには必需品だと思うんです。
サイト内検索が無いと、記事が溜まってくると自分で探すこともままなりません。
なのに自分のページにサーチフォームが無い事に今更ながらに気が付いたので設置します。
設置方法
サイト内検索機能を実装するためには、最低限以下の二つが必要になります。
- 検索フォームテンプレート(テンプレート化、または直書き)
- 検索結果ページテンプレート
Word Pressでは主にphpで大切な部分は処理してくれることは御存じだと思うので最低限必要なものだけ付けてみて、後にページにあったレイアウト、デザインに変えていこうと思っています。今回前編として設置するという部分をご紹介します。
検索フォームのテンプレートを作成
テーマディレクトリにテンプレートファイル「searchform.php」を作成します。設置したい場所に直に書き込んでも良いのですが、いろんな場所に付けたりできるようにしたいし、すっきりするので検索フォームは呼び出して使えるようにします。
以下のコードをserachform.phpに記載して保存します。
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
	<input type="text" name="s" id="s" placeholder="SEARCH"/>
	<button type="submit">検索</button>
</form>bloginfo(url)から検索対象のサイトを持ってくるので特に設定する必要もないですね。
検索ワードを入れる場所に「SEACH」と出るようにしときましょう。[placeholder]は趣味です(*´艸`)
無くても構いません
そしてボタン名をとりあえず検索にしときます。
とりあえずフォームのテンプレで最低限のすることはこれだけです。
get_search_form で検索フォームの呼び出し
作った検索フォームのテンプレートは、関数 get_search_form で好きな場所に呼び出すことができます。
次のコードを、検索フォームを設置したい場所に追加します。
<?php get_search_form(); ?>これを記載するだけで何個でも好きな場所に貼る事が出来ます。
検索結果ページの作成
最後に検索結果を表示するためのページ search.php を作成します。
テーマディレクトリにテンプレートファイル「search.php」ファイルを作成し、作ったファイルに次のコードを追加します。
<?php if (have_posts()): ?>
<?php
	if (isset($_GET['s']) && empty($_GET['s'])) {
		echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
	} else {
		echo '“'.$_GET['s'] .'”の検索結果:'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
	}
?>
	<ul>
		<?php while(have_posts()): the_post(); ?>
		<li>
			<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
		</li>
		<?php endwhile; ?>
	</ul>
<?php else: ?>
	検索されたキーワードの記事はありませんでした
<?php endif; ?>後はおなじみの!?関数だらけですがまずは「$_GET[‘s’]」でキーワードがあるのかないのか、あった場合のその検索ワードが何件あるのか表示しました。
そして後半[ul]でその検索ワードに引っかかった記事をリスト化します。
検索ワードで引っかからなかった場合最後の部分に記載している通り出力されます。
表示結果

検索フォームをBLOGのヘッダー直下に入れるとこんな感じになりました。

検索結果は「写真」で調べてみたら19件出てきました。
特に飾ることも、検索結果に表示させるものもタイトルに絞ったのでとても簡略的ですが、今回説明した分だけで検索フォームと検索結果ページを作る事が出来ました。
まとめ
今回は検索フォームを設置するという事を目的に書いてみました。
しばらくはこの仕様にしているのでBLOGのページよりサイト内検索を試してみてください♪
期間を開けて後半、当ページに合ったデザインに改良する記事も書いていこうと思いますのでお楽しみに。
back no
 
	 /nao120i
/nao120i 
    	 
                         
								
						
足跡残してください♪