サイト内検索フォームを設置する
サイト内検索フォームを設置するには、下記のいずれかで行います。
- 設置したい場所で
get_search_form()を使用する - 自力で検索フォーム用HTMLを記述する
設置したい場所で get_search_form() を使用する
1の場合は、設置したい場所(header.phpなど)で下記のように記述します。
|
1 |
<?php get_search_form(); ?> |
CSSが入っていない場合、表示は下記のようになります。
HTMLとしては下記のように出力されます。
|
1 2 3 4 5 6 7 |
<form role="search" method="get" id="searchform" class="searchform" action="(サイトのURL)"> <div> <label class="screen-reader-text" for="s">検索:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /> </div> </form> |
タグをHTML5用にする
テーマのfunctions.phpに「add_theme_support('html5');」と記載すると、下記のようにHTML5用の出力になります。
|
1 2 3 4 5 6 7 |
<form role="search" method="get" class="search-form" action="サイトのURL"> <label> <span class="screen-reader-text">検索:</span> <input type="search" class="search-field" placeholder="検索 …" value="" name="s" title="検索:" /> </label> <input type="submit" class="search-submit" value="検索" /> </form> |
placeholder(プレースホルダ。入力前の透かし文字)が追加されたり、クラス名が一部変更になります。
タグをカスタマイズ
タグをカスタマイズしたい場合は、テーマに「searchform.php」というファイルを設置してその中に独自の検索フォーム用HTMLを記述してください。
(例)
|
1 2 3 4 5 6 7 |
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label> <span class="screen-reader-text">検索:</span> <input type="search" class="search-field" placeholder="検索 …" value="<?php echo get_search_query(); ?>" name="s" title="検索:"> </label> <input type="submit" class="search-submit" value="検索"> </form> |
自力で検索フォームを記述する
自力で検索フォームを記述する場合は、前の「タグをカスタマイズ」と同じようなタグを好きなところに配置するだけです。(こちらのほうが簡単かもしれません)
配置する際、タグに最低限必要なのは
- フォームのaction(送信先)をWordPressのサイトのURLにする
- 検索欄を含め、検索欄のnameをsにする
- 送信ボタンを含める
の3つです。
(最低限の検索フォームのタグの例)
|
1 2 3 4 |
<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <input type="search" value="<?php echo get_search_query(); ?>" name="s"> <input type="submit" value="検索"> </form> |
※「get_search_query()」というテンプレートタグは最低限必要なものではありませんが、検索ページでこのフォームが表示されるときに直前に検索したキーワードが表示されるようになり便利です。
更新履歴
- 2016/09/25
get_search_query()の前に echo が含まれていない箇所があった問題を修正しました。(抜けがあり申し訳ありません…) - 2016/09/11 フォーム用のHTMLでactionのURLを出力する部分にechoが含まれていなかった問題を修正しました。(URL階層が深いと検索がうまく動作しなくなっていました)
- 2015/12/27 初版