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

#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 宮澤

 

FE Advanced Search

¥59,800

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

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