8 Сен 2015

Дочерняя тема или Child Themes для WordPress

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


Для чего нужна дочерняя тема?

Есть несколько причин, для чего вы должны использовать дочернюю тему:

  1. Если вы вносите изменения непосредственно в готовую тему, то при её обновлении вы потеряете все внесенные изменения. При использовании же дочерней темы вы будете уверены, что все изменения будут сохранены.
  2. Использование дочерней темы может ускорить время наладки темы
  3. Использование дочерней темы поможет вам лучше разобраться, как устроены темы WordPress

Задача: Создать дочернюю тему для выбранной темы WordPress

Решение: Чтобы создать дочерную тему нам, конечно, понадобиться основная тема, с которой мы будем работать и которую мы будем изменять.

Дочерняя тема состоит из самой директории и двух файлов в ней style.css and functions.php, которые вы должны создать.

Первым шагом создания дочерней темы является создание её директории,т.е папки с названием темы и помещаем её в wp-content/themes.

Рекомендуется (хотя и не обязательно, особенно если вы создаете тему для общего пользования), чтобы название директории дочерней темы называлось, как и родительская, но с добавлением "-child".
Вы должны быть уверены, что в названии директории дочерней темы нет лишних символов или пробелов, которые могут привести к ошибке.

child-theme-items

На картинке вы видите, что мы назвали директорию twentyfifteen-child, тем самым указывая, что родительской темой является тема Twenty Fifteen.

Следующий шаг - это создание файла со стилями для дочерней темы style.css
Файл со стилями должен иметь следующий информационыый заголовок:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

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

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

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

Финальным шагом является установка связи стилей родительской и дочерней темы. Имейте ввиду, что предыдущий метод связывания стилей был импорт стилей родительской темы, используя @import. В настоящее время это уже устаревшая практика.

Сейчас корректным методом является использование функции wp_enqueue_script() в файле functions.php вашей дочерней темы. Именно поэтому необходимо создание файла functions.php в директории вашей дочерней темы.

Первой строчкой в файле functions.php должен быть открытый PHP tag < ?php , после которого вы можете устанавливать связь стилей. Следующий пример функции будет работать только в том случае, если родительская тема имеет только один главный файл стилей style.css, содержащий все стили. Если же в родительской теме имеется более, чем одного файла .css file (например,ie.css, style.css, main.css), то вы должны убедиться, что поддерживаются все зависимости стилей родительской темы.


	< ?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
? >

Стили вашей дочерней темы обычно будут загружаться автоматически. Если этого не происходит, то вам придется поставить в очередь и их. Настройки 'parent-style' как зависимость будет гарантировать, что стили вашей дочерней темы загрузятся.

< ?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
? >

Теперь ваша дочерняя тема готова к активации. Зайдите в админку вашего сайта- Внешний вид -Темы. Вы должны увидеть вашу дочернюю тему, готовую к активации.
Примечание: вы должны пересохранить ваше Меню в Внешний вид - Меню и настройки темы после установки дочерней темы.

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

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

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

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

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

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

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

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

СОВЕТ ДЛЯ РАЗРАБОТЧИКОВ ТЕМ. Факт, что файл functions.php дочерней темы загружается первым, означает что вы можете делать функции своей темы расширяемыми, т.е. заменяемыми посредством дочерней темы, объявляя их условно. Пример:

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

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


< ?php // Открытый PHP тэг - ничего не должно быть над ним, даже пробела

// подключение необходимой функции
function favicon_link() {
    echo '' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

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

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

Вот пример использования require_once, который показывает, как можно использовать get_stylesheet_directory(), когда подключаемый файл находится в папке дочерней темы. Ниже показан пример, используя функцию require_once, который показывает, как вы можете использовать get_stylesheet_directory, если хотите привязать файл, находящийся внутри директории дочерней темы.
require_once( get_stylesheet_directory() . '/my_included_file.php' );
где my_included_file.php -это ваш подключенный файл .php

Другая полезная информация

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

Поддержка RTL (для языков с письмом справа налево)

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

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

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

Локализация

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

  1. создаем директорию languages в дочерней теме, например, my-theme/languages/
  2. создаем языковые файлы. Ваши файлы должны быть с расширениями следующего вида ru_RU.po и ru_RU.mo (или другого необходимого языка)
  3. загрузите функцию textdomain. Используйте load_child_theme_textdomain() в файле functions.php при выполнении действия the after_setup_theme. Textdomain, определенный в load_child_theme_textdomain () , следует использовать , чтобы перевести все строки в дочерней теме.
  4. Используйте функции GetText, чтобы добавить i18n поддержку для строк.

Пример: textdomain

< ?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>
 

Пример: gettext functions

< ?php
_e( 'Code is Poetry', 'my-child-theme' );
?>

Суммируя всё, все строки в "my-child-theme" должны быть переводимыми. Файлы перевода должны находится в директории "/languages/".

Понравилась статья? Поделись с друзьями!

4 thoughts on “Дочерняя тема или Child Themes для WordPress

    1. Готовый шаблон Вам нужно поставить как обычный. Ничего настраивать, как описано в статье, не нужно.

  1. Доброго времени! Установили готовую тему с дочерней готовой сразу, но после её активации пишет — «Извините, вам не разрешено просматривать эту страницу.». А страницы магазина и блога не изменяются после редактирования в главной теме (виджеты не добавляются по бокам)? В чем может проблема?

    1. Извините, Павел, пропустила Ваш вопрос.Думаю уже не актуально, но отвечу. Скорее всего произошел конфликт установленных плагинов с новой темой. Нужно попробовать переключиться на тему по умолчанию. Если всё будет в порядке — значит нужно отключить все плагины, еще раз поставить новую тему и включать по одному все плагины. Так Вы найдете плагин, который конфликтует с Вашей темой. Я написала «попробовать переключиться», но насколько я помню, при такой ошибке обратно зайти в админку Вы не сможете и все изменения нужно делать на FTP. Если Вы не знаете , как это делать -пишите на почту, я помогу.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.