検索フォームをメニューバーに設置
検索フォームをヘッダーに設置することは簡単です。
| <?php get_search_form(); ?> |
これを表示したいところに記載するのみです。
インクルードタグ「get_search_form」
インクルードタグは、テーマディレクトリからseach.phpを読み込むタグです。
seach.phpがない時には検索フォームが生成されます。
テンプレートインクルードタグは、あるテンプレートファイル（例えば index.php）の中で、他のテンプレートファイル（例えば header.php）の HTML や PHP を実行するために使います。
特定のファイルを読み込む関数として「include()」インクルードが利用されますが、もっと簡単にしたものがインクルードタグです。
検索フォームを設置したい場所に貼るだけ
表示したいところに記載します。
| <?php get_search_form(); ?> |
とても簡単です。
例 ヘッダーに設置
次の画像は、header.phpの一番下とメニューバーの下に表示させています。
手順
- 子テーマにheader.phpを作成（コピー）
- 表示させたい位置に記述
- スタイルシート（style.css）でサイズや余白の調整をする
スタイルシートで微調整
テーマや好みに合わせて調整して下さい。
- 検索フォーム（id） #s
-
ボタン（id) #searchsubmit
#sと#searchsubmitを付けて、サイズなどを指定します。
例 検索フォームのサイズを200×20
サイズや余白を指定。（属性セレクタで指定する場合は最後に記載しています）
|
#s { #searchsubmit { |
検索フォームのカスタム
検索フォームを機能させるためにはテキストフォームと検索ボタンを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’
| <form role=”search” method=”get” id=”searchform” action=”<?php echo home_url( ‘/’ ); ?>”> <div> <label class=”screen-reader-text” for=”s”>Search for:</label> <input type=”text” value=”<?php echo esc_attr( get_search_query() ); ?>” name=”s” id=”s” placeholder=”search …”> <input type=”submit” id=”searchsubmit” value=”<?php echo esc_attr_x( ‘Search’, ‘submit button’ ) ?>” /> </div> </form> |
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
| <form role=”search” method=”get” class=”search-form” action=”<?php echo home_url( ‘/’ ); ?>”> <div> <label class=”screen-reader-text” for=”s”>Search for:</label> <input type=”search” class=”search-field” value=”<?php echo get_search_query() ?>” name=”s” title=”search” placeholder=”search …”> <input type=”submit” class=”search-submit” value=”<?php echo esc_attr_x( ‘Search’, ‘submit button’ ) ?>” /> </div> </form> |
検索フォームのサイズの調整
サイトのデザインや好みに合うように、スタイルシート（style.css）で調整します。
属性セレクタで指定
要素名[属性名=”<値>”]で指定します。
idやclassで指定できない場合、input要素やtype属性で指定します。
例 検索フォームのサイズの調整 要素名[属性名=”<値>”]
- input要素とclass
- input要素とsubmit属性
例えば200×20にした場合（数字は適当に入れてますので、調整してください）
|
input.search-field{ input[type=submit]{ |