Разработка темы WordPress с нуля: этапы и подводные камни

Разработка темы WordPress с нуля - это когда я не подключаю очередной шаблон с ThemeForest и не собираю страницы в конструкторе, а верстаю тему под конкретный макет, без чужого кода и лишних зависимостей. За несколько лет через мои руки прошло достаточно сайтов на покупных темах, где правка одного блока в шапке съедала три часа - просто потому что нужно было разобраться в сорока файлах шаблонизатора, написанного не под этот проект. Кастомная тема снимает эту проблему на старте, но требует понимания, из чего вообще состоит WordPress-тема изнутри, и сколько реально занимает такая разработка.

Зачем делать тему WordPress с нуля, если есть готовые шаблоны

Готовые темы вроде Avada, Divi или Astra закрывают большую часть типовых задач за счёт конструктора страниц, но тянут за собой код под все возможные сценарии использования сразу - карусели, попапы, анимации, которые в конкретном проекте не нужны ни разу. На практике это выливается в 15-20 подключённых скриптов и стилей, из которых реально работают три-четыре. Первое, что я проверяю на таких сайтах через PageSpeed Insights - мобильная версия почти всегда в районе 40-55 баллов, и виновата в этом не хостинг, а сама тема.

Когда верстаю тему с нуля под макет из Figma, в проекте остаются только те стили и скрипты, которые реально используются на странице. На похожих по контенту сайтах это обычно 85-95 баллов на мобильном без дополнительной оптимизации. Плюс не приходится держать в голове чужую систему хуков и фильтров - я знаю, что где лежит, потому что сам это написал.

Второй момент - конфликты с плагинами оплаты и доставки. На магазинах с эквайрингом Т‑Банка и калькулятором СДЭК готовые темы регулярно ловят конфликты версий jQuery или перехватывают события формы заказа через свой JS-фреймворк. Разбираться, что именно из тридцати файлов темы мешает загрузке виджета доставки, дольше, чем написать чистый шаблон checkout под конкретный плагин.

Из чего состоит тема WordPress: минимальный набор файлов

WordPress не требует от темы ничего сверх двух файлов - style.css с метаданными в шапке и index.php как шаблона по умолчанию. Дальше движок подключает файлы по иерархии шаблонов: если для страницы товара есть single-product.php, возьмёт его, если нет - откатится на single.php, а если и его нет - на index.php.

Стартовый набор, с которого я начинаю почти каждый проект:

• style.css - метаданные темы и глобальные стили
• functions.php - регистрация меню, виджетов, подключение скриптов
• header.php и footer.php - общие для всех страниц блоки
• index.php - шаблон по умолчанию
• page.php, single.php, archive.php - под конкретные типы контента
• template-parts/ - папка с переиспользуемыми кусками разметки: карточка товара, хлебные крошки
• screenshot.png - превью темы в админке, 1200×900

/*
Theme Name: Custom Project Theme
Theme URI: 
Author: Nikita Kalinkin
Version: 1.0.0
Text Domain: custom-project
*/

Text Domain обязателен, если тему планируется переводить через .po/.mo файлы - про него забывают в половине самописных тем, которые я потом дорабатываю.

Этапы разработки темы WordPress с нуля

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

Вёрстка макета в HTML и CSS

Сначала собираю статичную вёрстку без единой строчки PHP - чистый HTML с CSS (или Tailwind, смотря по проекту) и JS для интерактива. На этом этапе легко поймать визуальные баги: отступы, адаптив, поведение форм. Переносить в PHP-шаблоны лучше уже провалидированную вёрстку - вправлять баги вёрстки одновременно с логикой шаблонов долго и путано.

Разбивка на шаблоны и Template Hierarchy

Готовую вёрстку режу на header.php, footer.php, page.php и так далее по иерархии шаблонов WordPress. Повторяющиеся блоки - карточка товара, пагинация, хлебные крошки - выношу в template-parts и подключаю через get_template_part(), чтобы не дублировать разметку в пяти файлах и не чинить один и тот же баг пять раз.

Функционал в functions.php

Здесь регистрирую меню (register_nav_menus), зоны виджетов (register_sidebar), поддержку миниатюр (add_theme_support), кастомные типы записей под портфолио или отзывы, и подключаю стили со скриптами через wp_enqueue_scripts - без него плагины кэширования и оптимизаторы вроде WP Rocket не видят зависимости и либо ломают порядок загрузки, либо дублируют jQuery.

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

Тестирование и оптимизация

Проверяю тему минимум в трёх сценариях: на реальном контенте клиента (не на lorem ipsum - длинные заголовки и крупные изображения ломают вёрстку иначе), на мобильных экранах от 320px, и с отключёнными популярными плагинами по одному, чтобы поймать конфликты хуков. Отдельно гоняю PageSpeed и смотрю на подключённые, но неиспользуемые стили - обычно после первой сборки находится 3-5 файлов, которые тема грузит на каждую страницу без надобности.

Подводные камни при разработке темы WordPress с нуля

• Жёстко зашитые тексты и картинки в PHP-шаблоне вместо ACF или Customizer - клиент не может поменять заголовок на главной без разработчика. Решаю это на этапе проектирования: любой текст, который клиент захочет менять сам, выношу в поля ACF или в Customizer
• Забытый wp_footer() или wp_head() в шаблоне - самая частая причина, почему плагины перестают работать после смены темы. На одном магазине с доставкой СДЭК из-за отсутствия wp_footer() в footer.php скрипт трекинга посылки на странице заказа просто не подключался, хотя в коде плагина всё было прописано верно
• Полное переопределение шаблона страницы товара без сохранения WooCommerce-хуков вроде woocommerce_before_add_to_cart_button - любой плагин, который цепляется к этим хукам (модуль рассрочки, виджет наличия на складе), перестаёт показываться
• Работа сразу в родительской теме без дочерней - любое обновление ядра темы стирает правки. Если тема разовая, под конкретный проект без будущих апдейтов, дочерняя тема не обязательна, но версионирование через git завожу с первого коммита в любом случае
• Разработка на PHP 8.2 без проверки версии на хостинге клиента - на некоторых тарифах до сих пор стоит PHP 7.4, и сайт падает в белый экран сразу после деплоя из-за match-выражений или readonly-свойств, которых там просто нет

Тема и WooCommerce: на что смотреть отдельно

Если тема делается под интернет-магазин, добавляется отдельный слой шаблонов в папке woocommerce/ - WordPress ищет их там раньше, чем в стандартной иерархии. Переопределять стоит только то, что реально нужно кастомизировать: полное копирование всех файлов WooCommerce в тему - гарантированный способ пропустить обновление безопасности в оригинальных шаблонах и не заметить это до момента, пока что-то не сломается на checkout.

Отдельно тестирую AJAX-обновление корзины (cart fragments) - многие самописные темы забывают подключить wc-cart-fragments, и счётчик товаров в шапке не обновляется без перезагрузки страницы. И проверяю форму оплаты с тестовым платежом через эквайринг - на одном проекте кастомная вёрстка страницы checkout скрывала iframe виджета Т‑Банка через overflow:hidden в родительском блоке, и это вылезло только на тесте с реальной картой.

Сколько стоит и сколько времени занимает разработка темы с нуля

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

У меня разработка сайта на WordPress с кастомной темой начинается от 60 000 ₽ - сюда входит вёрстка, разбивка на шаблоны и базовый функционал. Интернет-магазин под ключ с WooCommerce и интеграцией оплаты и доставки - от 80 000 ₽. Если тема уже готова и нужна только доработка (новый шаблон архива, кастомные поля, интеграция с CRM), считаю такие задачи отдельно - обычно это часть более крупного пакета, а не отдельная строчка в смете.

На рынке цены на кастомную тему у других студий обычно стартуют от 80 000 и доходят до 250 000 ₽ в зависимости от сложности макета и объёма интеграций - это ориентир по рынку, не мой прайс. Отдельно закладывайте бюджет на техподдержку - от 15 000 ₽/мес, если сайт живёт дольше пары месяцев после релиза: WordPress обновляется каждые полтора-два месяца, и часть плагинов после апдейта ядра требует проверки на совместимость.

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

Сколько времени занимает разработка темы WordPress с нуля?

На сайт-визитку с 4-5 шаблонами страниц закладываю 3-4 недели от готового макета до релиза. С WooCommerce и интеграцией оплаты и доставки срок растягивается до 5-8 недель - большая часть времени уходит не на вёрстку, а на тестирование сценариев оформления заказа.

Чем кастомная тема отличается от сайта на конструкторе вроде Elementor?

Конструктор хранит разметку страниц в базе данных в виде сериализованных данных плагина, и без самого Elementor контент превращается в кашу из шорткодов. Кастомная тема хранит контент в стандартных полях WordPress и ACF, которые читаются любой темой - при смене дизайна структура данных остаётся рабочей.

Нужно ли делать дочернюю тему, если разработка ведётся с нуля?

Если тема разовая и обновлений самого ядра темы не планируется, дочерняя тема не обязательна - версионирование веду через git. Дочерняя тема нужна, когда за основу берётся чужой фреймворк (например, коммерческий шаблон), который сам получает обновления от разработчика.

Можно ли просто доработать готовую тему вместо разработки с нуля?

Можно, и для небольших правок это дешевле и быстрее. Но если готовая тема тянет за собой конструктор страниц и десятки неиспользуемых скриптов, каждая новая доработка добавляет ещё один слой костылей поверх чужого кода - на третьей-четвёртой правке время на доработку начинает превышать время, которое ушло бы на тему с нуля.