まわるフリフリのフリ＞ WordPress（14）検索フォームを導入したい

　前回の＜nav＞メニューの流れで、今回はその中に配置したい検索フォームについて。前にも書いたけれど、当ブログにおいてこれほど記事数が多くなるとは考えてなくて、当然ながら目的の記事へのアクセスが非常に面倒なものになっていました。
　そこで検索フォームです。そこにキーワードを打ち込めば、目的の記事にすぐ辿り着けるハズ。ただ実際問題として、引っ越し先の制作日記で検索フォームが必要になるのは何時になるのだろうか…ということ。当ブログにおける音楽制作日記だったはずの「音楽とか」なんて、１年半も前に更新が止まって放置プレイされているのだ。なんだそれは。

検索フォームの導入工程

　そんな自ブログ内検索機能。WordPressに、検索フォームを配置するにはどうすれば良いのか。手元にある参考書や関連雑誌にも載ってないし、そもそもフォームってこれまで全く縁が無かったせいか、formタグについてのアレコレが全く分からない。つまり、自身のホームページにフォームを掲載する必要性って、これまでほとんど無かったのです。別にアンケート取るワケでもないし。

　しかしそんな事を言っていても仕方ないので、コチラの記事を参考にしました。まずはいつものように、その記事内容をジーーーーーッと眺めます。運が良いと何かが見えてきます。なにそれ。

WordPress での検索フォームの利用（Web Design Leaves）

　上の参考記事に書かれてある事の要点を、ザックリとまとめて作業の流れを見ると下図のようになる感じ。

作業手順（ザックリ）

「searchform.php」を作成して、この中に「検索フォーム」の各設定を記述。自分のテーマフォルダに保存。
index.php等の検索フォームを置きたい場所に＜?php get_search_form(); ?＞を記述。style.cssなどで、フォームの外観などを整えます。
検索結果を表示するための専用ファイル「search.php」を作成してテーマフォルダに保存。ページレイアウト等は基本的に、index.phpに準拠すればOK。

ボタン不要の衝撃

　必要な作業が掴めたところで、いくつかの参考記事（下記参照）を合わせ読みつつ検索フォーム作成開始。幾度か考え込んだりして、次第に各タグ等の意味が分かってきたのですが、今回一番驚いた衝撃の事実！

検索ボタン、実は不要。

　気が付けば、どの参考記事にも、そしてネット上にある無数の検索フォームのほとんどに付随している例の「虫眼鏡」アイコンがボタンの機能を果たしているのですが、貴方は人生において何度その虫眼鏡をクリックしたことがありますか！？
　つまり、テキストボックスに検索ワードを両手でタイプしてから、利き手を離し、その手でマウスを握ってポインタを検索ボタン（虫眼鏡アイコン）まで移動させ、それをクリック…そんな面倒くさいこと、誰もしません！キーワードを入力したら即リターンキーを押す、それだけのハズ。

　実際に自分で配置作業を始めてようやく気付いたそんな瑣末な事に、今、感動していたりします。では途中工程をザックリ省いて、かなり簡素に必要なパーツだけでまとめ上げた、その結果。

検索フォームを導入したい・searchform.php

<!-- searchform.php -->
<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
<input type="text" name="s" id="s" value="<?php the_search_query(); ?>" />
</form>

ボタン要素などはザックリと削除しました。

＜nav＞内への配置・index.php

		<nav>
		<div id="SWIP">SWIP</div>
		<div id="TWITTER">TWITTER</div>
		<div id="SERCH_BUTTOM"><img src="http://localhost:8888/WordPress/wp-content/uploads/img/sarch.png"></div>
		<div id="SERCH"><?php get_search_form(); ?></div>
		<div id="LOGO"><a href="<?php echo home_url(); ?>">FLFL</div>
		</nav>

4行目：でも虫眼鏡アイコンは検索窓って意味を伝えやすいので、飾りとして置いておきます。
5行目：get_search_form();ここに検索フォームを配置。

検索フォームのデザイン：CSS

.search-form{
  padding-top: 0px;
  margin-right: 0px;
}

.search-form input{
  vertical-align: bottom;
}

.search-form #s{
  width: 200px;
  height: 20px;
  line-height:0px;
  padding: 0px 0px 0px 6px;
  background: #eeeeee;
  border:1px solid #c7c7c7;
  font-size: 12px;
  font-weight: normal;
  color: #333;
}

参考記事にあったボタン要素のCSSは撤去。その他、見た目がブログに馴染むよう調整。

検索結果の表示・search.php

	<section id="code_name">
	<h1><?php the_search_query(); ?></h1>
	</section>

2行目：the_search_query();　検索キーワードをタイトルエリアに表示。
ヒットした記事タイトルだけ表示させて、本文は表示させません。
基本的には元ネタとなるindex.phpから、the_content();を省いて簡略化したものになります。

　いろいろ参考記事を読んで、ちょっとトリッキーな検索フォームにしてみようかしらん…とか思ったけれど、やはり途中で面倒くさくなって、いつものように超シンプルなフォームに落ち着きました。虫眼鏡アイコンは、それ用にdivとboxを設けて、画像を置いているだけ。

外部サイト参考記事
無料で利用できる検索フォーム12（CSS3,HTML5,jQuery）（CO-JIN）
CSSでデザインされた検索フォームを作成する（.dotown-LAB）
WordPressでサイト内検索をしてもヒットしない不具合の対応方法（キーワードノート）

動作確認

　以上で無事、検索フォームをナビゲーションバーに配置できたので、動作確認してみます。「緊張の夏」と入力してリターンキー。

　ヒットした記事があれば、検索結果に表示します（↓）。該当記事が見当たらない場合は何も表示しません。ところで、検索動作の不具合の対処として、コチラの記事を参考にしたのですが、検索フォーム内をクリックして、何も入力せずそのままリターンキーを押すとトップページ飛んでくれるのが、何気に便利だと思いました。

　念願だった検索フォームの設置が出来て、遂に目的の記事への到達が素早く行えるようになりました。いつの日か「フリフリのThunderbolt大作戦」にも設置したい。しばらくはこれで満足できそうなので、タグは後回しにして、次回はアイキャッチ画像の使い回しについて考えます。つづく。

　●~~＜nav＞エリアの項目には何が必要か。~~
　●~~今度は是非、検索フォームを導入したい。~~
　●タグも導入したい。
　●アイキャッチ画像の使い回しについて再考したい。
　●＜footer＞エリアの項目には何が必要か。

2014-06-26 ＞ VPS＆WordPress引っ越しメモ