2022年5月6日 18:49
#7052
キーマスター
近い将来のアップデートにて現在適用中のソートボタンに “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 宮澤