第19回 【WordPress】 プラグイン WordPress Google Translate

WordPress GCP

1. 第19回 【WordPress】 プラグイン WordPress Google Translate

環境:Debian 9 php 7.0 Apache 2.4.25 MySQL 5.7 Cocoon

目的:Googleの翻訳機能を利用できるようにする

Tokyo2020 unofficial 非公式」で多言語化しようとしています。そのために色々試した結果です。「投票2020」には必要ない機能です。多くの日本人にとって必要のない機能です。

プラグインを組み合わせると


自分ができる範囲の綺麗な多言語のWebサイトができます。

  • 第16回 WordPressプラグイン Edit Author Slug
  • 第19回 WordPressプラグイン WordPress Google Translate
  • 第29回 WordPressプラグイン Duplicate Post 投稿やページを複製できます

何が言いたいのか


 多言語化には必須。

  • Edit Author Slug:

    日本語「例、https://www.tokyo2020unofficial.com/ja/00-japan/0003-japanese-sake-nihonshu/」
    英語「例、https://www.tokyo2020unofficial.com/en/00-japan/0003-japanese-sake-nihonshu-en/」

    Googleが推奨するサブディレクトリ型の「多言語化サイト」を作成することができます。「ja」「en」は言語コードです。


  • WordPress Google Translate:今回書くプラグインです。

    「グーグル翻訳」が利用できるプラグインです。


  • Duplicate Post:投稿ページを複製できるプラグインです。

    レイアウトを変えることなく複製したページができます。


  • 今回の「WordPress Google Translate」だけでは、グーグル検索へのインデックスへの登録ができるわけではありません。

    ですから、

    通常考えられることとすれば、日本語ページを作成後、英語ページを作成、その後、さらに多言語ページを作成していく。
  • 上記のような流れが一般的だと思います。「第16回 WordPressプラグイン Edit Author Slug」はセキュリティ対策としても有効ですが、多言語化への言語コード設定を一番わかりやすく変更できます。
日本語→英語→多言語


なぜ、英語から多言語するのか。

※私が考えていることが一番良いとは言い切れません。余るほどのお金があるなら、翻訳会社などに依頼すれば良いと思います。

金融経済の仕組みで考えると自然に答えが出ると思います。金融経済はお金が絡んでいます。今回のことに限らず、世界的に一番敏感に反応するのは金融経済、また、無料で得られる一番正しい世界共通の経済指標だと思っています。

そこで私が考えたことは、為替通貨取引の仕組みです。

日本人が一番馴染みのある「米ドル/円」「1米ドルが何円なのか」です。

仮に、「豪ドル/円」で「豪ドル」を買って「円」を売る取引をしたいと考えた場合、電子的な一瞬の取引ですが、一般的な流れとして、

  1. 「豪ドル/米ドル」で、「豪ドル」を買い、「米ドル」を売ります。
  2. 「米ドル/円」で、「米ドル」を買い、「円」売ります。

国際通貨と呼ばれる基軸通貨5種類以外で取引をしたい場合は、「米ドル」を介して取引がなされます。※実際には「EUR/USD」以外は同様という話もあります。

ゆえに、「英語以外の言語で多言語化したい場合」、かつ、「Google翻訳を利用したい場合」の両方を満たすには、「英語」を介することが一番良い翻訳結果が得られると考えています。

Googleは「数学者」「物理学者」「経済学者」に精通した人が多く勤めるアメリカの会社です。「Google翻訳」で「英語」が介される「翻訳」が行われていると考えるのが自然です。

このWebサイトも「GCP」を利用していますが、トラブルで問い合わせを行った場合、「迅速に、的確に、問い合わせ内容に答えてくれるのは英語」です。

多言語化の最適解として、できる限りきちんとした英語→多言語化をすることだと思います。

特に「検索対象となるインデックスされるかどうか」を考える時には、

  1. 日本語のページを作成
  2. できる限りきちんとした英語へ翻訳
  3. 英語から多言語へ翻訳

    そのためにも必要なプラグインだと思います。

なんで「WordPress Google Translate」を選んだのか。

非常に多くのプラグインを試しました。また、翻訳とページ複製の連携ができるプラグインなど。ですが、「WordPress Google Translate」以外は私には合いませんでした。2020年7月時点で「300もダウンロードされていません」。2019年末においては「100」にも届いていませんでした。

いろいろ試して、破れかぶれの状態だったので「えいやー」という気持ちで導入してみました。

「超いい」

  • WordPress
    WordPress Google Translate

    インストール、有効化。

  • WordPress
    WordPress Google Translate

    ウィジェットで設定。

  • WordPress
    WordPress Google Translate

    レイアウト崩れまくる。

  • WordPress
    「CSS」の設定

    レイアウトの調整。

1.1 試したプラグインの一つ

  • 「Translate WordPress – Google Language Translator」
  • 「Google翻訳」問題なくできます。
  • 「翻訳言語」を独自に選択できます。
  • このプラグイン良いです。

1.2 試したプラグイン問題点①

  • 「例、https://www.tokyo2020unofficial.com/ja/00-japan/0003-japanese-sake-nihonshu/」

    こちら別サイトの「日本酒ページ」ですが、翻訳されても日本語は変更されないようにインラインコードを引いています。そのインラインコードの背景は、悟られることのないように「白」に設定しています。


    しかーし、

  • インラインコードに枠線が出てしまいます。

1.3 試したプラグイン問題点②

上記画面で「インラインコードに枠線」が表示されるなら、ソースコードにもあり得ると考えて、試してみました。

  • 「Cocoon」での「ソースコード」:「枠線」表示される。
  • 「Cocoon」での「整形済みソースコード」:「枠線」が表示されない。


    他のプラグインを探した理由がこれです。上級者ならこの「枠線」だけを表示させないように設定できると思います。

    できたら、教えてほしい。。。。。。

1.4 WordPress Google Translate

「WordPress管理画面」「プラグイン」「新規追加」で、「WordPress Google Translate」を検索して、インストールして、有効化します。

1.5 ウィジェットで設定

  • 特別に設定することはありません
  • 「WordPress管理画面」「外観」「ウィジェット」をクリックします。
  • 「Google翻訳」をどの部分に表示させるかの設定です。

1.6 ウィジェットで設定した箇所

  • 投稿タイトル上
  • インデックスリストトップ

1.7 枠線がなくなった①

  • 「Translate WordPress – Google Language Translator」を導入した時に表示されていた枠線がなくなりました。

1.8 枠線がなくなった②

  • 「Translate WordPress – Google Language Translator」を導入した時に表示されていた枠線がなくなりました。
  • WordPress Google Translate」を導入した理由です。

1.9 「Responsive Menu」との兼ね合い

  • 「第18回 WordPressプラグイン Responsive Menu」を導入しています。上からの距離を離していた理由がこの画面です。

1.10 レイアウトが崩れる問題

  • 下記画面ではうまくいたように見えます。
  • 右上「メニューボタン」をタップ。
  • 「パソコン」での表示には問題ありませんが、「モバイル」ではレイアウトが崩れてしまいます。

1.11 モバイルレイアウト問題①

  • 下記画面は、「01-Hokkaido」をタップした時の画面です。
  • 「01-Hokkaido」をタップすると、画面全体に「Responsive Menu」が広がってしまい、レイアウトが崩れてしまいます。

1.12 モバイルレイアウト問題②

  • 崩れててしまった「モバイルレイアウト」全体を縮小表示してみます。
  • なんやら右側に白い背景部分が表示されています。

1.13 モバイルレイアウト問題③

  • 問題A:
    上記画面の白い背景部分は「Google翻訳」でリアルタイムに表示される「原文」のポップアップでした。
  • 問題B:
    「モバイル画面のGoogle翻訳上部」で「Responsive Menu」のボタンが重なってしまっていましたので、ボタンを下に移動しました。

1.14 問題B①

  • 「Google翻訳」がされている状態で、「Google翻訳」のバーを「途中で区切って」メニューボタンを上部に移動させたいと思います。

1.15 問題B②

  • 下記画面は、「Responsive Menu」のメニューボタンをタップした時です。

1.16 問題B③

  • 「01-Hokkaido」をタップすると、画面全体に「Responsive Menu」が広がってしまい、レイアウトが崩れてしまうことには変わりません。再現性があります。

1.17 問題B④

  • 「Google翻訳」がされている状態で、「Google翻訳」のバーを「途中で区切った」からといって、「原文」のポップアップがなくなることもないということが分かりました。

1.18 問題B⑤

  • 日本語で表記される「長い言語名」、「アゼルバイジャン語」に翻訳してみました。
  • 「Google翻訳」がされている状態で、「Google翻訳」のバーを「途中で区切っても」、「原文」という文字は表示されています。
  • これはイケそうだと思った瞬間でした。

1.19 問題B⑥

  • 「Responsive Menu」のボタンを上に移動して重ならないようにすれば、「問題B」は解決します。
  • 目処が立ちましたので、「問題A」の方の解決に進みます。

1.20 問題A①

  • 「Responsive Menu」のどの部分をタップしても、「Google翻訳」でリアルタイムに表示される「原文」のポップアップが出てくる問題です。

1.21 問題A②

  • 「アゼルバイジャン語」で解決できるかどうかそのまま突き進みます。
  • 「Google翻訳」でリアルタイムに表示される「原文」のポップアップは相変わらず出てきます。

1.22 問題A③

  • 「Google翻訳」でリアルタイムに表示される「原文」のポップアップが表示されたまま「Responsive Menu」のボタンをタップしても、レイアウトが右側にずれていきます。

1.23 問題A④

  • 「モバイル画面」全体を縮小表示してみます。

1.24 問題A⑤

  • どうしても、「Google翻訳」でリアルタイムに表示される「原文」のポップアップが右にずれてしまう原因になります。

1.25 問題A⑥

  • 試しに、「パソコン」同様の現象が発生しているのか」ということも確認しました。

1.26 問題A⑦

  • 英語を選択して自分で確認しやすいようにしました。

1.27 GCP側のサーバー情報

赤枠の4行が「GCPのWeb管理サーバー」の情報です。

1.28 問題A⑧

  • 「パソコン」で確認してみたのには意味があり、「style.CSS」を確認できるからです。これは、他のWebサイトで、ソースコードを確認する方法で覚えたことです。
  • 「パソコン」で「Google翻訳」を行なった後、「CSS」がどのようになっているのか確認してみました。
  • 「F12」「Network」「CSS」の順番でクリックすると、「translateelement.css」とうものを発見しました。

1.29 問題A

  • 「Google翻訳」の「CSS」であろう「CSS」を新しいタブで開いてみました。

1.30 問題A

  • 若干、死ぬかと思いました。想定していなかったので。

1.31 問題A

  • 上記画面、調べ直してみると、「新しいタブで開く」のではなく、「左クリック」すると下記画面になることがわかりました。
  • そうはいっても、記載されている情報は一緒です。根気よく探しました。
  • 何を探したのかというと、「Google翻訳」でリアルタイムに表示される「原文」のポップアップによって、右にずれてしまう原因です。

1.32 問題Bの該当部分

  • 「Google翻訳」の上部バーと、「Responsive Menu」右上のメニューボタンを干渉させずに、上部に移動できるスペースを確保するための該当する「CSS」です。

1.33 問題Aの該当部分

  • 見つけた時には「コイツか」と思うほどの感情を持ちました。
  • 刮目すべき点は、「420px」の部分です。これが「Google翻訳でリアルタイムにポップアップで表示される幅」の部分です。

1.34 「CSS」を編集して解決

  • 問題A
  • 問題B
  • どちらにも共通して言えることは「CSS」でレイアウトを自分独自に都合が良いように指定することです。

「WordPress管理画面」「外観」「テーマエディター」の順番でクリックして、「style.css」を編集できる画面を表示させます。

1.35 問題Aのボタン部分

  • 下記画面ののように記載してください。
  • 実際のコードです。「85%」の部分については、変更して問題ない数字です。
/* Google翻訳の上部レイアウト崩れ防止 */
.goog-te-banner-frame{
    position: relative;
    width: 85% !important;
}

1.36 問題Aのボタン部分解決

  • 上記の「85%」というのは、プラグイン「Responsive Menu」のコンテナサイズと同一にすると違和感なく表示されます。

1.37 問題Aのボタン部分

  • 「え、これで解決するの?」というくらいシンプルです。
  • width:
    「400px」→「300px」へ変更
  • padding:
    「原文」を「ポップアップ表示」の左端からどのくらいの距離を取って表示させるかです。
  • 私が設定しているのが「300px」ですが、レイアウトが崩れなければ、どのような「px」でも問題ないと思います。
/* Google翻訳の原文ポップアップレイアウト崩れ防止 */
#goog-gt-tt {
    width: 300px !important;
	padding: 5px;
}

1.38 レイアウト崩れ防止確認

  • 下記画面で確認すると分かりますが、「モバイル画面」の「Google翻訳」されたリアルタイムの原文ポップアップ表示が右側に飛び出てレイアウトが崩れることがなくなっていることが確認できます。
  • 「パソコン」「モバイル」のどちらでも、レイアウトが崩れることなく、利便性の良い状態になりました。

1.39 試しにもう一つ確認

  • 上記画面「Responsive Menu」のコンテナ、「メニュー画面」の背面に表示されている、赤枠右側の「白い原文ポップアップ部分」をタップしてみます。
  • 「原文」のポップアップが表示されるとともに、レイアウトが崩れていないことが確認できます。

1.40 上記画面でリンク以外をタップ

  • 上記画面でリンク以外をタップした場合、何事もなかったかのように「原文ポップアップ」の表示はなくなります。

1.41 サイドバーでも確認完了

  • 英語に翻訳されているということが確認できるとともに、「原文のポップアップ」表示がされ、「原文の内容もきちんと」表示されていることが確認できます。

1.42 さいごに

最大のポイント

 
今更かよと。。。

  • Googleが「Google翻訳」公式プラグインを廃止したように、「ユーザーの利便性を損なうような変更」はしないことだと思います。
  • 例えば、「原文ポップアップの表示」自体をなくしてしまうことなどです。互いに絡み合う利益を損なうことなく利便性を追求する、そこに問題はないと思います。

アゼルバイジャン語、ごめんね。


次は、第20回です。


【コメント】 ※「メールアドレス不要」