Front Page フォーラム 使い方全般 適用中のソートボタンのハイライトについて

  • このトピックには4件の返信、2人の参加者があり、最後に加藤洸により5ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #7042
    加藤洸
    参加者

    お世話になっております。

    検索結果ページにて、ソートボタンをクリックして並べ替えを行った際、適用されているソートボタンをハイライトさせたいのですが、クラスを振るなどの方法はありますでしょうか?

    ご確認のほど、よろしくお願いいたします。

    #7052
    FirstElement 宮澤
    キーマスター

    近い将来のアップデートにて現在適用中のソートボタンに “current” などのクラスが振られるようアップデート予定です。

    ひとまず現状は、下記のJS/jQueryの方法をお試しください。

    フッターのwp_footer関数より後に、以下のように記述してください。

    <script>
      jQuery(function($){
    
        let sortKey;
        let sortType;
        let cfKey;
        
        // URLパラメーターからソートの情報を取得
        <?php if ( isset( $_GET['s_target'] ) && '' !== $_GET['s_target'] ) { ?>
          <?php if ( isset( $_GET['s_order'] ) && '' !== $_GET['s_order'] ) { ?>
            sortKey = '<?php echo esc_html( $_GET['s_target'] ); ?>';
            sortType = '<?php echo esc_html( $_GET['s_order'] ); ?>';
            <?php if ( isset( $_GET['csfk'] ) && '' !== $_GET['csfk'] ) { ?>
              cfKey = '<?php echo esc_html( $_GET['csfk'] ); ?>';
            <?php } ?>
          <?php } ?>
        <?php } ?>
    
        // 取得したソートの情報に合致するボタンに 'current' クラスを付与 
        if('post_date' === sortKey && 'up' === sortType) {
          $('.feas-sl-1-up').addClass('current');
        } else if ('post_date' === sortKey && 'down' === sortType) {
          $('.feas-sl-1-down').addClass('current');
        } else if('post_title' === sortKey && 'up' === sortType) {
          $('.feas-sl-2-up').addClass('current');
        } else if ('post_title' === sortKey && 'down' === sortType) {
          $('.feas-sl-2-down').addClass('current');
        } else if('post_name' === sortKey && 'up' === sortType) {
          $('.feas-sl-3-up').addClass('current');
        } else if ('post_name' === sortKey && 'down' === sortType) {
          $('.feas-sl-3-down').addClass('current');
        } else if('post_meta' === sortKey && 'up' === sortType) {
          $('.feas-sl-4-up').addClass('current');
        } else if ('post_meta' === sortKey && 'down' === sortType) {
          $('.feas-sl-4-down').addClass('current');
        } else if('rand' === sortKey) {
          $('.feas-sl-5-up').addClass('current');
          $('.feas-sl-5-down ').addClass('current');
        }
      });
    </script>
    • 投稿日時(up/down)
    • タイトル(up/down)
    • スラッグ(up/down)
    • カスタムフィールド(up/down)
    • ランダム(up/down共通)

    の5種類、計9個のソートボタンを表示する場合のサンプルです。必要に応じて “else if” の条件分岐は調整してください。該当するソートボタンには “current” というクラスが付与されます。

    例えば、1つ目のソートボタンがカスタムフィールドをターゲットとする場合、以下のようになります。

    // 取得したソートの情報に合致するボタンに 'current' クラスを付与 
    if('post_meta' === sortKey && 'up' === sortType) {
      $('.feas-sl-1-up').addClass('current');
    } else if('post_meta' === sortKey && 'down' === sortType) {
      $('.feas-sl-1-down').addClass('current');
    }

    現在のソートのターゲットはURLの”s_target”というパラメータ、up/downの方向は’s_order’で判別できますので、$_GET[‘s_target’]というように取得して条件分岐に使えます。

    FirstElement 宮澤

     

    #7053
    加藤洸
    参加者

    ご回答いただきありがとうございます。将来的なアップデートでの対応、大変助かります。

    当方のソート条件は3つあるのですが、すべてカスタムフィールドの数値を対象としております。

    頂いたコードを以下のように試したところ、1つ目のソートボタンのup/downのボタンにはcurrentが追加されましたが、2,3件目のソートボタンは反応しませんでした。

    // 取得したソートの情報に合致するボタンに ‘current’ クラスを付与
    if(‘post_meta’ === sortKey && ‘up’ === sortType) {
    $(‘.feas-sl-1-up’).addClass(‘current’);
    } else if(‘post_meta’ === sortKey && ‘down’ === sortType) {
    $(‘.feas-sl-1-down’).addClass(‘current’);
    }
    if(‘post_meta’ === sortKey && ‘up’ === sortType) {
    $(‘.feas-sl-2-up’).addClass(‘current’);
    } else if(‘post_meta’ === sortKey && ‘down’ === sortType) {
    $(‘.feas-sl-2-down’).addClass(‘current’);
    }
    if(‘post_meta’ === sortKey && ‘up’ === sortType) {
    $(‘.feas-sl-3-up’).addClass(‘current’);
    } else if(‘post_meta’ === sortKey && ‘down’ === sortType) {
    $(‘.feas-sl-3-down’).addClass(‘current’);
    }

    対応策がありましたらご教授いただけますと助かります。

    どうぞよろしくお願いいたします。

    加藤

    #7054
    FirstElement 宮澤
    キーマスター

    失礼しました、カスタムフィールドの場合は’cfKey’の項目が抜けていました。

    前述の2つの条件に加え、 ‘meta1’ === cfKey というようにカスタムフィールドのキーを条件に加えてください。’meta1’の部分を実際のカスタムフィールドのキーに置き換えてください。

    if('post_meta' === sortKey && 'meta1' === cfKey && 'up' === sortType) {
      $('.feas-sl-1-up').addClass('current');
    } else if('post_meta' === sortKey && 'meta1' === cfKey && 'down' === sortType) {
      $('.feas-sl-1-down').addClass('current');
    }
    if('post_meta' === sortKey && 'meta2' === cfKey && 'up' === sortType) {
      $('.feas-sl-2-up').addClass('current');
    } else if('post_meta' === sortKey && 'meta2' === cfKey && 'down' === sortType) {
      $('.feas-sl-2-down').addClass('current');
    }
    if('post_meta' === sortKey && 'meta3' === cfKey && 'up' === sortType) {
      $('.feas-sl-3-up').addClass('current');
    } else if('post_meta' === sortKey && 'meta3' === cfKey && 'down' === sortType) {
      $('.feas-sl-3-down').addClass('current');
    }

    お試しいただければと思います。

    FirstElement 宮澤

    #7055
    加藤洸
    参加者

    早速のご回答ありがとうございます!

    頂いたコードにて、期待する動作ができました!大変たすかりました。

    今後とも、どうぞよろしくお願いいたします。

    加藤

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。

FE Advanced Search

¥59,800

  • サイト数無制限
  • 技術サポート回数無制限
  • 将来アップデート無料

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