Редактирование мобильной версии

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

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

1. На консоли сайта перейдите в раздел Внешний вид → Редактор.
2. Выберите шаблон или часть шаблона, где расположено меню навигации.
3. Откройте представление в виде списка и выберите блок «Навигация».
4. На боковой панели настроек блока щёлкните по значку «Настройки» (в виде шестерёнки).

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

Подробнее о стилизации меню сайта.

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

Чтобы настроить выравнивание контента по вертикали, выполните следующие действия:

1. На консоли сайта перейдите в раздел Внешний вид → Редактор.
2. Отредактируйте страницу или шаблон, где расположен нужный блок.
3. Откройте представление в виде списка и выберите нужный блок.
4. В настройках блока включите или выключите опцию «Друг под другом на мобильных устройствах».

Блоки с настройкой «Друг под другом на мобильных устройствах»:

• Колонки
• Медиа и текст
• Последние записи в Instagram

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

Чтобы включить перенос по вертикали, выполните следующие действия:

1. На консоли сайта перейдите в раздел Внешний вид → Редактор.
2. Отредактируйте страницу или шаблон, где расположен нужный блок.
3. Откройте представление в виде списка и выберите нужный блок.
4. В настройках блока включите опцию «Разрешить перенос по вертикали».

Блоки с параметром «Разрешить перенос по вертикали»:

• Кнопки
• Кнопки «Поделиться»
• Навигация
• Значки соцсетей
• Комментарии
• «Строка» и «Друг под другом»

Размер текста в пикселях (px) остаётся заблокированным. Размер текста в em или rem регулируется настройками и размером экрана у посетителя, благодаря чему ваш сайт удобнее и легче читать на мобильных устройствах.

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

1. Щёлкните по блоку с текстом, размер которого нужно изменить.
2. В настройках блока найдите раздел Типографика.
3. В разделе Размер шрифта щёлкните значок произвольного размера (две горизонтальные линии с точками).
4. Нажмите на px, чтобы изменить единицу измерения на em или rem.
5. Введите числовое значение и настройте его по необходимости.

Выбор между em и rem:

• em — размер текста масштабируется относительно контейнера (подходит для подписей, меток или текста внутри определённых блоков)
• rem — текст на всём сайте одного размера (подходит для основного текста, заголовков и кнопок)

Также можно настроить размер шрифта на всём сайте, а не в каждом из блоков по отдельности.

Этот раздел руководства относится к сайтам с тарифными планами WordPress.com Premium, Business и Commerce, а также с устаревшим тарифным планом Pro. Для бесплатных сайтов или сайтов с тарифным планом Personal необходимо приобрести платный тарифный план более высокого уровня, чтобы получить доступ к этой функции.

С помощью классов CSS можно скрывать некоторые блоки на ПК или мобильных устройствах. Чтобы настроить эту опцию, выполните следующие действия:

1. Отредактируйте страницу, запись или шаблон, содержащие блок, который нужно скрыть.
2. Выберите нужный блок в представлении в виде списка или нажмите на него.
3. В настройках блока нажмите Дополнительно.
4. В поле «Дополнительные классы CSS» введите hide-desktop или hide-mobile:

5. Перейдите к пользовательским настройкам CSS сайта:
   • в блочных темах: Внешний вид → Редактор → Стили → ⋮ → Дополнительные CSS;
   • в классических темах: Внешний вид → Настройка → Дополнительные CSS.
6. Вставьте следующий код и нажмите Сохранить:

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

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