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