サイト全体を翻訳

実装内容は以下のようになります。

セレクトボタンで言語を選択することができて、サイトを多言語化することができます。

設定方法

HTML

<div id="google_translate_element"></div>

表示したい部分に記述します。以下のスクリプトを記述することで、自動的に中身を生成します。

Javascript

<script defer type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
                pageLanguage: "ja",
                layout: google.translate.TranslateElement.InlineLayout,
            },
            "google_translate_element"
        );
    }
</script>

<script defer type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

こちらの2つのscriptタグを記述します。以上で設定は完了です。言語を絞り込む等、便利なオプションもありますので調べてみてください。