WordPressで絞り込み検索機能を実装する方法：セレクトボックスとチェックボックスの2例を紹介！

WordPressで絞り込み検索機能を実装する方法を紹介します。

WordPressで絞り込み検索機能を実装するためには、検索フォームにフィールドを追加し、pre_get_postsアクションフックを使用して、検索結果をフィルタリングする必要があります。具体的には、カテゴリやタグなどで絞り込みを行うことができます。これにより、より高度な検索機能を提供することができます。

サンプルセレクトボックスでカテゴリを選択
サンプルチェックボックスでカテゴリを選択
まとめ

サンプルセレクトボックスでカテゴリを選択

WordPressには、標準の検索機能がありますが、この機能では特定のカテゴリやタグなどで検索することができません。そこで、絞り込み検索機能を実装することで、より高度な検索を実現することができます。

まず、検索フォームにフィールドを追加する必要があります。以下の例では、テキストボックスとカテゴリを選択するセレクトボックスを追加しています。

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s">キーワード検索：</label>
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />

    <label for="category">カテゴリ：</label>
    <?php wp_dropdown_categories( array(
        'show_option_all' => 'すべてのカテゴリ',
        'orderby' => 'name',
        'hierarchical' => 1,
        'depth' => 1,
        'name' => 'cat',
        'id' => 'category'
    ) ); ?>

    <input type="submit" id="searchsubmit" value="検索" />
</form>

このフォームには、sフィールドに検索キーワード、catフィールドにカテゴリIDが送信されます。

次に、検索結果をフィルタリングするためのコードを追加する必要があります。以下の例では、pre_get_postsアクションフックを使用して、カテゴリIDを指定した場合はそのカテゴリに属する記事のみを検索結果として表示するようにしています。

function custom_search_filter( $query ) {
    if ( ! is_admin() && $query->is_main_query() ) {
        $cat = isset( $_GET['cat'] ) ? $_GET['cat'] : '';
        if ( $cat ) {
            $query->set( 'cat', $cat );
        }
    }
}
add_action( 'pre_get_posts', 'custom_search_filter' );

上記の例では、カテゴリによる絞り込みを実装していますが、同様にタグやカスタムフィールドなどのフィルタリングも可能です。

サンプルチェックボックスでカテゴリを選択

まず、検索フォームにチェックボックスを追加します。以下の例では、”category[]”という名前の配列を使用して、カテゴリを選択するチェックボックスを追加しています。

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s">キーワード検索：</label>
    <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />

    <label for="category">カテゴリ：</label>
    <?php foreach ( get_categories() as $category ) : ?>
        <label><input type="checkbox" name="category[]" value="<?php echo esc_attr( $category->term_id ); ?>" <?php checked( in_array( $category->term_id, (array) $_GET['category'] ) ); ?> /><?php echo esc_html( $category->name ); ?></label>
    <?php endforeach; ?>

    <input type="submit" id="searchsubmit" value="検索" />
</form>

このフォームには、sフィールドに検索キーワード、category[]フィールドに選択されたカテゴリのIDが配列で送信されます。

次に、検索結果をフィルタリングするためのコードを追加します。以下の例では、pre_get_postsアクションフックを使用して、選択されたカテゴリに属する記事のみを検索結果として表示するようにしています。

function custom_search_filter( $query ) {
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        $category = isset( $_GET['category'] ) ? array_map( 'intval', $_GET['category'] ) : array();
        if ( $category ) {
            $query->set( 'category__in', $category );
        }
    }
}
add_action( 'pre_get_posts', 'custom_search_filter' );

このコードでは、category__inパラメータにカテゴリIDの配列を設定することで、検索結果をフィルタリングしています。また、intval関数を使用して、カテゴリIDを整数に変換しています。