Как создать и настроить простую дочернюю тему WordPress для начинающих

Скопируйте каталог базового оформления, но только частично. Не повторяйте весь шаблон – дублирование мешает масштабируемости. Достаточно структуры: style.css, functions.php, папки с кастомными скриптами и стилями. В заголовке style.css обязательно укажите Template: имя-родителя, иначе WordPress не свяжет компоненты.

Добавление стилей происходит через functions.php. Не подключайте файлы напрямую – используйте хук wp_enqueue_scripts. Пример:


add_action(\'wp_enqueue_scripts\', function() {
wp_enqueue_style(\'child-style\', get_stylesheet_uri(), [\'parent-style\'], wp_get_theme()->get(\'Version\'));
});

Аргумент [\'parent-style\'] привязан к wp_enqueue_style родительской оболочки. Он должен совпадать по идентификатору. Если этого не сделать, могут пропасть стили или слететь верстка.

Важно: порядок подключения стилей критичен. Сначала родитель, затем пользовательская надстройка.

Не редактируйте файлы в wp-content/themes/основа. Любое обновление перезапишет кастомные правки. Правильный путь – изоляция через персональный подпроект. Это точка входа для всех модификаций: хуки, фильтры, шорткоды, индивидуальная логика.

Добавление нового функционала – только через functions.php надстройки. Пример подключения кастомного скрипта:


add_action(\'wp_enqueue_scripts\', function() {
wp_enqueue_script(\'child-js\', get_stylesheet_directory_uri() . \'/js/custom.js\', [], false, true);
});

Следите за приоритетами. Некоторые фильтры родителя могут перекрывать пользовательскую логику. Проверяйте наличие уже существующих хуков с помощью has_filter() и удаляйте ненужные через remove_filter().

Обратите внимание на template hierarchy. Переопределение шаблонов работает только при строгом соблюдении имен. Нельзя просто создать page-about.php и ждать результата. Структура должна совпадать с внутренней логикой ядра. Убедитесь, что файлы находятся именно в надстройке, а не в родителе.

Внимание! Убедитесь, что надстройка активирована через админку. Без этого вся структура игнорируется.

Обновляйте родительский шаблон, не боясь потерь. Правильная изоляция гарантирует стабильность даже при глобальных изменениях. Работайте через API. Не нарушайте внутреннюю архитектуру движка. Иначе – хаос.

Читайте также:  Полная переработка трекера GitHub Issues с новыми возможностями и улучшениями для разработчиков

Структура файлов и папок дочерней темы

Минимальный набор: style.css, functions.php. Этого достаточно, чтобы система распознала каталог как отдельную тему и подгрузила стили и функции.

  • style.css – обязательный файл с метаинформацией в шапке. Пример заголовка:
/*
Theme Name: Имя-наследника
Template: имя-родителя
*/

Без точного указания Template система не свяжет наследника с родительской темой. Даже лишний пробел – фатален.

  • functions.php – не перезаписывает родительский, а дополняет. Здесь регистрируется подгрузка стилей:
add_action( \'wp_enqueue_scripts\', function() {
wp_enqueue_style( \'parent-style\', get_template_directory_uri() . \'/style.css\' );
wp_enqueue_style( \'child-style\', get_stylesheet_uri(), [\'parent-style\'] );
});

Важно: не подключайте style.css через @import. Это медленно и считается устаревшим.

  • screenshot.png – миниатюра в админке. Размер строго 1200×900 пикселей. Никаких SVG. Один файл – одно изображение.

Дополнительные файлы берутся по необходимости. Например:

  • header.php, footer.php – переопределяют родительские шаблоны. Их наличие отключает одноимённые блоки выше по иерархии.
  • style-override.css или custom.js – подключаются через functions.php вручную. Автоматически ничего не произойдёт.

Внимание! Любой шаблон из каталога наследника заменяет родительский при совпадении имени. Даже если внутри ничего не написано.

Нестандартные директории (типа assets, inc, partials) не обрабатываются ядром. Только если вы сами пропишете обработку или маршруты к ним.

Иерархия чёткая. Ошибка в структуре – и весь проект встанет. Никаких файлов вне каталога наследника. Никаких точек в названиях. Только нижние подчёркивания или дефисы.

Никаких WYSIWYG. Только текст, код и строгая логика. Всё остальное – мусор.

Создание файла style.css с обязательными комментариями

Сразу создайте пустой файл style.css в корневом каталоге вашего кастомного оформления. Без этого файл интерфейс не подключится. Без шансов.

Верхняя часть должна содержать строго определённые директивы. WordPress не импровизирует. Ни строчкой. Пример:


/*
Theme Name: my-child
Template: twentytwentyfour
Version: 1.0
*/

Theme Name – произвольное имя. Показывается в админке. Template – обязательный параметр. Точное название каталога родительского шаблона. Ошибка в одной букве – и тема не загрузится. Пиши точно. Без сокращений. Без фантазий.

Читайте также:  Злоумышленники использовали свыше 162 000 сайтов на WordPress для проведения масштабной DDoS-атаки на интернет-ресурсы

Важно помнить: файл style.css в этом контексте – это не просто таблица стилей. Это паспорт. Без него WordPress не идентифицирует структуру. Проверяется всё, включая отступы и регистр. Строгость. Безжалостность. Бездушие движка.

Внимание! Параметр Template должен соответствовать имени каталога родительского оформления, а не его заголовку!

Добавлять комментарии внутри основного блока – нельзя. Только после него. Только за пределами служебной области. Иначе нарушите формат, WordPress проигнорирует всю секцию.

Допустимая минимальная конфигурация:


/*
Theme Name: my-child
Template: twentytwentyfour
*/

Никаких пробелов между звёздочкой и параметром. Никаких табов. Чистота – залог распознавания. Даже комментарий – код.

Важно! Никогда не копируйте хедер из чужого проекта без проверки. Часто встречаются неверные значения Template. Внешне – всё нормально, по факту – белый экран.

Нужен дополнительный стиль? Дописывай ниже. Основной блок трогать нельзя. Пример:


body {
background: #f7f7f7;
}

Вот и всё. Без этого файла – дальше не продвинешься. Это не рекомендация. Это требование платформы.

Подключение стилей родительской темы через functions.php

В functions.php дочерней оболочки напиши:


add_action( \'wp_enqueue_scripts\', \'enqueue_parent_styles\' );
function enqueue_parent_styles() {
    wp_enqueue_style( \'parent-style\', get_template_directory_uri() . \'/style.css\' );
}

И всё? Нет. Если у базового шаблона есть дополнительные стили (например, style-rtl.css, custom.css или он использует @import внутри style.css), они не загрузятся автоматически. Проверь исходники вручную.

Важно помнить: get_template_directory_uri() указывает на оригинальный шаблон, get_stylesheet_directory_uri() – на переопределяющий. Не перепутай.

Если используется style.css дочернего оформления – добавь зависимость:


add_action( \'wp_enqueue_scripts\', \'enqueue_parent_and_child_styles\' );
function enqueue_parent_and_child_styles() {
    wp_enqueue_style( \'parent-style\', get_template_directory_uri() . \'/style.css\' );
    wp_enqueue_style( \'child-style\', get_stylesheet_uri(), array( \'parent-style\' ) );
}

Без array( \'parent-style\' ) порядок может сломаться. Да, это влияет на переопределения. Порядок – всё.

Внимание! Если родитель использует wp_enqueue_style с хендлером, отличным от parent-style, – узнай его точное имя и используй его как зависимость.

Пример: если исходник регистрирует стили так:

Читайте также:  JavaScript продолжает удерживать лидерство в рейтинге самых популярных языков программирования по версии RedMonk


wp_enqueue_style( \'main-style\', get_template_directory_uri() . \'/style.css\' );

То и тебе нужно:


wp_enqueue_style( \'child-style\', get_stylesheet_uri(), array( \'main-style\' ) );

Пропустишь – будет каша. Стили загрузятся раньше нужного. Или вообще не загрузятся.

Смотри исходный код functions.php родителя. Это не рекомендация. Это необходимость.

Переопределение шаблонов и добавление пользовательского кода

Файл functions.php загружается автоматически и первый получает контроль. Добавляйте туда фильтры, экшены, отключайте ненужные скрипты:


remove_action(\'wp_head\', \'wp_generator\');
add_filter(\'excerpt_length\', function() { return 20; });

Не пишите туда HTML. Никогда. Только PHP, только код управления.

Хотите свои шаблоны для конкретных страниц? Используйте именование: page-about.php, single-product.php. Структура берёт своё начало от самого специфичного к универсальному. Нарушите порядок – получите не то, чего ждали.

Важно помнить: если файл не распознан, значит имя неверное или вы нарушили иерархию шаблонов.

Для кастомных страниц – создайте файл, добавьте заголовок шаблона:


<?php
/* Template Name: Моя страница */
get_header();
// контент
get_footer();

Выбор шаблона – через атрибут в админке. Быстро. Чётко. Управляемо.

Добавляйте свои скрипты через wp_enqueue_script только в нужное время. Не в header.php, не в футере вручную. Используйте хук wp_enqueue_scripts:


add_action(\'wp_enqueue_scripts\', function() {
  wp_enqueue_script(\'my-js\', get_stylesheet_directory_uri() . \'/js/custom.js\', [], false, true);
});

Внимание! Если подключать скрипты неправильно – получите конфликты, баги, обвал верстки. Тестируйте на каждом этапе.

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *