WordPressの検索カスタマイズ/ドロップダウンリストで絞込み

そんな風に考えているかたへ。

具体的には、こんな感じ↓でユーザーがカスタム投稿タイプ(以下の場合"ニュース"というカスタム投稿)を指定してのフリーワード検索をしたい時などです。

WordPressで「検索フォームを作ろう」となった時は、標準で用意されているget_search_form()を使うことが多いかと思います。

しかし、出力されるWordPressデフォルトの検索フォームはこれ↓で、投稿・固定ページ・カスタム投稿タイプの全てが検索対象になってしまうんですよね。

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

この検索フォームに色々と書き加えていくことで、投稿タイプを指定しつつフリーワード検索ができるようにカスタマイズしていきます。

検索対象のカスタム投稿タイプをドロップダウンリストで選べるようにする

以下をそのままコピペし、8〜10行目を環境に合わせて書き換えればOKです。

<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>
    <label>
        <select name="post_type" id="post_type">
            <option value="news">ニュース</option>
            <option value="product">製品</option>
            <option value="column">コラム</option>
        </select>
    </label>
    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

<option value="投稿タイプのスラッグ">任意の文字</option>

というふうにすることで特定の投稿タイプに絞ったフリーワード検索が実現できるようになります。