記事の詳細

本日発売の「一平ちゃんショートケーキ味」が食べたい網干です。
コンビニ6件、スーパー2件と回りましたが一向に見当たらず…、どこに売っているのでしょうか(´・_・`)
今夜は商品を探して徘徊しようと思います。

というわけで、今回はWordPressの記事翻訳プラグイン「Google Language Translator」を使って、記事を他の言語に変換するボタンを設置する方法をご紹介致します。
先週、私が書いた「GoogleMap作成プラグイン」に引き続き、今回も便利プラグインの紹介になります。
ちなみに、前回はこんな記事を書いています↓

WordPressの無料のプラグイン「Maps Builder」で複数のピンを立てたGoogleMapを作成する方法!【お手軽で簡単、HTMLタグも埋め込めます】
降雪の翌日に、駐輪場の自転車が泥だらけになっていて憂鬱な気持ちになった網干です。どうやら、家の屋根の雪が滑り落ちた際に泥が跳ねて自転車が犠牲になったようです…...

今回の記事を読むことで、下図のような翻訳ボタンを設置して、ボタンを押すことで翻訳ページを表示することができるようになります。
00_実装後のイメージ画像

「Google Language Translator」をWordPressにインストールする

まずはじめに、[プラグイン]→[新規追加]から「Google Language Translator」を検索します。
01_Google Language Translator検索

下図の「Google Language Translator」の「今すぐインストール」を押します。
02_Google Language Translatorインストール

インストールが完了すると「有効化」ボタンが表示されますので、「有効化」ボタンを押します。
03_Google Language Translator有効化

プラグインの有効化が完了すると[設定]タブの中に[Google Language Translator]が表示されます。
04_Google Language Translatorインストールチェック

これで、プラグインのインストールは完了になります。

Google Language Translatorの設定を行う

次に、Google Language Translatorの設定を行います。
…といっても、プラグインのインストールが完了していると、設定画面で特に設定をしなくてもそのまま使えます。
実際に使ってみるとこんな感じに表示されます。
06_ヘッダーに設置

ですが、設定をすることで自分の好みにカスタマイズができますので、いろいろと設定内容を見てみましょう。

[設定]→[Google Language Translator]を押すと下図のような設定画面が表示されます。
05_設定画面

機能の有効化/無効化の設定

[Plugin Status]の項目にチェックを入れると機能が有効になり、チェックを外すと機能が無効になります。
機能を無効にすると翻訳変換ボタンやコンボボックスが全て非表示になります。
07_表示切替チェックボックス

サイトの言語設定

[Choose the original language of your website]の項目でサイトの言語設定を行います。
コンボボックス内に言語の選択肢がありますので、該当する項目を設定します。
今回は日本語のサイトに設定するので[Japanese]を選択します。
08_サイトの言語設定

翻訳言語の設定

[What languages will display in the language switcher?]の項目で翻訳言語を指定します。
[All Languages]を選択するとプラグインが対応している全ての言語を翻訳対象として設定します。
09_翻訳言語選択_対応全言語

[Specific Languages]を選択すると翻訳対象の言語を指定できます。
下図の例では[English]と[Japanese]を選択しているので、コンボボックスには英語と日本語のみが指定できるようになります。
10_翻訳言語選択_一部

翻訳言語の国旗アイコンの表示/非表示設定

[Show flag images?]の項目で翻訳対象の国旗アイコンの表示/非表示が設定できます。
11_国旗表示設定

翻訳言語の国旗アイコンの表示指定

[Choose the flags you want to display]の項目で翻訳言語の国旗アイコンの表示指定ができます。
チェックを入れると対象言語の国旗アイコンが表示されます。
12_国旗表示選択

ウィジェットの表示設定

[Show floating translation widget?]の項目でページ下部に表示する翻訳ウィジェットの設定を行います。
[Show floating translation widget?]の項目を[Yes, show widget]に変更すると下図のような項目が追加されます。
13_画面下部にウィジェット表示設定

[Custom text for the floating widget]の項目はウィジェットに表示する内容を設定します。
[Allow floating widget text to translate?]はウィジェットに表示する内容も翻訳するか否かを設定します。
上図の設定だと下図のように表示されます。
14_ウィジェット表示_mod

ちなみに、ウィジェットをクリックすると下図のように国旗アイコンが表示されます。
アイコンをクリックするとページを翻訳して表示します。
15_ウィジェットクリック_mod

ウィジェットの表示/非表示設定

[Show or hide the langauge switcher?]の項目でウィジェットの表示/非表示設定を行います。
17_ウィジェット非表示

ロゴの表示位置設定

[Layout option]の項目でロゴの表示位置を設定します。
[Vertical]にするとコンボボックスの下に表示。
18_ロゴの位置_下
20_ロゴの位置_下

[Horizontal]にするとコンボボックスの右側に表示します。
19_ロゴの位置_右
21_ロゴの位置_右

グーグルツールバーの表示/非表示設定

[Show Google Toolbar?]の項目でグーグルツールバーの表示/非表示の設定を行います。
22_ツールバー表示

ツールバーを表示設定にすると、ページの上部に下図のようなツールバーが表示されます。
23_ツールバー表示イメージ

ロゴの表示/非表示設定

[Show Google Branding?]の項目でグーグル翻訳のロゴの表示/非表示設定を行います。
24_ロゴ表示

非表示にすると下図のような表示になりますが、基本的には表示のままにしましょう。
25_ロゴ非表示イメージ

翻訳ボタン等の表示位置設定

[Align the translator left or right?]の項目で翻訳ボタンなどの表示位置の設定が行えます。
[Align Left]で左寄り、[Align Right]で右寄りに配置することができます。
26_ロゴ表示位置

翻訳管理機能の有効化/無効化設定

[Multilanguage Page option?]の項目で、複数の言語で書かれた記事を単一の言語で翻訳するように設定できます。
28_言語統一化

グーグルアナリティクスの設定

[Google Analytics]の項目でグーグルアナリティクスの設定を行います。
29_グーグルアナリティクス設定

チェックを入れて設定ボタンを押すと、グーグルアナリティクスのIDを入力する項目が出現します。
30_グーグルアナリティクス設定有効の場合

投稿ページや固定ページで使う際のショートコード

[Full widget usage in pages/posts/sidebar]の項目に、投稿ページや固定ページで使う際のショートコードが表示されます。
31_固定ページ等で使う際のショートコード

ヘッダーやフッターに設置する際のPHPコード

[Full widget usage in header/footer or page template]の項目に、ヘッダーやフッターに設置する際のPHPコードが表示されます。
32_ヘッダーファイル等で使うPHPコード

言語変換を実行するリンクを張るコード

[Single language usage in nav menu/pages/posts]の項目に、言語変換を実行するリンクを張るコードが表示されます。
33_翻訳実行リンクを出力するコード

例として、投稿ページに上記のコードを設置する場合は下図のように使います。
※下図の例では英語翻訳のリンクを設置しています。
34_翻訳実行リンク出力準備

上記の設定でページを見ると、下図のようになります。
35_翻訳実行リンク出力イメージ

リンクになっている箇所をクリックするとページが翻訳されます。
37_英語翻訳実行イメージ

使用例:ヘッダーに翻訳変換ボタンを設置

使用例として、ヘッダーに翻訳変換ボタンを設置する例を紹介します。
下図のように、header.phpの表示したい箇所にPHPコードを埋め込むと翻訳ボタン等が表示されます。
36_ヘッダーに翻訳変換ボタンを設置

いかがでしたか?

WordPressのプラグインの良いところは「実装が簡単」という部分だけではなく、
プラグインを使用することで「WordPressで何ができるのか?」を知ることができる部分にもあると思います。

WordPressでできることを知り、技術を習得し、自身の技術を上乗せしてよりよい機能を作っていく。
そんな技術者になっていきたいですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る