【WordPress】GTranslateのウィジェットをcssでカスタマイズして好きなところに設置する #JavaScript

Wordpressサイトに超お手軽に翻訳機能を搭載できる

GTranslate というプラグインとその使い方の記事が大量にあるのですが、
意外とウィジェットをカスタマイズして設置する方法が見つからなかったので書きます。

雑なスクショ&デザインで恐縮ですが、こんな感じで好きな翻訳ナビを作れます。

[1]. wp管理画面側でプラグインを追加・有効化

「Translate WordPress with GTranslate」というプラグインです。
「今すぐインストール」して有効化します。

[2]. 設定画面を開いて設定する

プラグイン > GTranslate > 設定を開き、以下の設定をしていきます。

ウィジェット表示：言語コード
　後で整形しやすいように最もシンプルなものを選択します
メニューに表示：なし
フローティング言語セレクタの表示: なし
表示無しにしないと勝手に出てきます。
必要な言語を選択
必要な言語のチェックボックスにチェックしていきます。
Wrapper selector CSS: 任意のクラス名
初期値は .gtranslate_wrapper になっているかと思います。
お好みでFLOCSS仕様に変えたりできます。
忘れずに「保存」

[3]. 好きな場所に設置する

肝心の設置方法ですが、なんとたったこれだけです。

php: 好きなページの好きな場所

<div class="gtranslate_wrapper"></div>

[2]で設定したクラス名を持つ要素を好きな場所にボーンと置くだけ。
「こんでええんかーい」て声出ちゃいました。

[4]. いよいよスタイルをカスタマイズ

設置した場所を開発ツールで確認すると以下のようになってます

html: 開発ツール

<div class="gtranslate_wrapper 中略">
    <a href="#" 中略 class="glink 中略">en</a>
    <a href="#" 中略 class="glink 中略">zh-CN</a>
    <a href="#" 中略 class="glink 中略">zh-TW</a> 
    <a href="#" 中略 class="glink 中略">ja</a> 
</div>
<!-- ※英語、简体字、繁體字、日本語を選択してた場合 -->

なので以下のようにcssを当てればOKですね

css

.gtranslate_wrapper {
	/* 親のスタイル */
 }
 
.gtranslate_wrapper.glink {
    /* 子のスタイル */
}

[5]. 表示される言語記号を変更する

今のままだと en, zh-CN, zh-TW, ja てなって微妙です。
javascript で好きな表記に変えてしまいましょう。
※ここ不安なのでもっと良いやり方があれば教えてくださいっ

javascript

document.addEventListener( 'DOMContentLoaded', function() {
	const glinks = document.querySelectorAll( '.gtranslate_wrapper > .glink' );

    // ここに変更先の文字列を書いたらOK
	const langKeyConverter = {
		en: 'English',
		'zh-CN': '简体字',
		'zh-TW': '繁體字',
		ko: '한국어',
		ja: '日本語',
	};
	glinks.forEach( function( glink ) {
		const langKey = glink.getAttribute( 'data-gt-lang' );
		glink.textContent = langKeyConverter[ langKey ];
	} );
} );

感想

めちゃ簡単にできてビックリでした。
~~でもこれってわざわざサイトに実装しなくても最近のブラウザには...~~