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

Понятие «дочерная тема»

Итак, иногда после установки выбранной темы на WordPress начинающие сайтостроители сталкиваются с проблемой: как настроить тему WordPress под себя.

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

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

Тема обычно настраивается в меню админпанели WordPress: «Внешний вид»->»Темы»->»Настроить»

Стандартная Настройки темы - блог Деда Саши

Более «глубокий» уровень настройки – с помощью стилей CSS.
Находясь в админиистративной панели WordPress выбираем в меню «Внешний вид» -> «Редактор» и в окне справа находим файл «таблица стилей (style.css).

Настройка CSS темы вордпресс - Блог Деда Саши

В файле style.css находятся стили отображения элементов интерфейса темы. Часто в настройках самой темы есть возможность ввода пользовательского CSS.

Изменение настроек темы непосредственно в файле  style.css имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновлении темы файлы таблицы стилей перезаписываются по новому.

В WordPress существует относительно простой механизм, позволяющий избежать этого недостатка — дочерные темы (Child Theme). По сути дочерная тема — это переопределенные настройки основной (родительской) темы.

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

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

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

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

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

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

Способы, как создать дочерную тему WordPress

В качестве примера рассмотрим пример создания дочерной темы для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress.

У себя на компьютере я создаю новую папку для дочерной темы. Назову ее: /twentytwelve-child/

В этой папке я создам ряд файлов и заполню их информацией в зависимости от способов подключения стилей основной «родительской» темы.

Способ 1. Подключение стилей через правило @import

Для создания дочерной темы достаточно создать файл стилей style.css и подключить к нему стили родительской темы с помощью правила @import.

Файл style.css может быть заполнен информацией, как показано ниже:

/*
* Theme Name: Twenty Twelve Child
* Template: twentytwelve
Description: Моя дочерная тема для Twentytwelve
Author: Александр Коваль
Author URI: https://alexkoval.name
*/
@import url('../twentytwelve/style.css');
/* ниже устанавливайте свои настройки элементов темы*/
 

Строки Theme Name (Имя темы) и Template (шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор),  Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.

Важной частью этого файла являются строка: @import url('../twentytwelve/style.css'); Эта строка идентифицирует родительскую тему и импортирует из CSS.

Когда вы будете создавать «дочку» — то должны убедиться, что путь к файлу CSS родительской темы является правильным, и что параметр «Template:» правильно определяет имя родительской темы. Если используете другую родительскую тему – настройте соответствующие названия для другой темы.

Обратите внимание — все названия чувствительны к регистру: название с большой буквы и название с маленькой – это разные названия!

Так как папка моей материнской темы называется «twentytwelve», и она с маленькой буквы, следовательно в теге  @import учтен этот фактор.

Однако Codex WordPress не рекомндует использовать правило @import для подключения стилей родительской темы.  Использование этого способв ведет  к лишнми обращениям к базе данных. А это приводит к увеличение времени отображения страниц что негативно сказывается на ранжировании сайта поисковыми системами.

Способ 2. С подключением стилей кодом в function.php

В этом способе для дочерной темы создаеться как минимум два файла: в дополнение к style.css в папке дочерной темы нужно создать файл function.php и вставить туда следующий код:

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 
function my_enqueue_assets() {  
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 
}
?>

В этом способе запись @import url(‘../twentytwelve/style.css’); в файле style.css дочерной темы совершенно не нужна и файл style.css будет иметь следующий вид:

/*
* Theme Name: Twenty Twelve Child
* Template: twentytwelve
Description: Моя дочерная тема для Twentytwelve
Author: Александр Коваль
Author URI: https://alexkoval.name*/

/* ниже устанавливайте свои настройки элементов темы*/
 

Как активировать дочерную тему

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

1. Создаею ZIP-архив папки дочерной темы на компьютере. Это можно сделать с помощью практически любого архиватора.
2. Загружаю дочерную тему в WordPress. Загрузка ничем не отличается от загрузки любой темы: через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.
3. Активирую дочерную тему.

При активации дочерной темы убедитесь, что в папке тем WordPress загружена родительская тема ( в моем примере это тема «Twenty Twelve»).

Как настроить тему WordPress с помощью файлов дочерной темы

Настройка стилей CSS дочерной темы

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

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

Например, в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным.

Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://alexkoval.name */ @import url('../twentytwelve/style.css');

/* ниже устанавливайте свои настройки элементов темы*/

.site-header h1 a {color: #FF0000; font-weight: 300;}

Напомню, добавлять новые стили надо в файл style.css дочерной темы:

Редактирование CSS WordPress темы

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

Было:

Модификация CSS - было

Стало:

Модификация CSS - стало

Настройка функций темы редактированием файла functions.php

Основные функции темы обычно храняться в файле functions.php. Функции родительской темы всегда загружаются вместе с функциями дочерной. Следовательно, если нужно добавить несколько пользовательских функций к теме, то можно сделать это путем создания нового файла functions.php в папке дочерной темы. В этом случае новые функции из дочерной темы будут загружены перед функций родительской.

Файл functions.php дочерной темы должен начинаться с открытия PHP тега и заканчиваются закрывающим PHP тегом. В промежутках между тегами можно добавить нужный код PHP:

<?php
// Твой код пиши здесь
?>

Настройка шаблонов страниц темы

Помимо стилей CSS и function.php, можно также произвести структурные изменения темы, редактируя другие PHP файлы-шаблоны темы. Это нужно делать с осторожностью и пониманием. Однако таким путем можно настроить тему WordPress под себя в полной мере.

В отличие от редактирования functions.php, где функции родительской темы импортируются автоматически, другие PHP файлы дочерной темы заменяют файл родительской темы целиком. Другими словами, исходный файл темы игнорируется, а вместо него используется файл из дочерной темы.

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

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

Например, если я хочу изменить файл родительской темы /twentytwelve/page-templates/front-page.php, то файл front-page.php мне надобно переместить в дочерную тему, создав там соответствующий каталог: /twentytwelve-child/page-templates/ front-page.php

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

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

Редактирование файлов темы

Дополнительные ресурсы

  • The One Click Child Theme Plugin — Если возникли трудности с освоением изложенного материала — то этот плагин создаст дочерную тему одним нажатием кнопки.
  • DIVI CHILD THEME BUILDER — Для темы Divi создать дочерную тему можно в интерактивном режиме без плагинов
  • Иерархия шаблонов WordPress на Wodrpress.org — cтраницы WordPress сайта собираются подобно пазлу из файлов-шаблонов. Если нужно «покопать глубже» — то WordPress.org поможет разобраться со структурой темы.

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

    Удачи!
    Александр Коваль