WordPressの検索フォームをカスタマイズしてみる

 WordPress には記事の中身をキーワードで検索し、該当する記事を一覧表示してくれる機能があります。一番簡単な設置方法はサイドバーに表示させることです。テーマをカスタマイズすることができるなら、ページトップのヘッダーに表示させることもできます。

 カテゴリーやタグクラウドを使えば、ある程度の絞込みをすることは可能ですが、ユーザーの利便性の向上ためにぜひ挑戦してみてください。デザインのカスタマイズと併せて解説したいと思います。

検索フォームの表示

サイドバーに検索フォームを表示するだけなら簡単なのです。管理画面の「外観」→「ウィジェット」に移動、利用できるウィジェットのなかに「検索」とあるので、それを追加するだけです。

なにもカスタマイズしていなければ、シンプルな検索フォームが表示されるはずです。余計なラベルなどが表示されていますが。

でも、どうせならボタンのデザインなどをカスタマイズしたいですよね?

テーマフォルダにsearchform.phpを作成する

お使いのテーマのフォルダのなかに新しく searchform.php を作成します。ソースコードは次のように記述します。

ひとつ注意するのは、検索キーワードを入力するテキストボックスの name 属性は、必ず「s」にするようにしてください。あとは CSS でカスタマイズをしやすいように、わかりやすいクラスなどを指定するとよいでしょう。

スタイルシートのカスタマイズサンプルです。

先ほどサイドバーに表示されていた検索フォームがカスタマイズされます。

サイドバー以外の表示方法

サイドバー以外に表示したい場合にはどうしたらよいのでしょうか。例えば、このようにしたいとします。

WordPress にはサイドバー以外に検索フォームを表示するためのテンプレートタグが用意されています。表示したい場所に次の一行を追加するだけです。これにより、searchform.php で指定された HTML を出力してくれるようになります。

今回のようにページトップのヘッダー部分に表示するなら、header.php は次のようになるかと思います。

デザインのカスタマイズ方法はおおまかにふたつあるかと思います。

header_inner クラスに overflow:hidden; を指定していますが、これは header_inner_left・header_inner_right の両クラスを float を使って左右に配置しているためです。クリアフィックスですね。これがないと表示が崩れます。最後にマージンやパッディングで微調整してください。

もうひとつの方法がこちら。

header_inner_right クラスに position:absolute; を指定して座標により位置を決定します。親要素が header_inner クラスになっているので、position:relative; を指定し忘れないようにしてください。微調整にはマージンやパッディングを使わず、直接座標を指定すればよいでしょう。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP