求人サイトの検索機能をプラグインなしでWP_Queryにて実現（複数のカスタムフィールドのAND検索）

求人サイトや不動産サイトの検索フォームをWordpressで作ろうと思ったら結構苦労したので備忘録的に残しておくことにします。なので、初心者向けに細かいことまで書いてないです。

使ったプラグイン

Advanced Custom Fields
WP Multibyte Patch

検索フォームのイメージ

子テーマでカスタマイズしましょう

有料／無料などでテーマを入手している場合は特に子テーマでカスタマイズしましょう。テーマのアップデートの影響を受けないようにです。詳しくは調べてみてください。

ちなみに今回はSANGOを使いました。

検索フォーム側

<form method="get" action="<?php echo home_url('/'); ?>" >
<input type="hidden" id="s" name="s" value="">
<table border="1">
<tbody>
<tr>
<td>職種</td>
<td><input id="occupation" class="searchform__input" name="occupation" type="search" value="" placeholder="検索"></td>
</tr>
・・・・（略）・・・
<tr>
<td colspan="2"><button id="searchsubmit" type="submit">検索ボタン</button></td>
</tr>
</tbody>
</table>
</form>

今回は固定ページに検索フォームを作成しましたが、こっちは別に新しいことも難しいこともないので普通に作る、と。

子テーマのfunctions.php

functions.phpは今回は特に使わない

子テーマのsearch.php

今回のメインはこのファイル。基本的にはWordpressで複合検索（絞り込み検索）をプラグインなしで実装する方法にある以下のコードを参考にさせていただきました。

// search.php
<?php
$args = array(
 's' =>  $_GET['s'], // 検索ワード
 'cat' => 4, // カテゴリID
 //--カスタムフィールドごとのフォーム入力値を取得
 'meta_query'  =>  array(
   array(
     'key'     => 'occupation', // メタキー
     'value'   => $_GET['occupation'], // 値
   ),
   array(
     'key'     => 'job', // メタキー
     'value'   => $_GET['job'], // 値
   ),
   array(
     'key'     => 'salary', // メタキー
     'value'   => $_GET['salary'], // 値
   ),
   /* ーーー（あとの項目は省略）ーーー */

   ), 
  )
);
$wp_query = new WP_Query( $args );
//デバッグ用：実行されるSQL文を表示（公開時は削除）
echo "{$wp_query->request}";
?>

<?php 
if ( $wp_query->have_posts() ) : 
 while ( $wp_query->have_posts() ) :
   $wp_query->the_post();
   // 検索結果あるときの表示
 endwhile;
else :
 // 投稿がないときの表示
endif;
?>

上記のコード内の「メタキー」はAdvanced Custom Fieldsで作ったカスタムフィールドの「名前」のところです。ここは日本語使えるのかわからなかったので翻訳ツールで英語にしてみた（英語が変だとしても笑わないでいただきたい）

で実行してみると期待した動きじゃない

期待した検索結果は、例えば

仕事内容：接客
給与：時給1,000円以上

で検索しているユーザの意図は

仕事内容が”接客”で、給与が”時給1,000円以上”の求人を見たいなー

です。

もうちょっとだけ頭の中の思考を詳しく記述すると

仕事内容に”接客”という言葉が含まれていて、かつ給与が”時給1,000円以上”の求人情報をできるだけたくさん見たいなー

でも上記の検索結果は、

職種は未入力で、かつ仕事内容は"接客"というテキスト、かつ給与は”時給1,000円以上”というテキストの求人情報

が表示されます。これは

//デバッグ用：実行されるSQL文を表示（公開時は削除）
echo "{$wp_query->request}"

の部分でSQL文を表示するとわかりやすいです。

解決すべき問題点はなんだろう

・検索条件に入れていない項目もAND条件に入っていること
・あいまい検索になっていないこと

の2点です。

じゃあ、問題点を解決しましょう

検索条件に入れていない項目は検索条件としてWP_Queryに渡さなければOK。

$wp_query = new WP_Query( $args );

この部分でWP_Queryに検索条件を配列で渡しています。その前までで配列$argsに検索条件を入れ込んでますので、この検索条件に入れ込むところを変更します。

フォームからの値がなければ配列に入れないって感じにしました。また、同時に検索時にLIKE検索になるように記述します。こちら複数名のチームでやっている納品物なので可読性重視で。

//search.php
<?php
$args = array(
 's' =>  $_GET['s'], // 検索ワード
 'cat' => 4, // カテゴリID
);
// カスタムフィールドの検索テキストが存在したら検索条件に追加
$args_meta_query=array();
// 職種
if(strlen($_GET['occupation'])>0){
       $args_meta_query[] = array('key' => 'occupation','value' => $_GET['occupation'],'compare' => 'LIKE');
}
// 仕事内容
if(strlen($_GET['job'])>0){
       $args_meta_query[] = array('key' => 'job','value' => $_GET['job'],'compare' => 'LIKE');
}
// 給与
if(strlen($_GET['salary'])>0){
       $args_meta_query[] = array('key' => 'salary','value' => $_GET['salary'],'compare' => 'LIKE');
}
//ーーー他の項目は省略ーーー

//カスタムフィールドの検索条件を$argsにマージする
$args = array_merge($args,array('meta_query'  =>  array($args_meta_query)));

$wp_query = new WP_Query( $args ); 
//デバッグ用：実行されるSQL文を表示
echo "{$wp_query->request}";
?>

ーーー以下省略ーーー

ということで、これを実行するとユーザの意図通りの検索結果が表示されます。

その他今回の仕様について
※各検索フィールドのテキストは1単語のみ
※特定カテゴリー記事のみ検索対象にしている
※WordPress 5.6.1
※Advanced Custom Fields　バージョン 5.9.5
※WP Multibyte Patch　バージョン 2.9

ほんとに100%使いやすい求人検索じゃないので本気出すならもうちょっと考える必要ありますが、WP_Queryに必要な検索条件のみ渡してあげればいいという情報はなかなか見つけられなかったので記事にしておくことで誰かの役にたてばいいな、と。

参考サイト

今回の検索機能を実現するにあたり、いろいろ調べましたが、最終的に以下のサイトを参考にさせていただきました。ありがとうございます！

Wordpressで複合検索（絞り込み検索）をプラグインなしで実装する方法https://qiita.com/takeshi_du/items/17953d3880616fc54233

WP_Query で カスタムフィールドとタイトルを条件に or 検索する方法https://u2k772.blog.fc2.com/blog-entry-444.html

WP Multibyte Patch はもう不要？→そんなことはなかった件。あと設定方法とか
https://ekuriyu.com/journal/wp-multibyte-patch-setting/

まとめ

開発者でたまに見かけるのですが、ユーザ視点が持てない方がいまして、そういう方だと最初のsearch.phpで完成！ってしちゃう人がいるんですよね。

大切なのはユーザ視点。

ということで、wordpressのお仕事募集しております。デザイナーと組んでやっていますので、見た目良し、かつユーザにとって使いやすいサイトを作りますよ。