適用中のソートボタンのハイライトについて

近い将来のアップデートにて現在適用中のソートボタンに “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 宮澤

失礼しました、カスタムフィールドの場合は’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 宮澤