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

Languages: English • Themes 日本語 Français • Português do Brasil • Русский • Slovenčina • 中文(简体) • (Add your language)

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

Внимание! Если информация ниже вам покажется сложной для понимания, то можно воспользоваться более актуальным и быстрым способом создания дочерней темы с помощью плагина Child Theme Configurator

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

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

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

1 Структура папки
2 Необходимый файл style.css
3 Пример простой дочерней темы
- 3.1 Примечание для директивы @import
- 3.2 Примечание для языков с письмом справа налево
4 Использование functions.php
- 4.1 Привязка/вставка файлов в вашу дочернюю тему
- 4.2 Использование форматов записей
5 Файлы шаблона
6 Другие файлы
7 Смотрите также

Структура папки

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

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

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

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

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

Необходимый файл 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:        0.1.0
*/

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

Theme Name. (обязательно) Название дочерней темы.
Theme URI. (опционально) Адрес сайта дочерней темы.
Description. (опционально) Описание дочерней темы. Например: Моя первая дочерняя тема, бугага!
Author URI. (опционально) Адрес сайта автора дочерней темы.
Author. (опционально) Имя автора дочерней темы.
Template. (обязательно) Название папки родительской темы, регистрозависимое.
- ПРИМЕЧАНИЕ. При изменении данной строки вы должны переключится на другую тему и обратно на дочернюю тему.
Version. (опционально) Версия дочерней темы. Например: 0.1, 1.0.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
Theme Name: Twenty Ten Child
Template: twentyten
*/

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

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

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

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

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

Структура файла functions.php проста: открывающий тег PHP в начале, закрывающий тег 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 родительской темы просто объявив ее снова.

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

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

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

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

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

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

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

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

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

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

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

Другие файлы

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

Смотрите также

Создание тем
Дочерние темы в WordPress - с примерами на основе Twenty Twelve
How to Modify WordPress Themes the Smart Way - статья по дочерним темам (англ.)
How to make a child theme for WordPress: A pictorial introduction for beginners - иллюстрированное представление дочерних тем (англ.)
Introducing Thirty Ten - гид по созданию дочерней темы для темы Twenty Ten (англ.)

-- User:Bruha

Codex