検索フォーム

検索フォームを簡単設置&デザイン



検索フォームをメニューバーに設置

検索フォームをヘッダーに設置することは簡単です。

これを表示したいところに記載するのみです。

インクルードタグ「get_search_form」

インクルードタグは、テーマディレクトリからseach.phpを読み込むタグです。

seach.phpがない時には検索フォームが生成されます。

テンプレートインクルードタグは、あるテンプレートファイル(例えば index.php)の中で、他のテンプレートファイル(例えば header.php)の HTML や PHP を実行するために使います。

特定のファイルを読み込む関数として「include()」インクルードが利用されますが、もっと簡単にしたものがインクルードタグです。 

検索フォームを設置したい場所に貼るだけ

表示したいところに記載します。

とても簡単です。

例 ヘッダーに設置

次の画像は、header.phpの一番下とメニューバーの下に表示させています。

検索フォーム

手順

  1. 子テーマにheader.phpを作成(コピー)
  2. 表示させたい位置に記述
  3. スタイルシート(style.css)でサイズや余白の調整をする

スタイルシートで微調整

テーマや好みに合わせて調整して下さい。

  • 検索フォーム(id) #s
  • ボタン(id) #searchsubmit

#sと#searchsubmitを付けて、サイズなどを指定します。

例 検索フォームのサイズを200×20

サイズや余白を指定。(属性セレクタで指定する場合は最後に記載しています)

検索フォームのカスタム

検索フォームを機能させるためにはテキストフォームと検索ボタンをwebサイトに設置するinput要素が必要です。これをコントロール要素とも言います。

関数リファレンス/get search form – WordPress Codex 日本語版を参考にして下さい。

label要素

label要素とは、フォームの部品(コントロールする要素)とラベルを関連付ける要素で、ラベルを関連付けることによって、フォームの部品を選択し実行できるようになります。関連付ける方法は、以下の2つの方法があります。

  • フォームの部品(input要素など)にid属性を設定し、そのidをlabel要素のfor属性で指定する。
  • labelタグでフォームの部品を囲む。

フォームの部品

  部品 ソース(type属性に何をするのかがわかる)
テキストフィールド text <input type=”text” name=”s” value=” “>
実行ボタン submit <input type=”submit” name=”s” value=” “>
取り消しボタン reset <input type=”reset” name=” ” value=” “>
パスワードフィールド password <input type=”password” name=” “>

上記はフォームの部品の一部です。他チェックボックス、パスワード入力フォームなどもあります。

  • input要素(フォーム部品) id=”s”
  • label要素 for=”s”
  • テキストフィールド input type=’text’ name=’s’
  • 実行ボタン input type=’submit’

HTML5フォーム

WordPress 3.6 以降、テーマは下記のコードを使って HTML5 マークアップのサポートを明確に選択できるようになりました。

add_theme_support( ‘html5’, array( ‘search-form’ ) );

デフォルトのHTML4フォームとHTML5フォームの違い

  HTML4フォーム HTML5フォーム
input タグ type=”text” type=”search”
id id=”searchform” id=”searchsubmit” id を持つ要素がない
class   class=”search-form”
placeholder   placeholder 属性がある

idを持つ要素がないので、複数の検索フォームを配置できます。

placeholder 属性

テキストフィールドに初期値を指定します。「検索」や「Search」などを表示します。

  • 検索フォーム .search-field
  • ボタン .search-submit

検索フォームのサイズの調整

サイトのデザインや好みに合うように、スタイルシート(style.css)で調整します。

属性セレクタで指定

要素名[属性名=”<値>”]で指定します。

idやclassで指定できない場合、input要素やtype属性で指定します。

例 検索フォームのサイズの調整 要素名[属性名=”<値>”]

  • input要素とclass
  • input要素とsubmit属性

例えば200×20にした場合(数字は適当に入れてますので、調整してください)