Переключатель языков: Caramba Switcher – новый переключатель раскладки для Windows и Mac

Содержание

Как сделать на сайте переключатель языков


Многоязычный сайт

Теперь создадим сами проекты языков. Для этого зайдите в верхнем меню «Проект / Сохранить Проект как…». В открывшемся окне выбираете язык проекта. Если вы изначально создаете сайт на русском языке, вам нужно выбрать из списка пункт «Русский.rus»

Затем повторите процедуру, сохранить еще раз проект. Но, в этот раз выберете другой язык, на котором планируете создать другой язык. В нашем случае это Английский, поэтому из списка выбираем «English.eng»

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

Переключиться между языками можно таким образом. Вы снова открываете проект (можно зайти в верхнем меню «Проект / Открыть»), и в списке проектов, выбрав ваш проект, вы увидите справа под картинкой 2 ссылки на разные языки. Выбрав язык и нажав кнопку «Открыть» ниже, вы попадаете в нужный вам проект.

В списке языков рядом с названием языка вы увидите его краткое название (rus, eng, kaz и т.д.). Именно по этой абревеатуре вы можете прописать необходимые ссылки для ваших ссылок (иконок) языков.

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

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

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

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

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

Как добавить переключатель языков WordPress на свой сайт

Независимо от того, какой у вас сайт, самый простой способ разрешить посетителям просматривать ваш контент на предпочитаемом им языке — это использовать переключатель языков

WordPress .

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

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

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

Приступим.

5 примеров веб-сайтов WordPress с переключателями языков

Переключатели языка

могут принимать различные формы, от языковых кодов и флагов до раскрывающихся списков и локализованного текста.

Давайте посмотрим на множество реальных примеров переключателей языка.

1. WordPress.org

На официальном сайте WordPress.org в середине главной страницы отображается заметное зеленое текстовое поле, которое спрашивает посетителей, хотят ли они переключить язык.

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

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

2. Inpsyde

Немецкое агентство WordPress Inpsyde отображает простые языковые коды в правом верхнем углу своего сайта. Посетители могут выбирать между немецким, английским и швейцарским немецким языками. Коды языков легко определить и понять — нетрудно понять, какой из языков представляет собой этот многоязычный веб-сайт WordPress.

3. Тигр и июнь

Агентство веб-разработки Tiger and June предлагает свой контент на французском и английском языках с помощью простой кнопки переключения языков в правом верхнем углу страницы.

Использование полного названия языка — «Français», а не «French», как его обычно знают носители английского языка, — легче узнать, не говоря уже о том, чтобы уважительно относиться к носителям французского языка.

4. Швеция Свериге

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

Английский язык является языком по умолчанию для сайта, содержание также доступно на арабском, китайском и русском языках.

5. Мариен

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

Этот сайт — отличный пример того, почему вам нужно говорить на языке ваших клиентов. На самом деле, между многоязычным контентом и вероятностью совершения покупкой покупателя, несомненно, существует тесная связь.

Common Sense Advisory провела опрос 2430 интернет-потребителей в восьми странах, чтобы узнать, как язык влияет на их покупательские привычки в электронной коммерции, и обнаружил:

  • 72,1% потребителей проводят большую часть или все свое время на сайтах на своем родном языке.
  • 72.4% потребителей заявили, что они с большей вероятностью купят продукт с информацией на их родном языке.
  • 56,2% потребителей заявили, что возможность получать информацию на их родном языке важнее цены.

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

3 способа добавить переключатель языка на ваш сайт WordPress

Чтобы добавить переключатель языка WordPress, вам необходимо установить TranslatePress, простой в использовании плагин для перевода WordPress.

Его можно бесплатно загрузить на WordPress.org, поэтому в административном интерфейсе WordPress перейдите к Plugins> Add New и выполните поиск «TranslatePress».

TranslatePress позволяет вам переводить весь ваш сайт WordPress прямо из внешнего интерфейса, используя интуитивно понятный визуальный интерфейс перевода.

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

Он также работает «из коробки» с популярными плагинами, такими как WooCommerce или Elementor, как вы увидите ниже.

Дружественный интерфейс

TranslatePress позволяет переводить как вручную, так и автоматически. Чтобы ускорить процесс, вы можете автоматически переводить свой сайт с помощью Google Translate или DeepL, а затем вносить дополнительные изменения вручную.

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

Вот как настроить TranslatePress и создать один из трех различных типов переключателя языков WordPress: шорткод , пункт меню

и плавающий выбор языка .

1. Выберите свои языки

После того, как вы установили и активировали TranslatePress в админке WordPress, перейдите в Настройки → TranslatePress . В настройках General выберите свой основной язык и добавьте любые другие языки, которые вы хотите добавить на свой многоязычный веб-сайт WordPress.

В этом примере я добавил французский, но вы можете добавить столько языков, сколько захотите, с помощью премиум-версии TranslatePress.

2. Выберите переключатель языка

Есть три варианта добавления переключателя языка на ваш сайт:

  • Шорткод — Вы можете добавить шорткод [переключатель языка] для отображения переключателя языка на любой странице или в виджете.
  • Пункт меню — Перейдите в Внешний вид → Меню , чтобы добавить языки в вашу навигацию.
  • Плавающий выбор языка — Добавление плавающего раскрывающегося списка, которое отображается на каждой странице вашего сайта.

Рассмотрим каждый вариант подробнее.

1. Переключатель языка коротких кодов

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

В настройках General для TranslatePress есть пять опций для настройки того, что отображает переключатель языка:

Выберите один из приведенных выше вариантов, нажмите «Сохранить изменения» и затем добавьте шорткод [переключатель языка] в том месте, где должен отображаться переключатель языка.

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

Внешний вид → Виджеты , перетащите текстовый виджет в нижний колонтитул и введите шорткод, например:

Во внешнем интерфейсе виджет переключателя языка показывает раскрывающееся окно, которое позволяет посетителям переключать языки:

2. Пункт меню

Пункт меню позволяет вам добавлять языки в навигацию вашего сайта WordPress.

Опять же, есть пять вариантов того, что отображает переключатель языка:

  • Полные названия языков
  • Краткие названия языков
  • Флаги с полными названиями языков
  • Флаги с короткими языковыми названиями
  • Только флаги

Выберите один из вариантов отображения и затем перейдите в меню Внешний вид → Меню , чтобы добавить языки в вашу навигацию, например:

Во внешнем интерфейсе основная навигация для моего сайта теперь отображает текст переключателя французского и английского языков:

3.Выбор плавающего языка

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

С TranslatePress вы можете настроить внешний вид и работу плавающего раскрывающегося списка (и даже отключить его, если хотите) в настройках плагина General .

Вы также можете выбрать, где вы хотите отображать переключатель языка WordPress:

  • Внизу справа
  • Внизу слева
  • Вверху справа
  • Вверху слева

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

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

Не забудьте настроить остальные параметры в плагине, в том числе, хотите ли вы использовать машинный перевод (перейдите в Настройки → TranslatePress → Автоматический перевод ).

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

Для получения дополнительной информации ознакомьтесь с нашим полным руководством по созданию многоязычного сайта WordPress.

4 рекомендации для переключателей языков WordPress

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

1. Убедитесь, что легко найти

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

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

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

2. Ограничьте количество используемых языков

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

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

3. Стиль, соответствующий дизайну вашего сайта

Хотя может показаться заманчивым (не говоря уже о том, что проще) использовать дизайн переключателя языка по умолчанию, предоставляемый большинством плагинов для перевода, рекомендуется настроить его внешний вид в соответствии с вашими темами WordPress.

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

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

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

Флаги — это простой способ указать язык, но они могут сбивать с толку жителей некоторых стран. Зачем? Что ж, языки слепы к границам.

Возьмите, к примеру, португальский язык. Как поясняет United Language Group, это официальный язык Португалии, Бразилии, Кабо-Верде, Гвинеи-Бисау, Мозамбика, Анголы, Сан-Томе и Принсипи, Восточного Тимора, Экваториальной Гвинеи и Макао. Он также имеет культурное присутствие в Индии, Шри-Ланке, Малайзии, на островах ABC в Карибском бассейне и на индонезийском острове Флорес.

Итак, флаг какой страны должен служить представителем португальского языка?

Флаги не являются языками. Рекомендуется использовать названия языков в их местном формате вместо их английского названия.Например, для японского вы можете использовать 日本語, а для испанского — Español.

Начало работы Добавление переключателя языков WordPress на ваш сайт

TranslatePress позволяет легко добавить переключатель языка WordPress на ваш сайт, предоставляя посетителям три простых способа переключения: короткий код, пункт меню и плавающий выбор языка.

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

Если вам нужна поддержка более двух языков или перенаправление пользователей в зависимости от их языка, ознакомьтесь со всеми дополнительными функциями TranslatePress.

TranslatePress Multilingual

TranslatePress — это самый простой способ перевести ваш сайт WordPress. Это быстро, не замедлит работу вашего сайта, работает с ЛЮБОЙ темой или плагином и оптимизировано для SEO.

Скачать плагин

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

У вас есть вопрос о настройке переключателя языков WordPress с помощью TranslatePress? Дайте нам знать в комментариях ниже!

,

Как создать кнопку переключения языка в Squarespace

Итак, вы сделали свой сайт Squarespace многоязычным. Bravo, kudos, mabrouk — нам очень нравится это видеть!

Что теперь ?

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

Лучшие сайты Squarespace с переводом Weglot, которые мы видели, — это те, кто продолжал уточнять микродетали своих сайтов, особенно после того, как спросил: «Что теперь.”

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

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

Weglot так не работает — или, по крайней мере, не обязательно. Когда вы устанавливаете Weglot на свой сайт Squarespace, вы сначала увидите кнопку переключения языка, которая выглядит следующим образом в правом нижнем углу страницы:

Довольно просто, не так ли? Идея этого переключателя языка фазы 1 состоит в том, чтобы быть как можно более нейтральным: без ярких цветов, без дикой типографики, просто четкая, четко очерченная кнопка, которая делает то, что вам нужно.
\

Многие люди являются поклонниками функционального вида, что вполне нормально. Если белый прямоугольник подходит вам и вашему сайту, вы знаете, что они говорят (или, может быть, нет, но теперь вы знаете): «Если он не сломался, не чините его». (По-французски мы иногда говорим « On ne change pas une équipe qui gagne » — это тоже работает. )

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

Где мне поставить кнопку?

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

И если обеспечение удобочитаемости вашего сайта для всех возможных читателей является для вас приоритетной задачей (что, вполне объективно, так и должно быть — особенно если вы хотите повысить коэффициент конверсии или просто сделать свой сайт более доступным во всем мире), вы я хочу убедиться, что они могут мгновенно переключить его на свой родной язык.

Побочные дела.

Да, вы правильно прочитали. Конечно, размер тоже имеет значение — крохотная кнопка вряд ли будет особенно заметна, а значит, вероятность ее нажатия еще ниже.

Но веб-дизайн — это, по сути, пространственная головоломка, и, если мы думаем об этом как об игре, ваше игровое поле ограничено двухмерным прямоугольником с двумя основными осями: слева направо и сверху вниз, или » x »и« y », если хотите — и весь смысл веб-сайта в том, что может содержать много информации .Как вы можете разместить все свои ссылки, изображения, видео и другие забавные интерактивные элементы в этом ограниченном пространстве и сделать так, чтобы самые важные из них выделялись из , а не отнимали от остальных?

Есть исследования, подтверждающие, что размещение элемента на странице — насколько далеко по каждой оси он заканчивается — критически влияет на то, как быстро зрители найдут его, , а также насколько вероятно, что они будут с ним взаимодействовать , Эти два условия не обязательно причинно связаны, но они в значительной степени коррелируют — этого достаточно, чтобы учесть внутренние предпочтения пользователей в отношении призыва к действию (CTA) или размещения кнопок.

Так что же именно говорится в исследовании, спросите вы?

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

Эксперты по дизайну UI-UX в Material Design выпустили подробное руководство о том, какие элементы веб-страницы следует настраивать (а какие не следует ) между языками, которые читаются слева направо («LTR» — например, английский , например) и справа налево («RTL», например, арабский или иврит).

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

При этом существуют конкретные психологические объяснения того, почему направление, в котором мы привыкли читать, влияет на нашу восприимчивость к CTA в разных местах — одно из которых, называемое диаграммой Гутенберга, иллюстрирует взаимосвязь между порядком, в котором мы смотрим на элементы на странице и сколько времени мы тратим на каждый из них.

В Интернете есть много других ресурсов, которые подробно объясняют это явление — например, этот, — но достаточно сказать, что наше решение здесь, в Weglot, разместить кнопку переключения языка по умолчанию в правом нижнем углу. край страницы не был случайным. На двумерном экране это размещение составляет область терминала , где пользователь, читающий LTR, с невероятной вероятностью даст отдых своим глазам и взаимодействует с представленным им CTA. Если рассматриваемый призыв к действию является кнопкой переключения языка, это означает, что у них не будет проблем с поиском способа сделать ваш сайт доступным для них.

В целом, сторона страницы, на которой вы размещаете кнопку, сильно влияет на то, насколько легко пользователи смогут ее найти. Если исходный язык вашего сайта имеет формат LTR (например, английский, французский, испанский, упрощенный китайский…), это означает, что ваша кнопка должна находиться под номером в правой части страницы.

Конечно, если вы создаете свой исходный сайт на языке RTL — например, арабском, иврите или фарси — , вам нужно сделать обратное, и оставить эту кнопку на левой стороне .

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

Источник: dubaifont.com
А можно мне посмотреть меню, пожалуйста?

Вы все еще думаете, почему бы вместо этого не поместить его в зону «Primary Optical Area»? — и это правильный вопрос.

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

Тем не менее, область сильного пара , как и область терминала, является хорошим кандидатом для размещения кнопок — особенно если у вас есть горизонтальное меню вверху страницы (что имеет место для … ну, большинство веб-сайтов это дней).
Верхние строки меню — довольно хорошее место для кнопок переключения языка, в конце концов, а особенно в Squarespace.

Кнопки меню в Squarespace: стилизация, синтез и локализация

Интеграция кнопки переключения языка Weglot в строку меню в Squarespace (и это применимо к любому типу строки меню, независимо от того, с какой стороны — так что направленность вашего языка не изменится. не влияет на то, как это работает) очень просто.

В редакторе сайта вы можете щелкнуть «Страницы», что приведет вас к боковой панели, которая выглядит примерно так:

Нажав на знак «+» рядом с заголовком «Основная навигация», вы можно будет добавить ссылок и / или раскрывающихся меню в главное меню заголовка.

Независимо от того, хотите ли вы включить доступные языки вашего сайта в качестве прямых параметров в главном меню…

… или, скорее, как элементы интегрированного раскрывающегося меню…

… вы в надежных руках: процесс — это тем же. Если вы создадите раскрывающееся меню, вы также сможете добавлять ссылки (например, с помощью команды «+» в главном меню навигации) — и следующий процесс для каждого языка, который вы добавили на свой сайт.

После того, как вы решили добавить ссылку либо на строку главного меню, либо на интегрированное раскрывающееся меню, вы увидите всплывающее окно, которое выглядит следующим образом:

Назовите ссылку именем языка, на котором вы хотите изменить свой сайт на .Вы, конечно, можете назвать язык по имени на вашем исходном языке — например, «испанский» в отличие от «Español», если вы создаете свой исходный сайт на английском языке, — но мы рекомендуем вам указать родное название языка в качестве названия , чтобы носители языка могли легко его распознать. Tl; dr: выберите «Español», а не «испанский»; «Français» в отличие от «французского»; и так далее, и так далее.

Затем вам нужно будет ввести ссылку , на которую вы хотите, чтобы этот заголовок вел.Поскольку ваш сайт Squarespace, переведенный на Weglot, не состоит из дублированных страниц в подпапках, а состоит из отдельных поддоменов для каждого языка , вы фактически не будете ссылаться на отдельный URL. Вместо этого введите строку «# Weglot-», за которой следует двухбуквенный код языка ISO :

.

Как добавить переключатель языков WordPress на свой сайт

Думаете о добавлении переключателя языков WordPress на свой сайт?

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

При минимальных затратах вашего времени и денег рентабельность инвестиций (ROI), которую предлагают многоязычные веб-сайты WordPress, также является привлекательной.По данным находящейся в Швейцарии торговой организации, Industry Specification Group for Localization (ISG), на каждый доллар США, потраченный на локализацию, компания получит прибыль в размере 25 долларов США.

Это 2,500% прибыли, и уж точно не стоит чихать. Скорее, это то, что вам следует серьезно подумать, если вы хотите улучшить положение своей компании для достижения успеха на зарубежных рынках.

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

Итак, в этом руководстве вы найдете все, что вам нужно знать, когда дело доходит до добавления переключателя языка WordPress на ваш сайт, включая множество реальных примеров, несколько советов по передовой практике, а также то, как создать и настроить его с помощью Weglot.

Что такое переключатель языков WordPress?

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

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

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

5 примеров успешных переключателей языка

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

Итак, давайте взглянем на несколько примеров переключателей языка.

1. Желтый

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

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

2. Microsoft Translator

Сайт Microsoft Translator позволяет посетителям выбирать из 14 различных языков с помощью раскрывающегося списка, расположенного чуть выше нижнего колонтитула страницы. Они также решили отображать название каждого языка полностью — это позволяет посетителям с первого взгляда узнавать их язык, обеспечивая понятные варианты переключения языков.

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

3. La Machine Cycle Club

Увлеченные велоспортом, Ренс и Сандер долгое время думали о создании бренда одежды на основе своего любимого хобби, и в 2013 году они основали La Machine Cycle Club, бренд одежды. движимые любовью к Velo, гонкам и красивой внешности.

Учитывая, что у велоспорта есть энтузиасты во всем мире, для Ренса и Сандера было естественным создать международный бренд, как по его посланию, так и по доступности. Потребность в международном расширении была быстро подтверждена, поскольку La Machine Cycle Club получил заказы со всего мира, как только бренд был запущен. Поэтому было важно иметь сайт на нескольких языках. Таким образом, Ренс и Сандер начали искать многоязычный плагин для своего сайта электронной коммерции.

После экспериментов с другим плагином Ренс, соучредитель клуба La Machine Cycle, обнаружил, что он слишком тяжелый, и это также влияет на скорость их веб-сайта, не говоря уже о том, что «Мы также были ниже наших целей с точки зрения скорости сайта» , На коэффициент конверсии веб-сайта действительно может сильно повлиять его скорость.

Затем они обнаружили Weglot, который сразу же удовлетворил их требования с точки зрения производительности и надежности. «Weglot очень прост в установке, а его серверная интеграция позволяет нашему сайту оставаться быстрым и надежным».
Благодаря Weglot, La Machine Cycle Club смог предложить свой веб-сайт на английском, немецком и голландском языках для поддержки своего международного роста. «Наша доля продаж из-за пределов Нидерландов быстро выросла до 50%». Конверсия также выросла на 25%.

4. Etsy

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

Когда вы нажимаете одну из трех кнопок — на самом деле это всего лишь одна большая кнопка — появляется модальное окно, которое дает вам возможность изменить регион, предпочтительный язык и валюту. Это изящный, интуитивно понятный дизайн, который, опять же, позволяет пользователю выбирать свой язык без необходимости перенаправления на региональную версию сайта.

5. Evernote

Evernote сохраняет простой переключатель языка с раскрывающимся списком в нижнем колонтитуле, который вы можете щелкнуть (или нажать, в зависимости от вашего устройства), чтобы изменить язык.Его легко найти, и он четко обозначен — например, «Выберите язык» — поэтому, когда вы нажимаете на него, вы знаете, что увидите несколько языков.

Рекомендации по отображению переключателей языков WordPress

Для большей части мира чтение на родном языке — роскошь. В то время как английский занимает третье место по популярности разговорный язык в мире (с 360 миллионами носителей), он занимает первое место среди наиболее часто используемых языков в Интернете (с 873 миллионами пользователей Интернета).Что характерно, 53,3% онлайн-контента написано на английском языке.

Представьте, что вы попадаете на веб-страницу после поиска в Google и видите испанские или китайские иероглифы. Если вы не говорите на этих языках, первое, что вы будете искать, — это переключатель языка, верно? Но обычно переключатели языка — это одно из четырех:

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

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

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

1. Тщательно выбирайте языки

Многоязычные плагины для wordpress.org, такие как WPML и Polylang, обычно предлагают автоматический перевод на десятки различных языков. Weglot предлагает более 100 языков. Но то, что вы можете включить все 100+ языков, не означает, что вам нужно.

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

Небольшие компании обычно предоставляют 2-3 языка, в то время как крупные бренды и транснациональные корпорации, такие как Apple, предлагают несколько языков (а часто и несколько региональных веб-сайтов). Если у вас есть магазин WooCommerce, подумайте о территориях, на которых вы продаете.

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

2. Убедитесь, что ваш переключатель языка легко найти.

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

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

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

Например, посмотрите, насколько популярным является переключатель языков Human Made агентства по разработке WordPress — его сложно не заметить в правом верхнем углу!

Часто некоторые современные сайты автоматически устанавливают язык для посетителей в зависимости от веб-браузера. Хотя это минимизирует объем работы, необходимой для пользователя (т. Е. Им не нужно искать переключатель языка и менять язык вручную), что, если некоторые пользователи попадут на «неправильную» версию вашего сайта?

Например, посетитель может физически находиться в Германии, и ваш многоязычный сайт WordPress может автоматически определять это и отображать немецкий язык, но что, если пользователь — австралийский путешественник, который не знает немецкого языка?

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

3. Настройте свой переключатель языка WordPress в соответствии с вашим дизайном

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

Это может включать настройку вашего плагина для отображения текста вместо кнопок или языковых кодов вместо языковых флагов.Многие многоязычные плагины WordPress, такие как WPML, Polylang и Weglot, также позволяют настраивать CSS для переключателя языка WordPress, чтобы вы могли вносить более сложные изменения стиля в переключатель языка.

Например, Weglot предоставляет как базовые, так и расширенные параметры для настройки дизайна вашего сайта, которые мы рассмотрим более подробно в разделе «Как сделать» далее в этой статье. Но чтобы показать вам пример того, как стиль вашего переключателя языка может иметь огромное значение, вот посмотрите на переключатель языка по умолчанию, который поставляется с Weglot:

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

Теперь взгляните на приведенный ниже веб-сайт IChO France 2019, который также использует Weglot для переводов. Для этого смелого дизайна переключатель языка WordPress сгруппирован с иконками социальных сетей вдали от основной навигации.

Дизайнер использовал CSS для стилизации форм вокруг кодов языков, избегая рамок.Это привлекает взгляд посетителя в верхний правый угол страницы, где расположен переключатель языка WordPress, гарантируя всем, кто посещает сайт — в частности, детям, которые будут принимать участие в Международной олимпиаде по химии (IChO) в этом году в Париже — сразу узнает, чтобы выбрать предпочтительный язык.

4. Флаги или имена?

Флаги стран часто используются для обозначения разных языков для переключателей языка. Хотя флаги привлекают дизайнеров по многим причинам — i.е. они красочные, знаковые и компактные — флаги никогда не создавались для обозначения языков и создания различных проблем, как отмечает United Language Group.

Например, рассмотрим португальский язык. Это официальный язык Португалии, Бразилии, Кабо-Верде, Гвинеи-Бисау, Мозамбика, Анголы, Сан-Томе и Принсипи, Восточного Тимора, Экваториальной Гвинеи и Макао. Он также имеет культурное присутствие (как в традиционном, так и в креольском вариантах) в Индии, Шри-Ланке, Малайзии, на островах ABC в Карибском бассейне и на индонезийском острове Флорес.Итак … флаг какой страны должен представлять португальский язык?

Существует также проблема, заключающаяся в том, что посетители могут не распознать флаг (из-за размера значка) или их могут смутить похожие флаги.

Флаги — это не языки, блог о разработке глобального пользовательского опыта, рекомендует всегда использовать название языка в его локальном формате, то есть для немецкого и китайского, обозначать их как «Deutsch» и «中文», а не «German» и «Китайский язык.»

Как создать переключатель языков WordPress с помощью Weglot

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

Если вам нужна поддержка более двух языков или перенаправление пользователей в зависимости от их языка, ознакомьтесь со всеми дополнительными функциями TranslatePress.

TranslatePress Multilingual

TranslatePress — это самый простой способ перевести ваш сайт WordPress. Это быстро, не замедлит работу вашего сайта, работает с ЛЮБОЙ темой или плагином и оптимизировано для SEO.

Скачать плагин

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

У вас есть вопрос о настройке переключателя языков WordPress с помощью TranslatePress? Дайте нам знать в комментариях ниже!

Разработка языкового переключателя: примеры и передовой опыт!

Создать глобальный продукт SaaS непросто. Вы должны локализовать свой продукт, перевести свой веб-сайт и убедиться, что все работает.

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

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

Значки переключения языка

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

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

Language Icon Initiative

Как я упоминал ранее, похоже, не существует стандартного определения того, как должен выглядеть значок языка. Я могу быть не прав. В 2008 году была начата инициатива по значку языка, цель которой — стандартизировать значок выбора языка.

Значок выбора стандартного языка выглядит так:

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

Похоже, что значок стандартного языка не получил широкого распространения.

Идеи иконок для других языков

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

Источник: http://fontawesome.io/icon/globe/

Проблема с глобусами? У разных людей разные ассоциации с иконками земного шара. Если вы активно пользуетесь facebook, вы определите этот значок как центр уведомлений.

Значит, для нас определенно не значок земного шара.

Проблема с флагами и странами

Интуитивно мы склонны думать о странах, когда говорим о языках.Китайский = Китай, японский = Япония и т. Д. Однако есть некоторые серьезные ограничения, когда вы начинаете использовать флаги страны для переключателя языка.

Итак, почему вы не должны использовать флаги стран:

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

Флаги символизируют народы, а не языки.Это так просто.

И я рекомендую использовать флаги стран только в том случае, если ваш продукт отличается от страны к стране, а не от языка к языку.

Лучшие методы проектирования языковых переключателей

Итак, вы можете задаться вопросом. Как мне визуализировать переключатель языка?

Если вам нравятся флаги стран и вы действительно хотите использовать их, я бы порекомендовал следующее решение:

Источник: https://dribbble.com/shots/2386084-Language-Selection-Modal

Языковые кнопки

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

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

Источник: usa.gov

Текстовые ссылки

Текстовые ссылки, предлагающие возможность переключения языков, широко используются. Google.com можно назвать здесь отличным примером.

Переключатель языков как часть основной навигации

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

Trello, например, встроил переключатель языка в настройки приложения.

Переключатель языков как часть навигации по нижнему колонтитулу

Другие веб-сайты и приложения позволяют пользователям изменять язык в нижнем колонтитуле своего сайта.

Facebook, кажется, является одним из ярких примеров этого:

Текстовое переключение языка вместо значков

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

Почему? Потому что кажется, что отсутствует значок языка, который способствует взаимопониманию.

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

Переключение языка является ключевым для UX

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

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

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

Если вы все еще не уверены, какой дизайн выбрать, получите отзывы пользователей и проведите тестирование. Чтобы узнать больше о том, как проводить пользовательское тестирование, загрузите эту бесплатную электронную книгу Как создавать продукты Пользователи любят с интервью с Trello, Prezi и HotelTonight.

Как добавить переключатель языка WordPress на свой сайт

Думаете о добавлении переключателя языков WordPress на свой сайт?

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

При минимальных затратах вашего времени и денег, рентабельность инвестиций (ROI), которую предлагают многоязычные веб-сайты WordPress, также является привлекательной. По данным швейцарской торговой организации, Industry Specification Group for Localization (ISG), на каждый доллар США, потраченный на локализацию, компания получит прибыль в размере 25 долларов США.

Это 2,500% прибыли, и уж точно не стоит чихать. Скорее, это то, что вам следует серьезно подумать, если вы хотите улучшить позиционирование своей компании для достижения успеха на зарубежных рынках.

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

Итак, в этом руководстве вы найдете все, что вам нужно знать, когда дело доходит до добавления переключателя языка WordPress на ваш сайт, включая множество реальных примеров, несколько советов по передовой практике, а также то, как создать и настроить его с помощью Weglot. .

Что такое переключатель языков WordPress?

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

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

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

5 примеров успешных переключателей языка

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

Итак, давайте взглянем на несколько примеров переключателей языка.

1. Желтый

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

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

2. Переводчик Microsoft

Сайт Microsoft Translator позволяет посетителям выбирать из 14 различных языков с помощью раскрывающегося списка, расположенного чуть выше нижнего колонтитула страницы. Они также решили отображать название каждого языка полностью — это позволяет посетителям с первого взгляда узнавать их язык, обеспечивая понятные варианты переключения языков.

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

3. La Machine Cycle Club

Увлеченные велоспортом, Ренс и Сандер долгое время думали о создании бренда одежды для своего любимого хобби, и в 2013 году они основали La Machine Cycle Club, бренд одежды, движимый любовью к Velo, гонкам и красивой внешности. .

Учитывая, что у велоспорта есть энтузиасты во всем мире, для Ренса и Сандера было естественным создать международный бренд, как по его посланию, так и по его доступности. Необходимость расширения на международном уровне была быстро подтверждена, поскольку La Machine Cycle Club получил заказы со всего мира, как только бренд был запущен. Поэтому было важно иметь сайт на нескольких языках. Таким образом, Ренс и Сандер начали искать многоязычный плагин WordPress для своего сайта электронной коммерции.

После экспериментов с другим многоязычным плагином WordPress, Ренс, соучредитель клуба La Machine Cycle, обнаружил, что он слишком тяжелый, и это также повлияло на скорость их веб-сайта, не говоря уже о том, что «Мы также были ниже наших целей с точки зрения скорости сайта. ». На коэффициент конверсии веб-сайта действительно может сильно повлиять его скорость.

Затем они открыли для себя Weglot, который сразу же удовлетворил их требования с точки зрения производительности и надежности. «Weglot очень прост в установке, а его серверная интеграция позволяет нашему сайту оставаться быстрым и надежным».Благодаря Weglot, La Machine Cycle Club смог предложить свой веб-сайт на английском, немецком и голландском языках для поддержки своего международного роста. «Наш процент продаж из-за пределов Нидерландов быстро вырос до 50%». Конверсия также выросла на 25%.

4. Etsy

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

Когда вы нажимаете одну из трех кнопок — на самом деле, это всего лишь одна большая кнопка — появляется модальное окно, в котором вы можете изменить регион, предпочтительный язык и валюту. Это изящный, интуитивно понятный дизайн, который, опять же, позволяет пользователю выбирать язык без необходимости перенаправления на региональную версию сайта.

5. Evernote В

Evernote простой переключатель языка с раскрывающимся списком в нижнем колонтитуле, который вы можете щелкнуть (или коснуться, в зависимости от вашего устройства), чтобы изменить язык.Его легко найти, и он четко обозначен — например, «Выберите язык» — поэтому, когда вы нажимаете на него, вы знаете, что увидите несколько языков.

Лучшие практики для отображения переключателей языков WordPress

Для большей части мира чтение на родном языке — роскошь. В то время как английский занимает третье место по популярности разговорный язык в мире (с 360 миллионами носителей), он занимает первое место среди наиболее часто используемых языков в Интернете (с 873 миллионами пользователей Интернета).Что характерно, 53,3% онлайн-контента написано на английском языке.

Представьте, что вы попадаете на веб-страницу после поиска в Google и видите испанские или китайские иероглифы. Если вы не говорите на этих языках, первое, что вы будете искать, — это переключатель языков, верно? Но обычно переключатели языка — это одно из четырех:

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

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

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

1. Тщательно выбирайте языки

Многоязычные плагины для wordpress.org, такие как WPML и Polylang, обычно предлагают автоматический перевод (или машинный перевод) на десятки разных языков.Однако, в отличие от WPML и Polylang, Weglot предлагает более 100 языков. Но то, что вы можете включить все 100+ языков, не означает, что вы должны это делать.

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

Небольшие компании обычно предоставляют 2-3 языка, в то время как крупные бренды и транснациональные корпорации, такие как Apple, предлагают несколько языков (а часто и несколько региональных веб-сайтов).Если у вас есть магазин WooCommerce, подумайте о территориях, на которых вы продаете.

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

2. Убедитесь, что переключатель языка легко найти

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

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

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

Например, посмотрите, насколько популярным является переключатель языков Human Made агентства разработки WordPress — его сложно не заметить в правом верхнем углу!

Часто некоторые современные сайты автоматически устанавливают язык для посетителей в зависимости от веб-браузера. Хотя это минимизирует объем работы, необходимой для пользователя (т.е. им не нужно искать переключатель языка и менять языки вручную), что, если некоторые пользователи попадут на «неправильную» версию вашего сайта?

Например, посетитель может физически находиться в Германии, и ваш многоязычный сайт WordPress может автоматически определять это и отображать немецкий язык, но что, если пользователь — австралийский путешественник, который не знает немецкого языка?

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

3. Настройте переключатель языков WordPress в соответствии с вашим дизайном

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

Это может включать в себя настройку вашего плагина для отображения текста вместо кнопок или языковых кодов вместо языковых флагов.Многие многоязычные плагины WordPress, такие как WPML, Polylang и Weglot, также позволяют настраивать CSS для переключателя языка WordPress, чтобы вы могли вносить более сложные изменения стиля в переключатель языка.

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

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

А теперь взгляните на приведенный ниже веб-сайт IChO France 2019, который также использует Weglot для переводов. Для этого смелого дизайна переключатель языка WordPress сгруппирован с иконками социальных сетей вдали от основной навигации.

Дизайнер использовал CSS для стилизации форм вокруг языковых кодов, избегая рамок.Это привлекает взгляд посетителя в верхний правый угол страницы, где расположен переключатель языка WordPress, гарантируя всем, кто посещает сайт — в частности, детям, которые будут принимать участие в Международной олимпиаде по химии (IChO) в этом году в Париже — сразу узнает, чтобы выбрать предпочитаемый язык.

4. Флаги или имена?

Флаги стран часто используются для обозначения разных языков для переключателей языка. Хотя флаги привлекают дизайнеров по многим причинам — i.е. они красочные, знаковые и компактные — флаги никогда не создавались для обозначения языков и создания различных проблем, как отмечает United Language Group.

Например, рассмотрим португальский язык. Это официальный язык Португалии, Бразилии, Кабо-Верде, Гвинеи-Бисау, Мозамбика, Анголы, Сан-Томе и Принсипи, Восточного Тимора, Экваториальной Гвинеи и Макао. Он также имеет культурное присутствие (как в традиционном, так и в креольском вариантах) в Индии, Шри-Ланке, Малайзии, на островах ABC в Карибском бассейне и на индонезийском острове Флорес.Итак … флаг какой страны должен представлять португальский язык?

Также существует проблема, заключающаяся в том, что посетители могут не узнать флаг (из-за размера значка) или их могут смутить похожие флаги.

Флаги не языки, блог о разработке глобального пользовательского опыта, рекомендует всегда использовать название языка в его локальном формате, то есть для немецкого и китайского языков, обозначать их как «Deutsch» и «中文», а не «German» и « Китайский язык.»

Как создать переключатель языков WordPress с Weglot

В этом примере я хочу показать вам, как настроить простой переключатель языков WordPress с помощью Weglot.Затем я покажу вам, как стилизовать его с помощью CSS для расширенных настроек.

Weglot — один из самых популярных и простых в использовании плагинов для переключения языков WordPress. С Weglot вы можете добавить еще один язык на свой сайт менее чем за 5 минут и начать настраивать его в соответствии с дизайном вашего сайта.

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

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

Если у вас еще нет учетной записи Weglot, вам необходимо создать ее, чтобы получить свой ключ API.

Сохраните изменения и обновите интерфейс вашего сайта — вы увидите новый переключатель языка WordPress в правом нижнем углу.Когда вы нажмете на нее, она развернется, чтобы отобразить все доступные языки, что позволит вам выбрать и отобразить предпочтительный перевод.

Это дизайн по умолчанию, который поставляется с Weglot, но это ни в коем случае не тот дизайн, с которым вы застряли! С Weglot вы можете полностью настроить внешний вид и расположение переключателя языка WordPress.

Чтобы приступить к выполнению основных настроек, перейдите на страницу Weglot> Дизайн кнопки «Язык» (необязательно) в серверной части WordPress.На этом экране вы можете выбрать:

  • Использовать или не использовать раскрывающийся список
  • Использовать или нет флаги
  • Типы флагов
  • Для отображения названия языков
  • Чтобы просто отображать код для языков

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

Вот как сейчас выглядит мой переключатель языка WordPress:

Хорошо, давайте сделаем некоторые дополнительные настройки.

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

Вернувшись к экрану Weglot в админке WordPress, при прокрутке немного дальше вниз по странице вы увидите варианты отображения переключателя языка.Вы можете выбрать из пункта меню, виджета переключателя языка, шорткода или в исходном коде:

В моем случае я хочу использовать шорткод [weglog_switcher]. Итак, я вставлю это в элемент кода и перетащу в заголовок, где я хочу, чтобы отображался переключатель языка.

Вот как теперь выглядит мой обновленный переключатель языков WordPress:

Хотя переключатель языка теперь расположен в заголовке там, где мне нужно, благодаря шорткоду он отображается не так, как мне хотелось бы (он отображается под основным изображением).Кроме того, я хочу отображать только два языковых кода, расположенных рядом друг с другом. Другой вариант, если в моей теме есть область виджетов в заголовке, — это отобразить переключатель таким образом.

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

И вуаля! Вот как сейчас выглядит мой переключатель языка WordPress:

С помощью короткого кода в нужном месте и всего нескольких строк CSS вы можете быстро и легко настроить переключатель языка Weglot в соответствии с вашим сайтом.

Вот код CSS, который я добавил в текстовое поле «Переопределить CSS»:

Пример использования: как Baltazare использует Weglot

Основанное в 2014 году веб-агентство Baltazare проектирует и разрабатывает веб-сайты для крупных брендов, таких как Candia, Royal Monceau и AXA. Используя WordPress, агентство ежегодно разрабатывает более 40 веб-проектов.

Многоязычные проекты всегда были болезненными для Baltazare до открытия Weglot. Команда изо всех сил пыталась найти хорошее решение для перевода, которое соответствовало бы потребностям их клиентов.Какое-то время казалось, что WPML, еще один популярный плагин для перевода WordPress, был хорошим решением. Но команде хотелось чего-то менее сложного и более эффективного.

После тестирования многосайтового подхода WordPress с одним сайтом на каждый язык, и обнаружив, что управление обслуживанием является слишком сложной задачей, команда обнаружила Weglot. Основатель Baltazare Гийом Вергано сказал, что был рад обнаружить, что Weglot полностью интегрирован с любым сайтом WordPress, включая темы и плагины, и перевел весь контент, включая пользовательские типы сообщений и пользовательские таксономии.

«Научиться пользоваться Weglot очень легко для нас и для наших клиентов. Мы всегда создаем короткие видеоуроки, в которых за несколько минут объясняется, как использовать Weglot для каждого из них, и все », — сказал Гийом.

Baltazare теперь использует Weglot для 7 действующих сайтов, включая сайт IChO France 2019, который мы рассматривали ранее, и команда всегда рекомендует Weglot клиентам как надежное решение для многоязычных сайтов. Это удобная и гибкая альтернатива WPML или мультисайту.

Достигните полной культурной оптимизации с помощью хорошо продуманного переключателя языков WordPress

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

Хорошо продуманный переключатель языка — это бонус, но также то, к чему вы должны стремиться. Когда ваш новый переключатель языка выглядит и ощущается как неотъемлемая часть вашего веб-сайта, посетители и клиенты будут чувствовать себя как дома, просматривая переведенный контент.Это помогает установить (и повысить) доверие и имеет большое значение для построения прочной связи с вашим брендом.

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

Переключатель языков как ключевой элемент многоязычных сайтов Drupal 8

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

Среди важнейших элементов простого в использовании многоязычного сайта — переключатель языков. Давайте обсудим, что это за переключатель, посмотрим на его прекрасные примеры и рассмотрим, как он работает в Drupal 8 — лучшей CMS для многоязычных веб-сайтов.

Что такое переключатель языка?

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

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

Лучшие примеры дизайна переключения языков

Amazon.de

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

Nokia

Очень удобный в своей простоте многоязычный переключатель на веб-сайте Nokia Corporation предлагает ссылки на соответствующие версии. Их список действительно впечатляет и включает 26 языков.

Хорватия. Час

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

Переключатель языка в Drupal 8

Поскольку Drupal 8 является многоязычным «из коробки», он также имеет встроенный переключатель языков. Он включен во весь пакет его впечатляющих многоязычных функций (поддерживается почти сотня языков, готов перевод интерфейса, простая настройка, RTL и многое другое).

Переключатель может быть добавлен в любом месте вашего веб-сайта и позволяет гибко настраивать включенные языки, настраиваемую метку (например, «Выберите свой язык») и т. Д. Это довольно простые вещи, остальное остается на усмотрение разработчиков, которые могут создать переключатель. безупречный внешний вид и функциональность.

Как добавить переключатель языка в Drupal 8

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

1) Включение многоязычных модулей

Нам нужно включить многоязычные модули в ядре Drupal 8:

  • Перевод конфигурации
  • Перевод содержания
  • Перевод интерфейса
  • Язык

2) Добавление языка

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

3) Создание селектора языка для редакторов

Селектор языка — это своего рода переключатель языка, но для редакторов контента. Чтобы получить его, нам нужно выбрать, какие типы контента и их конкретные поля будут переведены в «Региональные и языковые стандарты» — «Язык контента и перевод».

Это позволит редакторам выбрать язык для ввода и использовать вкладку «Перевести».

4) Создание переключателя языка для пользователей

Наконец, мы можем получить переключатель контента для пользователей веб-сайтов, чтобы они могли переключаться между версиями контента. В Drupal есть блок «Переключатель языка». Как и все другие блоки, он находится в разделе Структура — Макет блока.

Нам нужно щелкнуть по региону, в котором мы хотим разместить переключатель. Затем находим блок переключателя языка в списке доступных блоков, снова нажимаем «Поместить блок» и сохраняем блоки.

При размещении блока (или в любое время) мы можем выбрать для него собственный заголовок (например, «Выбрать язык») или выбрать полное отсутствие заголовка.Мы также можем выбрать языки для отображения в переключателе, что по умолчанию будет означать все.

Мы помещаем в область «Сначала боковая панель»:

Или, может быть, мы могли бы переместить его в заголовок, щелкнув карандаш рядом с блоком и открыв настройки конфигурации:

Этот и многие другие опции предоставляются Drupal «из коробки». Но, конечно, ваш переключатель языка будет выглядеть намного более стильно после того, как наши разработчики применит свои CSS, JavaScript и другие навыки интерфейса.

Видео о создании переключателя языка на сайте Drupal 8

Мы создали короткое видео с описанным выше процессом. Наслаждаться!

Создайте переключатель языков или многоязычный сайт!

Вы всегда можете доверить нашим специалистам службы поддержки Drupal:

  • создание переключателя языка для вашего сайта в соответствии с вашим видением
  • создает многофункциональный многоязычный сайт с нуля для любой отрасли

Сделаем — ваша многоязычная аудитория ждет!

Использование элемента переключателя языков с WPML

Астра Про 3.1 представляет новый элемент в конструкторе верхнего колонтитула — Переключатель языков.

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

Вот шаги, объясняющие, как добавить и настроить элемент Language Switcher в заголовке. Вы можете выполнить аналогичные действия, чтобы добавить его в нижний колонтитул.

Шаг 1 — В настройщике посетите Header Builder.Щелкните раздел, в котором вы хотите добавить навигацию для разных языков. В поле элемента щелкните элемент «Переключатель языка».

Шаг 2 — Когда вы откроете настройки переключателя языков, вы увидите две опции —

  1. WPML
  2. Пользовательский

Вы увидите эту опцию, только если на вашем сайте активен WPML.

Language Switcher имеет встроенную поддержку плагина WPML. Он автоматически получит доступные языки из WPML и отобразит их в качестве навигации.

Если вы используете плагин, отличный от WPML, вы можете выбрать собственный вариант и добавить URL-адрес переведенной версии веб-сайта.

Переключатель языков с WPML

После добавления переключателя языков в заголовок выберите тип — WPML.

При этом будут автоматически получены языки, добавленные с помощью WPML.

Если вы хотите добавить больше языков, вы можете добавить их с помощью настроек WPML. Для этого перейдите на панель управления> WPML> Языки> Языки сайта> Добавить / удалить языки.Из списка языков выберите нужные и нажмите «Сохранить».

Все языки, выбранные на предыдущем шаге, будут доступны в построителе заголовков с помощью Language Switcher.

Вы можете настроить внешний вид языковой навигации с помощью следующих параметров —

  • Макет : все языки можно отображать горизонтально или вертикально. Горизонтальный макет в основном подходит для заголовка, а вертикальный — для нижнего колонтитула.
  • Показать флаг страны : Отображает флаги стран, связанных с выбранным языком.Это помогает пользователям быстро определить предпочтительный язык, который они ищут.
  • Показать имя: Будет отображено полное имя языка.
  • Показать переведенное имя: Это отобразит переведенные имена для всех языков, если выбран конкретный язык. Пример. Если вы добавили 4 языка — английский, французский, немецкий и хинди. Когда вы нажмете на немецкий, все языки покажут свои переведенные имена на немецком языке.
  • Показать код языка: Отображает код языка для каждого языка.Пример — английский (en), французский (fr), немецкий (de) и хинди (hi).

На вкладке «Дизайн» вы можете управлять интервалом, типографикой и размером элементов.

Переключатель языков с другими плагинами перевода

Если вы используете любой другой плагин, кроме WPML, выполните следующие шаги, чтобы добавить языковую навигацию —

Шаг 1. Выберите язык из раскрывающегося списка и нажмите кнопку «Добавить язык».

Шаг 2 — Затем щелкните язык.Вы можете изменить его метку и установить URL-адрес. Этот URL-адрес является переведенной версией вашего веб-сайта, и вы можете получить ее из своего плагина перевода. Просто вставьте сюда URL-адрес соответствующего языка.

Шаг 3. С помощью настроек ниже вы можете управлять другими вещами, такими как горизонтальная / вертикальная компоновка, отображение флага страны и названия языка отображения.

Шаг 4. На вкладке «Дизайн» вы можете управлять интервалом, цветом и типографикой элементов.

.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *