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

WordPress

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を整数に変換しています。

まとめ

以上が、WordPressで絞り込み検索機能を実装するための2つのコード例です。1つ目の例では、セレクトボックスを使用してカテゴリでの絞り込みを実現しました。2つ目の例では、チェックボックスを使用してカテゴリでの絞り込みを実現しました。

どちらの方法も、pre_get_postsアクションフックを使用して、検索結果をフィルタリングすることで実現しています。また、同様の方法でタグやカスタムフィールドなどでも絞り込み検索を行うことができます。

絞り込み検索機能を実装することで、ユーザーがより正確な検索結果を得ることができ、サイトの利便性を向上させることができます。ぜひ、実装してみてください。