-
投稿者投稿
-
2022年4月28日 17:14 #7042
加藤洸
参加者お世話になっております。
検索結果ページにて、ソートボタンをクリックして並べ替えを行った際、適用されているソートボタンをハイライトさせたいのですが、クラスを振るなどの方法はありますでしょうか?
ご確認のほど、よろしくお願いいたします。
2022年5月6日 18:49 #7052FirstElement 宮澤
キーマスター近い将来のアップデートにて現在適用中のソートボタンに “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 宮澤
2022年5月6日 20:22 #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’);
}対応策がありましたらご教授いただけますと助かります。
どうぞよろしくお願いいたします。
加藤
2022年5月6日 23:11 #7054FirstElement 宮澤
キーマスター失礼しました、カスタムフィールドの場合は’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 宮澤
2022年5月7日 16:04 #7055加藤洸
参加者早速のご回答ありがとうございます!
頂いたコードにて、期待する動作ができました!大変たすかりました。
今後とも、どうぞよろしくお願いいたします。
加藤
-
投稿者投稿
- このトピックに返信するにはログインが必要です。