WordPress 多言語サイトリダイレクト(feat。JavaScript)

Last Updated: 2023 年 04 月 16 日 댓글

最近、Polylanがインストールされている多言語サイトが問題を引き起こし、最新バージョンに更新する作業を行いました。 長時間更新していない場合は、最新バージョンに更新するとサイトにエラーが発生するおそれがあります。 まず クラウドウェイズにテストサイトを作成して作業した後、いくつかの小さな問題を確認して修正した後、実サイトで更新を断行しました。

アップデート後にクライアントがホームページにアクセスした場合、すべてのユーザーを英語のホームページにリダイレクトするように求め、JavaScriptで必要に応じて実装しました。 しかし、ブラウザの言語をチェックせずに、すべてのユーザーを無条件に特定の言語サイト(英語サイトや韓国語サイトなど)にリダイレクトするのはあまり良いアイデアではありません。

WordPress 多言語サイトリダイレクト(feat。JavaScript)

WPMLの場合、独自にブラウザ言語検出機能が提供されます。 Polylangの場合を見てください。 Polylang – Country Detectionという別のプラグインを使用すると、ブラウザの言語を検出して適切な言語ページにリダイレクトするようです。

ただし、 WordPress フォーラムの記事を見ると、Polylangブラウザの言語検出はフロントページがキャッシュされていない場合にのみ機能すると言われています。 一部のユーザーはサイト全体でキャッシュプラグインを無効にしているので、うまくいきます。

Polylang browser language detection redirects visitors to the correct language of frontpage by looking at language preference of browser. This only works if the frontpage is not cached.

キャッシュプラグインがインストールされている場合は、Polylanのブラウザ言語検出機能が正しく機能していることを確認してください。

前へでマルチサイトで作成した多言語サイトで言語リダイレクトを設定するコードを紹介したことがあります。

WordPress 多言語サイトリダイレクト(feat。JavaScript)

簡単に韓国語バージョンと英語バージョンのXNUMXつがありますが、フロントページ(ホームページ)にアクセスしたときにすべてのユーザーを英語サイトにリダイレクトしたい場合は、次のJavaScriptコードをヘッダー部分に追加できます。

<script>
  function setCookie(name, value) {
    document.cookie = name + "=" + (value || "") + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  (function() {
    var currentURL = window.location.href;
    var homePageURL = 'https://example.com/';

    if (currentURL === homePageURL) {
      // Check if the user has visited the homepage before
      var visited = getCookie('visited');

      if (visited === null) {
        // If the user has not visited before, redirect to the English version
        window.location.href = 'https://example.com/eng/';
        setCookie('visited', 'true');
      } else {
        // If the user has visited before, show the current page (https://example.com/)
      }
    }
  })();
</script>

ブラウザ言語が韓国語の場合はそのままにしておき、ブラウザ言語が韓国語でない場合にのみ前面ページでリダイレクトが発生するようにするには、次のようなコードを試してみてください。

<script>
  function setCookie(name, value) {
    document.cookie = name + "=" + (value || "") + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  (function() {
    var currentURL = window.location.href;
    var homePageURL = 'https://example.com/';

    if (currentURL === homePageURL) {
      // Check if the user has visited the homepage before
      var visited = getCookie('visited');

      if (visited === null) {
        var language = navigator.language || navigator.userLanguage;
        var isKorean = language.slice(0, 2).toLowerCase() === 'ko';

        if (!isKorean) {
          // If the user has not visited before and the browser language is not Korean, redirect to the English version
          window.location.href = 'https://example.com/eng/';
        }

        setCookie('visited', 'true');
      } else {
        // If the user has visited before, show the current page (https://example.com/)
      }
    }
  })();
</script>

もう少し洗練されていますが、最初のランディングページがフロントページの場合にのみリダイレクトが発生するようにするには、次のコードを試してください。 (別のページにアクセスしてから前面ページに移動すると、リダイレクトは発生しません。)

<script>
  function setCookie(name, value) {
    document.cookie = name + "=" + (value || "") + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  (function() {
    var currentURL = window.location.href;
    var homePageURL = 'https://example.com/';
    var referrer = document.referrer;
    var isExternalReferrer = !referrer.startsWith(homePageURL);

    if (currentURL === homePageURL && isExternalReferrer) {
      // Check if the user has visited the homepage before
      var visited = getCookie('visited');

      if (visited === null) {
        var language = navigator.language || navigator.userLanguage;
        var isKorean = language.slice(0, 2).toLowerCase() === 'ko';

        if (!isKorean) {
          // If the user has not visited before and the browser language is not Korean, redirect to the English version
          window.location.href = 'https://example.com/eng/';
        }

        setCookie('visited', 'true');
      } else {
        // If the user has visited before, show the current page (https://example.com/)
      }
    }
  })();
</script>

言語の数が増えると、コードが少し複雑になります。 状況に応じてコードを適切に適用して修正できます。

上記のコードではセッションクッキーを利用しましたが、クッキー時間を1日に設定したい場合は、次のようにコードを変形できます。

<script>
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  (function() {
    var currentURL = window.location.href;
    var homePageURL = 'https://example.com/';
    var referrer = document.referrer;
    var isExternalReferrer = !referrer.startsWith(homePageURL);

    if (currentURL === homePageURL && isExternalReferrer) {
      // Check if the user has visited the homepage before
      var visited = getCookie('visited');

      if (visited === null) {
        var language = navigator.language || navigator.userLanguage;
        var isKorean = language.slice(0, 2).toLowerCase() === 'ko';

        if (!isKorean) {
          // If the user has not visited before and the browser language is not Korean, redirect to the English version
          window.location.href = 'https://example.com/eng/';
        }

        setCookie('visited', 'true', 1); // Set the cookie to expire in 1 day
      } else {
        // If the user has visited before, show the current page (https://example.com/)
      }
    }
  })();
</script>

クッキーの時間を2日に変更したい場合は、setCookie('visited', 'true', 1)で「1」を「2」に変えることができます。

参照


コメントを残す

コメント