Home フォーラム 使い方全般 ドロップダウン形式で並べ替えメニューを表示

  • 投稿者
    投稿
  • #7622
    FirstElement 宮澤
    キーマスター

    検索結果を並び替えるソートボタンは、現在のバージョン(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 宮澤

     

     

     

1件の投稿を表示中 - 1 - 1件目 (全1件中)
  • このトピックに返信するにはログインが必要です。
'絞り込み検索'プラグイン for WordPress FE Advanced Search

"絞り込み検索"プラグイン for WordPress
FE Advanced Search

¥59,800

  • インストール数無制限
  • 技術サポート無料
  • アップデート永久無料

「こんな検索できる?」「PHPやCSS詳しくないのだけど…」など、わからないことやご不安がありましたらお気軽にご相談ください。