Multisite Language Switcherで複数言語の切り替えを『select option』で実装する方法。
Multisite Language Switcherで複数言語の切り替えを『select option』で実装する方法。
問題点として、select option
で実装するとMultisite Language Switcherが正常に動かなくなります。よって、ul li
を使い、見た目的にはselect option
っぽくしていきます。
実装イメージ
言語スイッチャーを表示する方法
<?php if ( function_exists( 'the_msls' ) ) the_msls(); ?>
Multisite Language Switcherのプラグインを有効にしてから上記のコードを使います。
その後に上記のとおり記入します。コピペしやすいように、下記にテキストも用意しておきました。
リストの前に表示するテキスト・HTML:<ul id=”be-select” tabindex=”0″>
リストの後に表示するテキスト・HTML:</ul>
各項目の前に表示するテキスト・HTML:<li>
各項目の後に表示するテキスト・HTML:</li>
リストの後に表示するテキスト・HTML:</ul>
各項目の前に表示するテキスト・HTML:<li>
各項目の後に表示するテキスト・HTML:</li>
ul li要素をselect optionっぽく動かすCSS / JS
Render an unordered list as a select elementを参考にしつつカスタマイズしました。
JavaScript
$.fn.ulSelect = function(){
var ul = $(this);
if (!ul.hasClass('zg-ul-select')) {
ul.addClass('zg-ul-select');
}
// SVG arrow
var arrow = '<svg id="ul-arrow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="15" height="15" viewBox="0 0 20 42" style="height: 15px;margin-top: 5px;padding-right: 5px;"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
$('li:first-of-type', this).addClass('active').append(arrow);
$(this).on('click', 'li', function(event){
// Remove div#selected if it exists
if ($('#selected--zg-ul-select').length) {
$('#selected--zg-ul-select').remove();
}
ul.before('<div id="selected--zg-ul-select">');
var selected = $('#selected--zg-ul-select');
$('li #ul-arrow', ul).remove();
ul.toggleClass('active');
// Remove active class from any <li> that has it...
ul.children().removeClass('active');
// And add the class to the <li> that gets clicked
$(this).toggleClass('active');
var selectedText = $(this).text();
if (ul.hasClass('active')) {
selected.text(selectedText).addClass('active').append(arrow);
}
else {
selected.text('').removeClass('active');
$('li.active', ul).append(arrow);
}
});
$(document).on('click', function(event){
if($('ul.zg-ul-select').length) {
if(!$('ul.zg-ul-select').has(event.target).length == 0) {
return;
}
else {
$('ul.zg-ul-select').removeClass('active');
$('#selected--zg-ul-select').removeClass('active').text('');
$('#ul-arrow').remove();
$('ul.zg-ul-select li.active').append(arrow);
}
}
});
}
// Run
$('#be-select').ulSelect();
CSS(SCSS)
ul.zg-ul-select {
cursor: pointer;
font-size: 15px;
@media #{$pc} {
position: absolute;
margin: -25px 0 0 260px;
width: 110px;
}
li {
display: none;
&.active {
border: 1px solid #d1d1d1;
display: flex;
justify-content: space-between;
}
}
&.active {
border: 1px solid #aaa;
li {
border: none;
box-shadow: none;
display: block;
background: #fff;
&:hover {
background: #888;
}
}
}
}
#selected--zg-ul-select {
display: none;
}
.footermenubox {
margin-right: 130px;
}
以上で完了。
お疲れさんです。
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。