Дочерняя тема в WordPress

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

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

Что такое родительская тема?

Родительская тема содержит файлы шаблонов и дополнительные файлы(стили, скрипты, шрифты…). Родительская тема может работать без дочерней, а вот последней требуется наличие первой, так как дочерняя расширяет возможности и модифицирует внешний вид РТ.

Что такое дочерняя тема?

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

Итак, дочерние темы WordPress:

  • делают возможным настройку тем;
  • хранят настройки в отдельной папке;
  • позволяют обновляться РТ, не удаляя ваши изменения;
  • предоставляют протестировать функциональность родительской темы;
  • экономят время при разработке сайтов; и
  • это отличный способ начать изучать разработку тем.

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

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

1 Создать папку дочерней темы

Первым делом необходимо создать новую папку в каталоге всех тем, расположенном wp-content/themes. Затем дать название новой папке. Наименование папки дочерней темы формируется из названия папки родительской темы и добавления на конце -child. К примеру, дочерняя папка для темы twentyfifteen будет называется twentyfifteen-child.

2 Создать файл style.css в каталоге дочерней темы

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

/*
 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:  twentyfifteenchild
*/

Обязательными строками являются:

  • Theme name – уникальное название ДТ
  • Template – наименования каталога РТ. В нашем примере родительская тема Twenty Fifteen, то соответственно Template будет twentyfifteen.

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

3 Подключить таблицы стилей

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

Раньше распространенной практикой был импорт таблицы стилей РТ с помощью директивы @import. Сейчас данный способ не рекомендуется применять, поскольку таблица стилей РТ дольше грузится. Кроме того, стили родительской темы могут быть загружены дважды.

Чтобы правильно поставить style.css родительской темы, надо зарегистрировать этот файл функцией wp_enqueue_style() и ‘зацепить’ на хук-событие wp_enqueue_scripts в functions.php дочерней темы.

Если в каталоге родительской темы только один style.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' );
 
}

Если родительская тема использует более одного css файла(напр. ie.css, style.css, main.css), то в этом случае необходимо учесть взаимосвязь таблиц стилей и подключить нужные.

Файл style.css дочерней темы также следует поставить в очередь на загрузку. Чтобы таблица стилей ДТ подключилась позже css файла РТ, надо в параметре функции указать зависимость. В нашем случае 'parent-style' является ID таблицы стилей родительской темы. Добавление версии дочерней темы в коде подключения стилей позволит в дальнейшем очистить кэш.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    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 ),
        wp_get_theme()->get('Version')
    );
}

4 Активировать дочернюю тему

В панели управления сайтом в ‘Внешний вид’ → ‘Темы’ активируйте вашу дочернюю тему.

После того, как Вы активируете тему, может понадобится повторно сохранить меню ‘Внешний вид’ → ‘Меню’ и другие настройки темы(в том числе, фон и изображения в заголовке).

Добавление файлов шаблонов

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

Правильный подход изменить файл шаблона РТ: скопировать его в папку дочерней темы и модифицировать. В таком случае файл шаблона родительской темы останется без изменений. Например, если вам надо изменить код в header.php РТ, просто скопируйте этот файл в папку ДТ и внести там поправки.

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

  • What The File
  • What Template File Am I Viewing?
  • Debug Bar

Также можно создавать файлы шаблонов, не содержащиеся в родительской теме. К примеру вы захотите добавить более специфический шаблон для конкретной страницы, которого нет в РТ, вроде отдельной страницы или архива рубрики(page-3.php будет загружаться страницы с ID 3).

Про подключение нужного файла шаблона WP узнаете из статьи об Иерархии шаблонов.

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

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

Таким образом, Вы можете добавить свои функции в functions.php, который находятся в дочерней теме, тем самым расширить функциональность родительской темы. Когда РТ будет обновляться, добавленные функции не удалятся.

В этом скрипте функция добавляет HTML тег для показа фавикон на сайт.

<?php // Opening PHP tag - nothing should be before this, not even whitespace
 
// Custom Function to Include
function my_favicon_link() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

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

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

Подключение других файлов

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

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

В следующем примере скрипт подключает php файл, размещенный в каталоге дочерней темы.

<?php require_once( get_stylesheet_directory(). '/my_included_file.php' ); ?>

Чтобы получить URL, а не путь, то надо использовать get_stylesheet_directory_uri(). Вот пример того, как показать изображение, которое хранится в подкаталоге ДТ /images.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" />

Подключение стилей и скриптов

Если Вы расширяете возможности темы с применением javascript и css, то файлы с расширениями .js и .css следует ставить в очередь за загрузку. Про подключение скриптов и стилей читайте здесь.

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

<?php
add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' );
function my_plugin_add_stylesheet() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

Особенности

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

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

Поддержка RTL

Рекомендуется включить поддержку RTL(справа налево), добавив rtl.css(с информацией о теме в заголовке) в дочернюю тему, даже если одноименный файл отсутствует в родительской теме. WordPress загрузит его, если is_rtl() возвращает true.

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

Интернационализация

Интернационализация дочерней темы означает ее подготовку к переводу на другие языки.

Этапы интернационализации дочерней темы:

1 Создать каталог для файлов перевода

  • к примеру: twentyfifteen-child/languages/

2 Добавить файлы перевода

  • Название файлов перевода имеют такую структуру he_IL.po и he_IL.mo(в зависимости от вашего языка). У плагинов файлы для перевода имеют такую структуру domain-he_IL.xx

3 Подключение файла перевода

  • Используйте load_child_theme_textdomain() в functions.php с хуком after_setup_theme.
  • В функциях перевода должен использоваться текстовый домен, указанный в load_child_theme_textdomain().

4 Применяйте GetText функции в файлах шаблонов дочерней темы для возможности перевода.

Подключение файла перевода дочерней темы. Чтобы перевод успешно производился специальными функциями(--(), -e() и др.), их текстовый домен должен быть twentyfifteenchild.

<?php
/**
  * Set up My Child Theme's textdomain.
  *
  * Declare textdomain for this child theme.
  * Translations can be added to the /languages/ directory.
  */
function twentyfifteenchild_theme_setup() {
    load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' );

Перевод GetText функцией. Текстовый домен, определенный в функции load_child_theme_textdomain(), должен использоваться в GetText функциях. Если был скопирован файл шаблона из родительской в дочернюю тему, то функциях перевода надо изменить параметр, отвечающий за текстовый домен.

<?php
esc_html_e( 'Code is Poetry', 'twentyfifteenchild' );

Перевод статьи: https://developer.wordpress.org/themes/advanced-topics/child-themes/