5
11

More than 3 years have passed since last update.

Wordpressで複合検索(絞り込み検索)をプラグインなしで実装する方法

Posted at

Wordpressのデフォルトではキーワード検索しかできないため、カテゴリやカスタムフィールドなどで絞り込むことができない。

複合検索(絞り込み検索)を実装するには独自にフォームを作ってクエリを実行する。

複合検索のためのフォームを実装する

検索フォームはHTMLで自由に作れるので、検索したい項目を作成すればOK。

ここでは、検索キーワード、カテゴリ、カラーというカスタムフィールドを検索する。

nameに入れる文字はクエリの作成で使うのでわかりやすい文字を入れておく。

フォームは、search-form.phpのようなテンプレートとして作って、サイドバーなど好きなところから呼び出す。

// search-form.php
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s">キーワード</label>
    <input type="text" class="field" name="s" id="s" placeholder="検索キーワード" />
    <label for="category">カテゴリ</label>
    <select name="category" id="category">
        <?php 
            $cateogry_list = get_terms( array(
                'taxonomy' => 'category',
            ) );
            foreach( $cateogry_list as $category ) {
                if( $category->parent == 0 ) {
                        echo '<option value="'. esc_attr( $category->term_id ) .'">
                                        '. esc_html( $category->name ) .'</option>';
                }
            }
        ?>
    </select>
    <label for="s">カラー</label>
    <select name="color" id="color">
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="yellow">Yellow</option>
    </select>
    <input type="submit" class="submit" value="検索" />
</form>

複合検索の表示方法

検索結果を表示するには、WP_Queryにクエリを渡すだけ。

クエリを作るために必要な検索キーワードや選択項目を取得するには$_GET['name']を使う。

nameの部分にはフォームのname属性に入れた文字を入れる。namesなら$_GET['s']となる。

// search.php
<?php
$args = array(
  's' =>  $_GET['s'], // 検索ワード
  'cat' => $_GET['category'], // カテゴリID
  'meta_query'  =>  array(
    array(
      'key'     => 'color', // メタキー
      'value'   => $_GET['color'], // 値
    ),
  )
);
$wp_query = new WP_Query( $args ); ?>

<?php 
if ( $wp_query->have_posts() ) : 

  /* Start the Loop */
  while ( $wp_query->have_posts() ) :
    $wp_query->the_post();

    // 投稿内容を表示

  endwhile;

    // ループ終了後の処理、ページネーション表示など
    the_posts_navigation();

else :

  // 投稿がない場合の表示

endif;
?>

検索結果の表示はpre_get_postsを使う方法もあるのでどちらか好きな方で実装する。

5
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
11