MENU

プラグイン不要!Google翻訳コードをWordPressに直接追加する方法【functions.php活用】Google Translate ウィジェットを使用

WordPressサイトに翻訳機能を導入したいけれど、できればプラグインを増やしたくない…そんな方におすすめなのが、Google翻訳のウィジェットを直接コードで追加する方法です。

この方法では、functions.php または header.php に数行のコードを追記することで、Google翻訳ボタンを簡単に設置できます。
プラグインに頼らず、サイトを軽量に保ちたい方や、細かい表示位置を自分で調整したい方に向いている方法です。

ただし、WordPressテーマファイルを編集するため、万が一のトラブルを避けるためにも、事前にバックアップを取ることを強くおすすめします。

また、この <script> を使った「Google Website Translator(無料版)」による多言語対応は、2019年に公式での新規提供が終了していて、公式のサポートなどがなく将来の動作保証などはございません。

しかし、現在でも多くのWebサイトで使用されている方法なため、この記事では翻訳ツールの一つの方法としてご紹介をします。

目次

Google翻訳をWordPressに直接追加する手順

1. 翻訳ボタンのHTMLを挿入

まず、翻訳ボタンを表示したい場所に、以下のコードを記述します。テーマの header.phpfooter.php、またはウィジェットエリアでも構いません。

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

これは、翻訳ウィジェットが表示される場所を指定するためのコードです。


2. functions.phpにスクリプトを追加

次に、Google翻訳を有効にするためのJavaScriptコードを functions.php に追加します。

// Google翻訳機能の追加
add_action('wp_footer', function() {
    ?>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'ja',
                includedLanguages: 'en,zh-CN,zh-TW,ko,fr,de,es,th,vi',//選択言語設定
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                multilanguagePage: true,
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <?php
});

このコードでは、wp_footer アクションフックを使用して、Google翻訳のスクリプトをページ下部に読み込ませています。

選択言語一覧は以下になります。

言語コード
アフリカーンス語af
アルバニア語sq
アムハラ語am
アラビア語ar
アルメニア語hy
アゼルバイジャン語az
バスク語eu
ベラルーシ語be
ベンガル語bn
ボスニア語bs
ブルガリア語bg
カタルーニャ語ca
セブアノ語ceb
中国語(簡体字)zh-CN
中国語(繁体字)zh-TW
コルシカ語co
クロアチア語hr
チェコ語cs
デンマーク語da
オランダ語nl
英語en
エスペラント語eo
エストニア語et
フィンランド語fi
フランス語fr
フリジア語fy
ガリシア語gl
グルジア語ka
ドイツ語de
ギリシャ語el
グジャラート語gu
ハイチ・クレオール語ht
ハウサ語ha
ハワイ語haw
ヘブライ語iw
ヒンディー語hi
モン語hmn
ハンガリー語hu
アイスランド語is
イボ語ig
インドネシア語id
アイルランド語ga
イタリア語it
日本語ja
ジャワ語jw
カンナダ語kn
カザフ語kk
クメール語km
キニャルワンダ語rw
韓国語ko
クルド語ku
キルギス語ky
ラオ語lo
ラテン語la
ラトビア語lv
リトアニア語lt
ルクセンブルク語lb
マケドニア語mk
マラガシ語mg
マレー語ms
マラヤーラム語ml
マルタ語mt
マオリ語mi
マラーティー語mr
モンゴル語mn
ミャンマー語my
ネパール語ne
ノルウェー語no
ニャンジャ語ny
オリヤー語or
パシュトー語ps
ペルシャ語fa
ポーランド語pl
ポルトガル語pt
パンジャブ語pa
ルーマニア語ro
ロシア語ru
サモア語sm
スコットランド・ゲール語gd
セルビア語sr
セソト語st
ショナ語sn
シンド語sd
シンハラ語si
スロバキア語sk
スロベニア語sl
ソマリ語so
スペイン語es
スンダ語su
スワヒリ語sw
スウェーデン語sv
タガログ語(フィリピン語)tl
タジク語tg
タミル語ta
タタール語tt
テルグ語te
タイ語th
トルコ語tr
トルクメン語tk
ウクライナ語uk
ウルドゥー語ur
ウイグル語ug
ウズベク語uz
ベトナム語vi
ウェールズ語cy
コサ語xh
イディッシュ語yi
ヨルバ語yo
ズールー語zu

3. 表示位置を調整する

翻訳ボタンが意図した場所に表示されない場合は、<div id="google_translate_element"></div> の設置位置を変更してみてください。

例えば:

  • ヘッダーに設置 → header.php に挿入
  • サイドバーに設置 → ウィジェットのカスタムHTMLとして挿入

※ただし、1ページ内に1つしか設置することはできませんので、複数箇所の設置を希望する場合はプラグインを使ったボタン設置が良いでしょう。


注意点・補足

  • バックアップは必須:テーマファイルを直接編集する場合、子テーマの利用やバックアッププラグインの活用をおすすめします。
  • SEOには限定的:Google翻訳はあくまで表示上の翻訳であり、多言語SEO(インデックス)を強化したい場合は、TranslatePress や Polylang を検討しましょう。
  • 翻訳の精度に注意:自動翻訳は誤訳の可能性もあるため、企業サイトや正確な情報発信が求められるサイトでは注意が必要です。

まとめ

プラグインを使わずにGoogle翻訳を導入する方法は、サイトを軽量に保ちたい方や、柔軟に設置したい方にとって非常に便利な手段です。

コードをコピペするだけで実装できる手軽さも魅力ですが、編集ミスはサイト全体の表示崩れにつながる可能性があるため、必ずバックアップを取った上で行いましょう。

本記事が、自サイトの多言語対応への一歩になれば幸いです。


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次