Коротко: адаптировать сайт на WordPress под мобильные — значит сделать его адаптивным: правильная тема, meta viewport, медиа-запросы, гибкие картинки, читаемые шрифты, удобное меню. Чаще всего достаточно выбрать адаптивную тему и доработать её CSS; в крайнем случае — подключают отдельную мобильную версию.
Что входит в адаптив
| Элемент | Что настроить |
|---|---|
| Тема | адаптивная по умолчанию |
| Метатег viewport | width=device-width, initial-scale=1 |
| Медиа-запросы | под планшет и телефон |
| Картинки | max-width: 100%, аккуратные размеры |
| Меню | бургер или компактный список |
| Таблицы, таблицы-цены | прокрутка или карточки |
Вкладки: пошагово
Сначала проверьте, адаптивна ли тема: сузьте окно браузера и посмотрите, «перестраивается» ли вёрстка. Если нет — тема устарела, и её проще заменить, чем переписывать.
Убедитесь, что в head есть метатег:
<meta name="viewport" content="width=device-width, initial-scale=1">Без него мобильный браузер покажет «десктопную» страницу, только уменьшенной.
/* базовые стили — для мобильных */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* планшет и выше */
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}
/* десктоп */
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Современный подход — «mobile first»: сначала стили для узкого экрана, затем расширяем через min-width.
Меню на мобильном обычно скрывают в «бургер». Можно сделать простым CSS без JS или подключить скрипт:
.nav { display: none; }
.nav.is-open { display: block; }
@media (min-width: 992px) { .nav { display: flex; } .burger { display: none; } }Кнопку-бургер связывают с меню скриптом: по клику добавляют класс is-open.
- Проверьте в DevTools (режим устройства) на разных размерах.
- Проверьте на настоящем телефоне — это важнее эмуляции.
- Убедитесь, что нет горизонтальной прокрутки.
- Проверьте размер шрифта и кнопок (не мельче 16px).
- Проверьте скорость загрузки — тяжёлые фото на мобильном сильно мешают.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Сайт «мелкий» на телефоне | нет viewport | добавить метатег |
| Горизонтальная прокрутка | фикс-ширины, большие изображения | max-width: 100%, border-box |
| Мелкий текст | размер меньше 16px | увеличить до 16px+ |
| Меню не открывается | нет обработчика клика | добавить скрипт для бургера |
Проверьте себя
Вопросы и ответы
Обычно нет. Адаптив — это вёрстка темы и CSS. Плагины нужны только для частных случаев (например, мобильное меню).
В DevTools включите режим устройства и переключайте размеры экрана. Но финальная проверка — на реальном устройстве.
Обернуть в блок с overflow-x: auto или переверстать в карточки через медиа-запрос.
Да, напрямую: поисковики оценивают удобство для мобильных. Некликабельные и «мелкие» сайты теряют позиции.
Итоги
- Адаптив = theme + meta viewport + медиа-запросы.
- Используйте mobile first и
min-width-запросы. - Меню, таблицы и картинки — отдельное внимание.
- Проверяйте на реальных устройствах и следите за скоростью.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.