多言語(日・英)サイトでブラウザの言語が日本語以外の訪問者が日本語版に訪問された際、 英語版に誘導するための方法(ポップアップ等)をアドバイス下さい。

Question

前提・実現したいこと

WordPressで多言語(日本語・英語)を「BOGO」というプラグインを導入して作成しています。
ブラウザの言語が日本語(ja)以外の訪問者が日本語版に訪問された際、
英語版に誘導するためのポップアップ or 何らかの表示をして、
英語版に誘導したいと考えていますが、参考になる情報が探しだせず困っています。
上記を実現するためのプラグインやコード等、アドバイスいただけますと幸いです。

参考サイト

• https://www.apple.com/

(日本語環境からアクセスすると上部に「お住まいの場所に合ったコンテンツを表示させ、オンラインで購入できるようにするには、国または地域を選んでください。」と言語スイッチャーが現れる)

• https://www.amazon.com/

(日本語環境からアクセスすると「You are on amazon.com. You can also shop on Amazon Japan for millions of products with fast local delivery. Click here to go to amazon.co.jp」と誘導の案内が表示される)

Comments

[m.ts10806]

自動で対象言語に切り替えるのではダメですかね

[yosato]

返信ありがとうございます。
できればリダイレクトをしない方法を探しています。
また、可能であればPHPで実現したいと思っています。

[m.ts10806]

リダイレクトはしなくても良いかと。同じURLで出す内容を切り替えます。
※WordPressで実現可能なプラグインがあるかは知らないですが、データがあるなら幾つもURLなくていいんじゃないかなあと

PHP組めるならそれこそ如何様にもできるとは思いますけど

Answer 1

ブラウザでユーザーが指定している言語は一応JavaScriptでわかるようです。英語版かどうかの情報はページ中のどこかかURLにあると思われるので、それとつき合わせて判断すれば良いと思います。

【JavaScript - JavaScriptでブラウザ言語を取得したい｜teratail】
https://teratail.com/questions/188080

Comments

[yosato]

回答ありがとうございます！JavaScriptでおおむね解決できました！
参考にさせていただきました。ありがとうございました。

Answer 2

サーバーエラーで重複して投稿されたので削除しました。

Answer 3

回答いただきましてありがとうございます！
教えていただいた方法と、こちらを参考に、以下のように対応して
JavaScriptとCSSで日本語と、それ以外(＝en)を振り分け、メッセージの表示/非表示で実現できました。

JavaScript

<script>
window.onload = function() {
  var language;

  if (navigator.browserLanguage != null) {
    // Internet Explorer, Opera, 他
    language = navigator.browserLanguage.substr(0, 2) == "ja" ? "ja" : "en";
  } else if(navigator.userLanguage != null) {
    // Internet Explorerの場合
    language = navigator.userLanguage.substr(0, 2) == "ja" ? "ja" : "en";
  } else if(navigator.language != null) {
    // Chrome, Firefox, Opera, 他
    language = navigator.language.substr(0, 2) == "ja" ? "ja" : "en";
  } else {
    // その他
    language = "en";
  }

  setLanguage(language);
}

function setLanguage(language){
  var element = document.getElementsByClassName("displaybylanguage");
  for (var i = 0; i < element.length; i++) {
    if(element[i].getAttribute("lang") == language){
      element[i].style.display = "block";
    }
    else{
      element[i].style.display = "none";
    }
  }
}
</script>

CSS

.displaybylanguage {
    display: none;
}

• 表示する必要のない日本語環境でのローディング時のチラ見せ防止対策

HTML

<div class="displaybylanguage" lang="en">
ブラウザの言語が日本語以外の時にこのメッセージを表示する
</div>

• HTML文はHeader内のウィジェットに入れ、BOGOプラグインにより日本語ページのみに表示されるよう設定しました。

希望はPHPでしたが苦手なのと納期が迫っているためJavaScriptで妥協しましたが、
思ったよりいい仕上がりでした。
私のリサーチ不足をお詫びいたします。
回答頂きましてありがとうございました！