В статье описано как настроить классическую тему WordPress с помощью дочерной темы, какие плюсы применения дочерной темы, как создавать и как использовать дочерную тему WordPress.
Понятие «дочерная тема» WordPress
Иногда после установки выбранной темы на WordPress сайтостроители сталкиваются с задачей: как настроить тему WordPress под себя. Зачастую стандартных настроек выбранной темы недостаточно, чтобы удовлетворить все пожелания.В файле 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'); /* ниже устанавливайте свои настройки элементов темы*/
@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. Действия могут быть следующими:- Создать ZIP-архив папки дочерной темы на компьютере. Это можно сделать с помощью практически любого архиватора.
- Загрузить дочерную тему в WordPress. Загрузка ничем не отличается от загрузки любой темы: через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.
- Активировать дочерную тему.
Как настроить тему 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 дочерной темы:
После этого изменения стилей WordPress перезаписывают исходные свойства заголовка и я получаю результат:
Было:
Стало:
Настройка функций темы редактированием файла 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 поможет разобраться со структурой темы.
Задавайте вопросы, пишите предложения и замечания в комменариях ниже. Делитесь статьей в социальных сетях.
Удачи!
Александр Коваль
С вордпрессом работаю давно, но об такой возможно узнал впервые. Возможно на новых сайтах буду применять, а на старых чтобы не появлялось извещения об обновлении темы (если новая версия выходит и не подумав обновить, то действительно все зделанные правки изчезают) я просто указывал в css цифру версии намного выше актуальной.
Хотя на некоторых сайтах вношу в изначальный дизайн столько изменений, что тема кардинально меняется и уже нет смысла её обновлять — всё что надо добавляю сам.