WordPress
Натяжка вёрстки на WordPress
Натяжка — это перевод статичного макета в управляемую тему: редактор меняет тексты и блоки, а вёрстка остаётся такой, как согласовали на приёмке.
Натяжка начинается не с PHP, а с инвентаризации макета: какие экраны уникальны, какие повторяют сетку, где общие шапка и подвал, какие блоки будут наполняться из админки. Хорошая вёрстка уже содержит семантику, BEM или иной согласованный нейминг и адаптив — тогда разработчик режет HTML на header.php, footer.php, template parts и подключает WordPress-циклы там, где выводится динамика.
Карта шаблонов
- front-page.php — главная с особыми секциями
- page.php и page-{slug}.php для лендингов с уникальной структурой
- single.php для статей, archive.php и taxonomy для рубрик
- 404.php, search.php при необходимости кастомного поиска
- Части: hero, карточка услуги, CTA, FAQ — как template-parts
Поля контента: ACF, блоки или оба
Повторяющиеся секции главной удобно описать полями ACF Pro: гибкие макеты (flexible content) дают редактору выбор из ограниченного набора блоков и не ломают сетку. Для статей иногда достаточно Gutenberg с кастомными блоками под дизайн-систему. Смешивать три подхода (конструктор страницы, ACF и чистый редактор) без правил — путь к несогласованному виду и тяжёлой странице.
- Зафиксировать список редактируемых блоков и запретить «произвольную» вёрстку в WYSIWYG
- Вынести глобальные опции (телефон, соцсети) в options page ACF
- Для изображений задать recommended size и crop в полях
- Предусмотреть fallback, если поле пустое — секция не рвёт сетку
Сохранение скорости после натяжки
При интеграции не подключайте заново весь jQuery ради одного слайдера, если в макете уже есть лёгкий vanilla-скрипт. Стили темы WordPress не должны дублировать сотни килобайт bootstrap, если вёрстка на кастомном CSS. Подключайте asset только на тех шаблонах, где он нужен, через wp_enqueue_scripts с условием is_page_template. Проверьте LCP после натяжки: часто страдает hero с background-image вместо img с приоритетом.
Циклы, меню и хлебные крошки
- wp_nav_menu для шапки и подвала с отдельными локациями
- the_post_thumbnail с srcset для карточек и статей
- Кастомный excerpt или поле для анонса в листингах
- Хлебные крошки через SEO-плагин или лёгкий сниппет без микроразметки-дублей
Многоязычность и будущие доработки
Если планируется WPML или Polylang, закладывайте дублируемые поля и отдельные меню на язык с самого начала. Перенос «сначала один язык, потом натянем второй» удваивает работу по шаблонам. Документируйте, какой template part за что отвечает — следующий разработчик не должен гадать, почему блок CTA живёт в двух файлах.
Приёмка натяжки
- Создать тестовую страницу только из полей админки, без правок HTML
- Проверить публикацию и снятие с публикации — нет ли битых блоков
- Прогнать валидатор и проверить иерархию заголовков
- Сравнить скорость с исходной статикой; отклонение более 15–20% — повод искать лишние скрипты
Типичные ошибки на стыке вёрстки и CMS
Редактор вставляет в WYSIWYG инлайновые стили и ломает сетку, разработчик хардкодит тексты в шаблоне вместо полей, дизайнер меняет отступы в макете после сдачи вёрстки — все три сценария удорожают поддержку. Договоритесь заранее: какие элементы редактируются только через поля, какие — через простой форматированный текст без произвольных цветов и шрифтов. Для повторяющихся списков преимуществ используйте repeater, а не копипаст блоков в контенте страницы.
- Дублирование H1 в hero и в скрытом SEO-блоке
- Подключение стилей вёрстки и стилей темы в разном порядке — «плывут» кнопки
- Игнорирование состояний :focus для меню и модальных окон после натяжки
- Отсутствие preview в админке для длинных статей с оглавлением
FAQ
Чем натяжка отличается от «сайта на Elementor»?
Натяжка даёт фиксированные шаблоны и поля, редактор не двигает сетку произвольно. Конструктор гибче визуально, но тяжелее и хуже масштабируется под строгий дизайн и SEO-контент.
Нужен ли дизайн в Figma для натяжки?
Желательно: макет, стили, состояния кнопок и мобильные экраны. Без макета натяжка возможна только от готового HTML с согласованным ТЗ.
Сколько длится натяжка типового корпоративного сайта?
От нескольких дней для набора из главной и 3–4 внутренних шаблонов до двух недель при сложной главной, блоге и кастомных типах записей — после готовой вёрстки.
Можно ли натянуть вёрстку на готовую тему?
Иногда, через child theme, но если родитель тянет лишний CSS/JS, чище собрать лёгкую тему под макет. Решение зависит от бюджета и планов на поддержку.
SEO-продвижение · Создание сайтов · Ещё в разделе «WordPress»