Когда и как правильно нужно создавать дочернюю тему шаблона?

Написать эту статейку меня окончательно вдохновил один комментарий (ссылку дам ниже) хотя, и раньше порывался… потому как задают иногда подобные вопросы и здесь (в блоге) и в CRM студии: тратится, скажем так, много времени на пояснения, а ведь, если заказчик немного изучит техническую сторону создания дочерней темы, то и сам запросто сможет своевременно решить этот в общем-то несложный, но важнейший вопрос без излишних затрат на перестройку сайта!.

 

В сети много высказываний по этому “дочернему” поводу, да и в кодексе WordPress подробные статьи, однако, мне думается, логичнее всего написать пост у себя – с привязкой, так сказать, к вопросам своей клиентуры – и, при необходимости, на него ссылаться.

 

Повторюсь: большинство пользователей достаточно невнимательно относятся к вопросу создания дочерней темы, а по истечению времени приходится здорово перенастраивать сайт…

 

 

 

 

 

 

 

 

 

 

когда нужно создать дочернюю тему для шаблона

 

 

 

Правильнее всего создать дочернюю тему “Дочку” как только запускаете сайт с шаблоном, который в дальнейшем предполагает обновления! Например, если скачивали шаблон из репозитория Вордпресс и т.п.

 

Почему?!

 

В этом как раз и кроется основная ошибка администраторов-новичков:

 

 

1 – предположим: мы установили шаблон… запустили стартовый сайт… приступили к настройке шаблона в админке: задаём всякие там TITLE, дескрипшны, заголовки сайта, устанавливаем в сайдбары виджеты тонко их настраиваем и прочее, прочее…

Но!.. приходит время, и мы понимаем, что без дочерней темы не обойтись…

 

 

 

 

 

 

К примеру, мы решили, что совершенно естественно в процессе работы с сайтом – поправить дизайн (внешний вид сайта через файл style.css) или добавить какой-то симпатичный функционал посредством файла функций functions.php родительской темы…

 

Однако, как известно, если мы станем непосредственно править файлы обновляемого шаблона, то, все наши правки, при очередном обновлении темы, начисто затрутся! Перепишутся! тем самым затерев редакции кода: вся наша работа с файлами коту под хвост!

 

 

2 – когда мы решаемся создавать дочернюю тему, например, через полгода, то должны понимать и помнить, что сайт, работающий с родительской темой, и – сайт, использующий дочернюю тему, это по сути разные в плане настроек сайты!!

То есть, при активации дочерней темы, вновь предстоит настройка (или перенастройка) сайта: сайдбары, заголовки и прочий описанный в пункте 1 полезный функционал… а это морока…

 

 

Чтобы этой пустой перенастройки сайта избежать – желательно сразу же установить дочернюю тему. Это никак не скажется на работе сайта, даже если у вас нет желания (необходимости) на первых порах её использовать: т.е. править файлы родительской темы.

 

 

 

 

 

 

 

 

 

 

как создать дочернюю тему родительского шаблона

 

 

 

 

1 – На хостинге открываем файловый менеджер, а именно папку themes (для всех иных шаблонов – принцип создания дочерней темы аналогичен)

 

 

Предположим, мы используем тему twentyseventeen но нам нужно создать для неё дочернюю тему.

 

 

2 – Имя дочерней теме, к примеру, решили дать такое: twentyseventeen-child

 

 

3 – Создаём в папке themes папку с именем twentyseventeen-child

 

 

структура в папке themes получится примерно такой:

 

 

 

 

 

Замечательно!

 

 

…предположительно, у нас получился такой путь до папки дочернего шаблона:

 

/wp-content/themes/twentyseventeen-child/

 

 

4 – Создаём в “дочерней” папке файлы с именинами: style.css и functions.php…

 

 

 

 

как создать файлы для дочерней темы шаблона – 2 варианта

 

 

 

 

 

1 вариант… свяжем родительский шаблон с дочерней темой посредством файла CSS style.css:

 

 

В самом начале файла CSS – style.css дочерней темы twentyseventeen-child поместим такие строки: (измените данные на свои!)

 

 

 

/*
Theme Name: дочерняя тема - twentyseventeen-child
Template: twentyseventeen

Необязательные параметры:
Theme URI: http://site.ru/
Description: Дочерняя тема для темы twentyseventeen
Author: my
Author URI: http://site.ru/
Version: 1.0
*/
@import url("../twentyseventeen/style.css");

/* пример селекторов css */
.site-title, .site-title a {color:#fff !important;opacity:1}

 

 

 

В принципе всё! на этом можно остановиться… однако, есть и второй вариант подключения дочерней темы – посредством файла функций (он мне более симпатичен – я его почти всегда использую)

 

 

…открываем файл functions.php который мы создавали по статье чуть выше, и в самом верху файла записываем такие строки: (работаем с файлом функций дочерней темы!!).

 

 

 

<?php

// более правильный вариант чем @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
    function my_child_theme_scripts()
{
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

 

 

Используя этот вариант, закомментируйте или удалите в файле стилей дочерней темы строку @import url("../twentyseventeen/style.css");

 

 

И ещё один нюанс: добавим для наглядности картинку (миниатюру) для дочернего шаблона, чтобы та отображалась в настройках “Темы” шаблона.

 

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

 

 

…структура внутри папки дочерней темы получится примерно такая:

(на картинке присутствуют иные файлы… пусть это вас не смущает: на данном этапе эти файлы вам не нужны – а все требуемые в дальнейшем папки/файлы, вы добавите самостоятельно)

 

 

 

 

 

 

 

Вот и всё – дочерняя тема создана! Остаётся её только активировать через админку: “Внешний втд”/”Темы”… и далее уже смело приступать к настройкам сайта!

 

 

 

 

 

 

 

 

Помните: настраивайте сайт, используя новую активированную дочернюю тему! так целесообразнее…

В этом случае все настройки останутся в сохранности. И, в последствии, коли решите расширять функционал сайта – безбоязненно приступайте к редакции файлов, папок дочернего шаблона.

 

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