サイトの言語切り替え：サイトの言語バージョンを選択した際にユーザーにメッセージを表示するにはどうすればよいでしょうか？ - 💙💛 ファンクラブ

私たちの LovePets UAチーム作成したラブペッツポータル у 2021年にウクライナ語のリソースとして。当初はすべてのURLがウクライナ語で、言語コードは含まれていませんでした。その後、プロジェクトの拡張により、サイトの多言語版を追加し、現在ではリソースは 90以上の言語で利用可能ただし、当社のすべてのコンテンツは、これまでと同様にウクライナ語で作成されています。

さらに、ポータルのウクライナ語版では、これまでと同様にURLに言語コードは含まれません。言語コードは、元の言語であるウクライナ語と異なるページにのみ追加されます。これにより、ユーザーにとって単一かつシンプルなURL構造を維持し、すべてのウクライナ人がコンテンツに簡単にアクセスできるようになります。

ウクライナのユーザーの皆様にポータルをより快適にご利用いただけるよう、言語コード/ru/でURLにアクセスされたお客様には、控えめな通知が表示されるようにしました。このメッセージは、すべての訪問者の利便性を維持しながら、ウクライナ語への切り替えをご案内するものです。

この記事では、ウェブサイトに配置できるシンプルな言語切り替えコードとメッセージをご紹介します。これにより、ウクライナの「ウクライナ語の国語としての機能確保に関する法律」の要件を遵守し、特定の言語へのリダイレクトを強制することなく、ユーザーの利便性を高めることができます。

サイトの言語バージョンに関するインタラクティブなメッセージを作成する: ステップバイステップの手順

下記の言語変更通知コードは、どの言語バージョンにも適応できることをまずお伝えしておきます。ただし、考慮すべき重要な点がいくつかあります。

HTML の言語コード: HTMLコードにタグを使用して言語コードが設定されていることを確認してください <html lang=«uk»>これは、サイトのデフォルトの言語バージョンと他の言語バージョンの両方に対して実行する必要があります。
URL構造: このコードは、サブドメインではなく、言語バージョンのサブフォルダー構造を使用するサイトに適合しています。
URL名URLはすべての言語バージョンで同じである必要があります。つまり、https://www.lovepets.com.ua/pro-sajt というページのデフォルトバージョンは、言語プレフィックス「/ru/」のみが同じになります。例：https://www.lovepets.com.ua/ru/pro-sajt。ご覧のとおり、/pro-sajt という名前はウクライナ語バージョンとロシア語バージョンで同じです。

ここでは、ユーザーがロシア語のページにアクセスした場合に、ウクライナ語版への切り替えを提案するメッセージを表示するコードの例を分析します。例えば、次のようになります。

1. ユーザーがページ https://www.lovepets.com.ua/ru/ を開きました。
2. ページコードには、形式の言語マークアップが含まれています。

3. URL に言語コード /ru/ が含まれています。
4. スクリプトは、ポイント 2 と 3 に基づいて、ウクライナ語バージョンに切り替えることを提案するメッセージを表示します。

ユーザーが言語変更に関するメッセージを見ると、ウクライナ語版に切り替えるか、ロシア語版のままにするかというジレンマに陥ります。ウクライナ語版に切り替えることを選択した場合、同じブラウザウィンドウ内の対応するページにリダイレクトされます。このスクリプトの動作は単純で、URLから言語プレフィックスを削除し、ユーザーをデフォルト言語にリダイレクトします。ただし、前述のように、サイトのすべての言語版で同じURL名を使用することが重要です。

ユーザーがサイトの現在のバージョンに留まることを選択し、「閉じる」ボタンをクリックした場合、その選択は記憶されます。1回のセッション中は、このメッセージは再度表示されません。これはブラウザのローカルストレージ（localStorage) は、ページがリロードされた後でもデータが保持されます。

使い方：

LocalStorage ユーザーがメッセージを閉じたという情報を保存します。
次回のサイト訪問時に、スクリプトは localStorage存在する場合、メッセージは表示されません。

特徴：

データ入力 localStorage ユーザーがブラウザのキャッシュをクリアするまで、永続的に保存されます。
つまり、ユーザーがタブを閉じて再度サイトにアクセスしても、通知は表示されません。
必要に応じて、より柔軟な動作を設定できます。例えば、一定期間後にメッセージを再度表示するなどです。これを行うには、Cookieや一時保存などの他のデータ保存方法を使用します。 sessionStorage.

このアプローチは、ユーザーの邪魔にならず、同時にユーザーの選択を尊重するため、ユーザーフレンドリーです。ユーザーが後から言語を変更したい場合は、いつでもポータルの言語変更ウィジェットから変更できます。

次に、言語バージョンを切り替える機能を備えた通知コード自体を示します。これは、HTML コードに直接追加するか、WordPress プラグインを介してサイトのフッターに配置できます。 WPCode - ヘッダーとフッターの挿入.

タグの前にコードを追加します

</body>

これは終了です。コード自体は：

<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;
            
            // Прибираємо /ru/ з URL
            var ukrainianUrl = currentUrl.replace("/ru/", "/");

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Надано <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">командою LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

使い方：

ページの言語を確認する:
- ページの言語が lang=«ru»、スクリプトがアクティブになります。
ウクライナ語版のURL構成:
- 現在の URL のプレフィックスがチェックされます。 /ru/プレフィックスが見つかった場合は削除され、言語プレフィックスのないウクライナ語バージョンの URL が形成されます。
メッセージの作成と表示:
- ページ上にテキストとボタンのあるブロックが表示され、ウクライナ語版に切り替えるように勧められます。ボタンをクリックすると、 /ru/.
監査 localStorage:
- スクリプトはキーの存在をチェックする hideLanguageNotification 意味のある «true»キーが存在する場合、メッセージは表示されません。
メッセージを閉じる:
- 「閉じる」ボタンをクリックすると localStorage 値が記録される «true»、メッセージは画面から消えます。セッションが終了するまで、メッセージは再び表示されません。
ウクライナ語版に切り替える:
- ウクライナ語版に切り替えるボタンがアクティブになっており、対応する URL に移動します。

メッセージのスタイル:

メッセージは見やすさを考慮してスタイル設定されており、ページの右下隅に配置されています。基本的なCSSプロパティの例を以下に示します。

message.style.position = "fixed"; /* Повідомлення залишається на екрані під час прокручування */
message.style.bottom = "50px"; /* Відступ від нижньої межі екрана */
message.style.right = "10px"; /* Відступ від правої межі екрана */
message.style.padding = "15px"; /* Внутрішні відступи */
message.style.backgroundColor = "#ffcc00"; /* Світло-жовте тло для помітності */
message.style.color = "#000"; /* Чорний текст для контрасту */
message.style.borderRadius = "5px"; /* Закруглені кути для сучасного зовнішнього вигляду */
message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)"; /* Тінь для створення об'єму */
message.style.zIndex = "1000"; /* Поверх інших елементів сторінки */
message.style.maxWidth = "400px"; /* Обмеження ширини для великих екранів */

これらのスタイルは、サイトのデザインに応じてオプションを追加または変更して、必要に応じてカスタマイズできます。

機能と柔軟性:

データは以下に保存されます localStorageユーザーがブラウザのキャッシュをクリアするまで。
より柔軟な通知設定（例えば、一定時間後に再表示するなど）には、 Cookies або sessionStorage.

URL アドレスに言語コードがあるサイトのデフォルトのロシア語版からウクライナ語版への言語切り替え

では、/ru/ プレフィックスのないデフォルトのロシア語版サイトと、/uk/? プレフィックスを含むウクライナ語版サイトをご利用の方はどうすればよいでしょうか？コードの例を以下に示します。

<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;

            // Створюємо новий URL з додаванням префікса /uk/
            var ukrainianUrl;
            if (currentUrl.includes("/uk/")) {
                ukrainianUrl = currentUrl; // Якщо вже є префікс /uk/, не змінюємо
            } else {
                var urlParts = currentUrl.split('/');
                urlParts.splice(3, 0, 'uk'); // Вставляємо 'uk' після домену
                ukrainianUrl = urlParts.join('/');
            }

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Надано <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">командою LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

変更点:

接頭辞 /uk/: コードにプレフィックスが追加されました /uk/ URLのドメイン名の後に（例えば https://example.com/page 動作します https://example.com/uk/page).
プレフィックスの存在を確認する: URLにすでに /uk/、スクリプトはそれを再度追加しません。
リンク処理: ユーザーがロシア語バージョンを使用している場合は、正しいプレフィックスが追加されたウクライナ語バージョンにリダイレクトするボタンが作成されます。

これで、サイトのウクライナ語バージョンに切り替えると、HTML 内の言語コードのみが考慮され、必要なプレフィックスが自動的に追加されます。

ただし、コード (最初の例と 2 番目の例の両方) は、ロシア語バージョンとウクライナ語バージョンの URL 名が同じ場合にのみ機能することを再度お知らせします。

URL が異なり、言語プレフィックスのみを置き換えても問題が解決しない場合はどうなりますか?

言語プレフィックスだけでなく URL 名自体もサイトの言語に応じて変更される場合 (たとえば、同じページに対してロシア語バージョンの URL とウクライナ語バージョンの URL が別々に存在する場合)、正しくリダイレクトするには、ロシア語 URL とウクライナ語 URL 間の既知の対応を使用する必要があります。

アプローチ1: 既知のURLマップを使用する

各ロシア語の URL がウクライナ語の URL に対応するオブジェクトを作成します。
ユーザーがサイトのロシア語版にアクセスしていることを検出すると、このマップで現在の URL を探し、対応するウクライナ語の URL にリダイレクトします。

例：

<!-- Перемикач мови -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Перевіряємо, чи не закривав користувач повідомлення раніше
    if (localStorage.getItem("hideLanguageNotification") !== "true") {
        // Перевіряємо значення атрибута lang
        if (document.documentElement.lang === "ru") {
            // Отримуємо поточний URL
            var currentUrl = window.location.href;

            // Карта відповідностей URL між російською та українською версіями
            var urlMap = {
                "https://www.example.com/ru/about-us": "https://www.example.com/uk/pro-nas",
                "https://www.example.com/ru/contact": "https://www.example.com/uk/kontakty",
                "https://www.example.com/ru/services": "https://www.example.com/uk/poslugy"
                // Додавайте інші відповідності
            };

            // Знайти український URL для поточної сторінки
            var ukrainianUrl = urlMap[currentUrl] || currentUrl.replace("/ru/", "/uk/");

            // Створюємо елемент для повідомлення
            var message = document.createElement("div");
            message.innerHTML = `
                <p style="margin: 0 0 10px 0;">Вы находитесь на русскоязычной версии сайта.</p>
                <a href="${ukrainianUrl}" style="background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; display: inline-block; margin-bottom: 10px;">Перейти на украинскую версию</a>
                <button id="closeNotification" style="background-color: red; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; display: inline-block;">Закрыть</button>
                <p style="font-size: 12px; margin-top: 10px; text-align: center;">
                    Предоставлено <a href="https://www.lovepets.com.ua/eeat/eksperty-lovepets-ua" target="_blank" style="color: #007bff; text-decoration: underline;">LovePets UA</a>
                </p>
            `;
            message.style.position = "fixed";
            message.style.bottom = "50px"; // Додаємо відступ знизу для адаптивності
            message.style.right = "10px";
            message.style.left = "10px";  // Додаємо відступ зліва для адаптивності
            message.style.padding = "15px";
            message.style.backgroundColor = "#ffcc00";
            message.style.color = "#000";
            message.style.borderRadius = "5px";
            message.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.1)";
            message.style.zIndex = "1000";
            message.style.maxWidth = "400px";  // Обмежуємо максимальну ширину для великих екранів
            message.style.margin = "0 auto";  // Центруємо на екранах

            // Додаємо повідомлення на сторінку
            document.body.appendChild(message);

            // Обробник закриття повідомлення
            document.getElementById("closeNotification").addEventListener("click", function() {
                // Зберігаємо інформацію про те, що повідомлення було закрито
                localStorage.setItem("hideLanguageNotification", "true");
                // Видаляємо повідомлення
                message.remove();
            });
        }
    }
});
</script>

使い方：

urlMap — は、ロシア語のURLに対応するウクライナ語のURLが記述されたオブジェクトです。例： /ru/about-us 対応するウクライナ語版は /uk/pro-nas.
ウクライナ語のURL検索:
- 現在のURLがオブジェクト内に存在する場合 urlMap、ユーザーは指定されたウクライナ語バージョンにリダイレクトされます。
- 一致する場合 urlMap 見つからない場合、スクリプトはプレフィックスを置き換えます /ru/ на /uk/ デフォルトです。
将来の変化に適応する: 異なるURLを持つ新しいページを追加する場合は、マップを更新するだけです urlMap、新しい一致を追加します。

ランディングページ、会社の Web サイト、ランディングページなどの小規模な Web サイトに最適なオプションです。

アプローチ2: 動的URL解決を使用する

すべてのURLに明確な一致がない場合、またはURLが変化する場合は、サーバーロジック（データベース経由など）との統合を試して、URLの一致をリアルタイムで判断することもできますが、これはサーバーとの統合が必要となる複雑なソリューションです。ただし、これはこの記事の範囲外です。

このコードを使用すると、言語プレフィックス以外にも URL が変更された場合でも、遷移を柔軟に管理できます。

結論の代わりに

ご存知のとおり、LovePets UAポータルでは最初のバージョンのコードを使用しています。このコードをウェブサイトに配置したり、必要に応じてカスタマイズしたりできます。この原則は、「ロシア語 <—> ウクライナ語」の言語ペアだけでなく、他の言語の組み合わせにも適用されます。

この資料が皆様のお役に立てば幸いです。私たちはこれまで、ウクライナ語コンテンツの支援と発展の重要性を繰り返し強調してきました。

ウクライナ語で高品質かつ安全なコンテンツの開発と普及にご協力ください。まずは、ロシア語からウクライナ語への言語切り替えウィジェットをご利用ください。

また、コードから弊社に関する記述を削除しないようお願いいたします。よろしくお願いいたします。