Web活のロゴ

Web制作Output&初心者のための徹底ガイド

Google翻訳でWebサイトを多言語対応する方法

2023.08.13Google翻訳でサイト全体を多言語化
はじめに
概要

Google翻訳を使用して、ウェブサイトを複数の言語に対応させる方法について説明します。タグを追加するだけで、設定できますので非常に便利な機能です。

スポンサーリンク
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

サイト全体を翻訳

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

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

設定方法

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="google_translate_element"></div>
<div id="google_translate_element"></div>
<div id="google_translate_element"></div>

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

Javascript

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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タグを記述します。以上で設定は完了です。言語を絞り込む等、便利なオプションもありますので調べてみてください。

スポンサーリンク
まとめ
  • 簡単な記述で、サイト全体の翻訳が可能になる
  • 便利なオプションも存在する
  • 商業利用等、公式のドキュメントを確認する必要がある

関連記事


Warning: Undefined variable $current_post_type in/home/xs974247/web-html.blog/public_html/wp-content/themes/blog-child/inc/singlePagenation.phpon line6

Warning: Undefined variable $current_post_type in/home/xs974247/web-html.blog/public_html/wp-content/themes/blog-child/inc/singlePagenation.phpon line9