Как настроить переключатель языка на многоязычном веб-сайте Laravel

Интерфейс сайта Karcavel на английском языке. Меню выбора языка.
Оглавление

Создание многоязычных веб-сайтов стало необходимостью для предприятий и организаций, обслуживающих аудиторию с разным языковым опытом. Laravel , широко используемая платформа веб-приложений PHP, предоставляет надежные инструменты и функции, упрощающие разработку и поддержку многоязычных веб-сайтов.

Одним из важнейших компонентов многоязычного веб-сайта является переключатель языков, который позволяет пользователям легко переключаться между доступными языками. В этой статье мы рассмотрим важность переключателей языков и предоставим пошаговое руководство по их настройке на Laravel .

Почему переключатель языка важен на многоязычных веб-сайтах Laravel ?

Техническая схема с различными условными обозначениями.

Прежде чем обсуждать, как настроить переключатель языка на многоязычном веб-сайте Laravel , важно понять, зачем вам это нужно.

  • Пользовательский опыт. Хорошо продуманный переключатель языка повышает удобство работы пользователя, позволяя посетителям легко получать доступ к контенту на предпочитаемом ими языке. Этот плавный переход на родной или предпочитаемый язык обеспечивает лучшее понимание и взаимодействие с содержимым веб-сайта. Когда пользователи могут получать информацию на удобном для них языке, они с большей вероятностью останутся на веб-сайте дольше, просматривают больше страниц и потенциально превращаются в клиентов или совершают желаемые действия. Плавное переключение языка устраняет разочарование и барьеры, что приводит к повышению удовлетворенности и общему положительному пользовательскому опыту.
  • Поисковая оптимизация (SEO). Поисковые системы отдают приоритет веб-сайтам, предлагающим контент на нескольких языках, поскольку это демонстрирует стремление обслуживать глобальную аудиторию. Переключатель языка может улучшить видимость вашего веб-сайта и его рейтинг в результатах поиска. Предоставляя контент на нескольких языках, вы увеличиваете вероятность того, что ваш веб-сайт будет появляться выше в результатах поиска по запросам на этих языках, расширяя охват в Интернете и привлекая более целевой трафик.
  • Снижение показателя отказов. Удобный переключатель языка помогает снизить показатель отказов. Когда посетители могут быстро найти и выбрать предпочитаемый язык, они с большей вероятностью останутся на сайте, изучат контент и потенциально совершат конверсию. Пользователи, столкнувшиеся с контентом на незнакомом языке, могут быстро покинуть сайт, что приводит к высокому показателю отказов. Однако с помощью переключателя языка они могут легко перейти к нужной языковой версии, побуждая их оставаться и взаимодействовать с контентом, что в конечном итоге снижает показатель отказов.
  • Увеличение конверсий продаж. Предоставляя контент на языках, понятных посетителям, вы можете повысить вероятность конверсий, таких как покупка продуктов или регистрация услуг. Если посетители смогут легко понять детали продукта, политику и процессы оформления заказа на своем языке, барьеры для принятия решения о покупке будут уменьшены. Предложение многоязычного контента с помощью переключателя языков улучшает общее впечатление от покупки и может привести к более высоким коэффициентам конверсии.

 

Преодолейте языковые барьеры
Попрощайтесь с языковыми барьерами и приветствуйте безграничный рост! Попробуйте наш автоматический перевод сегодня.

Как настроить переключатель языка на многоязычном веб-сайте Laravel ?

Поняв важность переключателя языка на многоязычном веб-сайте Laravel , давайте обсудим, как его реализовать. Службы перевода веб-сайтов обычно предлагают эту функцию, которую можно настроить в соответствии с потребностями пользователя.

Однако не все службы перевода предлагают легко настраиваемые и удобные переключатели языков. Поэтому крайне важно выбрать службу автоматического перевода , совместимую с различными платформами и обеспечивающую гибкие функции переключения языков.

Одним из сервисов автоматического перевода, соответствующих этим критериям, является Linguise. Автоматический перевод Linguise предлагает настраиваемую и удобную функцию переключения языка, интегрированную с популярными фреймворками, такими как Laravel.

Linguise обеспечивает бесшовную интеграцию с инфраструктурой Laravel , позволяя разработчикам легко включать переключатель языка в свои многоязычные приложения. Используя расширенные функции и удобный интерфейс Linguise, вы можете упростить процесс настройки и обслуживания переключателя языка на своем веб-сайте Laravel .

Без лишних слов, вот шаги по установке Linguise на многоязычный веб-сайт Laravel и настройке переключателя языка.

Шаг 1. Зарегистрируйте бесплатную учетную запись Linguise

Первым шагом к регистрации является создание бесплатной учетной записи в Linguise и использование месячной бесплатной пробной версии. Чтобы зарегистрировать Linguise , просто введите свой адрес электронной почты, чтобы создать имя пользователя и пароль.

В течение месячного пробного периода вы получите доступ ко всему спектру интересных функций Linguise. По окончании пробного периода вы будете перенаправлены на панель управления Linguise .

Шаг 2. Добавьте домен на веб-сайт Laravel .

После подключения к Linguise вам необходимо добавить новый веб-сайт и сохранить его настройки, чтобы получить ключ API. Во-первых, вам нужно добавить несколько столбцов для добавления веб-сайта, включая следующие.

  • Счет
  • URL-адреса
  • Платформы/CMS
  • Язык
  • Язык перевода
  • Перевести URL-адреса
Черный фон с едва заметными горизонтальными линиями.

После этого вы получите ключ API, этот ключ API активируется для включения перевода на вашем сайте. По сути, ключ API проверяет, какие языки включены в конкретном домене, и позволяет создавать автоматически переведенные страницы. Скопируйте ключ API и сохраните его в буфере обмена.

Затем нажмите «Script PHP» , чтобы получить инструкции по установке, которым мы будем подробно следовать здесь.

Шаг 3. Загрузите и подключите скрипт перевода Linguise

Скрипт перевода Linguise необходимо загрузить на свой сервер и положить в папку, где установлен Laravel . Вы можете скачать это здесь.

После скачивания скрипта разархивируйте его и загрузите в корневую папку, где установлен Laravel .

Убедитесь, что сценарий находится на корневом уровне вашей установки Laravel (обычно там, где расположены файлы CMS). Убедитесь, что папка называется «linguise» (имя по умолчанию после распаковки).

Список каталогов файлового менеджера с файлами и папками

Шаг 4. Настройте языковые URL-адреса

Далее вам необходимо настроить языковые URL-адреса. URL-адреса на основе языка необходимо настроить в файле .htaccess. Если в вашем файле есть «RewriteBase/», просто скопируйте после этого весь следующий код.

				
					<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA]
</IfModule>
				
			
Экран компьютера, отображающий строки кода и данные.

Шаг 5. Включите переключатель языка в Laravel

Следующий шаг — активировать переключатель языка, вставив скрипт, полученный на панели управления Linguise . Вставка этого скрипта переключения языка может отличаться в зависимости от темы, используемой в Laravel.

В этом случае скрипт будет вставлен в front.blade.php , расположенный в resources/views/layouts/ . Ниже представлен предварительный просмотр вставленного скрипта.

экран компьютера, отображающий строки кода, размытый текст

Шаг 6: Настройте главный дисплей

Чтобы начать настройку переключателя языка, перейдите в «Настройки» > «Отображение языковых флагов» на Linguise .

На этой странице вы можете настроить несколько опций. Первый — это основные настройки дисплея, где вы можете настроить различные аспекты, такие как:

  • Стиль значка флага: вы можете выбрать один из трех вариантов; параллельное отображение, раскрывающееся меню или всплывающее окно.
  • Позиция: этот параметр определяет, где на вашем сайте будет находиться переключатель языка. Доступны различные варианты позиций. Обязательно выберите место, легко доступное для посетителей.
Чёрный фон с белым текстом и значками. Изображение похоже на скриншот.

Вы можете комбинировать отображение флагов и названий языков, флагов и сокращений языков или просто названий языков. Для облегчения распознавания пользователей рекомендуется использовать флаги и названия языков.

Шаг 7. Установите дизайн флага

После настройки основного дисплея вы можете дополнительно настроить дизайн отображаемых флажков.

  • Отображение названия языка: вы можете выбрать отображение названия языка на основе названия страны или самого названия языка. Например, вы можете отобразить «Французский» или «Французский».
  • Тип английского флага: этот параметр полезен для языков с несколькими вариантами, таких как американский или британский английский (он также применим к испанскому, тайваньскому, немецкому и португальскому языкам).
  • Стиль флага: этот параметр позволяет выбрать форму значка флага: круглую или прямоугольную.
Тёмный и размытый фон с кнопками на нём. Кнопки нечётко видны.

Шаг 8. Настройте цвет и размер.

После завершения настройки дизайна флага вы можете настроить цвет и размер флагов. Вот некоторые настройки, которые вы можете настроить.

  • Флаг border-radius: настройте радиус границы в пикселях для прямоугольного стиля флага.
  • Цвет названия языка: выберите цвет текста по умолчанию для отображения названия языка.
  • Цвет языка всплывающего окна: установите цвет текста заголовка языка во всплывающем или раскрывающемся списке.
  • Размер флага: отрегулируйте размер значков флагов.
  • Цвет при наведении на название языка: установите цвет текста, который появляется, когда пользователь наводит указатель мыши на название языка.
  • Цвет всплывающего окна при наведении на язык: установите цвет текста, который появляется, когда пользователь наводит указатель мыши на заголовок языка во всплывающем или раскрывающемся списке.
Черный фон с текстом

Шаг 9: Установите флаг box-shadow

Наконец, вы можете настроить параметры тени поля флага. Первый вариант позволяет применить эффект тени к каждому значку флага, отображаемому на вашем веб-сайте. Следующая опция управляет эффектом тени, когда пользователи наводят указатель мыши на языковые флаги.

После внесения всех необходимых настроек нажмите «Сохранить» , чтобы применить изменения настройки. После этого перейдите на свой Laravel и убедитесь, что конфигурация успешно применена. Примерно так будет выглядеть переключатель языка.

Два экрана с нечётким текстом и изображениями. Экраны расположены рядом.

После завершения настройки вы теперь можете увидеть, как работает переключатель языка на вашем многоязычном веб-сайте Laravel .

черно-белая фотография человека. наложение

После этого мы постараемся перевести сайт на другие языки, например французский.

Мужчина в тёмной одежде сидит в кресле. Судя по всему, он находится в официальной обстановке.

Лучшие практики по оптимизации переключателя языка на многоязычном веб-сайте Laravel

После успешной настройки переключателя языка на многоязычном веб-сайте Laravel вам также необходимо знать советы по оптимизации переключателя языка как для вашего веб-сайта, так и для ваших посетителей.

Используйте легко узнаваемые языковые значки или флаги.

Экран компьютера с различными значками и кнопками, черно-белое изображение.

Общепризнанные символы или флаги имеют решающее значение для того, чтобы посетители могли быстро идентифицировать и выбрать предпочтительный вариант языка. Убедитесь, что используемые значки или флаги визуально заметны, имеют хороший цветовой контраст и широко понятны в разных культурах, чтобы избежать путаницы или двусмысленности. Знакомые символы или значки помогают создать интуитивно понятный и удобный интерфейс, позволяя посетителям легко переходить к нужной языковой версии. Очень важно выбирать значки или флаги, которые будут общепризнанными, чтобы избежать возможных недоразумений или путаницы.

Стратегическое расположение кнопки переключения языка

Скриншоты панели инструментов в темном режиме с графиками и диаграммами.

Разместите кнопку переключения языка на видном и легкодоступном месте вашего веб-сайта. Стандартные места размещения включают верхний, нижний колонтитул или главное меню навигации. Эти места интуитивно понятны большинству пользователей Интернета и соответствуют их ожиданиям при поиске языковых вариантов. Единообразное размещение на всех страницах гарантирует, что посетители смогут легко получить доступ к переключателю языка независимо от точки входа или конкретной страницы, которую они посещают. Такое последовательное размещение помогает создать плавный и предсказуемый пользовательский опыт.

Поддерживайте единообразие на всех страницах

Коллекция черно-белых скриншотов сайтов растений.

Убедитесь, что переключатель языка сохраняет единообразный внешний вид и поведение на всем вашем веб-сайте. Пользователи должны иметь возможность беспрепятственно переключать языки независимо от того, на какой странице они находятся или какой контент просматривают. Согласованность не только обеспечивает целостный пользовательский интерфейс, но также повышает доступность и доступность языковых вариантов, повышая доверие к вашему многоязычному веб-сайту. Любые несоответствия в переключателе языка могут привести к путанице и разочарованию пользователей, что потенциально может привести к тому, что они покинут ваш сайт.

Рассмотрите возможность использования названий языков и флагов.

Эскиз людей, работающих вместе за столом. Концепция развития бизнеса.

Вместо того, чтобы просто использовать флаги, рекомендуется рассмотреть возможность использования флагов и названий языков в их исходной форме. Такой подход может помочь избежать путаницы, поскольку в некоторых странах под разными флагами говорят на некоторых языках. Использование названий языков напрямую устраняет двусмысленность и гарантирует, что посетители смогут четко идентифицировать и выбрать нужный язык без неправильного толкования. Кроме того, использование названий языков может быть более инклюзивным и уважительным к культурному разнообразию.

Удобный процесс переключения языка

Каркасный дизайн страницы сайта-магазина, черно-белая иллюстрация страницы-магазина

Упростите для пользователей процесс переключения на другой язык, если язык по умолчанию не соответствует их предпочтениям. Вы также можете использовать такие элементы, как раскрывающиеся меню, списки флагов/значков или кнопки переключения для выбора языка. Однако убедитесь, что каждая кнопка нажимается плавно и четко отображает доступные языковые параметры. Этот удобный для пользователя подход сводит к минимуму трения и обеспечивает плавный переход между языками, улучшая общий пользовательский опыт. Беспрепятственный и простой процесс переключения языка может повысить удовлетворенность пользователей и побудить посетителей изучить ваш многоязычный контент.

Готовы осваивать новые рынки? Попробуйте наш автоматический перевод бесплатно с нашей 1-месячной пробной версией без риска. Кредитная карта не нужна!

Настройте переключатель языка на многоязычном веб-сайте Laravel с помощью Linguise!

На этом этапе вы должны знать, что настраиваете переключатель языка для многоязычной сети Laravel . Разработка переключателя языка может дать различные преимущества и, следовательно, привести к оптимизации на основе ранее упомянутых моментов.

Эффективная оптимизация переключателя языка может значительно улучшить общее впечатление от пользователя. Теперь приступайте к регистрации Linguise , интегрируйте свой Laravel и настройте переключатель языка, чтобы улучшить взаимодействие с пользователем.

Вам также может быть интересно прочитать

Не пропустите!
Подписывайтесь на нашу новостную рассылку

Получайте новости об автоматическом переводе веб-сайтов, международном SEO и многом другом!

Invalid email address
Попробуйте. Один в месяц, и вы можете отказаться от подписки в любое время.

Не уходите, не поделившись своей электронной почтой!

Мы не можем гарантировать, что вы выиграете в лотерею, но можем обещать интересные информационные новости о переводах и периодические скидки.

Не пропустите!
Invalid email address