Переходим к практике и давайте посмотрим, как можно работать с дочерними темами Wordpress на реальном примере и посмотрим, какой основной смысл и принципы работы этого инструмента.

В видео я открыл тестовый сайт Wordpress. Давайте представим, что в активной теме нам понадобилось поменять оформление какого-либо элемента. 

Конечно, мы можем перейти в папку с активной темой, открыть нужный шаблон или файл стилей css и исправить его содержимое. Все будет работать нормально, но это будет до тех пор, пока мы не обновим нашу текущую тему.

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

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

Официальную документацию по дочерним темам Wordpress можно найти здесь:

https://codex.wordpress.org/Дочерние_темы

Это официальная документация от разработчиков тем Wordpress.

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

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

Из документации можно скопировать пример кода для файла style.css, можно просто скопировать его и вставить. Я убираю все опциональные поля и оставляю следующее:

/*
Theme Name:     Twenty Ten Child
Template:       twentyten
*/

 

Имя темы вы можете указать произвольно. Далее можно перейти в раздел Внешний вид - Темы и активировать дочернюю тему. 

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

Дело в том, что файл дочерней темы style.css перетер все содержимое, которое имелось в родительской теме в файле style.css.

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

@import url("../имя_родительской_темы/style.css");

Имейте ввиду, что строка импорта стилей CSS должна идти самой первой перед всеми стилями в файле style.css.

Т.е. мы импортируем все стили из файла style.css родительской темы в файл style.css дочерней темы.

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

Хотя у нас активная дочерняя тема и в ней имеется на данный момент только один файл style.css, эта тема заимствовала все файлы, которые есть в родительской теме. 

Это основы создания дочерней темы Wordpress. Попробуйте тоже добиться такого же эффекта у себя.