Мобильная версия сайта на WordPress: как сделать сайт адаптивным

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

Шаг 1: проверьте, адаптивная ли у вас тема

Откройте сайт в мобильном просмотре (см. как посмотреть мобильную версию сайта на компьютере) и посмотрите на простую страницу без особой раскладки, например на политику конфиденциальности. Если даже она уменьшена или прокручивается вбок, проблема в теме.

Две быстрые проверки:

• Откройте исходный код страницы и найдите name="viewport". Адаптивная тема выводит метатег viewport в <head>. Если его нет, тема старше эпохи мобильного дизайна.
• Проверьте возраст темы и обновления в разделе Внешний вид > Темы. Тема, которая не обновлялась несколько лет, — это риск не только для мобильной вёрстки.

Если тема не адаптивная, сменить её обычно дешевле, чем латать. Актуальные блочные темы по умолчанию, например Twenty Twenty-Five, и большинство активно поддерживаемых тем адаптивны из коробки. Перед активацией попробуйте новую тему через Живой просмотр.

Шаг 2: используйте мобильный предпросмотр редактора

В WordPress есть встроенный предпросмотр под разные устройства:

• В блочном редакторе и редакторе сайта переключатель предпросмотра на верхней панели меняет вид между Desktop, Tablet и Mobile.
• В классическом Настройщике (для классических тем) то же самое делают кнопки устройств внизу боковой панели.

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

Шаг 3: исправьте раскладку блоков для маленьких экранов

Типичные проблемы блочного редактора и их решения:

• Колонки сжимаются, а не встают друг под друга. Выберите блок «Колонки» и убедитесь, что включена опция расположения колонок друг под другом на мобильных (Stack on mobile).
• Фиксированная ширина и высота. Блоки «Изображение», «Обложка» и «Группа» могут иметь фиксированные размеры в пикселях. Предпочитайте ширину в процентах и минимальную высоту вместо фиксированной, чтобы текст не обрезался на узких экранах.
• Крупный шрифт. Заголовок в 72 px, который хорошо смотрится на десктопе, на телефоне вылезает за край. Используйте пресеты резиновой типографики темы, если они есть: они масштабируются вместе с экраном.
• Широкие таблицы. Таблицы с большим числом колонок не помещаются на телефоне. Делайте их короче или дайте им прокручиваться по горизонтали внутри своего контейнера.

Шаг 4: проверьте мобильные настройки конструктора страниц

Если вы пользуетесь конструктором вроде Elementor, Divi или Beaver Builder, большинство мобильных проблем возникает из-за настроек, заданных только для десктопа. У конструкторов есть адаптивный режим с отдельными значениями для мобильных и планшетов: отступы, размер шрифта, ширина колонок, видимость.

1. Переключите конструктор в мобильный вид.
2. Уменьшите большие внешние и внутренние отступы, заданные в пикселях.
3. Подберите размер заголовков для мобильных.
4. Проверьте порядок колонок, когда они встают друг под друга; разверните его, если картинка оказывается перед заголовком, к которому относится.
5. Не скрывайте важный контент на мобильных. Google индексирует мобильную версию, так что скрытого текста для него всё равно что нет.

Конструкторы задают и свои брейкпоинты (у Elementor по умолчанию 767 px для мобильных и 1024 px для планшетов, можно добавить ещё). Убедитесь, что ваш собственный CSS использует те же ширины. Подробнее о выборе ширин: брейкпоинты для адаптивной вёрстки.

Шаг 5: исправьте меню

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

Шаг 6: изображения и скорость

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

• загружайте изображения не больше того размера, в котором они вообще будут показаны;
• конвертируйте их в WebP или AVIF (свежие версии WordPress поддерживают это сами или через плагин для изображений);
• используйте плагин кеширования или кеширование на стороне хостинга;
• удалите плагины, которыми не пользуетесь: каждый может добавлять скрипты на все страницы.

Измерьте результат способами из статьи проверка скорости сайта на мобильных.

Шаг 7: найдите проблемный CSS и конфликты плагинов

Если сайт всё ещё прокручивается вбок, найдите слишком широкий элемент. В Chrome DevTools выполните в консоли этот код, чтобы получить список элементов шире экрана:

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)

Типичные виновники — правила вроде width: 1200px в Внешний вид > Настроить > Дополнительные стили, встроенные виджеты фиксированного размера (старые ленты соцсетей, карты, формы) и слайдеры, которые прописывают ширину инлайн.

Шаг 8: правильно проверьте опубликованный сайт

Превью в редакторе — только начало. Прежде чем считать работу законченной:

1. Откройте ключевые страницы в мобильном просмотре в Chrome. Mobile View Extension делает это в один клик и загружает опубликованную страницу с мобильным user agent, так что вы видите то, что реально получают телефоны, включая то, что отдают кеширование и мобильные плагины.
2. Проверьте формы и оформление заказа на настоящем телефоне.
3. Запустите аудит Lighthouse для мобильных (инструкция).

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

Частые вопросы

Почему сайт на WordPress нормально выглядит в редакторе, но не на телефоне?

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

Нужен ли плагин, чтобы сделать WordPress адаптивным?

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

Нужен ли ещё AMP для мобильных сайтов на WordPress?

Нет. AMP необязателен, а быстрая адаптивная страница решает те же задачи без отдельного формата.