ドロップダウン形式で並べ替えメニューを表示

検索結果を並び替えるソートボタンは、現在のバージョン（version1.9.4）では、spanとaタグで表示されます。

これを、下のようなドロップダウン形式で表示する方法をご紹介します。

今回の例では、タイトルの昇順/降順、価格の安い順/高い順、ランダムに並べ替えるメニューを含んだドロップダウンを作成します。

はじめに、FEASの「ソート」メニューで下記のようにソートボタンを作成します。

FEASのソートボタンを表示する関数 <?php feas_sort_menu(); ?>を検索結果を表示するテンプレート（search.phpなど）に設置して、FEASのデフォルトのソートボタンを表示します。そして、各ソートボタンのそれぞれのリンクURLをすべてコピーして控えておきます。

次に、並べ替えのドロップダウンメニューを表示したい箇所に以下のコードを記述します。

<?php

// FEASの検索結果のみ並び替えのドロップダウンメニューを表示
if ( isset( $_GET['fe_form_no'] ) ) :

    // 初期化
    $target = 
    $order =
    $cond =
    $selected_0 =
    $selected_1 =
    $selected_2 =
    $selected_3 =
    $selected_4 = '';

    // URLパラメータからソート項目を取得
    if( isset( $_GET['s_target'] ) && '' !== $_GET['s_target'] ) {
        $target = $_GET['s_target'];
    }
    if( isset( $_GET['s_order'] ) && '' !== $_GET['s_order'] ) {
        $order = $_GET['s_order'];
    }
    if( isset( $_GET['csfk'] ) && '' !== $_GET['csfk'] ) {
        $cond = $_GET['csfk'];
    }

    // タイトルの昇順の場合にselected
    if ( 'up' === $order && 'post_title' === $target ) {
        $selected_0 = 'selected';
    }
    // タイトルの降順の場合にselected
    if ( 'down' === $order && 'post_title' === $target ) {
        $selected_1 = 'selected';
    }
    // 価格が安い順の場合にselected
    if ( 'up' === $order && 'post_meta' === $target && 'price' === $cond ) {
        $selected_2 = 'selected';
    }
    // 価格が高い順の場合にselected
    if ( 'down' === $order && 'post_meta' === $target && 'price' === $cond ) {
        $selected_3 = 'selected';
    }
    // ランダムの場合にselected
    if ( 'rand' === $target ) {
        $selected_4 = 'selected';
    }
    ?>

    <select id="feas-sort-menu2">
        <option value="">並び順を指定</option>
        <option value="https://demo2.fe-advanced-search.com/?search_element_0%5B%5D=12&amp;search_element_0%5B%5D=7&amp;search_element_0%5B%5D=&amp;search_element_0%5B%5D=&amp;search_element_1=&amp;search_element_2=&amp;search_element_3=&amp;s_keyword_4=&amp;search_element_5=&amp;search_element_8=&amp;searchbutton=%E6%A4%9C%E7%B4%A2&amp;csp=search_add&amp;feadvns_max_line_12=9&amp;fe_form_no=12&amp;s_target=post_meta&amp;s_order=up&amp;csfk=price&amp;csfk_as=str" <?php echo $selected_0; ?>>
        タイトルの昇順</option>
        <option value="https://demo2.fe-advanced-search.com/?search_element_0%5B%5D=12&search_element_0%5B%5D=7&search_element_0%5B%5D=&search_element_0%5B%5D=&search_element_1=&search_element_2=&search_element_3=&s_keyword_4=&search_element_5=&search_element_8=&searchbutton=%E6%A4%9C%E7%B4%A2&csp=search_add&feadvns_max_line_12=9&fe_form_no=12&s_target=post_meta&s_order=down&csfk=price&csfk_as=str" <?php echo $selected_1; ?>>
        タイトルの降順</option>
        <option value="https://demo2.fe-advanced-search.com/?search_element_0%5B%5D=12&amp;search_element_0%5B%5D=7&amp;search_element_0%5B%5D=&amp;search_element_0%5B%5D=&amp;search_element_1=&amp;search_element_2=&amp;search_element_3=&amp;s_keyword_4=&amp;search_element_5=&amp;search_element_8=&amp;searchbutton=%E6%A4%9C%E7%B4%A2&amp;csp=search_add&amp;feadvns_max_line_12=9&amp;fe_form_no=12&amp;s_target=post_meta&amp;s_order=up&amp;csfk=price&amp;csfk_as=str" <?php echo $selected_2; ?>>
        価格の安い順</option>
        <option value="https://demo2.fe-advanced-search.com/?search_element_0%5B%5D=12&search_element_0%5B%5D=7&search_element_0%5B%5D=&search_element_0%5B%5D=&search_element_1=&search_element_2=&search_element_3=&s_keyword_4=&search_element_5=&search_element_8=&searchbutton=%E6%A4%9C%E7%B4%A2&csp=search_add&feadvns_max_line_12=9&fe_form_no=12&s_target=post_meta&s_order=down&csfk=price&csfk_as=str" <?php echo $selected_3; ?>>
        価格の高い順</option>
        <option value="http://demo2.fe-advanced-search.com/?search_element_0%5B%5D=12&search_element_0%5B%5D=7&search_element_0%5B%5D=&search_element_0%5B%5D=&search_element_1=&search_element_2=&search_element_3=&s_keyword_4=&search_element_5=&search_element_8=&searchbutton=%E6%A4%9C%E7%B4%A2&csp=search_add&feadvns_max_line_12=9&fe_form_no=12&s_target=rand&s_order=up" <?php echo $selected_4; ?>>
        ランダム</option>
    </select>

    <script>
    jQuery(function($){
        $('#feas-sort-menu2').on('change',function(){
            let url = $(this).val(); // optionのvalueから遷移先URLを取得
            if(url){
               window.location = url; // 並べ替え実行
            }
            return false;
        });
    });
    </script>

    <?php
endif;
?>

optionのvalueは上の例ではFEASのデモサイトのURLになっていますが、あらかじめ控えておいた各ソートボタンのURLに置き換えてください。

※上記の例をそのまま設置してソートを実行するとFEASのデモサイトのソート結果に遷移します。

近い将来のバージョンでは、上記のようなコードを書かなくてもドロップダウンによるソートメニューを作成できる機能を実装する予定です。

FirstElement 宮澤