Как создать кастомную тему WordPress

Если честно, долгое время когда я начинал разрабатывать сайты я — как и многие — полагался на популярные темы, скачивал очередной набор “универсальных” решений и старался подогнать всё под нужды проекта. Но с каждой итерацией становилось всё ощущимее: готовые темы — будто чемодан без ручки. Снаружи красиво, опций полно, а внутри каша из несвязанных модулей, ускорителей и тысяч строчек CSS, которые никто не читает (да вы и сами туда не полезете, правда?).

Критическая точка наступила, когда заказчику понадобился сайт, который должен открываться быстрее щелчка пальцев (ну ладно — почти… но точно быстрее любых типовых решений), а лишний функционал был бы не просто вреден — он ломал бы смысл проекта. Тут до меня и дошло: если я хочу управлять скоростью, структурой и поддержкой сайта “на вырост”, одного выбора левой темы мало. Придётся писать своё (страшно только первые пять минут!).

Почему я отказался от готовых тем

Готовые темы экономят время на старте — вопросов нет. Но платить приходится потом и по чуть-чуть: то с доступом к нужному шаблону замучаешься воевать; то рекомендации по SEO идут коту под хвост из-за скрытых дублирующихся заголовков. Был у меня проект, где на административную часть сайта уходило 15 секунд только потому, что “универсальный” шаблон тащил невидимые библиотеки JavaScript… а ведь никто не обещал такой нагрузки.

Вот так постепенно пришёл к мысли: единственный способ получить идеальный для задачи инструмент — сделать его самому.

Шаг 1: Подготовка окружения

Первое, что я сделал — настроил локальный сервер. Использовал Local by Flywheel — простой инструмент для разработки WordPress-проектов без риска что-то сломать на живом сайте. Альтернативы: XAMPP, MAMP или Docker, если вы дружите с командной строкой.

Обязательно установите:

Редактор кода (я использую VS Code с расширениями для PHP)
Git для контроля версий — это спасло меня десятки раз, когда эксперименты шли не так
Debug Bar или Query Monitor — плагины для отладки

Шаг 2: Структура темы — фундамент всего

Создаем папку в wp-content/themes/ и начинаем с минимального набора файлов:

my-theme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
└── screenshot.png

В style.css в самом верху обязательно прописываем метаданные темы — без этого WordPress её просто не увидит:

/*
Theme Name: My Theme
Author: Ваше имя
Version: 1.0
*/

Это была моя первая ошибка на старте — забыл эти комментарии и потратил полчаса, пытаясь понять, почему тема не появляется в админке.

Шаг 3: functions.php — мозг темы

Здесь подключаем стили и скрипты правильным способом — через хуки, а не напрямую в header.php:

function my_theme_scripts() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Также включаем поддержку миниатюр записей, меню и виджетов:

function my_theme_setup() {
    add_theme_support('post-thumbnails');
    register_nav_menu('main-menu', 'Основное меню');
}
add_action('after_setup_theme', 'my_theme_setup');

Совет из личного опыта: не пытайтесь запихнуть всю логику в один файл. Я разбивайте functions.php на отдельные файлы (inc/menus.php, inc/widgets.php) и подключаем их через require_once — код становится более читаемым.

Шаг 4: Шаблоны — иерархия WordPress

Это то, что многие новички понимают неправильно. WordPress выбирает шаблон по строгой иерархии. Для одиночной записи это будет single.php, для страницы — page.php, если их нет — сработает index.php как запасной вариант.

Создаем шаблоны для разных типов контента:

single.php — для статей блога
page.php — для статичных страниц
archive.php — для архивов категорий
404.php — для страницы ошибки

Здесь критически важен цикл вывода контента:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

Шаг 5: Кастомайзер и гибкость настроек

Клиенты любят возможность менять цвета и настройки без вмешательства в код. Я добавил секции в Customizer через customize_register хук — это позволило заказчику самостоятельно менять акцентный цвет, логотип и другие параметры через стандартный интерфейс WordPress.

Шаг 6: Адаптивность и производительность

Используйте подход mobile-first в CSS — пишите стили сначала для мобильных экранов, затем добавлял медиа-запросы для больших разрешений. Это заставляет думать о производительности с самого начала.

Для оптимизации:

Минифицировал CSS и JS через Gulp
Использовал ленивую загрузку изображений (lazy loading)
Отказался от лишних библиотек — тот же jQuery подключаю только когда действительно необходимо, пишу на чистом JS (часто весь js код весит до 20 Кб, при том что вес одной только библиотеки jQuery — от 60 Кб)

Шаг 7: Безопасность — не игнорируйте

Экранируйте весь вывод данных функциями esc_html(), esc_url(), esc_attr() — это защищает от XSS-атак. Также добавляю nonce-проверки для форм. Многие разработчики пропускают этот этап, а потом удивляются взломанным сайтам.

Шаг 8: Тестирование перед запуском

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

Главный вывод

Разработка кастомной темы — это не про красивый дизайн, а про понимание архитектуры WordPress: хуки, шаблонная иерархия, безопасность. Первая тема у меня заняла больше недели, сейчас на подобный проект уходит два-три дня, потому что появился готовый набор паттернов и решений.

Если вы только начинаете — не бойтесь ломать локальную версию сайта. Именно через ошибки и эксперименты приходит настоящее понимание того, как устроен WordPress изнутри.

Услуги

Дополнительные услуги