Дочерние темы WordPress

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

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

Зачем нужна дочерняя тема?

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

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

Что можно изменить в дочерней теме?

В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.

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

Создание дочерней темы

Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.

1. Создайте папку с любым названием в каталоге тем: wp-content/themes. Пусть twentyfifteen-child

2. Создайте в новой папке файл style.css. С содержимым:

   /**
    * Theme Name: Моя дочерняя тема
    * Template: twentyfifteen
    *
    * Не обязательные параметры:
    * Theme URI: http://example.com/
    * Description: Дочерняя тема для темы twentyfifteen
    * Author: Kama
    * Author URI: http://example.com/about/
    * Version: 1.0
    */
   
   /* импортируем стили родительской темы */
   @import url("../twentyfifteen/style.css");
   
   /* Свои дополнительные стили */
   .foo{ color:red; }

3. Зайдите во Внешний вид › Темы и активируйте новую тему «Моя дочерняя тема».

В результате у нас должна получиться такая структура:

wp-content
   └── themes
		 ├── twentyfifteen (родительская тема)
		 └── twentyfifteen-child (подтема; может иметь любое название)
				 └── style.css

twentyfifteen-child может содержать и другие файлы, среди них:

• style.css — (обязательный) полностью заменяет такой же файл родительской темы.

• functions.php — дополняет functions.php родительской темы (загружается перед ним).

• файлы шаблона — index.php, home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.

• другие файлы — любые другие файлы/папки/что угодно. Например, подтема может использовать новые изображения, которые подключаются в дополнительных CSS правилах.

Файл style.css

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

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

В информационном заголовке, который должен быть в начале файла, является обязательным параметр Template:. Именно по нему WP понимает, что это дочерняя тема и как называется родительская.

Пример style.css дочерней темы.

/**
 * Theme Name: Моя дочерняя тема
 * Template: twentyfifteen
 * Theme URI: http://example.com/
 * Description: Дочерняя тема для темы twentyfifteen
 * Author: Kama
 * Author URI: http://example.com/about/
 * Version: 1.0
 */

// стили родительской темы
@import url("../twentyfifteen/style.css");

// дополнительные стили
.foo{ color:red; }

• Theme Name — (обязательно) название дочерней темы.

• Template — (обязательно) регистрозависимое название папки родительской темы.

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

• Theme URI — адрес сайта дочерней темы.
• Description — описание дочерней темы.
• Author URI — адрес сайта автора дочерней темы.
• Author — имя автора дочерней темы.
• Version — версия дочерней темы.

Файл functions.php

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

Т.е. в случае дочерней темы, в PHP подключаются и работают оба файла functions.php дочерней и functions.php родительской темы.

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

Использование хуков

В файле footer.php в теме twentyfifteen есть событие twentyfifteen_credits. Чтобы добавить свой текст в подвал, можно использовать это событие, для этого добавим следующий код в functions.php дочерней темы:

add_action( 'twentyfifteen_credits', function() {
	echo 'Компания © 2015';
} );

Переопределение функции

В файле functions.php родительской темы twentyfifteen есть функция twentyfifteen_fonts_url() - регистрирует шрифты google. Выглядит она так:

if( ! function_exists( 'twentyfifteen_fonts_url' ) ){
	function twentyfifteen_fonts_url(){
		// код функции ...
	}
}

Условие ! function_exists('twentyfifteen_fonts_url') - если функция не существует, позволяет определить такую же функцию в functions.php дочерней темы.

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

Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:

function twentyfifteen_fonts_url() {
	return '';
}

if( ! function_exists('theme_function') ){
	function theme_function() {
		// Код.
	}
}

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

В дочерней теме можно использовать все те же файлы темы, что и в любой теме WP. Полный список читайте в статье «Иерархия шаблонов темы».

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

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

#1 Добавление шаблона, отсутствующего в родительской теме

Создадим шаблон для страницы "карта сайта". Для этого в подтеме создадим файл page-sitemap.php, а на сайте создадим страницу с ярлыком sitemap. Готово!

#2 Изменение шаблона, имеющегося в родительской теме

Допустим, у нас есть home.php в родительской теме и нам нужно его изменить.

1. Создаем home.php в подтеме.

2. Скопируем в него код файла из родительской темы.

3. Изменим скопированный код как нужно.

Как это работает: шаг за шагом

Процесс работы дочерней темы со стороны WordPress:

1. WP открывает style.css темы установленной в настройках системы и считывает заголовки.

2. Директива Template: объявляет что у темы есть родительская тема и указывает её название. Теперь WP работает с темой как с дочерней.

3. Дальше все файлы, кроме functions.php, подключаются с помощью locate_template(): проверяет существует ли файл в подтеме, если не существует, то подключается из родительской темы.

Локализация подтем

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

Для подключения есть спец. функция: load_child_theme_textdomain(). Используем её в functions.php подтемы:

add_action( 'after_setup_theme', 'my_child_theme_setup' );

function my_child_theme_setup() {
	load_child_theme_textdomain( 'my_child_theme', get_stylesheet_directory() . '/languages' );
}

Также, нужно создать файл перевода в дочерней теме: languages/en_US.mo.

Теперь можно использовать функции локализации WordPress в подтеме:

_e( 'Это нужно перевести на англ.', 'my_child_theme' );

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

Функции WordPress связанные с дочерними темами

• get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).

• get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).

• get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).

• get_template_directory() — получает путь до текущей темы (родительской, не дочерней).

• get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).

• get_template() — получает название каталога текущей темы (родительской, не дочерней).

• get_stylesheet_uri() — получает готовый URL на файл стилей style.css текущей темы. Если используется дочерняя тема, то получит ссылку на стили доч. темы. В этом случае для родительской темы такой функции в WordPress нет.

Т.е. если нужно получить ссылку на файл темы, но при этом используется дочерняя тема, то УРЛы от: get_stylesheet_directory_uri() и get_template_directory_uri() буду отличаться: первый будет на дочернюю тему, а второй на родительскую...

Заметки

Форматы записей

Функция add_theme_support( 'post-formats' ) переопределит форматы, заданные родительской темой, а не дополнит их.

@import в style.css дочерней темы

Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней... Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы... В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла...

Лучше подключить файлы стилей по-отдельности в HTML: сначала стили родительской темы, а затем дочерней, чтобы они были ниже в HTML коде и перебивали родительские стили. Делается это так:

add_action('wp_enqueue_scripts', 'my_theme_styles' );
function my_theme_styles() {
	wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' );
	// не обязательно, правильная родительская тема подключит его сама.
	//wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') );
}

В результате в HEAD части HTML документа мы получим две ссылки на два файла стилей, которые при загрузке будут загружаться параллельно, а не последовательно. Это сэкономит нам время на один запрос к серверу от бразуера.

—