Здравствуйте, дамы и господа. Эту статью подготовил специально для вас. В ней расскажу, как создать дочернюю тему на WordPress. Это будет подробная инструкция в которой расскажу все детали. Также прилагаю видео, но работать удобнее будет по текстовому материалу, так как весь код сможете просто скопировать, а потом вставить себе и немного изменить. Ладно, давайте приступим к решению задачи.

Дочерние темы на WordPress: зачем они нужны?

Давайте сначала поговорим о том, зачем вообще нужны дочерние темы. Большинство пользователей Вордпресс берут темы из официального репозитория. У такого подхода есть серьёзные преимущества и ряд недостатков. Впрочем, преимуществ гораздо больше, так что репозиторий — крайне полезная вещь.

Но темы из репозитория написаны сторонними разработчиками, которые следят за кодом, обновляют темы.

Предположим, решили вы откорректировать шаблон, внесли изменения. Также добавили код для Метрики в functions.php. Всё работает, всё шикарно! Но в определённый момент видите, что вышло обновление для темы.

Обновления для тем WordPress
Да, темы придётся обновлять, и хорошо, что можно сделать это через репозиторий, а не вручную

Жмёте кнопку «Обновить темы», ждёте, и вдруг обнаруживаете, что отредактированный шаблон слетел, а также все кастомные коды из functions.php исчезли.

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

Избежать этого можно двумя способами:

  1. Плохой способ — сделать форк темы. То бишь, взять тему, отвязать от репозитория, но тогда проблема обновлений и поддержки актуальности кода ложится на вас. Придётся разобраться в теме досконально, а потом самостоятельно её поддерживать.

  2. Хороший способ — создать дочернюю тему.

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

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

Ссылка в подвале сайта
И ведёт она на сайт разработчика

Находим код этой ссылки, это, как нетрудно догадаться, файл шаблона footer.php.

Код в Footer.php на WP
Вот и источник наших бед

Предположим, я перелопатил код, ссылку убрал. Через месяц обновил тему. И в подвале снова висит старая добрая ссылка.

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

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

Файлы дочерней темы на WordPress
А вот кастомные файлы для «дочурки», в том числе и шаблон footer.php

Всё, теперь будет подключаться исправленный шаблон, ссылка в подвале нас больше не потревожит.

Сайт без ссылки в подвале
Всё, надпись заменена на «устраивающую»

Всё исправлено, всё работает. Главное, синтаксис соблюдайте.

Также и с кастомными функциями. Решил я подключить фавиконки через functions.php? Почему бы и нет! В Child Theme можно добавить собственный functions.php, который, в отличие от шаблонов, не заменяет полностью файл из основной темы, а дополняет его.

Код для favicon в functions.php
Вот немного кастома

Решил собственные стили сделать? Отлично! У нас есть для этого файл style.css, в который можем вносить свои наработки и не бояться их потерять при обновлении.

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

Создаём дочернюю тему

Итак, зачем нужно создать child theme рассказал, а теперь следует объяснить, как её создать. В данном случае есть вариант простой — формирование с помощью плагина. И посложнее — работа ручками. Оба способа подробно распишу.

Создаём дочернюю тему с помощью плагина

Это самый лёгкий способ. Для этого нам потребуется плагин Child Theme Configurator, установить можете из репозитория WP: https://ru.wordpress.org/plugins/child-theme-configurator/. Для этого зайдите в админку сайта → раздел «Плагины» → «Добавить новый». Просто найдите нужный плагин через поиск.

Плагин Child Theme Configurator в репозитории WordPress
Стрелками всё отметил

После установки активируем плагин. Теперь перейдите в раздел «Инструменты» → Child Themes.

Меню плагина Child Theme Configurator
Дорогу показал, думаю, найдёте

Теперь у нас есть несколько вариантов:

  1. CREATE a new Child Theme. Это значит, что будем создавать новую дочернюю тему, именно этот вариант нужно выбрать вам.

  2. CONFIGURE an existing Child Theme. Есть некоторые темы, которые изначально являются дочерними. Например, при установке одной из кучи тем VW с этим можете столкнуться. Этот вариант позволяет настраивать чужую дочернюю тему.

  3. DUPLICATE an existing Child Theme. Создаём полную копию дочерней темы.

  4. RESET an existing Child Theme (this will destroy any work you have done in the Configurator). Нужен для сброса дочерней темы.

Итак, выбираем первый вариант, потом выбираем родительскую тему. Нажимаем кнопку Analyze.

Создаём дочернюю тему с помощью плагина Child Theme Configurator
Стрелками отмечены нужные места

После анализа должно появиться сообщение о том, что эта тема позволяет сформировать дочернюю.

Тема подходит для формирования дочерней
Если всё хорошо, то увидите такое сообщение

Если не появилось, например, у вас изначально стоит child theme к какой-нибудь популярной теме, то вам этот плагин не подойдёт. Лучше таких тем вообще избегать, проблем с ними много.

А теперь выполняем следующие действия:

  1. Name the new theme directory. Указываем название каталога для дочерней темы. Проще всего указать название темы+child. Пишите только строчными латинскими символами, вместо пробел используйте дефис. Например, my-theme-child.

  2. Select where to save new styles. Здесь выбираем по стандарту Primary Stylesheet (style.css). Это значит, что для записи стилей будем использовать style.css дочерней темы. Другой вариант выбирайте только в том случае, если желаете потом объединить все css в отдельном файле.

  3. Select Parent Theme stylesheet handling. Выбираем Use the WordPress style queue. Это значит, что порядок загрузки стилей определяется WP.

  4. Customize the Child Theme Name, Description, Author, Version, etc. Здесь указываем атрибуты дочерней темы в таком порядке: название темы, её сайт, автор, сайт автора, описание, теги, версия. В принципе, меня устраивает автоматическая генерация.

  5. 8 пункт. Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme. Если успели поработать с родительской темой, например, настроили меню, добавили виджеты, то отметьте чекбокс, чтобы настройки скопировались в дочернюю тему.

  6. Нажимаем кнопку Create New Child Theme.

Всё, тема сформирована, теперь переходим во «Внешний вид» → «Темы» и активируем её.

Активация дочерней темы в WP
Просто наведитесь на тему и нажмите кнопку «Активировать»

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

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

Если по каким-то причинам плагин не смог сформировать дочернюю тему, то можете попробовать сделать это руками. Но, если честно, если плагин не смог осилить данную задачу, то, вероятно, лучше сменить тему, так как проблема заключается именно в ней. И даже при ручном формировании получите ряд проблем.

Также прилагаю видеоинструкцию.

Создаём дочернюю тему без плагинов

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

  • всё придётся делать самостоятельно, например, создавать каталоги;

  • ошибки синтаксиса приведут к неработоспособности «дочки»;

  • займёт больше времени, чем установка плагина.

А теперь давайте перейдём к процессу сего действа. Создание дочерней темы всегда начинается с формирования каталога.

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

Вот у нас есть тема Colibri WP. Самый простой способ:

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

  2. Создаём каталог, вставляем скопированное название, через дефис добавляем child.

  3. Готово.

Название каталога с дочерней темой
Только строчными буквами, вместо пробелов дефисы

Теперь нужно создать новый текстовый файл. Назовите его style.css. Расширение нужно изменить с txt на css. Если расширение не видите и у вас Windows 10, то перейдите на вкладку «Вид» и отметьте там указанные на скриншоте чекбоксы.

Отображение расширения файлов в Windows 10
Отметил стрелками

Теперь можно открыть файл и начать редактировать его. Лучше всего это делать с помощью редактора Notepad++, это отличный инструмент, есть подстветка синтаксиса, а если допустите ошибку, то сей «Блокнот» на неё укажет. Не ленитесь, скачайте.

И в файле style.css указываем такой закомментированный блок:

/*
 Theme Name: Colibri WP Child
 Theme URL: https://workinnet.ru
 Description: Моя дочерняя тема
 Author: Puchlik Svirepiy
 Author URL: https://workinnet.ru
 Template: colibri-wp
 Version: 1.0.0
 Text Domain: colibri-wp-child
 */ 

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

  1. Theme Name. Тут указываем название нашей дочерней темы. Можете называть как угодно.

  2. Theme URL. Любой url, фактически, это адрес страницы вашей темы. Можете указать свой сайт.

  3. Description. Фактически, описание темы, пишите что угодно.

  4. Author. Имя автора темы. Или прозвище.

  5. Author URL. Адрес сайта автора темы. Можете указать свой сайт.

  6. Template. Название вашей родительской темы. Укажите название каталога, в котором родительская тема расположена. Полный путь к каталогу не указывайте, только его имя.

  7. Version. Версия темы. Можете менять вместе с изменениями в теме и вести попутно GIT. Удобно.

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

Где найти Template для дочерней темы
Название папки с темой и есть Template

Text Domain. Решил выделить отдельно, ибо это важный параметр, отвечающий за локализацию. Предположим, вы установили тему, сделали для неё перевод на свой язык и добавили в дочернюю тему.

Фактически, если мы в Text Domain указываем название дочерней темы, то файлы локализации из неё будут приоритетнее, чем из папки родительской темы. Так что если собираетесь переводить тему самостоятельно, обязательно укажите название дочерней темы.

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

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

/*
сюды пихаем содержимое
*/

В css такие обозначения нужны для комментирования.

Но давайте доделаем, чтобы всё было по уму. В том же каталоге, в котором разместили файл style.css, создайте новый файл и назовите его functions.php.

Откройте его с помощью Notepad++ и добавьте такой блок кода:

<?php
add_action('wp_enqueue_scripts', 'winnet_theme_styles' );
function winnet_theme_styles() {
	wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' );
	wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') );
} 

Сохраните файл и закройте. Этот код нужен для того, чтобы подгружать стили родительской темы.

Отлично, вы только что сделали дочернюю тему без плагина, осталось загрузить её на хостинг. Для этого пакуем каталог (именно каталог!), в котором создавали файлы, в архив с расширением .zip. Можно другое, если хостинг его поддерживает. Можете делать с помощью WinRar. Впрочем, в ZIP можно запаковать и средствами Windows.

Создаём архив с дочерней темой

Теперь открываем менеджер файлов на хостинге или подключаемся к нему по FTP. И этот архив загружаем в «папка-вашего-сайта/wp-content/themes/

Загружаем child theme на хостинг

И распаковываем его на хостинге. Главное, чтобы папка с нашей дочерней темой была в каталоге themes.

Размещаем дочернюю тему на хостинге
Просто распакуйте архив

Готово, остался последний штрих. Заходим в админку сайта → раздел «Внешний вид» → «Темы». Выбираем дочернюю тему и нажимаем кнопку «Активировать». Проверяем работоспособность.

Активируем дочернюю тему
Нажимаем кнопку «Активировать»

Отлично!

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

Ошибка при формировании child theme
Ошибки тоже случаются иногда

Скорее всего это будет связано с неправильным названием, указанным в Template в файле style.css. Иногда может оказаться так, что родительская тема не позволяет сформировать child theme. Тогда лучше смените тему.

Также прилагаю видеоинструкцию.

Приятной работы!

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

На этой ноте желаю вам успехов и рабочего кода!

Нажмите для оценки!
[Оценило: 1 Средний: 5]