WordPress

get_search_form() – 検索フォームのカスタマイズ

get_search_form()のカスタマイズするにはfunctions.phpでカスタマイズするかsearchform.phpファイルをテーマディレクトリに作成しカスタマイズする2パターンがあります。

get_search_form()の仕組み

get_search_form()を適当な場所に設置することで検索フォームが出力されます。特にカスタマイズせずこの関数が実行すればwp-includes/general-template.php内容が出力されます。

ソース：https://developer.wordpress.org/reference/functions/get_search_form/#source

基本的に初期の設定だとHTML4仕様のフォームを出力します。もしHTML5対応のフォームを出力したい場合functions.phpに下記のコードを記述します。

// 検索フォームのHTML5対応
function setup_theme(){
	add_theme_support( 'html5', array( 'search-form' ) );
}
add_action( 'after_setup_theme', 'setup_theme' );

カスタマイズの優先順位

get_search_form()のカスタマイズの読み込み優先度はfunctions.php > searchform.phpです。もしsearchform.phpを作成しても読み込まれない場合functions.phpで制御されている可能性があるので既存テンプレートをカスタマイズする場合は確認してみましょう。

ファイル構成

My_Theme
    │  footer.php
    │  functions.php
    │  header.php
    │  index.php
    │  searchform.php
    │  search.php
    │  style.css
    │
    ├─image
    │      avatar.jpg
    │
    └─template
            main.php

カスタマイズするうえでの注意点

検索フォームはGETを実行する必要があります。<form>にmethod="GET"がなくてもデフォルトの設定で"GET"として扱われますが記述しておくようにしましょう。

またinputタグにname="s"とありますがこちらも必要なパラメーターになります。これがないと意図しない検索結果となります。またname="post_type"に変更して固定ページを除外することもできますが、これはあくまでも検索フォームだけの制御だけなので厳密に設定したい場合はリダイレクト設定をしておくのが無難です。

<input type="search" name="post_type" class="search_field" placeholder="<?= esc_attr_x( 'Search &hellip;', 'placeholder' ); ?>" value="<?= get_search_query(); ?>" />

get_search_form関数をカスタマイズする

functions.phpの場合

add_filterを使ってフォームの出力を変更します。こちらは変数に<form>関連のタグを埋め込む方法なので抵抗ある人にとっては読み飛ばして大丈夫です。次のsearchform.phpでのカスタマイズ方法をご覧ください。

funcitons.phpに下記のコードを埋め込みます。

<?php

function cstm_search_form($form){
	$form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
	<label>
		<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s">
	</label>
	<input type="submit" class="search-submit" value="' . esc_attr_x( 'Search', 'submit button' ) . '" />
	</form>';

	return $form;
}
add_filter('get_search_form', 'cstm_search_form');

searchfrom.phpの場合

searchfrom.phpをテーマディレクトリに作成し下記のコードを埋め込みます。

<form role="search" class="search_form" method="get">
    <div class="form_erea">
        <span class="search_icon"></span>
        <input type="search" class="search_field" placeholder="<?= esc_attr_x( 'Search &hellip;', 'placeholder' ); ?>" value="<?= esc_attr( get_search_query() ); ?>" name="s" />
        <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
    </div>
</form>

検索結果ページについて

もっと簡単に結果ページを表示させたいのであればindex.phpで完結させることです。記事ページ+検索結果ページがifの内容で、記事がなければelseの内容が表示されます。

<?php if(have_posts()): 
        while(have_posts()) : the_post(); ?>
    get_template_part('template/main');    
<?php
    endwhile;
else:
    get_template_part('template/404');
endif; ?>

検索結果専用のページを作る(search.php)

search.phpを作成することで検索結果専用のページを作成することが可能です。ここでは説明を割愛しますが興味がある方はご自由に調べてみてください。もしこのファイルを使わないのであればsearch.phpは削除しましょう。上記の簡単な結果で出力したいのであればそちらの内容が上書きされsearch.phpのファイルが優先されますので気を付けてください。

Create a Search Page – WordPress.org Documentation