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

Однажды я вносил правки в файл style.css родительской темы. И знал, что это не очень правильно, потому что все это может слететь, как только попытаюсь обновить Вордпресс-тему. Но тогда мне нужно было сделать быстро.

Я понимал, что нужно создавать дочернюю тему, но это казалось чем-то сложным. Поэтому  откладывал эту задачу на потом, чтобы заняться ею когда будет побольше свободного времени. Так необходимо вникнуть в процесс и все сделать правильно с первого раза (перфекционизм).

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

Я прочел предупреждение и ради любопытства кликнул по ссылке.

Обратите внимание: Все изменения, сделанные вами в файлах тем, будут утеряны. Для изменения можно создавать дочерние темы.

Инструкция по созданию дочерней темы оказалась весьма понятной и легкой. Полную версию вы можете посмотреть на официальном сайте. А здесь я приведу только то, что мне понравилось или понадобилось на тот момент — то есть ничего лишнего, тролько самое необходимое. Кроме того я отформатировал материал так, чтобы воспринимать информацию было легче.

Что такое дочерняя тема

Дочерняя тема WordPress — это тема, которая расширяет функционал другой темы, называемой родительской темой, и позволяет вам изменять или дополнять функционал родительской темы.

С небольшим понятием о HTML и CSS, вы можете изменить эту очень простую дочернюю тему — меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом,

Когда базовая тема обновляется, все ваши докрутки в дочерней сохраняются.

По этой причине:

Дочерние темы — рекомендованный способ внесения изменений в тему.

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

Эта статья рассказывает как создать простую дочернюю тему, и объясняет что вы можете с ней сделать. Как пример родительской темы используется Twenty Ten.

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

Создать дочернюю тему очень просто.

1. Придумайте название дочерней темы.
2. Создайте папку с этим именем.
3. Положите в нее файл style.css 
4. Дочерняя тема готова!

Структура папок WordPress

Дочерняя тема размещается в своей собственной папке внутри wp-content/themes. Схема ниже показывает иерархию дочерней темы относительно ее родительской темы (Twenty Ten) в типичной структуре папок WordPress:

• site.ru
  • wp-content
    • themes ^{(папка со всеми темами)}
      • twentyten ^{(папка родительской темы Twenty Ten)}
      • twentyten-child ^{(папка нашей дочерней темы; может быть названа как угодно)}
        • style.css ^{(необходимый файл, должен быть назван style.css)}

Эта папка может содержать как style.css, так и дополнительные файлы, относящиеся к теме:

1. style.css ^{(обязательно)}
2. functions.php ^{(опционально)}
3. файлы шаблона ^{(опционально)}
4. другие файлы ^{(опционально)}

Давайте посмотрим, как все это работает.

Необходимый файл style.css

style.css — единственный необходимый файл в дочерней теме. Он обеспечивает информационный заголовок, по которому WordPress опознает дочернюю тему, и он заменяет style.css родительской темы.

Как и с любой темой WordPress, информационный заголовок должен быть в начале файла, единственное отличие — в дочерней теме строка Template: обязательна, чтобы WordPress знал, какая тема является родительской.

Вот пример информационного заголовка файла style.css дочерней темы:

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //example.com/
Description:    Дочерняя тема для родительской темы Twenty Ten 
Author:         Ваше имя
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        1.0
*/

Краткое пояснение каждой строки:

• Theme Name ^{(обязательно)} Название дочерней темы.
• Theme URI ^{(опционально)} Адрес сайта дочерней темы.
• Description (опционально) Произвольное описание дочерней темы.
• Author URI (опционально) Адрес сайта автора дочерней темы.
• Author (опционально) Имя автора дочерней темы.
• Template ^{(обязательно)} Название папки родительской темы, регистрозависимое.
  

  ПРИМЕЧАНИЕ. При изменении данной строки вы должны переключится на другую тему и обратно на дочернюю тему.

• Version. (опционально) Версия дочерней темы. Например: 1.0.

Часть после закрывающего */ используется как обычный файл стилей. Здесь вы пишите правила стилей, которые будут применены WordPress.

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

Поэтому, если вы просто хотите внести несколько небольших изменений во внешний вид родительской темы, а не переписывать ее с нуля — вы должны импортировать файл стилей родительской темы, и затем добавлять изменения!

Следующий пример показывает как это сделать, используя директиву @import.

Пример простой дочерней темы

Наша родительская тема для этого примера — Twenty Ten. Нам нравится практически все в ней, кроме цвета текста заголовка сайта, который мы хотим изменить с черного на зеленый. Используя дочернюю тему, мы сделаем это за три простых шага:

1. Создаем новую папку в wp-content/themes, и называем ее twentyten-child (или как-нибудь еще).
2. Сохраняем код ниже в файл с именем style.css, и кладем его в созданную папку.
3. Переходим во Внешний вид -> Темы и активируем нашу новую тему Twenty Ten Child.

/*
Theme Name: Twenty Ten Child
Description: Дочерняя тема для родительской темы Twenty Ten 
Author: Ваше имя
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
    color: #009900;
}

Вот что делает выше написанный код, шаг за шагом:

1. /* открывает информационный заголовок дочерней темы.
2. Theme Name: объявляет название дочерней темы.
3. Description: объявляет описание дочерней темы. (Опционально; может быть пропущено.)
4. Author: объявляет имя автора дочерней темы. (Опционально; может быть пропущено.)
5. Template: объявляет родительскую тему, т.е. название папки родительской темы в правильном регистре.
6. */ закрывает информационный заголовок дочерней темы.
7. Директива @import подключает файл стилей родительской темы.
8. Правило #site-title a задает цвет текста (зеленый) для заголовка сайта, переопределяя соответствующее правило в родительской теме.

Примечание для директивы @import

Не должно быть никаких других правил CSS выше директивы @import. Если вы поместите другие правила выше этой директивы, она не будет выполнена и файл стилей родительской темы не будет импортирован.

Использование functions.php

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

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

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

Вот правильное решение:

1. Вы создаете дочернюю тему.
2. Добавляете в нее файл functions.php
3. И помещаете вашу функцию туда.

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

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

Элементарный файл functions.php

Пример ниже показывает элементарный файл functions.php, который делает одну простую вещь: добавляет ссылку на favicon в элемент head HTML страниц.

function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');

Совет для тех, кто создает темы

Так как файл functions.php дочерней темы загружается первым, это значит, что вы можете делать функции своей темы расширяемыми, т. е. заменяемыми посредством дочерней темы, объявляя их условно. Пример:

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  Ваш код.
    }
}

В этом случае, дочерняя тема может переопределить функцию PHP родительской темы просто объявив ее снова.

Файлы шаблона

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

Эта особенность WordPress позволяет вам изменять файлы шаблонов родительской темы без непосредственного их редактирования, так что все изменения сохранятся при обновлении родительской темы.

Вот несколько примеров использования файлов шаблонов в дочерней теме:

• Добавление шаблона, отсутствующего в родительской теме (например, шаблона для страницы карты ссылок, или для одноколоночных страниц, которые можно будет выбрать в свойствах страницы).
• Для добавления более специфичных шаблонов (см. иерархию шаблонов), чем использует родительская тема (например, шаблон tag.php для страниц меток вместо обычного archive.php родительской темы).
• Для замены родительского шаблона (например, создать свой собственный шаблон home.php для замены родительского home.php).

Другие файлы

В дополнение к файлам style.css, functions.php, файлам шаблонов (index.php, home.php и т.д.), дочерняя тема может использовать любые типы файлов полноценных тем, если они правильно подключены.

Например, дочерняя тема может использовать иконки и изображения, которые подключены в файле стилей, файлы JavaScript, дополнительные PHP файлы, вызываемые из шаблонов или functions.php.

On 10.10.17, at 13:54, Евгений Самсонов wrote:
> я чайлды не использую. вот решил сделать 1 нормальную тему на бутсрапе для новых проектов, если будут стрелять уже что-то своё сверстаю
ну и зря, базовая обновляется, а все докрутки в дочерней сохраняются)