Hoofblad » Taalskakelaar vir die webwerf: hoe om 'n boodskap aan gebruikers te vertoon met die keuse van die taalweergawe van die webwerf?

Taalskakelaar vir die webwerf: hoe om 'n boodskap aan gebruikers te vertoon met die keuse van die taalweergawe van die webwerf?

Ons die LovePets UA-span geskep die LovePets-portaal у in 2021 as 'n Oekraïense taalbron. Aanvanklik was alle URL'e in Oekraïens en het nie 'n taalkode bevat nie. Later het ons ons projek uitgebrei deur 'n veeltalige weergawe van die webwerf by te voeg, en nou ons hulpbron beskikbaar in meer as 90 tale. Al ons inhoud is egter, soos voorheen, in Oekraïens geskep.

Daarbenewens bevat die Oekraïense weergawe van die portaal, soos voorheen, nie die taalkode in sy URL's nie. Die taalkode word slegs bygevoeg op daardie bladsye wat verskil van die oorspronklike taal - Oekraïens. Dit maak dit moontlik om 'n enkele en eenvoudige URL-struktuur vir gebruikers te handhaaf, wat gerieflike toegang tot inhoud vir alle Oekraïners bied.

Om toegang tot ons portaal vir gebruikers van Oekraïne te vergemaklik, het ons 'n nie-opvallende kennisgewing geïmplementeer vir diegene wat die URL met die taalkode /ru/ invoer. Hierdie boodskap bied om oor te skakel na die Oekraïens taal, die handhawing van gemak en gerief vir alle besoekers.

In hierdie artikel sal ons 'n eenvoudige taalwisselaarkode deel met 'n boodskap wat u op u webwerf kan plaas. Dit sal jou help om te voldoen aan die vereistes van die wet van Oekraïne "Op die versekering van die funksionering van die Oekraïense taal as 'n staatstaal" en verseker gerief vir jou gebruikers, sonder gedwonge herleiding na 'n sekere taal.

Skep 'n interaktiewe boodskap oor die taalweergawe van die webwerf: stap-vir-stap instruksies

Dit is die moeite werd om dadelik te noem dat die taalveranderingkennisgewingskode hieronder aangepas kan word vir enige taalweergawe. Daar is egter 'n paar belangrike punte om te oorweeg:

  1. Taalkode in HTML: Maak seker dat jou HTML-kode die taalkode het wat met die merker gestel is <html lang=«uk»>. Dit moet gedoen word vir beide die verstektaalweergawe en vir ander taalweergawes van jou werf.
  2. URL-struktuur: Die kode is aangepas vir werwe wat subgidsstruktuur van taalweergawes gebruik in plaas van subdomeine.
  3. URL name: URL'e moet dieselfde wees vir alle taalweergawes. Dit wil sê, die verstekweergawe van die bladsy https://www.lovepets.com.ua/pro-sajt sal dieselfde wees, net met 'n taalvoorvoegsel, /ru/ byvoorbeeld: https://www.lovepets.com .ua/ru/pro -webwerf. Soos u kan sien, is die naam /pro-sajt dieselfde vir die Oekraïense en Russiese weergawes.

Nou sal ons 'n voorbeeld ontleed van die kode wat 'n boodskap vertoon met 'n aanbod om oor te skakel na die Oekraïense weergawe, as die gebruiker by 'n Russiese taalbladsy kom. Byvoorbeeld:

1. Die gebruiker het die bladsy oopgemaak: https://www.lovepets.com.ua/ru/.
2. Die taalopmerk in die formaat word in die bladsykode gespesifiseer.

3. Die URL bevat die taalkode /ru/.
4. Die skrif, gebaseer op punte 2 en 3, vertoon 'n boodskap met 'n aanbod om na die Oekraïense weergawe oor te skakel.

Wanneer die gebruiker 'n boodskap sien oor die verandering van die taal, het hy 'n dilemma: skakel oor na die Oekraïense weergawe of bly op die Russies-taal bladsy. As hy kies om na die Oekraïense weergawe oor te skakel, sal hy na die ooreenstemmende bladsy in dieselfde blaaiervenster herlei word. Die skrif werk eenvoudig: dit verwyder die taalvoorvoegsel van die URL en herlei die gebruiker na die verstektaal. Dit is egter belangrik dat alle taalweergawes van jou werf dieselfde URL-name het, soos vroeër genoem.

As die gebruiker besluit om op die huidige weergawe van die webwerf te bly en op die "Sluit"-knoppie klik, sal sy keuse onthou word. Tydens een sessie sal die boodskap nie weer verskyn nie. Dit word bereik met behulp van die blaaier se plaaslike berging (localStorage), wat data behou selfs nadat bladsy herlaai is.

Hoe dit werk:

  • LocalStorage stoor inligting dat die gebruiker die boodskap gesluit het.
  • Tydens die volgende besoek aan die webwerf kyk die draaiboek of daar 'n rekord in is localStorage. Indien wel, word die boodskap nie vertoon nie.

Kenmerke:

  • Data in localStorage word op 'n permanente basis gestoor - totdat die gebruiker self die blaaierkas uitvee.
  • Dit beteken dat die kennisgewing nie vertoon sal word nie, selfs al maak die gebruiker die oortjie toe en besoek die webwerf weer.
  • Indien nodig, kan jy meer buigsame gedrag instel, byvoorbeeld om die boodskap na 'n rukkie weer te wys. Hiervoor kan jy ander metodes van databerging gebruik, soos koekies of tydelike berging in sessionStorage.

Hierdie benadering is gerieflik vir gebruikers, aangesien dit nie opdringerig is nie en terselfdertyd hul keuse respekteer. As die gebruiker later besluit om die taal te verander, kan hy dit altyd doen via die taalverandering-legstuk op ons portaal.

Nou, hier is die kennisgewingkode self met die opsie om die taalweergawe te verander, wat u in die voetskrif van u webwerf kan plaas deur dit direk by die html-kode of via 'n WordPress-inprop te voeg: WPCode - Voeg kop- en voettekste in.

Voeg die kode voor die merker by

</body>

wat toemaak Die kode self:

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

Hoe dit werk:

  1. Kontroleer die taal van die bladsy:
    • As die bladsytaal gestel is op lang=«ru», is die skrif geaktiveer.
  2. URL vorming vir die Oekraïense weergawe:
    • Die huidige URL word nagegaan vir 'n voorvoegsel /ru/. As die voorvoegsel gevind word, word dit verwyder om die URL van die Oekraïense weergawe sonder die taalvoorvoegsel te vorm.
  3. Skep en uitvoer van 'n boodskap:
    • 'n Blokkie met teks en 'n knoppie verskyn op die bladsy, wat aanbied om na die Oekraïense weergawe oor te skakel. Die knoppie lei na 'n URL sonder /ru/.
  4. Oudit localStorage:
    • Die skrif kyk vir die sleutel hideLanguageNotification met betekenis «true». As die sleutel bestaan, word geen boodskap vertoon nie.
  5. Sluit die boodskap af:
    • Wanneer u op die "Sluit"-knoppie klik localStorage die waarde word aangeteken «true», en die boodskap word van die skerm verwyder. Die boodskap verskyn nie meer tot aan die einde van die sessie nie.
  6. Skakel oor na die Oekraïense weergawe:
    • Die knoppie om oor te skakel na die Oekraïense weergawe is aktief en lei na die ooreenstemmende URL.

Stileer die boodskap:

Die boodskap is gestileer vir maklike persepsie en is in die onderste regterhoek van die bladsy geleë. Hier is 'n voorbeeld van basiese CSS-eienskappe:

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

U kan hierdie style na u smaak aanpas deur opsies by te voeg of te verander, afhangende van u werfontwerp.

Kenmerke en buigsaamheid:

  • Die data word gestoor in localStorage, totdat die gebruiker die blaaierkas uitvee.
  • Vir 'n meer buigsame instelling van die kennisgewing (byvoorbeeld, sy herverskyning na 'n sekere tyd) kan gebruik word Cookies abo sessionStorage.

Taal skakel by verstek van Russies na die Oekraïense weergawe van die webwerf met die taalkode in die url-adres

En wat om te doen vir diegene wat by verstek die Russiese-taal weergawe van die sata het sonder die voorvoegsel /ru/, en die Oekraïense weergawe van die webwerf bevat die voorvoegsel /uk/? Hier is 'n voorbeeldkode:

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

Wat het verander:

  1. Voorvoegsel /uk/: Die kode voeg nou 'n voorvoegsel by /uk/ na die domeinnaam in die URL (byvoorbeeld met https://example.com/page Sal werk https://example.com/uk/page).
  2. Kontroleer vir die bestaan ​​van 'n voorvoegsel: As daar reeds in die URL is /uk/, voeg die skrif dit nie weer by nie.
  3. Skakelverwerking: As die gebruiker op die Russiese taal weergawe is, word 'n knoppie geskep om na die Oekraïense weergawe te herlei met die byvoeging van die korrekte voorvoegsel.

Wanneer nou na die Oekraïense weergawe van die webwerf oorgeskakel word, sal slegs die taalkode in HTML in ag geneem word, en die nodige voorvoegsel sal outomaties bygevoeg word.

Ons herinner jou egter weer dat die kode (beide in die eerste en tweede voorbeeld) slegs werk as jy dieselfde URL-name vir die Russiese en Oekraïense weergawes het.

Wat om te doen as die URL'e verskil en die vervanging van slegs die taalvoorvoegsel los nie die probleem op nie?

As die webwerf nie net die taalvoorvoegsel verander nie, maar ook die naam van die URL's, afhangende van die taal (byvoorbeeld, vir dieselfde bladsy in die Russiese weergawe kan daar een URL wees, en in die Oekraïense weergawe - 'n ander), sal jy moet voorheen bekende ooreenkomste tussen Russiese en Oekraïense URL's gebruik vir korrekte herleiding.

Benadering 1: Gebruik 'n voorafbekende URL-kaart

  1. Jy skep 'n voorwerp waar elke Russiese-taal URL ooreenstem met 'n Oekraïens een.
  2. As dit bespeur word dat die gebruiker op die Russies-taal weergawe van die webwerf is, soek jy die huidige URL in hierdie kaart en herlei na die ooreenstemmende Oekraïense URL.

Boude:

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

Hoe dit werk:

  1. urlMap is 'n voorwerp waar 'n ooreenstemmende Oekraïense URL vir elke Russiese URL geskryf is. Voorbeeld: vir 'n bladsy /ru/about-us die ooreenstemmende Oekraïense weergawe is /uk/pro-nas.
  2. Oekraïens URL soek:
    • As die huidige URL in die voorwerp teenwoordig is urlMap, sal die gebruiker na die gespesifiseerde Oekraïense weergawe herlei word.
    • Indien voldoening in urlMap gevind word nie, sal die skrif die voorvoegsel vervang /ru/ op /uk/ by verstek.
  3. Aanpassing vir toekomstige veranderinge: As jy nuwe bladsye met verskillende URL's byvoeg, werk net die kaart op urlMap, nuwe wedstryde by te voeg.

Die beste opsie vir klein werwe en bestemmingsbladsye, maatskappywebwerwe of bestemmingsbladsye.

Benadering 2: Gebruik dinamiese URL-definisie

As jy nie 'n duidelike passing vir alle URL's het nie of dit verander, kan jy probeer om met agterkant-logika (bv. via 'n databasis) te integreer om URL's dadelik te pas, maar dit is 'n meer komplekse oplossing wat back-end vereis integrasie. Dit is egter buite die bestek van hierdie materiaal.

Hierdie kode sal jou toelaat om oorgange buigsaam te bestuur, selfs al verskil die URL met meer as net die taalvoorvoegsel.

Vervang Visnovka

Soos u dalk opgemerk het, gebruik die LovePets UA-portaal die eerste weergawe van die kode. U kan dit op u webwerf aanbied of dit by u behoeftes aanpas. Hierdie beginsel is nie net van toepassing op die taalpare "Russies <—> Oekraïens", maar ook vir enige ander kombinasies van tale.

Ons hoop van harte dat hierdie materiaal vir u nuttig sal wees. Van ons kant het ons herhaaldelik die belangrikheid van die ondersteuning en ontwikkeling van Oekraïens-taal-inhoud beklemtoon.

Kom ons bevorder saam die ontwikkeling van kwaliteit en veilige inhoud in die Oekraïense taal en populariseer dit. En vir 'n begin kan jy begin deur die legstuk te gebruik om die taal van Russies na Oekraïens oor te skakel.

Ons sal ook dankbaar wees as u nie die verwysing na ons uit die kode sal verwyder nie. By voorbaat dankie.