Prif ochr » Switsh iaith ar gyfer y wefan: sut i arddangos neges i ddefnyddwyr gyda dewis iaith y wefan?

Switsh iaith ar gyfer y wefan: sut i arddangos neges i ddefnyddwyr gyda dewis iaith y wefan?

Ein tîm LovePets AU creu porth LovePets у yn 2021 fel adnodd iaith Wcreineg. I ddechrau, roedd pob URL mewn Wcreineg ac nid oedd yn cynnwys cod iaith. Yn ddiweddarach, fe wnaethom ehangu ein prosiect trwy ychwanegu fersiwn amlieithog o'r wefan, a nawr ein hadnodd ar gael mewn mwy na 90 o ieithoedd. Fodd bynnag, mae ein holl gynnwys, fel o'r blaen, yn cael ei greu yn Wcreineg.

Yn ogystal, nid yw'r fersiwn Wcreineg o'r porth, fel o'r blaen, yn cynnwys y cod iaith yn ei URLs. Dim ond ar y tudalennau hynny sy'n wahanol i'r iaith wreiddiol y caiff y cod iaith ei ychwanegu - Wcreineg. Mae hyn yn ei gwneud hi'n bosibl cynnal strwythur URL sengl a syml i ddefnyddwyr, sy'n darparu mynediad cyfleus i gynnwys i bob Ukrainians.

Er mwyn hwyluso mynediad i'n porth i ddefnyddwyr o'r Wcráin, fe wnaethom weithredu hysbysiad anymwthiol ar gyfer y rhai sy'n nodi'r URL gyda'r cod iaith /ru/. Mae'r neges hon yn cynnig newid i'r iaith Wcreineg, gan gynnal cysur a chyfleustra i bob ymwelydd.

Yn yr erthygl hon, byddwn yn rhannu cod switsiwr iaith syml gyda neges y gallwch ei rhoi ar eich gwefan. Bydd hyn yn eich helpu i gydymffurfio â gofynion Cyfraith Wcráin "Ar Sicrhau Gweithrediad yr Iaith Wcreineg fel Iaith Wladwriaeth" a sicrhau cyfleustra i'ch defnyddwyr, heb orfod ailgyfeirio i iaith benodol.

Creu neges ryngweithiol am fersiwn iaith y wefan: cyfarwyddiadau cam-wrth-gam

Mae'n werth nodi ar unwaith y gellir addasu'r cod hysbysiad newid iaith isod ar gyfer unrhyw fersiwn iaith. Fodd bynnag, mae rhai pwyntiau pwysig i'w hystyried:

  1. Cod iaith yn HTML: Sicrhewch fod gan eich cod HTML y cod iaith a osodwyd gan ddefnyddio'r tag <html lang=«uk»>. Dylid gwneud hyn ar gyfer y fersiwn iaith ddiofyn ac ar gyfer fersiynau ieithoedd eraill eich gwefan.
  2. Strwythur URL: Mae'r cod wedi'i addasu ar gyfer safleoedd sy'n defnyddio strwythur is-ffolder o fersiynau iaith yn lle is-barthau.
  3. Enwau URL: Rhaid i URLs fod yr un peth ar gyfer pob fersiwn iaith. Hynny yw, bydd fersiwn ddiofyn y dudalen https://www.lovepets.com.ua/pro-sajt yr un peth, dim ond gyda rhagddodiad iaith, /ru/ er enghraifft: https://www.lovepets.com .ua/ru/pro -site. Fel y gwelwch, mae'r enw / pro-sajt yr un peth ar gyfer y fersiynau Wcreineg a Rwsieg.

Nawr byddwn yn dadansoddi enghraifft o'r cod sy'n dangos neges gyda chynnig i newid i'r fersiwn Wcreineg, pe bai'r defnyddiwr yn cyrraedd tudalen iaith Rwsieg. Er enghraifft:

1. Mae'r defnyddiwr yn agor y dudalen: https://www.lovepets.com.ua/ru/ .
2. Mae'r marcio iaith yn y fformat wedi'i nodi yng nghod y dudalen.

3. Mae'r URL yn cynnwys y cod iaith /ru/.
4. Mae'r sgript, sy'n seiliedig ar bwyntiau 2 a 3, yn dangos neges gyda chynnig i newid i'r fersiwn Wcreineg.

Pan fydd y defnyddiwr yn gweld neges am newid yr iaith, mae ganddo gyfyng-gyngor: newidiwch i'r fersiwn Wcreineg neu arhoswch ar y dudalen Rwsieg. Os bydd yn dewis newid i'r fersiwn Wcreineg, bydd yn cael ei ailgyfeirio i'r dudalen gyfatebol yn yr un ffenestr porwr. Mae'r sgript yn gweithio'n syml: mae'n tynnu'r rhagddodiad iaith o'r URL ac yn ailgyfeirio'r defnyddiwr i'r iaith ddiofyn. Fodd bynnag, mae'n bwysig bod gan bob fersiwn iaith o'ch gwefan yr un enwau URL, fel y crybwyllwyd yn gynharach.

Os bydd y defnyddiwr yn penderfynu aros ar fersiwn gyfredol y wefan ac yn clicio ar y botwm "Close", bydd ei ddewis yn cael ei gofio. Yn ystod un sesiwn, ni fydd y neges yn ymddangos eto. Cyflawnir hyn gan ddefnyddio storfa leol y porwr (localStorage), sy'n cadw data hyd yn oed ar ôl ail-lwytho tudalennau.

Sut mae'n gweithio:

  • LocalStorage yn storio gwybodaeth bod y defnyddiwr wedi cau'r neges.
  • Yn ystod yr ymweliad nesaf â'r wefan, mae'r sgript yn gwirio a oes cofnod i mewn localStorage. Os ydyw, nid yw'r neges yn cael ei harddangos.

Nodweddion:

  • Data yn localStorage yn cael eu storio'n barhaol - nes bod y defnyddiwr ei hun yn clirio storfa'r porwr.
  • Mae hyn yn golygu na fydd yr hysbysiad yn cael ei arddangos hyd yn oed os yw'r defnyddiwr yn cau'r tab ac yn ymweld â'r wefan eto.
  • Os oes angen, gallwch chi ffurfweddu ymddygiad mwy hyblyg, er enghraifft, i ddangos y neges eto ar ôl peth amser. Ar gyfer hyn, gallwch ddefnyddio dulliau eraill o storio data, megis cwcis neu storio dros dro yn sessionStorage.

Mae'r dull hwn yn gyfleus i ddefnyddwyr, gan nad yw'n ymwthiol ac ar yr un pryd yn parchu eu dewis. Os bydd y defnyddiwr yn penderfynu newid yr iaith yn ddiweddarach, gall bob amser wneud hynny trwy'r teclyn newid iaith ar ein porth.

Nawr, dyma'r cod hysbysu ei hun gyda'r opsiwn i newid y fersiwn iaith, y gallwch ei osod yn nhroedyn eich gwefan trwy ei ychwanegu'n uniongyrchol at y cod html neu drwy ategyn WordPress: WCode - Mewnosod Penawdau a Throedynnau.

Ychwanegwch y cod cyn y tag

</body>

sy'n cau Y cod ei hun:

<!-- Перемикач мови -->
<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>

Sut mae'n gweithio:

  1. Gwirio iaith y dudalen:
    • Os yw iaith y dudalen wedi'i gosod i lang=«ru», mae'r sgript wedi'i actifadu.
  2. Ffurfio URL ar gyfer y fersiwn Wcreineg:
    • Mae'r URL presennol yn cael ei wirio am rhagddodiad /ru/. Os canfyddir y rhagddodiad, caiff ei dynnu i ffurfio URL y fersiwn Wcreineg heb y rhagddodiad iaith.
  3. Creu ac allbynnu neges:
    • Mae bloc gyda thestun a botwm yn ymddangos ar y dudalen, gan gynnig newid i'r fersiwn Wcreineg. Mae'r botwm yn arwain at URL heb /ru/.
  4. Archwilio localStorage:
    • Mae'r sgript yn gwirio am yr allwedd hideLanguageNotification ag ystyr «true». Os yw'r allwedd yn bodoli, ni ddangosir unrhyw neges.
  5. Cau'r neges:
    • Wrth glicio ar y botwm "Cau" i mewn localStorage cofnodir y gwerth «true», ac mae'r neges yn cael ei dynnu oddi ar y sgrin. Nid yw'r neges bellach yn ymddangos tan ddiwedd y sesiwn.
  6. Newid i'r fersiwn Wcreineg:
    • Mae'r botwm i newid i'r fersiwn Wcreineg yn weithredol ac yn arwain at yr URL cyfatebol.

Steilio'r neges:

Mae'r neges wedi'i steilio er hwylustod ac mae wedi'i lleoli yng nghornel dde isaf y dudalen. Dyma enghraifft o briodweddau CSS sylfaenol:

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"; /* Обмеження ширини для великих екранів */

Gallwch chi addasu'r arddulliau hyn at eich dant trwy ychwanegu neu newid opsiynau yn dibynnu ar ddyluniad eich gwefan.

Nodweddion a hyblygrwydd:

  • Mae'r data yn cael ei storio yn localStorage, nes bod y defnyddiwr yn clirio storfa'r porwr.
  • Ar gyfer gosodiad mwy hyblyg o'r hysbysiad (er enghraifft, gellir defnyddio ei ailymddangosiad ar ôl amser penodol). Cookies abo sessionStorage.

Newid iaith o Rwsieg yn ddiofyn i fersiwn Wcreineg y wefan gyda'r cod iaith yn y cyfeiriad url

A beth i'w wneud i'r rhai sydd yn ddiofyn â'r fersiwn Rwsieg o'r sata heb y rhagddodiad /ru/, ac mae fersiwn Wcreineg y wefan yn cynnwys y rhagddodiad /uk/? Dyma god sampl:

<!-- Перемикач мови -->
<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>

Beth sydd wedi newid:

  1. Rhagddodiad /uk/: Mae'r cod nawr yn ychwanegu rhagddodiad /uk/ ar ôl yr enw parth yn yr URL (er enghraifft, gyda https://example.com/page bydd yn gweithio https://example.com/uk/page).
  2. Gwirio am fodolaeth rhagddodiad: Os oes eisoes yn yr URL /uk/, nid yw'r sgript yn ei ychwanegu eto.
  3. Prosesu cyswllt: Os yw'r defnyddiwr ar y fersiwn Rwsieg, crëir botwm i ailgyfeirio i'r fersiwn Wcreineg gan ychwanegu'r rhagddodiad cywir.

Nawr, wrth newid i fersiwn Wcreineg y wefan, dim ond y cod iaith yn HTML fydd yn cael ei ystyried, a bydd y rhagddodiad angenrheidiol yn cael ei ychwanegu'n awtomatig.

Fodd bynnag, rydym yn eich atgoffa unwaith eto bod y cod (yn yr enghreifftiau cyntaf a'r ail) yn gweithio dim ond os oes gennych yr un enwau URL ar gyfer y fersiynau Rwsiaidd a Wcreineg.

Beth i'w wneud os yw'r URLs yn wahanol ac nad yw disodli'r rhagddodiad iaith yn unig yn datrys y broblem?

Os yw'r wefan yn newid nid yn unig y rhagddodiad iaith, ond hefyd enw'r URLau yn dibynnu ar yr iaith (er enghraifft, ar gyfer yr un dudalen yn y fersiwn Rwsieg efallai y bydd un URL, ac yn y fersiwn Wcreineg - un arall), byddwch yn angen defnyddio gohebiaeth a wyddys yn flaenorol rhwng URLau Rwsieg a Wcreineg i'w hailgyfeirio'n gywir.

Dull 1: Defnyddiwch fap URL sy'n hysbys ymlaen llaw

  1. Rydych chi'n creu gwrthrych lle mae pob URL iaith Rwsieg yn cyfateb i un Wcreineg.
  2. Os canfyddir bod y defnyddiwr ar fersiwn Rwsieg y wefan, rydych chi'n edrych am yr URL cyfredol yn y map hwn ac yn ailgyfeirio i'r URL Wcreineg cyfatebol.

casgen:

<!-- Перемикач мови -->
<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>

Sut mae'n gweithio:

  1. urlMap yn wrthrych lle mae URL Wcreineg cyfatebol yn cael ei ysgrifennu ar gyfer pob URL Rwsia. Enghraifft: am dudalen /ru/about-us y fersiwn Wcreineg cyfatebol yw /uk/pro-nas.
  2. Chwilio URL Wcreineg:
    • Os yw'r URL cyfredol yn bresennol yn y gwrthrych urlMap, Bydd y defnyddiwr yn cael ei ailgyfeirio i'r fersiwn Wcreineg penodedig.
    • Os cydymffurfir urlMap heb ei ganfod, bydd y sgript yn disodli'r rhagddodiad /ru/ ar /uk/ yn ddiofyn.
  3. Addasu ar gyfer newidiadau yn y dyfodol: Os ydych chi'n ychwanegu tudalennau newydd gyda gwahanol URLau, dim ond diweddaru'r map urlMap, gan ychwanegu matsys newydd.

Yr opsiwn gorau ar gyfer safleoedd bach a thudalennau glanio, safleoedd cwmni neu dudalennau glanio.

Dull 2: Defnyddiwch ddiffiniad URL deinamig

Os nad oes gennych gyfatebiaeth glir ar gyfer pob URL neu mae'n newid, gallwch geisio integreiddio gyda rhesymeg pen ôl (e.e. trwy gronfa ddata) i baru URLs ar y hedfan, ond mae hwn yn ddatrysiad mwy cymhleth sy'n gofyn am ben ôl integreiddio. Fodd bynnag, mae hyn y tu hwnt i gwmpas y deunydd hwn.

Bydd y cod hwn yn caniatáu ichi reoli trawsnewidiadau yn hyblyg, hyd yn oed os yw'r URL yn amrywio o fwy na'r rhagddodiad iaith yn unig.

Disodli Visnovka

Fel y gallech fod wedi sylwi, mae porth LovePets UA yn defnyddio'r fersiwn gyntaf o'r cod. Gallwch ei gynnal ar eich gwefan neu ei addasu i'ch anghenion. Mae'r egwyddor hon yn berthnasol nid yn unig ar gyfer y parau iaith "Rwsia <-> Wcreineg", ond hefyd ar gyfer unrhyw gyfuniadau eraill o ieithoedd.

Rydym yn mawr obeithio y bydd y deunydd hwn yn ddefnyddiol i chi. O'n rhan ni, rydym wedi pwysleisio dro ar ôl tro bwysigrwydd cefnogi a datblygu cynnwys Wcreineg-iaith.

Gadewch i ni gyda'n gilydd hyrwyddo datblygiad cynnwys o ansawdd a diogel yn yr iaith Wcreineg a'i boblogeiddio. Ac i ddechrau, gallwch chi ddechrau trwy ddefnyddio'r teclyn i newid yr iaith o Rwsieg i Wcreineg.

Byddem hefyd yn ddiolchgar pe na fyddech yn dileu'r cyfeiriad atom ni o'r cod. Diolch ymlaen llaw.