2017/06/30

Multisite Language Switcherで複数言語の切り替えを『select option』で実装する方法。

問題点として、select optionで実装するとMultisite Language Switcherが正常に動かなくなります。よって、ul liを使い、見た目的にはselect optionっぽくしていきます。

実装イメージ

こんな感じ。CSSがちょっと中途半端だけども…。

言語スイッチャーを表示する方法

<?php if ( function_exists( 'the_msls' ) ) the_msls(); ?>

Multisite Language Switcherのプラグインを有効にしてから上記のコードを使います。

その後に上記のとおり記入します。コピペしやすいように、下記にテキストも用意しておきました。

リストの前に表示するテキスト・HTML：<ul id=”be-select” tabindex=”0″>
リストの後に表示するテキスト・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;
}

以上で完了。
お疲れさんです。

WordPress