Если вы уже оплатили дизайн в Figma и получили HTML/CSS-верстку от другого подрядчика, до рабочего сайта на WordPress остается еще один шаг: перенести эту верстку в тему и превратить статичные экраны в редактируемые страницы с меню, формами и админкой. Ниже разбираю, как я оцениваю и веду такие проекты, если вы решили заказать натяжку верстки на wordpress: из чего складывается цена, сколько это занимает по этапам, что входит в работу, а что нет, и как принимать готовый результат, чтобы не наткнуться на сюрпризы после оплаты.
Что такое натяжка верстки на WordPress и чем она отличается от разработки с нуля
Натяжка верстки это перенос уже готовых HTML и CSS файлов (или макета из Figma, который еще предстоит сверстать) в тему WordPress. Разработчик режет статичные страницы на шаблоны: header.php, footer.php, page-*.php, шаблоны записей и архивов, подключает стили и скрипты через функции темы, а затем «оживляет» контент: меню становится редактируемым через админку, текстовые блоки и картинки превращаются в поля, которые можно менять без доступа к коду.
Это отличается от разработки темы с нуля тем, что дизайн и разметка уже существуют, а моя задача, встроить их в движок так, чтобы результат совпадал с макетом пиксель в пиксель и при этом оставался управляемым через WordPress. Если исходной верстки нет вообще, а есть только макет в Figma, работа усложняется: сначала нужно сверстать HTML/CSS/JS с нуля, а потом уже натягивать. Это тоже частый запрос, и я закладываю его в оценку отдельно, если верстки на входе нет.
Здесь же встает вопрос, на какой основе делать шаблон: чистый PHP-каркас без билдера или связка с конструктором вроде Elementor или Bricks. Оба варианта рабочие, я выбираю подход исходя из того, кто будет редактировать контент после сдачи: если это не разработчик, билдер часто упрощает жизнь клиенту, но добавляет вес страницам и свой слой стилей, с которым тоже нужно аккуратно работать при натяжке.
Из чего складывается цена натяжки верстки на wordpress
Цена зависит не от того, что «это WordPress», а от объема и сложности конкретной верстки. На практике на итоговую стоимость влияют:
- Количество уникальных экранов и шаблонов страниц: чем больше разных макетов, тем больше PHP-шаблонов нужно собрать
- Качество исходной верстки: семантичный HTML с понятной структурой классов натягивается быстрее, чем верстка без структуры, где стили держатся на инлайн-правилах и случайных id
- Интерактивные элементы: слайдеры, табы, аккордеоны, модальные окна, калькуляторы, каждый такой узел нужно не просто перенести, а подключить к логике и протестировать отдельно
- Формы и их поведение: простая форма обратной связи с отправкой на почту это одно, форма с валидацией по шагам и отправкой в CRM, совсем другое
- Тип реализации: чистый PHP-шаблон, натяжка под Elementor или Bricks, или гибрид, где часть страниц статична, а часть собирается блоками
- Адаптивность: количество брейкпоинтов и то, насколько по-разному верстка ведет себя на мобильных, планшетах и десктопе
- Нужен ли WooCommerce: карточка товара, корзина и оформление заказа требуют собственных шаблонов и своей адаптации под верстку магазина
У меня натяжка верстки на WordPress идет в рамках услуги «Сайт на WordPress», от 60 000 ₽. Это стартовая цена для проекта среднего объема с чистой исходной версткой; если верстки нет и ее нужно делать с нуля, или в проекте много кастомной логики, я считаю смету по конкретному макету и озвучиваю сумму до старта работ, а не постфактум.
Ниже смета из 6 этапов, по которым я обычно раскладываю проект, чтобы клиенту было видно, за что он платит.
| Этап | Что делаю | Как влияет на стоимость |
|---|---|---|
| Аудит исходной верстки | Проверяю семантику HTML, структуру классов, качество медиазапросов, наличие мусорного кода | Чем чище исходник, тем меньше времени уходит на переработку перед переносом в тему |
| Нарезка на шаблоны WordPress | Разбиваю макет на header.php, footer.php, шаблоны страниц и записей, подключаю их через функции темы | Количество уникальных экранов и вложенность разделов прямо увеличивают объем работы |
| Динамизация контента | Подключаю меню, виджеты, произвольные поля для текста и картинок, чтобы контент редактировался в админке | Каждая секция, которую нужно сделать редактируемой, требует отдельной привязки к полям |
| Формы и интерактив | Настраиваю отправку форм, слайдеры, табы, попапы, скрипты валидации | Сложная логика вроде многошаговых форм или калькуляторов увеличивает и срок, и цену |
| Адаптив и кроссбраузерность | Проверяю верстку на нескольких брейкпоинтах и в разных браузерах, включая мобильные | Дополнительные промежуточные брейкпоинты сверх стандартных считаю отдельно от базовой сметы |
| Тестирование и приемка | Прогоняю чек-лист, собираю правки от заказчика, довожу до финальной версии | Количество согласованных раундов правок закладывается в смету заранее, чтобы не было споров на финише |
Отдельно оплачиваются доработки, которых не было в макете на старте: например, если после натяжки заказчик решает добавить фильтр каталога, которого не было в дизайне, это уже новая задача, а не часть исходной сметы.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Сроки: что происходит на каждом этапе
Срок натяжки верстки почти всегда считается не «в целом», а по этапам, потому что каждый из них может застопориться по разным причинам: то заказчик долго согласовывает правки, то в исходной верстке всплывают нестыковки, которые не видны на глаз.
По моей практике на проект среднего объема (сайт-визитка или каталог на 8-12 уникальных экранов) уходит примерно так:
- Аудит и подготовка окружения: 1-2 дня. Смотрю верстку, поднимаю локальную копию WordPress, готовлю структуру темы
- Нарезка шаблонов и подключение стилей: 3-5 дней. Это самая объемная часть по времени, особенно если на входе много уникальных секций
- Динамизация и подключение форм: 2-4 дня. Зависит от количества полей, которые нужно вывести в админку, и сложности форм
- Адаптив и кроссбраузерное тестирование: 1-2 дня. Проверяю на реальных устройствах, а не только в инструментах разработчика в браузере
- Правки по итогам приемки: 1-3 дня, в зависимости от того, сколько замечаний прислал заказчик
На срок сильнее всего влияет не сложность кода, а скорость обратной связи от заказчика: если правки по макету или контенту согласуются быстро, проект на 8-12 экранов обычно укладывается в 2-3 недели. Если решения по контенту принимаются медленно или макет меняется в процессе, срок растягивается пропорционально, и это стоит закладывать заранее, а не удивляться в середине работы.
Что входит в натяжку верстки на wordpress и что оплачивается отдельно
Чтобы не было недопонимания на приемке, я заранее фиксирую в договоре, что именно входит в натяжку верстки, а что идет отдельной задачей.
Входит в базовую натяжку
- Перенос HTML/CSS/JS в шаблоны темы WordPress с сохранением визуального соответствия макету
- Подключение меню, футера, стандартных виджетов через инструменты WordPress
- Базовая динамизация текстовых блоков и изображений через произвольные поля
- Настройка отправки простых форм (обратная связь, заявка) на почту
- Установка и настройка плагинов, необходимых для работы конкретных блоков верстки (например, слайдера или формы)
- Базовая техническая разметка: заголовки h1-h3, alt для изображений, корректные title у страниц
Оплачивается отдельно
- Написание текстов и подбор фотографий, если их не было в исходном макете
- Наполнение сайта реальным контентом сверх демонстрационных страниц, которые были в верстке
- Интеграции с CRM, платежными системами вроде Т‑Банка, СДЭК или другими сервисами доставки, которых не было в исходном ТЗ
- Разработка кастомной логики: личный кабинет, фильтры каталога, калькуляторы, если их не было в макете на старте
- SEO-продвижение и работа с позициями после запуска
- Хостинг, домен и SSL-сертификат, это расходы заказчика напрямую перед хостинг-провайдером или регистратором
- Техническая поддержка после сдачи проекта
По поддержке отдельно: после того как сайт принят и деньги за натяжку закрыты, любые правки, обновления плагинов и мониторинг я веду уже в рамках отдельной технической поддержки сайта на WordPress, а не бесплатно постфактум. Это стоит проговорить на берегу, чтобы не возникало ожидания, что «мелкие правки» будут делаться бесконечно бесплатно.
Где обычно ломается верстка при переносе на WordPress
Несколько мест, где натяжка чаще всего дает сбой, если ее делают наспех:
- Конфликт стилей темы с плагинами: плагин слайдера или формы подключает свои CSS-файлы, которые перебивают стили из исходной верстки, и внешний вид «плывет»
- Брейкпоинты у интерактивных блоков: слайдер или меню-бургер, который отлично работал в статичном HTML, начинает вести себя иначе после того, как WordPress подключает свою версию jQuery, отличную от той, что использовалась в исходнике
- Шрифты: если в исходной верстке шрифты подключены локальными файлами, а не через корректные пути в теме, после переноса они просто не грузятся, и сайт съезжает на системный шрифт
- Формы без обработчика: верстка формы часто идет без backend-логики, и если не подключить отправку на этапе натяжки, кнопка «отправить» будет работать чисто визуально
- Retina-изображения: в исходной верстке картинки под ретину подключены через отдельные атрибуты, и при натяжке в тему их легко потерять, если просто вставлять изображения через медиабиблиотеку без адаптации
Для проверки адаптивных блоков на этапе тестирования я обычно смотрю не только итоговый вид, но и сами медиазапросы в CSS, чтобы убедиться, что брейкпоинты совпадают с макетом, а не подобраны на глаз:
@media (max-width: 768px) {
.header__nav {
display: none;
}
.header__burger {
display: block;
}
}Если в исходной верстке таких точек несколько и они не совпадают с тем, что реально задано в макете Figma, лучше свериться с дизайнером до начала переноса, а не переделывать после сдачи.
Как принимать работу: чек-лист приемки
Принимать натянутую верстку удобнее не «на глаз», а по конкретным пунктам. Вот чек-лист, которым пользуюсь сам и который отдаю заказчику перед финальной оплатой:
- Сверка с макетом на трех брейкпоинтах: мобильный, планшет, десктоп. Смотрю отступы, размеры шрифтов, выравнивание блоков
- Проверка всех интерактивных состояний: hover на кнопках и ссылках, активные и неактивные состояния полей форм, открытые и закрытые состояния аккордеонов и попапов
- Реальная отправка форм: не просто клик по кнопке, а проверка, что письмо действительно приходит на почту или заявка попадает туда, куда должна
- Кроссбраузерная проверка минимум в двух-трех браузерах и на реальном мобильном устройстве, а не только в режиме адаптива в инструментах разработчика
- Проверка редактируемости через админку: может ли заказчик сам поменять текст в блоке, заменить картинку, добавить пункт меню, без обращения к разработчику
- Проверка технических моментов: работает ли SSL, не выдает ли сайт ошибки 404 на реальных ссылках, подключен ли файл robots.txt
- Проверка скорости загрузки хотя бы по одному инструменту диагностики: если после натяжки страница резко потяжелела из-за неоптимизированных изображений или лишних скриптов, это стоит поправить до приемки, а не после
Если по каким-то пунктам есть расхождения с макетом, имеет смысл фиксировать их списком в одном сообщении, а не присылать правки по одной в течение недели, это ускоряет финальную сдачу для обеих сторон.
WordPress регулярно обновляется, поэтому перед внедрением я сверяюсь с актуальной документацией.
Частые вопросы
Можно ли заказать натяжку, если готовой HTML-верстки еще нет, только макет в Figma
Да, но это будет два этапа: сначала верстка макета в HTML/CSS/JS, потом натяжка на WordPress. Стоимость в этом случае считается по объему макета в Figma, а не по цене «чистой» натяжки, потому что добавляется работа по верстке с нуля.
Подойдет ли натяжка верстки, если сайт будет на WooCommerce
Да, но карточка товара, страницы корзины и оформления заказа требуют отдельных шаблонов, которые должны быть предусмотрены в исходном макете. Если в дизайне не было экранов магазина, их придется либо доверстывать по аналогии с остальным сайтом, либо согласовывать отдельно с дизайнером.
Кто чинит верстку, если она была криво сделана изначально другим подрядчиком
Если верстка приходит с ошибками (нет адаптива, битая структура классов, конфликтующие стили), я сначала показываю конкретные проблемы заказчику, а уже потом называю смету на исправление. Не всегда дешевле переделать с нуля, чем чинить, но иногда так и есть, это видно только после аудита исходников.
Сколько времени займет натяжка, если сайт небольшой, всего 3-4 страницы
Для небольшого сайта на 3-4 уникальных шаблона обычно достаточно 1-2 недель с учетом адаптива и тестирования форм, при условии, что исходная верстка чистая и заказчик оперативно отвечает на вопросы по контенту. Точный срок я называю после того, как посмотрю макет или готовую верстку.