wordpressにはget_search_formという関数があり、searchform.phpに作成されたサイト内検索のフォームをインクルードすることができます。
searchform.phpが存在しない場合は、wordpressに内蔵されたサイト内検索フォームをインクルードします。
一般的なサイト内検索であれば、わざわざsearchfotm.phpを作成する必要もないかなと思います。
get_search_formの使い方
非常に簡単で<?php get_search_form(); ?>を記述するだけです。
引数にfalseを設定して<?php get_search_form(false); ?>にすると、出力はされず文字列として扱うことができます。
まあでも、これはあんまり使うことはないでしょう。
html4からhtml5に変更
get_search_formでwordpressに内蔵されたサイト内検索のフォームをインクルードすると、html4となっています。
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</div>
</form>
WordPress 3.6 以降になると、html5に変更することができます。
functions.phpに以下を記述することでhtml5となります。
add_theme_support( 'html5', array( 'search-form' ) );
html5に変更すると以下のようなサイト内検索フォームが出力されます。
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>
サイト内検索のフォームを自分で作成する場合
自作する場合はsearchform.phpにフォームを作成します。
<form action="/" method="get">
<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
<button type="submit">検索</button>
</form>
注意するべきところは、メソッドがGETでなければならないというところくらいですかね。
検索ワードのinputタグのvalue値にthe_search_queryを設定することで、検索ワードを出力することができます。
フックでサイト内検索のフォームを作成
フックを使ってテンプレートを修正することもできますので、そのソースコードを紹介します。
get_search_formのフックを使い、現状のサイト内検索のフォームをhtmlタグを文字列で取得し、それを加工したあとに返却しています。
add_filter('get_search_form', 'my_search_form');
function my_search_form($form)
{
// 現状のフォームの前に一文追加
$form = '<p>フォームの前にテキストを差し込む</p>' . $form;
return $form;
}
コメント