WordPress

HOME
WordPress
WordPressで絞り込み検索を実装する方法

2020年10月21日 / 最終更新日時 : 2021年4月3日 haruto WordPress

WordPressで絞り込み検索を実装する方法

Table of Contents

こんな方におすすめ

　・WordPressで絞り込み検索を実装したい方

検索フォームを作成

　はじめに、検索フォームの作り方から説明いたします。

　「searchform.php」に以下のコードを記述します。（コピペされても構いません。）

<form role="search" method="get" action="<?php echo esc_url( home_url('/') ); ?>" >

    <label for="shiborikomi">絞り込み検索</label>
    <select id="shiborikomi" name="s">
        <option value="" selected>条件を選択</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
    </select>
    <input type="hidden" name="sql_kind" value="select">
    <input type="submit" value="検索する">
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<label for="shiborikomi">絞り込み検索</label>

<option value="" selected>条件を選択</option>

</select>

</form>

　なお、WordPressで検索フォームを作るときは、name属性の値は”s”にするのが一般的です。

　その後、検索フォームを表示させるページのファイルに以下のコードを記述します。

　（例：トップページに表示するのであれば、front-page.phpに記述)　

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

　get_search_form() はWordPress関数で、searchform.phpを読み取るものです。これにより、検索フォームが表示されるようになったかと思います。

検索フォームの入力内容を取得し、絞り込み条件を設定

　続いて、検索フォームに入力された値を取得する方法を説明します。

　検索結果ページを表示するファイル「search.php」に以下のコードを記述します。

<?php

$s = $_GET['s']; //フォームに入力された値を変数$sに格納

//変数$argsに表示するページの条件を格納
$args = array( 'meta_key' => 'カスタムフィールド',
　　　　　　　　 'meta_value' => $s,　  　　　　　　　　//カスタムフィールドの値が「$s」であるページ
	　　　  'posts_per_page' => 5  　　　　　　　　//1ページに表示する投稿数
);

$wp_query = new WP_Query( $args );　//条件$argsをWP_Query()の引数にセットし、変数$wp_queryに代入

//$wp_queryに代入した条件に合う記事を取得しきるまで1件ずつ繰り返し取得
if ($wp_query->have_posts()) :
  while ($wp_query->have_posts()) : $wp_query->the_post();
    
  get_template_part('excerpt'); //記事抜粋テンプレート「excerpt.php」を読み込む

  endwhile;
endif;
wp_reset_postdata();
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<?php

$s = $_GET['s']; //フォームに入力された値を変数$sに格納

//変数$argsに表示するページの条件を格納

$args = array( 'meta_key' => 'カスタムフィールド',

　　　　　　　　 'meta_value' => $s,　　　　　　　　　//カスタムフィールドの値が「$s」であるページ

　　　 'posts_per_page' => 5 　　　　　　　　//1ページに表示する投稿数

);

$wp_query = new WP_Query( $args );　//条件$argsをWP_Query()の引数にセットし、変数$wp_queryに代入

//$wp_queryに代入した条件に合う記事を取得しきるまで1件ずつ繰り返し取得

if ($wp_query->have_posts()) :

while ($wp_query->have_posts()) : $wp_query->the_post();

get_template_part('excerpt'); //記事抜粋テンプレート「excerpt.php」を読み込む

endwhile;

endif;

wp_reset_postdata();

?>

　まず、3行目のところで、フォームに入力された値を受け取り、変数$sに格納します。

　次に、6行目からの部分で、表示するページの条件を指定して、変数$argsに格納します。ここで、特に7行目の部分に注目してください。「’meta_value’ => $s」という記述がありますが、ここが「カスタムテンプレートの値がフォームに入力された値と一致するもの」という条件を指定している部分になります。

　なお、今回はカスタムテンプレートの値で絞り込む例を取り上げていますが、$argsの連想配列のキーを変えることによって、様々な条件での絞り込み検索を実装できます。様々なものが一覧としてまとまった記事があるので、気になる方は、そちらをご参照ください。

WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット： http://notnil-creative.com/blog/archives/1288

絞り込み条件に合う記事を取得・表示

　はじめに、11行目で条件を格納した変数$argsをWP_Queryの引数にセットします。

　※WP_Queryについて、知りたい方は、こちらのページをご覧ください。 https://produce-web.net/blog/wp_query/

　その後、14行目以降のところで、条件に合致する記事を取得していきます。この部分のコードについて、ここから少し詳しく見ていきましょう。

　まず、14行目のif文で、そもそも条件に合致する記事が存在するかを判定します。trueすなわち、存在する場合は15行目以降のwhile文を実行します。

　次に、15行目のwhile文は、条件に合致する記事を全て取得しきれてなく、まだ残っていたらwhile文の内容を実行する（残っていたらtrue）、というコードになります。17行目のコード、記事の抜粋を1件取得するを実行するたびにwhile文の判定がされますので、結果的には、1件取得するごとに記事が残っているかを確認しろ、というコードになります。

　ここまでの流れで、検索フォームを作成するところから、その条件に合う記事を取得するという、いたって標準的な絞り込み検索を実装することが出来ました。　

　なお、上記のコードではフォームをドロップダウン形式にしましたが、ラジオボタンやチェックボックスでも基本的な部分は一緒ですので、必要に応じて変えていただければと思います。