Запись

Как создать дочернюю тему WordPress: пошаговый гайд для новичков

Пошаговый гайд для новичков по созданию дочерней темы WordPress. Разберём, как правильно создать Child Theme, настроить style.css и functions.php, подключить свои стили и сохранить изменения после обновления основной темы.

дочерняя тема Wordpress

Если вы хотите изменить дизайн WordPress-сайта, добавить собственный CSS или PHP-код, рано или поздно возникает вопрос: куда вносить изменения, чтобы они не исчезли после обновления темы?

Правильное решение — использовать дочернюю тему WordPress, или Child Theme.

В этом руководстве простым языком разберём, что такое дочерняя тема, зачем она нужна и как создать её самостоятельно, даже если раньше вы никогда не работали с файлами WordPress.

Что такое дочерняя тема WordPress

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

Например:

  • Astra — родительская тема;
  • Astra Child — дочерняя тема.

Или:

  • GeneratePress — родительская тема;
  • GeneratePress Child — дочерняя тема.

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

Родительская тема
        ↓
дизайн + функции + шаблоны
        ↓
Дочерняя тема
        ↓
ваши изменения

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

Зачем нужна дочерняя тема

Представим, что на сайте используется тема Astra.

Вы открыли файл:

/wp-content/themes/astra/functions.php

и вручную добавили туда собственный PHP-код.

Всё работает. Но через некоторое время выходит новая версия Astra. Вы нажимаете кнопку «Обновить», WordPress заменяет файлы темы новыми, и внесённый вручную код может исчезнуть.

То же самое касается изменений в:

  • functions.php;
  • style.css;
  • PHP-шаблонах;
  • JavaScript-файлах;
  • шаблонах страниц и записей;
  • других файлах родительской темы.

Дочерняя тема позволяет хранить такие изменения отдельно.

Когда дочерняя тема действительно нужна

Создать Child Theme стоит, если вы собираетесь:

  • добавлять собственный PHP-код, связанный с темой;
  • изменять шаблоны темы;
  • добавлять собственные CSS-стили;
  • менять HTML-разметку;
  • изменять шапку или подвал;
  • создавать собственные шаблоны страниц;
  • переопределять файлы родительской темы;
  • подключать собственный JavaScript.

Если вы просто меняете цвет кнопки через встроенные настройки темы или добавляете несколько строк CSS через раздел «Дополнительные стили», отдельная дочерняя тема может быть не обязательна.

Перед началом сделайте резервную копию

Перед работой с файлами сайта желательно создать резервную копию.

Сохраните:

  • файлы сайта;
  • базу данных.

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

Для старого, коммерческого или технически сложного проекта безопаснее сначала выполнять изменения на тестовой копии сайта. Подробнее про безопасное обновление wordpress

Что понадобится

Нам понадобится доступ к каталогу:

/wp-content/themes/

Получить доступ к нему можно через:

  1. файловый менеджер хостинга;
  2. FTP или SFTP;
  3. SSH;
  4. локальную копию сайта.

Для новичка проще всего использовать файловый менеджер в панели хостинга.

Шаг 1. Узнаём название папки родительской темы

Откройте каталог:

/wp-content/themes/

Внутри будут папки установленных тем. Например:

themes/
├── astra/
├── generatepress/
├── twentytwentyfive/
└── twentytwentysix/

Если на сайте используется Astra, её папка обычно называется:

astra

Запомните точное название папки. Оно понадобится при создании файла style.css.

Важно: в параметре Template нужно указывать именно имя папки родительской темы, а не красивое название темы из панели WordPress.

Шаг 2. Создаём папку дочерней темы

В каталоге:

/wp-content/themes/

создайте новую папку.

Для Astra можно назвать её:

astra-child

В результате должно получиться:

/wp-content/themes/astra/
/wp-content/themes/astra-child/

Для GeneratePress можно использовать:

generatepress-child

Название может быть другим, но вариант название-темы-child проще всего понимать и поддерживать.

Шаг 3. Создаём файл style.css

В папке дочерней темы создайте файл:

style.css

Для Astra полный путь будет выглядеть так:

/wp-content/themes/astra-child/style.css

Откройте файл и добавьте:

/*
Theme Name: Astra Child
Description: Дочерняя тема для Astra
Author: Tekito
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

Самая важная строка:

Template: astra

Она сообщает WordPress, какую тему использовать как родительскую.

Пример для GeneratePress

Если папка родительской темы называется:

generatepress

то содержимое файла может выглядеть так:

/*
Theme Name: GeneratePress Child
Description: Дочерняя тема GeneratePress
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

Что означают параметры в style.css

Параметр Для чего нужен
Theme Name Название дочерней темы в панели WordPress
Description Краткое описание темы
Author Автор дочерней темы
Template Название папки родительской темы
Version Версия дочерней темы
Text Domain Идентификатор для переводов

Критически важен прежде всего параметр:

Template

Если он указан неправильно, WordPress не сможет связать дочернюю тему с родительской.

Шаг 4. Создаём functions.php

Теперь в папке дочерней темы создайте второй файл:

functions.php

Структура получится такой:

astra-child/
├── style.css
└── functions.php

Откройте functions.php и добавьте:

<?php

add_action( 'wp_enqueue_scripts', 'tekito_child_enqueue_styles' );

function tekito_child_enqueue_styles() {

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

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );

}

Этот код подключает таблицы стилей родительской и дочерней темы.

Важный нюанс с подключением CSS

Разные WordPress-темы подключают стили по-разному.

У некоторых современных тем основной CSS родителя уже подключается самой темой, поэтому дополнительное подключение родительского style.css может не требоваться.

После активации Child Theme обязательно проверьте сайт.

Если стили загружаются дважды или родительская тема предоставляет собственную инструкцию по созданию Child Theme, лучше следовать правилам конкретной темы.

Не копируйте functions.php родительской темы

Это одна из самых распространённых ошибок.

Не нужно брать:

/wp-content/themes/astra/functions.php

и полностью копировать его в:

/wp-content/themes/astra-child/functions.php

Так делать не следует.

functions.php дочерней темы предназначен для вашего дополнительного кода.

Добавляйте туда только те функции, которые действительно нужны вашему сайту.

Шаг 5. Проверяем структуру Child Theme

На этом этапе структура должна выглядеть примерно так:

wp-content/
└── themes/
    ├── astra/
    │   ├── style.css
    │   ├── functions.php
    │   └── ...
    │
    └── astra-child/
        ├── style.css
        └── functions.php

Для простой дочерней темы этого уже достаточно.

Шаг 6. Находим дочернюю тему в WordPress

Откройте административную панель WordPress и перейдите:

Внешний вид → Темы

В списке должна появиться новая тема с названием, указанным в параметре:

Theme Name: Astra Child

Если она не появилась, сначала проверьте:

  • правильность имени файла style.css;
  • наличие заголовка темы;
  • параметр Template;
  • наличие родительской темы.

Шаг 7. Активируем дочернюю тему

В разделе «Темы» нажмите:

Активировать

После этого Child Theme станет активной.

Родительская тема при этом никуда не исчезает и не удаляется. Она должна оставаться установленной.

Можно ли удалить родительскую тему

Нет.

Если используется:

Astra Child

на сервере обязательно должна оставаться установленной:

Astra

Child Theme использует файлы родительской темы и не является её полной копией.

Шаг 8. Проверяем сайт

После активации откройте сайт и проверьте основные страницы.

  • главную;
  • несколько внутренних страниц;
  • записи;
  • меню;
  • шапку;
  • подвал;
  • мобильную версию;
  • формы;
  • корзину и оформление заказа, если используется WooCommerce.

Внешний вид сайта должен остаться практически тем же.

Шаг 9. Проверяем работу style.css

Можно выполнить простой тест.

Откройте:

/wp-content/themes/astra-child/style.css

После служебного комментария временно добавьте:

body {
    outline: 5px solid red;
}

Сохраните файл и обновите страницу сайта.

Если по краям появилась красная рамка, стили Child Theme подключены.

После проверки удалите тестовое правило.

Куда добавлять собственный CSS

Свои стили можно размещать в:

/wp-content/themes/astra-child/style.css

Например:

.site-header {
    border-bottom: 1px solid #ddd;
}

.entry-title {
    font-size: 36px;
}

.site-footer {
    margin-top: 60px;
}

После обновления родительской темы эти изменения останутся в файлах Child Theme.

Куда добавлять собственный PHP-код

PHP-код, связанный с темой, можно добавлять в:

/wp-content/themes/astra-child/functions.php

Например:

<?php

add_action( 'wp_footer', 'tekito_example_function' );

function tekito_example_function() {
    echo '<!-- Child Theme работает -->';
}

Будьте осторожны с PHP

Ошибка в functions.php может привести к критической ошибке WordPress.

Иногда достаточно случайно забыть:

;

или закрывающую фигурную скобку:

}

Поэтому перед редактированием PHP желательно иметь доступ к файловому менеджеру или FTP. Тогда при ошибке вы сможете быстро открыть файл и исправить код.

Нужно ли добавлять ?> в конец functions.php

Обычно нет.

Если файл содержит только PHP, его можно оставить без закрывающего тега.

<?php

// PHP-код

Такой подход помогает избежать случайного вывода лишних пробелов или других символов.

Как переопределить шаблон родительской темы

Одно из главных преимуществ Child Theme — возможность изменять некоторые шаблоны темы отдельно от оригинала.

Предположим, в родительской теме есть:

/wp-content/themes/example/single.php

Если архитектура темы допускает переопределение этого шаблона, его можно скопировать в:

/wp-content/themes/example-child/single.php

После этого изменения выполняются уже в файле дочерней темы.

Важно: структура конкретных коммерческих и блочных тем может отличаться. Не каждый файл можно переопределить простым копированием.

Не копируйте всю родительскую тему

Не нужно полностью копировать папку:

astra/

в:

astra-child/

В дочерней теме следует хранить только файлы, которые вы действительно создаёте или изменяете.

Например:

astra-child/
├── style.css
├── functions.php
└── изменённый-шаблон.php

Остальные файлы будут использоваться из родительской темы.

Как добавить изображение темы в админке

Без изображения Child Theme всё равно будет работать.

Но можно добавить файл:

screenshot.png

в папку:

/wp-content/themes/astra-child/

Получится:

astra-child/
├── screenshot.png
├── style.css
└── functions.php

После этого миниатюра будет отображаться в разделе «Внешний вид → Темы».

Чем отличаются template и stylesheet directory

При работе с Child Theme часто встречаются две похожие функции.

Путь к родительской теме

get_template_directory_uri()

возвращает URL родительской темы.

Например:

https://site.ru/wp-content/themes/astra

Путь к активной дочерней теме

get_stylesheet_directory_uri()

возвращает URL активной Child Theme.

Например:

https://site.ru/wp-content/themes/astra-child

Это особенно полезно при подключении собственных файлов.

Как подключить свой JavaScript

Создайте:

astra-child/js/custom.js

Структура получится такой:

astra-child/
├── js/
│   └── custom.js
├── functions.php
└── style.css

В functions.php можно добавить:

add_action( 'wp_enqueue_scripts', 'tekito_child_scripts' );

function tekito_child_scripts() {

    wp_enqueue_script(
        'tekito-child-script',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array(),
        '1.0.0',
        true
    );

}

После этого WordPress сможет подключать JavaScript из дочерней темы.

Что произойдёт после обновления родительской темы

Предположим, структура сайта выглядит так:

themes/
├── astra/
└── astra-child/

При обновлении Astra WordPress заменяет файлы внутри:

/astra/

но папка:

/astra-child/

остаётся отдельной.

Поэтому ваши:

  • style.css;
  • functions.php;
  • custom.js;
  • переопределённые шаблоны

не должны быть перезаписаны обновлением основной темы.

Но Child Theme не решает проблему совместимости

Дочерняя тема защищает ваши файлы от перезаписи, но не гарантирует, что старый пользовательский код всегда будет работать с новой версией родительской темы.

Разработчики основной темы могут:

  • изменить HTML-разметку;
  • удалить старые функции;
  • изменить CSS-классы;
  • изменить хуки;
  • переработать шаблоны.

В результате файлы Child Theme сохранятся, но некоторые доработки после крупного обновления могут потребовать адаптации.

Поэтому резервные копии всё равно необходимы.

Что делать с блочными темами WordPress

Современные блочные темы могут иметь другую структуру.

Кроме стандартных файлов в них могут использоваться:

theme.json
templates/
parts/
patterns/

Например:

child-theme/
├── style.css
├── functions.php
├── theme.json
├── templates/
└── parts/

Через theme.json можно изменять глобальные настройки дизайна:

  • цвета;
  • типографику;
  • интервалы;
  • параметры блоков;
  • часть глобальных стилей.

Если сайт использует Full Site Editing, многие визуальные изменения можно выполнять через редактор сайта без ручного изменения PHP-файлов.

Можно ли создать дочернюю тему через плагин

Да. Существуют плагины, которые создают Child Theme автоматически.

Обычно процесс выглядит так:

  1. устанавливаете плагин;
  2. выбираете родительскую тему;
  3. задаёте название дочерней;
  4. плагин создаёт необходимые файлы;
  5. активируете новую тему.

Для новичка такой способ может быть удобнее.

Тем не менее полезно понимать ручной вариант, потому что технически простая дочерняя тема состоит всего из папки и нескольких файлов.

Что проверить после активации Child Theme

Некоторые настройки темы могут зависеть от того, какая именно тема считается активной.

После переключения проверьте:

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

Частые ошибки при создании дочерней темы

Ошибка 1. Неправильно указан Template

Например:

Template: Astra

хотя настоящая папка называется:

astra

Правильно:

Template: astra

Ошибка 2. Удалена родительская тема

Child Theme использует родительскую тему. Удалять её нельзя.

Ошибка 3. Скопирован весь functions.php

Не нужно копировать functions.php родительской темы целиком. Добавляйте в дочерний файл только собственный код.

Ошибка 4. Скопирована вся основная тема

Это лишнее и сильно усложняет будущую поддержку сайта.

Ошибка 5. Изменения продолжают вноситься в родителя

После создания Child Theme пользователь иногда по привычке редактирует:

/wp-content/themes/astra/style.css

вместо:

/wp-content/themes/astra-child/style.css

При обновлении такие изменения снова могут исчезнуть.

Ошибка 6. Нет резервной копии

Child Theme защищает собственные файлы от обычного обновления темы, но не является системой резервного копирования.

Минимальная готовая дочерняя тема

Для Astra минимальная структура:

astra-child/
├── functions.php
└── style.css

style.css

/*
Theme Name: Astra Child
Description: Дочерняя тема для Astra
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

functions.php

<?php

add_action( 'wp_enqueue_scripts', 'tekito_child_enqueue_styles' );

function tekito_child_enqueue_styles() {

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

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );

}

После создания файлов откройте:

Внешний вид → Темы → Astra Child → Активировать

Чек-лист создания дочерней темы WordPress

Шаг Что сделать
1 Сделать резервную копию сайта
2 Найти точное имя папки родительской темы
3 Создать папку вида название-child
4 Создать style.css
5 Правильно указать Template
6 Создать functions.php
7 При необходимости подключить стили и скрипты
8 Проверить появление Child Theme в админке
9 Активировать дочернюю тему
10 Проверить внешний вид и функции сайта
11 Дальнейшие изменения вносить в дочернюю тему

Когда лучше использовать отдельный плагин

Не любой PHP-код стоит помещать в дочернюю тему.

Если функция должна продолжать работать даже после смены темы, правильнее оформить её как отдельный плагин.

Например:

  • регистрация собственных типов записей;
  • интеграция с внешним API;
  • бизнес-логика;
  • обработка данных;
  • интеграция с CRM;
  • функции, не связанные непосредственно с дизайном.

Можно использовать простой принцип:

Изменение относится к оформлению и шаблонам → дочерняя тема.

Функция должна работать независимо от дизайна → отдельный плагин.

FAQ — частые вопросы о дочерних темах WordPress

Что такое дочерняя тема WordPress?

Это отдельная тема, которая наследует функции и дизайн родительской темы, но позволяет хранить пользовательские изменения отдельно.

Обязательно ли создавать Child Theme?

Нет. Если вы не меняете файлы темы и используете только её стандартные настройки, дочерняя тема может быть не нужна.

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

Да. Это одна из главных причин использования Child Theme. Ваши файлы хранятся отдельно и не должны перезаписываться обычным обновлением родительской темы.

Можно ли удалить родительскую тему?

Нет. Дочерняя тема использует файлы родительской и без неё работать не сможет.

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

Если вы создали её самостоятельно, автоматических обновлений обычно нет. Но собственный код иногда требуется адаптировать после крупных обновлений WordPress или родительской темы.

Можно ли создать дочернюю тему на уже работающем сайте?

Да. Перед переключением желательно сделать резервную копию, а после активации проверить меню, виджеты, настройки темы и основные страницы.

Исчезнут ли настройки сайта после активации Child Theme?

Не обязательно, однако часть настроек конкретной темы может быть связана с активной темой. Поэтому после переключения нужно проверить сайт полностью.

Куда добавлять CSS?

Обычно в style.css дочерней темы.

Куда добавлять PHP-код?

Код, связанный с поведением темы, можно разместить в functions.php Child Theme. Независимую от темы функциональность лучше оформлять отдельным плагином.

Нужно ли копировать functions.php родительской темы?

Нет. Создайте новый файл functions.php и добавляйте в него только собственный код.

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

Да. Существуют плагины для автоматического создания дочерних тем. Но базовый ручной способ тоже достаточно простой.

Итог

Для создания простой дочерней темы WordPress обычно достаточно папки и двух файлов:

child-theme/
├── style.css
└── functions.php

В style.css необходимо правильно указать родительскую тему через параметр:

Template:

После этого Child Theme можно активировать в WordPress и использовать для собственных CSS, PHP, JavaScript и изменений шаблонов.

Главное правило простое: не изменяйте файлы родительской темы, если хотите безопасно обновлять её в будущем.

Храните собственные доработки отдельно — так сайт будет намного проще поддерживать и обновлять.

Есть похожая задача?

Опишите ее в Telegram — я посмотрю и предложу следующий шаг.

Написать в Telegram

Добавить комментарий

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