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

Одним из примеров популярного языка, на котором говорят справа налево, является урду. Это шестое место в мире по количеству говорящих, на нем говорят более 420 миллионов человек, и около 40% из них имеют доступ в Интернет.

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

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

Как добавить поддержку RTL в тему WordPress (3 шага)

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

Шаг 1: Создайте RTL CSS для вашей темы:

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

Вот два сайта, которые мы рекомендуем:

  • RTL CSS: этот фреймворк содержит очень подробный набор инструкций, и на момент написания статьи дополнительно проводится бета-тестирование живого конвертера.
  • CSSJanus: Этот инструмент сам по себе прост — введите свой CSS-код слева направо (LTR) на левой панели, нажмите кнопку Отправить и увидите справа свой CSS-код RTL.

Это далеко не только благодаря тому, что вы собираетесь. Создав новый CSS, сохраните полученные стили в виде файла с именем style-rtl.css, который можно будет использовать позже.

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

Для этого сначала добавьте следующий код в самый верхний файл rtl.css:

тело { направление: RTL; Юникод-биди: встроить; }

Затем для остальных селекторов убедитесь, что вы переключаете каждое левое или правое положение на другое. ищите text-align, float и clear особенно. Тем не менее, именно те селекторы, которые вы выберете, будут соответствовать вашим собственным (и вашим клиентам) потребностям.

Если у вас есть какие-либо фоновые изображения, указывающие на выбранное направление, вы можете предоставить перевернутую версию и также обновить отношение к ней в таблице стилей rtl.css. Между тем, все эти атрибуты должны быть «обнулены» для первого изображения, прежде чем устанавливать значение замены:

  • допуск
  • набивка
  • границы
  • фоновое положение
  • правое и левое расположение

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

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

Шаг 2: Убедитесь, что WordPress «видит» стили RTL:

Второй шаг для добавления поддержки RTL в WordPress. Если вы используете инструмент-генератор CSS, теперь вы можете поставить в очередь свою новую таблицу стилей style-rtl.css, чтобы WordPress мог загрузить ее в приемлемое время. часто это просто вопрос добавления фрагмента в файл functions.php вашей темы:

функция enqueue_theme_files() { wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri()); wp_style_add_data («стиль темы, rtl, заменить); } add_action( ‘wp_enqueue_scripts’, ‘enqueue_theme_files’);»

Это говорит WordPress загрузить правильную таблицу стилей, когда веб-сайт собирается перейти на язык RTL. Предполагая, что вы уже правильно используете enqueue для загрузки в свою обычную таблицу стилей styles.css, вы просто добавите информацию wp_style_add_data() в существующую функцию стилей в очереди.

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

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

Шаг 3. Проверьте свои стили RTL в WordPress:

Третий шаг для добавления поддержки RTL в WordPress У вас есть несколько вариантов тестирования языков RTL в вашей установке WordPress. первичным является легкое переключение WordPress на язык RTL. чтобы попытаться сделать это, перейдите на страницу Настройки › Общие в панели инструментов WordPress. Затем выберите основной язык сценария, который вы видите в раскрывающемся списке «Язык»:

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

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

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

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

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

Вывод

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

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

  • Создайте RTL CSS для своей темы.
  • Убедитесь, что WordPress увидит стили RTL.
  • Проверьте свои стили RTL, чтобы убедиться, что все выглядит правильно.

Какие вопросы возникают о стилях RTL в WordPress? дайте нам знать в разделе комментариев ниже и обсудите это на наших форумах!

Первоначально опубликовано на https://wpscriptor.com 15 июля 2020 г.