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

123Внести изменения или дополнения в любую тему оформления WordPress можно как с помощью  редактора встроенного в администраторский раздел («Внешний вид -> Редактор»), так и путем редактирования файлов в папке темы (например, «wp-content/themes/twentytwelve/»). Однако, обновление тем при выходе новых версий приведет к потере внесенных ранее изменений и дополнений. Что же делать? Не изменять темы WordPress? Не обновлять на новые версии?  Нет. Есть предусмотренное разработчиками движка WordPress элегантное решение — дочерняя тема.

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

Рассмотрим кратко принцип создания простой дочерней темы. В качестве родительской темы выберем для примера Twenty Twelve — одну из стандартных тем WordPress с адаптивным дизайном.

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

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

  • wp-content
    • themes (папка со всеми установленными темами)
      • twentytwelve (папка родительской темы Twenty Twelve)
      • child-twentytwelve (папка создаваемой дочерней темы — название папки может быть любым)
        • style.css (обязательный файл стилей с информационным заголовком)

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

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

Правила оформления файла style.css дочерней темы WordPress

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

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

/*
Theme Name: Child-TwentyTwelve
Theme URI: http://kataev.ru/
Description: Дочка темы Twenty Twelve
Author: Алексей Катаев
Author URI: http://kataev.ru/
Template: twentytwelve
Version: 1.0.2
*/

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

  • Theme Name — название дочерней темы (обязательная запись).
  • Theme URI — адрес сайта дочерней темы.
  • Description —  описание дочерней темы. Например: Моя первая дочерняя тема!
  • Author URI —  адрес сайта автора дочерней темы.
  • Author — имя автора дочерней темы.
  • Template — Название папки родительской темы (обязательная запись).
  • Version — версия дочерней темы. Например: 1.0.2

Часть после закрывающего «*/" используется как обычный файл стилей. Здесь можно записывать правила стилей, которые будут применены для этой темы в WordPress. Следует заметить, что файл стилей дочерней темы полностью заменяет собой файл стилей родительской темы. Поэтому, если требуется просто внести  незначительные изменения во внешний вид родительской темы, а не переписывать ее полностью, тогда необходимо импортировать файл стилей родительской темы (например, с помощью директивы @import), и затем уже добавлять изменения. Пример:

/*
Theme Name: Child-TwentyTwelve
Description: Дочка темы Twenty Twelve
Template: twentytwelve
Version: 1.0.1
*/
@import url("../twentytwelve/style.css");

/*Изменение величины отступа после статьи*/
.site-content article {
 margin-bottom: 16px;
 margin-bottom: 1.142857143rem;
}

Файл functions.php дочерней темы WordPress

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

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

Подробнее о создании тем можно посмотреть в следующих материалах сайта codex.wordpress.org:
— Дочерние темы
— Создание тем