サイト内検索のフォームを読み込むインクルードタグ【wordpressテーマ開発】

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;
}