Статьи

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

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

Может быть, вы хотите зарегистрировать новый шрифт или добавить новый файл шаблона. Может быть, вы хотите добавить код из одного из учебных пособий или курсов здесь, на Envato Tuts + . Или, возможно, вы хотите использовать тему в качестве основы для темы вашего собственного дизайна.

У вас может возникнуть желание просто пойти и отредактировать исходный код сторонней темы (то есть темы, которую вы не написали сами), но не делайте этого! При следующем обновлении этой темы будут загружены новые файлы, и вы потеряете все внесенные изменения.

Разочарование по меньшей мере.

Но что вы можете сделать, если вам нужно отредактировать тему?

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

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

В этом уроке я собираюсь показать вам, как создать дочернюю тему в WordPress. Я также дам вам несколько советов о том, как работают дочерние и родительские темы, чтобы вы знали, какой набор кода используется для отображения контента на вашем сайте.

Первое, что нужно сделать, это создать дочернюю тему в папке wp-content / themes . Дочерняя тема должна иметь два файла для работы: таблицу стилей и файл функций. Вы также можете добавить дополнительные файлы, такие как файлы шаблонов или включаемые файлы.

Создайте папку для вашей дочерней темы в папке тем и дайте ей подходящее имя. Я называю мою тему ребенка .

Внутри этой папки создайте файл с именем style.css .

Вверху этого файла добавьте следующий закомментированный код:

01
02
03
04
05
06
07
08
09
10
11
/*
Theme Name: Tutsplus Child Theme.
Theme URI: https://github.com/rachelmccollin/tutsplus-child-theme
Description: Theme to support tutsplus tutorial.
Author: Rachel McCollin
Textdomain: tutsplus
Author URI: https://rachelmccollin.com/
Template: twentynineteen
 
Version: 1.0
*/

Это говорит WordPress, что это тема и предоставляет ту же информацию о теме, что и в любой теме — с одним дополнением. Template: twentynineteen сообщает WordPress, что это ребенок темы Twenty Nineteen.

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

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

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

Вместо этого в свой файл функций добавьте этот код:

01
02
03
04
05
06
07
08
09
10
<?php
 
/* enqueue script for parent theme stylesheet */
function tutsplus_parent_styles() {
     
    // enqueue style
    wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );
         
}
add_action( ‘wp_enqueue_scripts’, ‘tutsplus_parent_styles’);

Это правильно ставит в очередь таблицу стилей из родительской темы, используя get_tempate_directory_uri() чтобы найти эту тему (каталог шаблонов — это папка, в которой хранится родительская тема, а каталог таблиц стилей — это папка, в которой хранится текущая тема).

Если вы хотите добавить какой-либо стиль в свою дочернюю тему, чтобы переопределить или дополнить стиль в родительской теме, вернитесь к таблице стилей для своей дочерней темы и добавьте ее туда. Не добавляйте в файл функций и не пытайтесь ставить в очередь больше таблиц стилей.

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

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

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

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

  1. файл шаблона архива категории для этой конкретной категории, используя slug: category-travel.php
  2. файл шаблона архива категории для этой конкретной категории, используя ID: category-23.php
  3. Общий архивный файл категории : category.php
  4. общий архивный файл: archive.php
  5. всеобъемлющее: index.php

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

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

Вот несколько примеров, используя пример категории выше:

  • Если у вашей дочерней темы есть archive.php и index.php, а у вашей родительской темы — category.php и index.php , тогда WordPress будет использовать category.php из родительской темы, поскольку она самая высокая в иерархии.
  • Если у вашей дочерней темы есть category.php и index.php, а у вашей родительской темы есть archive.php и index.php , WordPress будет использовать файл category.php из дочерней темы, поскольку это самый высокий уровень в иерархии.
  • Если у вашей дочерней темы есть archive.php и index.php, а у вашей родительской темы есть archive.php и index.php , WordPress будет использовать файл archive.php из вашей дочерней темы. Это связано с тем, что в иерархии имеется две копии файла с наивысшим значением, а дочерняя тема переопределяет родительскую тему.

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

Функции работают не так, как файлы шаблонов, и немного менее просты.

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

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

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

1
2
3
4
5
6
7
8
if ( ! function_exists( ‘tutsplus_function_name’ ) ) {
 
    function tutplus_function_name() {
     
    // contents of function
     
    }
}

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

Но что, если функция родительской темы не подключаема, и вы хотите переопределить ее?

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

Представьте, что функция в родительской теме выглядит так:

1
2
3
4
5
6
function tutplus_parent_function() {
         
    // contents of function here
 
}
add_action ( ‘init’, ‘tutplus_parent_function’ );

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

1
2
3
4
5
6
function tutplus_child_function() {
         
    // contents of function here
 
}
add_action ( ‘init’, ‘tutplus_child_function’, 20 );

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

1
2
3
4
5
6
function wpmu_remove_parent_function(){
     
    remove_action( ‘init’, ‘tutplus_parent_function’ );
 
}
add_action( ‘wp_head’, ‘wpmu_remove_parent_function’ );

Обратите внимание, что вы все равно должны поместить remove_action() в другую функцию, в этом случае подключенную к wp_head() .

Тогда вы могли бы написать функцию для дочерней темы так, как если бы она не существовала в родительской теме — не забывая при этом называть ее так же!

Дочерние темы имеют два основных назначения:

  • С темой, которая была разработана для использования в качестве родительской темы (часто называемой платформой). Каркас не предназначен для использования сам по себе: вместо этого вы добавляете стили и дополнительные файлы шаблонов с дочерней темой.
  • Позволяет редактировать родительскую тему без непосредственного ее редактирования или добавлять дополнительные файлы шаблонов. Это означает, что когда родительская тема будет обновлена ​​в будущем, вы не потеряете свою работу.

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

  • Темы WordPress
    Двадцать девятнадцать разрывов: использование новой темы WordPress по умолчанию
    Дэвид Гвайер