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

- Николаенко Максим · Опубликовано 13 февраля, 2013 · Обновлено 27 августа, 2020

Содержание скрыть

1 С ТЕОРЕТИЧЕСКОЙ ЧАСТЬЮ ЗАКОНЧИЛИ И ПЕРЕХОДИМ К ПРАКТИЧЕСКОЙ

2 Пример информационного заголовка дочерней темы

5 Пример импорта стилей из родительской темы

Никогда о дочерних темах не слышал, но у одного клиента нашел такую реализацию и решил, что надо бы о них написать. В последствии попробовать работать с этим методом.

Итак, из кодекса узнал, что дочерняя тема, это тема, которая расширяет функционал другой (родительской) темы, при этом дочерняя тема позволяет изменять функционал родительской. Как пример родительской темы возьмем стандартную Twenty Twelve, на ней и будем тренироваться.

Создать дочернюю тему очень просто. Создайте папку twentytwelve-child, положите в нее соответствующим образом написанный файл style.cssи дочерняя тема готова! С небольшим понятием о HTML и CSS, вы можете изменить эту очень простую дочернюю тему — меняя внешний вид и верстку родительской темы, но, не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.

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

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

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

public_html

wp-content

themes (папка со всеми темами)
- twentwelve (папка родительской темы Twenty Twelve)
- twentwelve-child (папка нашей дочерней темы; может быть названа как угодно)
  - style.css (необходимый файл, должен быть назван style.css)

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

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

С ТЕОРЕТИЧЕСКОЙ ЧАСТЬЮ ЗАКОНЧИЛИ И ПЕРЕХОДИМ К ПРАКТИЧЕСКОЙ

Обязательный в дочерней теме файл style.css

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

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

Пример информационного заголовка дочерней темы

/*
Theme Name:     twentytwelve-child
Theme URI:      http: //wp-admin.com.ua/
Description:    Дочерняя тема для темы Twenty Twelve
Author:         Ваше имя
Author URI:     https://wp-admin.com.ua/perenos-sayta-wordpress-katalog-stattey/
Template:       twentytwelve
Version:        0.1.0
*/

Theme Name: twentytwelve-child

Theme URI: http: //wp-admin.com.ua/

Description: Дочерняя тема для темы Twenty Twelve

Author: Ваше имя

Author URI: https://wp-admin.com.ua/perenos-sayta-wordpress-katalog-stattey/

Template: twentytwelve

Version: 0.1.0

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

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

Theme URI. (опционально) Адрес сайта дочерней темы.

Description. (опционально) Описание дочерней темы. Например: Моя первая дочерняя тема, бугага!

Author URI. (опционально) Адрес сайта автора дочерней темы.

Author. (опционально) Имя автора дочерней темы.

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

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

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

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

Пример импорта темы из родительской

Важно! Файл стилей дочерней темы полностью заменяет файл стилей родительской темы. (Файл стилей родительской темы вообще не загружается WordPress). Если вы просто хотите внести небольшие изменения во внешний вид родительской темы, а не переписывать ее с нуля — вы должны импортировать файл стилей родительской темы при помощи директивы @import, и затем добавлять изменения.

Пример импорта стилей из родительской темы

Создаем новую папку в wp-content/themes, и называем ее twentwelve-child.
В папке twentwelve-child создаем файл с именем style.css.

/*
Theme Name: twentytwelve-child
Theme URI:      http: //wp-admin.com.ua/
Description: Дочерняя тема для темы Twenty Twelve
Author: Ваше имя
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");
 
h1.site-title a { color: red; }

Theme Name: twentytwelve-child

Theme URI: http: //wp-admin.com.ua/

Description: Дочерняя тема для темы Twenty Twelve

Author: Ваше имя

Template: twentytwelve

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

h1.site-title a { color: red; }

Переходим во Внешний вид › Темы и активируем нашу новую тему Twenty Twelve Child.

Важное правило для @import

Не должно быть никаких других правил CSS выше директивы @import.

Примечание для языков с письмом справа налево

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

 /*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url("../twentytwelve/rtl.css");

Theme Name: Twenty Twelve Child

Template: twentytwelve

@import url("../twentytwelve/rtl.css");

WordPress автоматически загрузит файл rtl.css только если is_rtl(). Даже если родительская тема не содержит файла rtl.css, рекомендуется добавить rtl.css в вашу дочернюю тему.

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

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

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

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

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

Пример кода

function favicon_link() {

    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";

}

add_action('wp_head', 'favicon_link');

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() {
        //  Ваш код.
    }
}

if (!function_exists('theme_special_nav')) {

function theme_special_nav() {

// Ваш код.

}

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

Привязка/вставка файлов в вашу дочернюю тему

Когда вам нужно вставить файлы, которые находятся внутри папки вашей дочерней темы, используйте get_stylesheet_directory(). Т.к. файл стилей родительской темы заменяется файлом style.css вашей дочерней темы, который находится в корневой папке дочерней темы, get_stylesheet_directory() указывает на папку вашей дочерней темы (а не на папку родительской темы).

Вот пример использования require_once, который показывает, как можно использовать get_stylesheet_directory(), когда подключаемый файл находится в папке дочерней темы.

require_once( get_stylesheet_directory(). '/my_included_file.php' );

1	require_once( get_stylesheet_directory(). '/my_included_file.php' );

Использование форматов записей

Дочерняя тема наследует форматы записей, определенные в родительской теме. Но, при создании дочерних тем, будьте осторожны, т.к. функция add_theme_support(‘post-formats’) переопределит форматы, заданные родительской темой, а не добавит к ней.

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

Шаблоны в дочерней теме ведут себя так же, как style.css, они заменяют соответствующие файлы родительской темы. Дочерняя тема может заменить любой родительский файл шаблона просто создав файл с таким же именем. (ПРИМЕЧАНИЕ. Файл index.php может быть заменен только в WordPress версии 3.0 и выше.).

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

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

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

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

Вроде все, думаю если вы, как и я проделаете все рекомендации, то принцип создания тем на основе родительских вам будет понятен. Статья была взята из CODEX WordPress и опубликована на моем сайте, очень уж хотелось поделиться отличным методом разработки тем. Удачи в разработке тем на основе родительских!