ブログにGoogle翻訳を実装してみては？みたいな要望をもらったので早速取り組んだのですが、これがなかなか難しく実装に2日かかりました。JavaScriptをあまり理解していないというのもありますが・・・。
クリックでローカルストレージに値を保存し、ロード時にその値で翻訳をするようにしています。そうすることでページ遷移しても設定を維持できるので。
あとアドレスバーに翻訳用のハッシュが入って見栄えが悪いので削除するようにしています。こんな感じで動いてくれます。翻訳してほしくない個所には「translate="no"」を設定するのを忘れずに。
もっとスマートに実装する方法があると思うのでこれは参考にしないほうがいいような気がします。

Googleの機械翻訳なので正確性はお察しですが、まぁないよりはマシということで・・・。

<script>
let select;
let lang;
//DOMContentLoadedイベントのタイミングで実行
document.addEventListener("DOMContentLoaded", function() {
let langValue = window.localStorage.getItem('lang-select-value');
console.log(langValue);
if (langValue == null) {
} else if(langValue == 'en'){
window.localStorage.setItem('lang-select-value','en');
select = document.getElementsByClassName('select-lang-en')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'fr'){
window.localStorage.setItem('lang-select-value','fr');
select = document.getElementsByClassName('select-lang-fr')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'de'){
window.localStorage.setItem('lang-select-value','de');
select = document.getElementsByClassName('select-lang-de')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'it'){
window.localStorage.setItem('lang-select-value','it');
select = document.getElementsByClassName('select-lang-it')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'es'){
window.localStorage.setItem('lang-select-value','es');
select = document.getElementsByClassName('select-lang-es')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'pt'){
window.localStorage.setItem('lang-select-value','pt');
select = document.getElementsByClassName('select-lang-pt')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'zh-TW'){
window.localStorage.setItem('lang-select-value','zh-TW');
select = document.getElementsByClassName('select-lang-tw')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'zh-CN'){
window.localStorage.setItem('lang-select-value','zh-CN');
select = document.getElementsByClassName('select-lang-cn')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
} else if(langValue == 'ja'){
window.localStorage.setItem('lang-select-value','ja');
select = document.getElementsByClassName('select-lang-ja')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
}
});
//翻訳用のハッシュを削除してアドレスバーの見た目を綺麗にする
window.onload = function() {
let hashString = location.hash.substr(1); // remove '#'
history.replaceState('', document.title, window.location.pathname);
};
//クリックしたときの処理
document.getElementsByClassName('select-lang-en')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','en');
select = document.getElementsByClassName('select-lang-en')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-fr')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','fr');
select = document.getElementsByClassName('select-lang-fr')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-de')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','de');
select = document.getElementsByClassName('select-lang-de')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-it')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','it');
select = document.getElementsByClassName('select-lang-it')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-es')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','es');
select = document.getElementsByClassName('select-lang-es')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-pt')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','pt');
select = document.getElementsByClassName('select-lang-pt')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-tw')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','zh-TW');
select = document.getElementsByClassName('select-lang-tw')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-cn')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','zh-CN');
select = document.getElementsByClassName('select-lang-cn')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
document.getElementsByClassName('select-lang-ja')[0].onclick = function() {
window.localStorage.setItem('lang-select-value','ja');
select = document.getElementsByClassName('select-lang-ja')[0];
lang = select.dataset.lang;
window.location = select.getAttribute('href');
location.reload();
}
//pre内は翻訳させない
document.querySelectorAll("pre").forEach((el) => {
if (!el.hasAttribute("translate")) {
el.setAttribute("translate", "no");
}
});
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage:'ja', includedLanguages:'fr,it,pt,de,zh-CN,zh-TW,es,en'}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>