こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressに限らず、絞り込みを行う場合、「選択」→「検索」→「表示」の3ステップが大まかな流れになります。
しかし、少しの工夫次第でこの2つ目の「検索」を省略して、「選択」→「表示」と選択後に即絞り込みを行うことが出来ます。

今回の記事ではWordPressのタームを想定して、セレクトを選択後にsubmit無しで即絞り込む方法をご紹介したいと思います。

完成コード

まずはセレクトを選択後にsubmit無しで即絞り込む機能の完成コードを見てみましょう。
コードはHTML側の記述とjQuery側の記述に分かれています。

HTMLはこちら。

<?php $terms = get_terms( 'タクソノミー名' ); ?>
<select name="category">
<?php foreach( $terms as $term ) { ?>
    <option value="<?php echo get_term_link( $term ); ?>"><?php echo $term->name; ?></option>
<?php } ?>
</select>

get_terms()関数の引数にはタームの一覧を取得したいタクソノミーのスラッグ名を指定します。

jQueryはこちら。

$('select[name="category"]').on('change',function(){
    let term_link = $(this).val();
    location.href = term_link;
});

これでセレクトを選択後、「検索する」などのsubmitボタンを押すことなく選択した瞬間にページ遷移して絞り込むことが出来ます。

ラジオボタンの場合も同様の考え方で実装可能です。

コードの解説

ここからはコードの解説をしていきます。

まずはHTMLのコード部分を見ていきましょう。

<?php $terms = get_terms( 'タクソノミー名' ); ?>

get_terms()関数の引数にタクソノミーのスラッグ名を指定することで、そのタクソノミーに登録されているタームが一覧で取得出来ます。

<?php foreach( $terms as $term ) { ... } ?>

foreach文を使うことで配列の数だけ繰り返し処理をします。

<option value="<?php echo get_term_link( $term ); ?>"><?php echo $term->name; ?></option>

タームのURLはget_term_link()関数の引数にタームの配列情報を指定することで取得出来ます。
そして、ターム名は$term->nameで取得出来ます。

<option value="">のvalueの値に各タームの一覧ページのURLがセットされることになります。

続いて、jQueryのコード部分を見ていきましょう。

$('select[name="category"]').on('change',function(){ ... });

<select name="category">の選択を変更したタイミングで処理するようにします。

let term_link = $(this).val();

選択した<option>のvalueの値を取得し、変数に格納します。

location.href = term_link;

location.hrefは指定したURLに遷移させるJavaScriptのプロパティです。
location.hrefを使うことで選択した<option>のvalueの値、つまり選択したタームの一覧ページへ遷移するようになっています。

まとめ

いかがでしたか？
絞り込み検索の場合、「選択」→「検索」→「表示」となるのが基本ですが、ユーザー目線ではなるべく作業は減らしたいですよね。
今回ご紹介した機能を実装することでユーザーのアクションを1つ減らすことが出来ます。
是非、こちらを参考にして実装してみてください。