Когда клиент присылает готовый макет из Figma и просит натянуть его на сайт, первый вопрос всегда один: сколько это будет стоить и почему у одного разработчика верстка на WordPress выходит в 25 000 рублей, а у другого в 150 000. Разница обычно не в жадности исполнителя, а в объеме реальной работы, который по картинкам на глаз не считается. Я перевожу макеты в темы WordPress несколько лет подряд и ниже показываю, из каких конкретных пунктов складывается смета.
Что входит в верстку макета для темы WordPress
Верстка на WordPress отличается от обычной статичной верстки тем, что готовый HTML и CSS еще нужно развести по шаблонам движка и подружить с его логикой вывода контента. На практике в задачу входит несколько обязательных этапов.
- Разбивка макета из Figma на компоненты: шапка, подвал, герой-блок, карточки товаров или услуг, формы, попапы.
- Верстка HTML и CSS под требования конкретной темы или дочерней темы.
- Перенос разметки в PHP-шаблоны: page-templates, template-parts, header.php, footer.php, работа с циклом WP_Query.
- Подключение динамики через ACF Flexible Content, блоки Gutenberg или виджеты Elementor.
- Адаптивная верстка минимум под три-четыре брейкпоинта: десктоп, планшет, телефон, иногда широкие мониторы отдельно.
- Оптимизация изображений и критического CSS ради приемлемых показателей Core Web Vitals.
- Кроссбраузерное тестирование хотя бы в Chrome, Safari и Firefox на реальных устройствах.
Отдельно оцениваю, на какой базе строится тема: заготовка на Elementor или Bricks с готовым набором виджетов, дефолтная тема с блоками Gutenberg или собственный шаблон, написанный с нуля под конкретный дизайн. Каждый вариант тянет за собой свою механику верстки, и цена конструктора внутри стека тоже иногда добавляет строку в смету, если под проект нужна платная версия плагина.
Сколько стоит верстка на WordPress: из чего складывается смета
Цену считаю не по абстрактному правилу вроде рубль за пиксель, а по количеству факторов, которые реально увеличивают время работы.
| Фактор объема работы | Как он влияет на смету |
| Число уникальных экранов и блоков | Каждый новый по структуре блок это отдельная верстка, а не копипаста уже готового |
| Сложность адаптива | Сложная сетка с наложениями и произвольным позиционированием может потребовать отдельной раскладки под каждый брейкпоинт |
| Анимации и интерактив | Параллакс, слайдеры, табы, аккордеоны и фильтры на JS увеличивают время верстки и тестирования |
| Интеграция с плагинами | Привязка к WooCommerce, ACF Pro или Elementor требует учитывать их разметку и хуки |
| Оптимизация под скорость загрузки | Ленивая загрузка изображений и критический CSS добавляют работы, но влияют на конверсию и позиции в поиске |
Домен и SSL-сертификат к объему верстки отношения не имеют: цена домена зависит от зоны, ru дешевле com, а SSL от типа сертификата, а не от сложности макета, поэтому в смету на верстку эти статьи расходов не включаю и считаю отдельно.
Сама верстка почти никогда не продается в отрыве от разработки сайта: обычно это часть базовой услуги. Моя разработка сайта на WordPress под ключ стартует от 60 000 рублей, а интернет-магазин на WooCommerce со всеми карточками товаров и корзиной от 80 000 рублей. На рынке чистую верстку макета без интеграции с CMS у фрилансеров и в студиях можно найти дешевле, от 15 000 до 40 000 рублей за простой лендинг, но это не моя цена, а ориентир по рынку: я беру проект целиком, с шаблонами, циклами вывода записей и админкой, поэтому оценка стартует именно от указанных сумм.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
После запуска почти всегда прилетают мелкие правки: подвинуть отступ, поправить блок под новый баннер, разобраться с конфликтом верстки после обновления плагина или темы. Разовые правки считаю отдельно от проекта, а для сайтов, где такие задачи возникают регулярно, у меня есть техподдержка от 15 000 рублей в месяц: в нее входит и мониторинг, что после автообновлений WordPress ничего не расползлось по адаптиву.
Адаптивная верстка блоков: где чаще всего растет объем
Заказчики почти всегда недооценивают адаптив, потому что в макете Figma часто нарисован только десктоп и иногда мобильная версия, а про планшет и промежуточные ширины экрана никто не думал. На практике приходится самому принимать решения: как сжимается трехколоночная сетка на 900 пикселях, что происходит с длинным заголовком на маленьком экране, куда девается боковое меню.
Отдельная головная боль это резиновая типографика и картинки с разным соотношением сторон под ретину. Если в макете шапка с параллаксом и большими фоновыми изображениями, на телефоне это же решение может тормозить страницу и требует альтернативной верстки, а не просто уменьшения масштаба.
Липкая шапка, всплывающие формы захвата и мобильное меню-гамбургер тоже часто не прорисованы в макете детально, дизайнер оставляет это на усмотрение верстальщика. Такие места я обычно проговариваю с клиентом заранее, потому что дорисовка поведения элементов по ходу верстки съедает время, которое не закладывалось в изначальную оценку.
На своих проектах обычно проверяю верстку минимум на пяти реальных профилях экрана: узкий телефон около 360 пикселей, телефон побольше около 414, планшет в портретной и альбомной ориентации и стандартный десктоп. Этого хватает, чтобы отловить большинство поломок сетки еще до передачи сайта клиенту, а не после первых жалоб от посетителей с айфонов.
Верстка под WooCommerce и сторонние интеграции
Интернет-магазин на WooCommerce почти никогда не ограничивается версткой каталога и карточки товара. Отдельного внимания требует страница оформления заказа: там нужно красиво встроить виджет оплаты вроде эквайринга Т‑Банка, разметить блок выбора способа доставки, если рядом стоит калькулятор СДЭК, и сохранить всё это адаптивным на мобильном, где чаще всего и оформляют заказ.
Похожая история с личным кабинетом покупателя, мини-корзиной с ajax-обновлением и фильтрами каталога по цене, размеру и наличию: каждый такой блок это дополнительная верстка сверх базового набора шаблонов темы. Если в проекте уже запланирован магазин с оплатой и доставкой, эти узлы разумнее сразу закладывать в объем работы, а не оформлять как доработки задним числом, так дешевле выходит для итоговой суммы. Если пока не готовы сформулировать весь список требований самостоятельно, можно обсудить разработку сайта на WordPress под ключ и вместе прикинуть, что реально понадобится под ассортимент.
Сроки верстки макета в тему WordPress
Простой лендинг на один экран с готовым дизайном и без кастомных анимаций я обычно свожу за 3-5 рабочих дней. Многостраничный сайт с ACF-полями, кастомными шаблонами под разные типы записей и парой форм занимает 10-15 дней. Интернет-магазин на WooCommerce с кастомным чекаутом, интеграцией эквайринга и калькулятором доставки требует от 3 до 4 недель, потому что помимо верстки там тестируется весь путь оплаты. Веб-сервис или SaaS-продукт с личным кабинетом на связке WordPress с отдельным фронтендом это уже отдельная категория проектов, обычно от 8 недель и от 300 000 рублей, потому что верстка там лишь часть работы наравне с бэкендом и API.
Сроки называю уже после того, как увидел финальный макет и список экранов, а не до, потому что менять оценку на середине проекта из-за нового попапа или неучтенной страницы неприятно для обеих сторон.
Как сократить стоимость верстки без потери качества
Экономия здесь не про демпинг, а про то, чтобы не платить за переделки. Несколько вещей реально снижают итоговый чек.
- Присылайте макет в Figma с включенным auto-layout и понятными названиями слоев и компонентов, а не плоский PNG.
- Ограничьте число уникальных экранов и переиспользуйте одни и те же компоненты вместо новой структуры блока для каждой страницы.
- Утвердите финальные тексты и изображения до старта верстки, чтобы не переверстывать блоки под другой объем контента.
- Не меняйте макет посреди процесса: правка на этапе дизайна стоит копейки, а та же правка после того, как блок уже разведен по шаблонам и адаптирован под три экрана, обходится в разы дороже.
- Используйте проверенные решения вроде ACF Pro или стандартных блоков Gutenberg вместо самописных конструкций там, где это не критично для дизайна.
Частые вопросы
Сколько стоит верстка макета в тему WordPress
Если это часть полноценной разработки сайта под ключ, моя цена стартует от 60 000 рублей, а для интернет-магазина на WooCommerce от 80 000 рублей. Итоговая сумма зависит от числа уникальных блоков, сложности адаптива и того, нужны ли интеграции с эквайрингом или службами доставки.
Чем верстка на WordPress отличается от обычной HTML-верстки
Обычная верстка это статичная страница в браузере. Верстка под WordPress требует развести разметку по шаблонам движка, подключить вывод записей и товаров через WP_Query, обеспечить работу меню и виджетов через стандартные хуки темы, чтобы контент можно было менять из админки, а не переписывать код руками при каждом изменении.
Можно ли сверстать макет только через Elementor без программиста
Простой лендинг с текстом и картинками действительно можно собрать в конструкторе самостоятельно. Как только появляются кастомные типы записей, сложная логика фильтров или интеграция со сторонним сервисом вроде эквайринга или CRM, конструктора уже не хватает и нужна доработка на PHP.
Что делать, если макет изначально верстался не под WordPress
Такое бывает, когда дизайн готовили для другого движка или конструктора. Часть решений вроде общей стилистики и сетки переносится без проблем, а часть, завязанная на особенности другой платформы, приходится перерабатывать под шаблонную структуру WordPress с нуля, поэтому дешевле сразу проектировать макет с прицелом на конкретный движок.