Как создать дочернюю тему на WordPress и зачем она вообще нужна

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

Дочерние темы на WordPress и для чего они нужны

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

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

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

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

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

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

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

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

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

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

Находим код этой ссылки, в файле шаблона footer.php.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 к какой-нибудь популярной теме, то вам этот плагин не подойдёт. Лучше таких тем вообще избегать, проблем с ними много.

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

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-11, то перейдите на вкладку «Вид» и отметьте там указанные на скриншоте чекбоксы.

Теперь можно открыть файл и начать редактировать его. Лучше всего это делать с помощью редактора 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 при формировании дочерней темы.

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/

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

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

Отлично!

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

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

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

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

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

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