ブログBLOG

【WP】Google翻訳プラグイン比較！デザインのカスタマイズ方法も解説

更新日：2024/05/24

作成したウェブサイトを海外の人にも見てもらいたい、と思うことはないでしょうか？
しかし日本語だけのサイトでは多くの人には見てもらうことは難しいですよね。

WordPressを利用しているサイトの場合、翻訳プラグインを使うと手間なく導入することができますが、どのプラグインが最適なのでしょうか？
この記事では、Google翻訳を使った複数のプラグインを比較し、それぞれのメリットや特徴を詳しく解説します。

「JP / EN」などのテキストリンクの形や翻訳する言語の国旗を表示させたい、などといったサイトにあったデザインのカスタマイズ方法も解説しますので、最適なプラグインを見つけるために、ぜひこの記事を読んでみてください。

それでは、どうぞ！

今回は利用者が多く、比較的デザインがカスタマイズできる3つのプラグインをご紹介します。
基本的にどのプラグインもGoogle翻訳を使用していますので、翻訳の精度はどれも同じです。

	Google Language Translator	Prisna GWT – Google Website Translator	Translate WordPress with GTranslate
対応言語数	約100ヶ国語	約100ヶ国語	103カ国語
手動で翻訳の書き換えができるか	×	○	×
無料で利用できるか	○	△（一部有料）	○
デザインのカスタマイズが自由にできるか	△	△	◯

※記事執筆時点（2024/5/10）の情報です。

WordPress管理画面の「プラグイン」→「新規追加」で、「Google Language Translator」と検索すると一番最初に表示されます。

Google Language Translatorのメリット・デメリットは以下です。

簡単にインストールできる
設定もシンプルで使いやすく、すぐに多言語化ができる。
多言語に対応できる
自動的に多言語に翻訳される。約100ヶ国語への翻訳ができる。
リアルタイム翻訳
ウェブサイト上のテキストをリアルタイムで翻訳できる。外部へのリダイレクトなしに、異なる言語のコンテンツを表示できる。
ある程度カスタマイズができる
翻訳ツールバーやフラグのスタイル、表示位置などの設定がある。自分のウェブサイトに合わせてある程度デザインを調整できる。

初期状態だと画面右下に「Translate」とかかれたオレンジ色のボタンが表示され、ボタンをクリックすると吹き出しでイギリス国旗が表示されます。

設定画面を開くと多くの設定項目がありますが、その中でデザインが調整できるのは以下の3つです。

タイトルの通り、ここで設定ができるのは国旗のサイズ、英語・スペイン語・ポルトガル語表記の際の国旗の種類です。

初期値のままでも十分に実装できる見た目です。
翻訳後に表示されるGoogleのツールバーなどを非表示にしたり、ボタンの表示位置を右側か左側どちらに設定するか選べます。

翻訳ボタンの表示非表示、ボタンのテキスト・カラー、位置を選択することができます。

各設定項目を使って、例えばこのような見た目にすることは可能です。

出力されたHTMLのクラス名を確認してCSSで上書き調整することは可能です。

#glt-translate-triggerは管理画面で背景色を指定できますが、指定した状態だとこちらの設定が優先されてしまい、せっかく書いたCSSが効きません。
そこで指定したコードをクリアして保存しておくと背景色の指定がされなくなるので、CSSに記載された内容が反映されます。

#glt-translate-triggerなどのクラス名を使って、例えばこのようにCSSを書くとスタイル調整ができます。
管理画面では単色しか設定できないので、グラデーションにしたい場合などにおすすめです。

ですが、対応する言語の国旗がポップアップで表示される形なので、セレクトボックスで言語切り替えや言語切り替えボタンが横に並んだUIにするのは難しいです。