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

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

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

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

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

Стандартная Настройки темы - блог Деда Саши
Более точный уровень настройки темы WordPress можно сделать с помощью стилей CSS. Для редактирования 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://divitheme.space
*/
@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://divitheme.space*/

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

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

После того, как на компьютере создана папка дочерной темы и нужные файлы в ней, можно загрузить тему на сервер и активировать ее в 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://divitheme.space */ @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 будет знать, что сперва надо использовать этот файл с дочерной темы потому что его наименование и место то же самое, как у родительской. После перемещения этого файла в дочерную тему я могу открыть этот файл там и внести в него необходимые изменения.

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

Можно ли не использовать дочерную тему и сохранять при этом настройки при обновлении?

Если вы используете тему Divi — то в теме есть альтернатива дочерной теме. Речь идет о конструкторе сайта Theme Builder

В Theme Builder можно назначать свои шаблоны для страниц или постов сайта. Включая и пользовательские типы страниц, такие как, например, «Проекты» и «Товары».

По сути эта функция в Divi дает возможность переопределить стандартные шаблоны темы своими собственными, которые в свою очередь могут быть уже построены визуально с помощью конструктора Divi Builder.

к оглавлению ↑

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

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

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

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

    Рубрики: Дочерные темы Divi Метки: Дизайн сайта

    Об авторе:

    Александр Коваль

    Александр Коваль

    Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

    Share via
    Send this to a friend