【WordPress】カスタムフィールド・タクソノミーによる絞込検索を実装する/基礎知識編

Wordpress

WordPressの検索機能に、カスタム分類(タクソノミー)やカスタムフィールドによる絞込機能を追加したい!と思っても、いい感じのプラグインってないんですよね。

プラグイン「VK Filter Search Pro」やTCDテーマ「GENSEN」もあるけど、もっとカスタマイズしたいし‥‥‥

となれば、もう自力で実装するのみです。

ざっと以下のステップで、カスタムフィールド・タクソノミーによる絞込検索を実装していきたいと思います。

  1. WordPressの検索機能の仕組みをさくっと理解する
  2. functions.phpにカスタムクエリ変数を仕込む
  3. 検索フォームをカスタマイズする
  4. 検索結果を表示する

この記事では最初のステップとして、Wordpressの検索機能の仕組みを軽く考察してみます。

いきなり完成されたコードを見よう見まねで取り込むのも良いのですが、これが分かればいくらでも応用が効くので知っておいた方が良いでしょう。

実例コードを使った解説は次の記事に書いています。

WordPressの検索機能の仕組みをさくっと理解する

まずは検索フォームの基本形を見てみましょう。

<form method="get" action="<?php echo home_url( '/' ); ?>">
    <input type="search" value="<?php echo get_search_query() ?>" name="s" />
    <input type="submit" value="検索" />
</form>

検索キーワードを変数「s」の値として、ホームページにGET方式で送信しています。

検索結果ページでは、『検索クエリ』のパラメータとしてsを受け取ります。

そうすると、検索キーワードでヒットする記事の一覧が表示されるというわけです。

検索クエリをアレンジする

検索クエリには色々なパラメータを追加できます。

たとえば上記のフォームにこんな要素を追加します。

<input type="hidden" value="post" name="post_type" id="post_type" />

変数「post_type」に「post」という値を入れています。

こうすると投稿タイプが「投稿」に絞られるので、固定ページやカスタム投稿タイプが除外されます。

この要領で、nameとvalueの組み合わせで検索クエリを作り上げていくわけです。

使えるクエリ変数は決まっている

検索クエリを自在にアレンジできるとはいえ、使える変数は決まっています。

たとえばカスタム投稿タイプ「特産品」(スラッグ:tokusan)の記事をカスタムタクソノミー「都道府県」(スラッグ:pref)を使って分類しているとしましょう。

仮にフォームにこんな要素を入れてみるとします。(めっちゃ適当ですが)

<input type="hidden" value="tokusan" name="post_type" id="post_type">
<label for="gunma">群馬</label><input type="radio" value="gunma" name="pref" id="gunma">
<label for="tochigi">栃木</label><input type="radio" value="tochigi" name="pref" id="tochigi">
<label for="ibaraki">茨城</label><input type="radio" value="ibaraki" name="pref" id="ibaraki">

するとWordpressさんは『post_typeがtokusanね。じゃあ特産品の中から検索しましょう。次は……prefって何? 知ーらない!』と言ってスルーされるので、特産品の全記事が表示されてしまいます。

でも、前もって『prefっていう変数を使わせてね』とお願いしておけば大丈夫です。そのやり方に進みましょう。

カスタムクエリ変数を追加する

検索クエリで変数prefを使用するには、query_varsフィルタにフックしてクエリ変数を追加します。

functions.phpに以下のように書きます。

<?php
function add_query_vars_filter( $vars ){
  $vars[] = 'pref';
  return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );

これでprefがクエリに追加されました。

検索結果ページでquery_varsの内容を確認すると、ちゃんとprefの値が入っているはずです。

<?php
var_dump($wp_query->query_vars);

でも、これではまだprefが何者なのかWordpressさんに伝わっていませんよね。

カスタムクエリ変数を使ってクエリを変更する

いよいよ最終段階です。

WordPressさんに、追加したカスタムクエリ変数の使い方を教えてあげましょう。

<?php
function custom_query_vars( $query ) {
  if ( !is_admin() && $query->is_main_query() ) {

    if ($query->is_search() ) {
      $terms = get_query_var('pref');
      $tax_query = array(
        array(
          'taxonomy' => 'pref',
          'terms'=> $terms
        )
      );
      $query->set( 'tax_query', $tax_query );
    }
  }
}
add_action( 'pre_get_posts', 'custom_query_vars' );

アクションフック「pre_get_posts」でメインクエリを変更します。

get_query_varでクエリ変数prefの値を取得します。

今回の例の都道府県はタクソノミーだったので「tax_query」をセットします。

taxonomyはタクソノミーのスラッグpref、termsには取得したprefの値が入ります。

これで晴れて群馬の特産品一覧が表示できるようになりました!

ちなみにカスタムフィールドを追加する場合は、こんな感じでmeta_queryを追加します。

<?php
    $value = get_query_var('feature');
    $meta_query = array(
      array(
        'key' => 'feature',
        'value' => $value,
      )
    );
    $query->set( 'meta_query', $meta_query );

パラメータの詳細はこちら:WP_Query | Class | WordPress Developer Resources

まとめ

ここまで分かれば、いろんなパラメータを送信して、検索結果に反映させることできます。

あとは、この一連の方法を応用して実用的なコードを書いていくだけです。

実際にカスタムフィールド・タクソノミーによる絞込検索を実装するコードは次の記事で解説します。

スポンサーリンク
スポンサーリンク
Wordpress
codeisleをフォローする

コメント

タイトルとURLをコピーしました