Полное руководство по работе с дочерними темами WordPress

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

По сути, использование дочерних тем сделает вас более эффективным — сохранение кода, который вы используете для каждого проекта, в собственной родительской теме или использование готовой родительской темы, такой как одна из наших, будет означать, что вы придерживаетесь СУХИЕ (не повторяйтесь) принципы.

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

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

Понимание родительских и дочерних тем

Теоретически любая тема может выступать в качестве родительской темы, хотя некоторые из них лучше подходят для этой роли (включая нашу!). Если вы используете одну из наших тем и хотите настроить ее для своего собственного проекта, гораздо лучше использовать для этого дочернюю тему, чем взламывать основную тему, что означает, что вы потеряете все свои изменения при обновлении. тему для будущих версий. Чтобы создать дочернюю тему, вы просто создаете новую тему и добавляете следующее в начало ее таблицы стилей. В моем примере ниже в качестве родителя используется тема HeroThemes HelpGuru, но вы можете использовать любую тему, включая другой продукт HeroTheme, например KnowAll.

Начните создавать свою базу знаний сегодня!

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

Получить тему

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Важными строками являются эти две:

Template: helpguru
@import url("../helpguru/css/style.css");

В первом разделе указывается шаблон, который сообщает WordPress, что это дочерняя тема, а ее родителем является тема HelpGuru. Обратите внимание, что вы используете здесь имя папки родительской темы, а не название темы (поэтому выше я использовал «helpguru», а не «HelpGuru»).

Второй раздел импортирует таблицу стилей из родительской темы, что означает, что все стили родительской темы будут активированы в вашей дочерней теме. Затем вы добавляете свой собственный стиль под этим объявлением @import — это означает, что стили из обеих тем будут использоваться, но если объявление существует в обеих таблицах стилей для одного и того же элемента, CSS дочерней темы будет преобладать из-за каскада (поскольку ваша дочерняя тема стиль идет после стиля из родительской темы).

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

Файлы шаблонов родительской и дочерней тем

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

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

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

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

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

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

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

• Отдельные сообщения для пользовательского типа сообщений «продукт» будут отображаться с использованием single-product.php из дочерней темы.
• Отдельные сообщения для других типов сообщений (включая обычные сообщения) будут отображаться с использованием single.php из дочерней темы.
• Статические страницы будут отображаться с использованием page.php из родительской темы.
• Списки для категории виджетов будут отображаться с использованием category-widgets.php из дочерней темы.
• Списки других категорий будут отображаться с использованием category.php из родительской темы.
• Другие списки архивов будут отображаться с использованием archive.php из родительской темы.
• Результаты поиска будут отображаться с использованием search.php из родительской темы.
• 404 страницы будут отображаться с использованием 404.php из родительской темы.
• Другие страницы без определенного файла шаблона будут отображаться с использованием index.php из дочерней темы.

Двигаясь дальше — переопределение функциональности родительской темы

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

Предупреждение! Если все, для чего вы используете свою дочернюю тему, — это добавление дополнительных функций, возможно, вам лучше написать плагин. К сожалению, файлы функций в родительской и дочерней темах не взаимодействуют так же, как таблицы стилей, на самом деле они работают противоположным образом (знаю, это сбивает с толку). WordPress вызывает функции из вашей родительской темы после функций из дочерней темы, что означает, что они могут переопределить функции дочерней темы. Я знаю, это звучит немного затруднительно: вы создали дочернюю тему, потому что это то, что вы хотите на своем сайте, верно? Что ж, к счастью, есть способы преодолеть это. Первый метод — это тот, который вы используете в своей дочерней теме, и он заключается в установке приоритета при прикреплении ваших функций к соответствующему действию или фильтрующим хукам. Второй делается в родительской теме, чтобы сделать ваши функции подключаемыми. Я перейду к этому через мгновение, но сначала давайте посмотрим на метод в вашей дочерней теме.

Использование приоритета для переопределения функциональности родительской темы

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

• $tag — уникальный идентификатор действия или хука фильтра.
• $function_to_add — имя вашей функции
• $priority — приоритет, с которым вы хотите подключить свою функцию (подробнее об этом очень скоро)

С add_filter() вы можете использовать четвертый необязательный параметр, $arguments , но он не имеет особого отношения к дочерним темам. В большинстве случаев используются только первые два параметра (оба обязательны), но вы можете использовать необязательный параметр $priority , чтобы переопределить функцию родительской темы функцией дочерней темы. Чем выше приоритет, тем позже он загружается: по умолчанию 10 , поэтому, если родительская тема не указывает приоритет, вы просто устанавливаете приоритет в своей дочерней теме на число выше 10. Давайте посмотрим, как это работает. Представьте, что вы работаете с дочерней темой HelpGuru и хотите переопределить функции меню и добавить свои собственные. Эта тема включает в себя ht_theme_setup() для настройки темы (включая регистрацию меню, добавление поддержки рекомендуемых изображений и многое другое), которая прикреплена к after_setup_theme действия after_setup_theme. Код в файле функций HelpGuru выглядит следующим образом:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

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

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

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

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

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

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Если функция с таким именем еще не была передана (например, в дочерней теме), будет передана функция из родительской темы. Но если WordPress уже встречал функцию с таким именем, он проигнорирует подключаемую функцию (то есть ту, что находится в родительской теме). Чтобы это работало, вы просто создаете функции в своей дочерней теме с теми же именами, что и в родительской теме, которые вы хотите переопределить. Таким образом, чтобы полностью переопределить ht_theme_setup() , вы должны использовать это в своей дочерней теме:

function ht_theme_setup() {
// contents of function
}

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

Резюме

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

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