О дочерных темах WordPress

их плюсах, как их создавать и как их использовать

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

Под стандартными настройками я имею в виду возможность изменения настроек темы из административной панели WordPress используя различных переключатели, чекбоксы, диалоговые окна и др. Настраивается тема обычно в меню: «Внешний вид»->»Темы»->»Настроить»

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

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

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

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

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

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

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

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

Как создать дочерную тему Вордпресс

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

Для создания дочерной темы достаточно создать файл стилей style.css и подключить к нему стили родительской темы с помощью правила @import.
В качестве примера, я создам дочерную тему для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress. Перво-наперво, у себя на компьютере я создаю новую папку для дочерной темы. Назову ее: / twentytwelve-child/.
В этой папке я создаю файл с именем style.css и заполняю файл информацией, как показано ниже:

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

Строки Theme Name (Имя темы) и Template (шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор), Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.
Важной частью этого файла являются строка: @import url('../twentytwelve/style.css'); Эта строка идентифицирует родительскую тему и импортирует CSS из нее. Когда ты будешь создавать «дочку» — то должен убедиться, что путь к файлу CSS твоей родительской темы является правильным, и что параметр «Template:» правильно определяет имя твоей родительской темы. Если ты используешь другую тему – настрой соответствующие названия для другой темы.

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

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

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

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

В этом способе для дочерной темы создаеться два файла: в дополнение к 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://www.divitheme.space*/

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

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

После того, как я создал папку дочерной темы и файл style.css в ней, я могу загрузить на сервер и активировать в WordPress вновь созданную дочерную тему. Загрузка и активация дочерней темы ничем не отличается от загрузки и активация обычный темы. Загрузить ее можно через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.

Обрати внимание, что перед тем, как загрузить дочерную тему, необходимо сначала создать ZIP-архив ее папки. Это можно сделать с помощью практически любого архиватора.

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

Модифицикация CSS темы

Теперь я создал дочерную тему для Twenty Twelve и загрузил ее в WordPress. Так как в дочерной теме я импортирую CSS родительской, то при активации дочерная тема будет выглядеть так же, как и родительская. Для настройки своей темы я могу добавить любые изменения в файл CSS дочерной темы ниже строки @import... В этом случае вся новая информация CSS из дочерной темы добавляется после загрузки CSS родительской темы, и потому «дочерная» CSS в выдаче находится ниже CSS из родительской темы, а это значит, что все новые стили CSS будет перезаписывать исходные.
Например, предположим, что в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным. Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:

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

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

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

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

Было:

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

Стало:

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

Редактирование файла functions.php

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

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

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

Помимо CSS и function.php, ты можешь также произвести структурные изменения темы, редактируя другие PHP файлы-шаблоны темы. Это нужно делать с осторожностью и пониманием, однако таким путем ты можешь настроить тему вордпресс под себя в полной мере. В отличие от редактирования 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 — Если у тебя возникли трудности с освоением изложенного материала — то этот плагин создаст для тебя дочерную тему одним нажатием кнопки!
  • Иерархия шаблонов WordPress на Wodrpress.org — cтраницы WordPress сайта собираются подобно пазлу из файлов-шаблонов. Если нужно «покопать глубже» — то WordPress.org должен быть твоей первой остановкой

Надеюсь, в статье есть «полезности» для тебя? Поделись статьей с друзьями в социальных сетях.
А мне оставь комментарий внизу страницы. 🙂
Удачи!
Александр Коваль

Метки: