任意の場所にWordPressの検索フォームを設置しカスタマイズする方法

ワードプレスの検索フォームは、一行のコードを挿入するだけで任意の場所に設置が簡単にできます。今回はWordpressの検索フォームを任意の場所に設置し、カテゴリーの絞り込み機能を付ける方法を解説いたします。

ワードプレスの任意の場所に検索フォームを挿入するコード

ワードプレスのお好きな場所に下記のコードを挿入するだけで検索フォームが表示されます

 <?php get_search_form(true); ?>

*phpのタグ（＜？phpと？＞）は、すでにphpタグの内側にある場合は必要ありません

コードは、管理画面左メニューの「外観」→「テーマの編集」より、テンプレートの構成ファイルのどこにでも追加して表示する事が可能です。代表的なテンプレートのコードは下記となります
・archive.php 投稿のリストを表示する為のコード
・header.php 全てのページのheadタグとbodyタグの一部を含み、一般的にはロゴとメニューまで出力します
・404.php ページが存在しないときに表示する４０４ページのコードです
・page.php １固定ページのテンプレートです
・single.php １投稿ページのテンプレートです

検索フォームをカスタマイズしてカテゴリーの絞り込み検索ができるようにする

それではこの検索フォームを改造して、カテゴリーで絞り込み検索できるようにしてみましょう。
「外観」→「テーマの編集」の右メニューのsearchform.phpを開きます。

＊無い場合は、下記のように記載して、ファイル名をsearchform.phpとし、ワードプレスのお使いのテーマフォルダ(wp-contents/theme/テーマ名)に追加してください

searchform.phpが無い場合

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="search-field" placeholder="" value="<?php echo get_search_query(); ?>" name="s" />
    <button type="submit" class="search-submit">検索</button>
</form>

それではこの検索フォームに、カテゴリーの絞り込み検索をする、ドロップダウンリストを追加します。

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="search-field" placeholder="" value="<?php echo get_search_query(); ?>" name="s" />
    <button type="submit" class="search-submit">検索</button>
    <?php wp_dropdown_categories('hide_empty=1&show_option_all=カテゴリーで絞り込む'); ?>
</form>

４行目のコードwp_dropdown_categoriesの部分を追加するだけで、カテゴリーによる絞り込み検索ができるようになりました。

特定のカテゴリーのみで絞り込み検索する

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="search-field" placeholder="" value="<?php echo get_search_query(); ?>" name="s" />
    <button type="submit" class="search-submit">検索</button>
    <?php wp_dropdown_categories('hide_empty=1&show_option_all=カテゴリー:全て&include=1,2,3'); ?>
</form>

show_option_allは全てのカテゴリーで検索する場合の選択名
includeは表示したいカテゴリーのIDをコンマ区切りで番号で指定します

これで任意のカテゴリーのみを表示して絞り込み検索できるようになりました。

カテゴリーIDは下記の手順で調べる事ができます

管理画面左メニュー投稿→カテゴリーより、任意のカテゴリーの表示をクリックします
するとURLが下記のようなページにジャンプしますので、cat=Xの数字がカテゴリーIDとなります
http://サイトのURL/?cat=3

ワードプレスで検索フォームのカスタマイズをされたい場合はWPドクターにご依頼ください