検索フォームにカテゴリ選択ドロップダウンボックスを追加
検索を統合する最も一般的な方法の1つは、訪問者が自分で結果プールを制御できるようにすることです。これは通常、検索と組み合わせて、ドロップダウン（セレクトボックス）から特定のカテゴリを選択できるようにする形式で提供されます。
この記事では、検索フォームにカテゴリドロップダウンを追加するための3つの異なるアプローチをどのように達成できるかを説明します。
- カテゴリドロップダウン付きの独自の検索フォームを構築する
- カテゴリドロップダウンを含めるようにショートコード拡張機能をカスタマイズする
- カテゴリ選択ドロップダウンを含めるようにデフォルトの検索フォームをカスタマイズする
独自の検索フォームを構築する
独自の検索フォームを構築するには、テーマファイルを編集して、含めたい入力フィールドとボタンを追加します。最も基本的なレベルでは、フォームを表示したいテーマテンプレートファイルに以下を追加できます。
| <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="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ); ?>" /> | |
| </label> | |
| <?php | |
| // output all of our Categories | |
| // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories | |
| $swp_cat_dropdown_args = array( | |
| 'show_option_all' => __( 'Any Category' ), | |
| 'name' => 'swp_category_limiter', | |
| ); | |
| wp_dropdown_categories( $swp_cat_dropdown_args ); | |
| ?> | |
| <input type="submit" class="search-submit" value="Search" /> | |
| </form> |
WordPressによって提供されるデフォルトの検索フォームに基づいたこのフォームは、検索クエリ用のフィールド、すべてのカテゴリを含むセレクトボックス、および検索をトリガーするボタンを出力します。「すべてのカテゴリ」ラベルを定義し、ドロップダウンのnameをswp_category_limiterに設定するためにwp_dropdown_categories()に渡された引数に注意してください。
フォームが配置されたら、最後のステップは、検索を実行する際にSearchWPに送信されたドロップダウン値も考慮するように指示することです。これを行うために、Modを使用します。ドロップダウンで送信されたカテゴリIDを使用して、検索結果プールを選択したカテゴリに制限します。
注意：探している変数は、wp_dropdown_categories()によって出力されたselectのnameを設定するために使用した変数であることに注意してください。
All hooks should be added to your custom SearchWP Customizations Plugin.
| <?php | |
| // Limit SearchWP results to chosen Category from dropdown. | |
| // @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/ | |
| add_filter( 'searchwp\query\mods', function( $mods, $query ) { | |
| global $wpdb; | |
| // Only proceed if a Category was chosen from the dropdown. | |
| if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) { | |
| return $mods; | |
| } | |
| // Optional: only proceed if we're using a specific Engine. | |
| // if ( 'default' !== $query->get_engine()->get_name() ) { | |
| // return $mods; | |
| // } | |
| $alias = 'swpkbcat'; | |
| $tax_query = new WP_Tax_Query( [ [ | |
| 'taxonomy' => 'category', | |
| 'field' => 'term_id', | |
| 'terms' => absint( $_GET['swp_category_limiter'] ), | |
| ] ] ); | |
| $tq_sql = $tax_query->get_sql( $alias, 'ID' ); | |
| $mod = new \SearchWP\Mod(); | |
| // If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that. | |
| if ( ! empty( $tq_sql['join'] ) ) { | |
| // Queue the assumed wp_posts JOIN using our alias. | |
| $mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) { | |
| return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id"; | |
| } ); | |
| // Queue the WP_Tax_Query JOIN which already has our alias. | |
| $mod->raw_join_sql( $tq_sql['join'] ); | |
| // Queue the WP_Tax_Query WHERE which already has our alias. | |
| $mod->raw_where_sql( '1=1 ' . $tq_sql['where'] ); | |
| } else { | |
| // There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already | |
| // exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod | |
| // will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query. | |
| $mod->set_local_table( $wpdb->posts ); | |
| $mod->on( 'ID', [ 'column' => 'id' ] ); | |
| $mod->raw_where_sql( function( $runtime ) use ( $tax_query ) { | |
| $tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' ); | |
| return '1=1 ' . $tq_sql['where']; | |
| } ); | |
| } | |
| $mods[] = $mod; | |
| return $mods; | |
| }, 20, 2 ); |
このスニペットは、ドロップダウンから空でない値が選択されたことを確認します。もしそうであれば、私たちのModが構築され、Queryに追加されます。
SearchWPのショートコード拡張機能を使用する
SearchWPのショートコード拡張機能を使用すると、WordPressショートコードを使用して検索フォームを簡単に作成し、検索結果ページを制御できます。以下は、選択できるカテゴリドロップダウンを含む検索フォームの例です。
All hooks should be added to your custom SearchWP Customizations Plugin.
| <?php | |
| // UNCOMMENT THIS IF YOU WANT TO USE SHORTCODES IN WIDGETS | |
| // add_filter( 'widget_text', 'do_shortcode' ); | |
| // output the categories dropdown | |
| function my_searchwp_shortcodes_inject_categories() { | |
| echo '<p class="searchwp-shortcodes-categories">'; | |
| // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories | |
| $swp_cat_dropdown_args = array( | |
| 'show_option_all' => __( 'Any Category' ), | |
| 'name' => 'swp_category_limiter', | |
| ); | |
| wp_dropdown_categories( $swp_cat_dropdown_args ); | |
| echo '</p>'; | |
| } | |
| add_action( 'searchwp_shortcodes_after_input', 'my_searchwp_shortcodes_inject_categories' ); |
これで検索フォームの準備ができました。検索フィールドと送信ボタンの間にカテゴリのドロップダウンが自動的に含まれます。このスニペットでは、ドロップダウンのnameをswp_category_limiterにカスタマイズしました。これは次に使用します。
これまでのところ、訪問者が結果の制限カテゴリを定義できるドロップダウンを出力するようにフォームを設定しただけですが、フォームが送信されたときにその情報を取得し、SearchWPに通知する必要があります。
これを行うために、Modを使用します。ドロップダウンで送信されたカテゴリIDを使用して、検索結果プールを選択したカテゴリに制限します。
注意：探している変数は、wp_dropdown_categories()によって出力されたselectのnameを設定するために使用した変数であることに注意してください。
All hooks should be added to your custom SearchWP Customizations Plugin.
| <?php | |
| // Limit SearchWP results to chosen Category from dropdown. | |
| // @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/ | |
| add_filter( 'searchwp\query\mods', function( $mods, $query ) { | |
| global $wpdb; | |
| // Only proceed if a Category was chosen from the dropdown. | |
| if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) { | |
| return $mods; | |
| } | |
| // Optional: only proceed if we're using a specific Engine. | |
| // if ( 'default' !== $query->get_engine()->get_name() ) { | |
| // return $mods; | |
| // } | |
| $alias = 'swpkbcat'; | |
| $tax_query = new WP_Tax_Query( [ [ | |
| 'taxonomy' => 'category', | |
| 'field' => 'term_id', | |
| 'terms' => absint( $_GET['swp_category_limiter'] ), | |
| ] ] ); | |
| $tq_sql = $tax_query->get_sql( $alias, 'ID' ); | |
| $mod = new \SearchWP\Mod(); | |
| // If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that. | |
| if ( ! empty( $tq_sql['join'] ) ) { | |
| // Queue the assumed wp_posts JOIN using our alias. | |
| $mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) { | |
| return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id"; | |
| } ); | |
| // Queue the WP_Tax_Query JOIN which already has our alias. | |
| $mod->raw_join_sql( $tq_sql['join'] ); | |
| // Queue the WP_Tax_Query WHERE which already has our alias. | |
| $mod->raw_where_sql( '1=1 ' . $tq_sql['where'] ); | |
| } else { | |
| // There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already | |
| // exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod | |
| // will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query. | |
| $mod->set_local_table( $wpdb->posts ); | |
| $mod->on( 'ID', [ 'column' => 'id' ] ); | |
| $mod->raw_where_sql( function( $runtime ) use ( $tax_query ) { | |
| $tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' ); | |
| return '1=1 ' . $tq_sql['where']; | |
| } ); | |
| } | |
| $mods[] = $mod; | |
| return $mods; | |
| }, 20, 2 ); |
このスニペットは、ドロップダウンから空でない値が選択されたことを確認します。もしそうであれば、私たちのModが構築され、Queryに追加されます。
カテゴリドロップダウンを含めるようにデフォルトの検索フォームを変更する
WordPressでは、多くのテーマに含まれるデフォルトの検索フォームをフィルタリングできます。これはget_search_form()の呼び出しによって生成され、テーマディレクトリにsearchform.phpという名前のファイルを含めるか、get_search_formフィルターを介して完全にカスタマイズできます。この例ではget_search_formフィルターを使用します。このフィルターを使用するには、テーマのfunctions.phpファイルで作業します。
サイトのデフォルトの検索フォームにカテゴリのドロップダウンを含めるには、次のスニペットを使用します。
All hooks should be added to your custom SearchWP Customizations Plugin.
| <?php | |
| // adds a Categories dropdown to the search form | |
| function my_searchwp_get_search_form_with_categories_dropdown( $form ) { | |
| ob_start(); ?> | |
| <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> | |
| <label> | |
| <span class="screen-reader-text">Search For</span> | |
| <input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" /> | |
| </label> | |
| <?php | |
| // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories | |
| $swp_cat_dropdown_args = array( | |
| 'show_option_all' => __( 'Any Category' ), | |
| 'name' => 'swp_category_limiter', | |
| ); | |
| wp_dropdown_categories( $swp_cat_dropdown_args ); | |
| ?> | |
| <input type="submit" class="search-submit" value="Search" /> | |
| </form> | |
| <?php return ob_get_clean(); | |
| } | |
| add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' ); |
ここで使用されているフォームコードは、WordPressに付属するデフォルトの検索フォームに基づいています。テーマが以前にフォームをカスタマイズしていて、単にドロップダウンを追加したいだけの場合があります。フォームコードをテーマに付属するものと一致するように変更し、カテゴリのドロップダウンを表示したい場所にそのコードサンプルの11〜18行を追加するだけです。
このスニペットは検索フォームのみを変更します。ドロップダウンから値を取得し、SearchWPに結果を特定のカテゴリに制限するように指示する必要があります。
これを行うために、Modを使用します。ドロップダウンで送信されたカテゴリIDを使用して、検索結果プールを選択したカテゴリに制限します。
注意：探している変数は、wp_dropdown_categories()によって出力されたselectのnameを設定するために使用した変数であることに注意してください。
All hooks should be added to your custom SearchWP Customizations Plugin.
| <?php | |
| // Limit SearchWP results to chosen Category from dropdown. | |
| // @link https://searchwp.com/documentation/knowledge-base/category-select-dropdown/ | |
| add_filter( 'searchwp\query\mods', function( $mods, $query ) { | |
| global $wpdb; | |
| // Only proceed if a Category was chosen from the dropdown. | |
| if ( ! isset( $_GET['swp_category_limiter'] ) || empty( intval( $_GET['swp_category_limiter'] ) ) ) { | |
| return $mods; | |
| } | |
| // Optional: only proceed if we're using a specific Engine. | |
| // if ( 'default' !== $query->get_engine()->get_name() ) { | |
| // return $mods; | |
| // } | |
| $alias = 'swpkbcat'; | |
| $tax_query = new WP_Tax_Query( [ [ | |
| 'taxonomy' => 'category', | |
| 'field' => 'term_id', | |
| 'terms' => absint( $_GET['swp_category_limiter'] ), | |
| ] ] ); | |
| $tq_sql = $tax_query->get_sql( $alias, 'ID' ); | |
| $mod = new \SearchWP\Mod(); | |
| // If the JOIN is empty, WP_Tax_Query assumes we have a JOIN with wp_posts, so let's make that. | |
| if ( ! empty( $tq_sql['join'] ) ) { | |
| // Queue the assumed wp_posts JOIN using our alias. | |
| $mod->raw_join_sql( function( $runtime ) use ( $wpdb, $alias ) { | |
| return "LEFT JOIN {$wpdb->posts} {$alias} ON {$alias}.ID = {$runtime->get_foreign_alias()}.id"; | |
| } ); | |
| // Queue the WP_Tax_Query JOIN which already has our alias. | |
| $mod->raw_join_sql( $tq_sql['join'] ); | |
| // Queue the WP_Tax_Query WHERE which already has our alias. | |
| $mod->raw_where_sql( '1=1 ' . $tq_sql['where'] ); | |
| } else { | |
| // There's no JOIN here because WP_Tax_Query assumes a JOIN with wp_posts already | |
| // exists. We need to rebuild the tax_query SQL to use a functioning alias. The Mod | |
| // will ensure the JOIN, and we can use that Mod's alias to rebuild our tax_query. | |
| $mod->set_local_table( $wpdb->posts ); | |
| $mod->on( 'ID', [ 'column' => 'id' ] ); | |
| $mod->raw_where_sql( function( $runtime ) use ( $tax_query ) { | |
| $tq_sql = $tax_query->get_sql( $runtime->get_local_table_alias(), 'ID' ); | |
| return '1=1 ' . $tq_sql['where']; | |
| } ); | |
| } | |
| $mods[] = $mod; | |
| return $mods; | |
| }, 20, 2 ); |
このスニペットは、ドロップダウンから空でない値が選択されたことを確認します。もしそうであれば、私たちのModが構築され、Queryに追加されます。
