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

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

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

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

• 今回の「WordPress Google Translate」だけでは、グーグル検索へのインデックスへの登録ができるわけではありません。
  
  ですから、
  
  通常考えられることとすれば、日本語ページを作成後、英語ページを作成、その後、さらに多言語ページを作成していく。

• 上記のような流れが一般的だと思います。「第16回　WordPressプラグイン　Edit Author Slug」はセキュリティ対策としても有効ですが、多言語化への言語コード設定を一番わかりやすく変更できます。
  

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

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

1. 日本語のページを作成
   
2. できる限りきちんとした英語へ翻訳
   
3. 英語から多言語へ翻訳
   
   そのためにも必要なプラグインだと思います。

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

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

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

「超いい」

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　さいごに

次は、第20回です。

• 第20回　WordPressプラグイン　EWWW Image Optimizer