Как создать дочернюю тему в WordPress (шаг за шагом)

Опубликовано: 2021-07-23

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

Давайте идти!

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

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

При активации он наследует все функциональные возможности, функции и код своей родительской темы без внесения каких-либо изменений в файлы родительской темы.

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

Создание дочерней темы (шаг за шагом)

Прежде чем продолжить, убедитесь, что:

У вас есть доступ к файлам вашего веб-сайта через FTP-клиент (например, WinSCP или Filezilla).
У вас есть доступный текстовый редактор (например, notepad++).

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

Теперь давайте создадим и активируем дочернюю тему «Twenty Twenty».

Добавить каталог

Во-первых, нам нужно создать новый каталог «twentytwenty-child» внутри /wp-content/themes. Обратите внимание, что дочерняя папка может называться как угодно, если вы не используете пробелы и знаки препинания.

Добавьте файл style.css

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

Давайте посмотрим, как эта информация отражается в области администрирования.

Сначала откройте сведения о теме в разделе «Внешний вид» > «Темы» и внимательно изучите правый столбец.

Если мы сравним это с таблицей стилей, мы увидим, откуда берутся различные элементы этой информации.

Нам нужно начать добавлять часть этой информации в таблицу стилей нашей дочерней темы. Минимальная необходимая информация, которая должна быть вставлена в качестве заголовков, — это «Имя темы» и «Шаблон».

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

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

После активации дочерней темы в бэкэнде вы увидите следующее:

Вы можете дополнительно ввести следующую необязательную информацию:

Версия (версия темы)
Требуется как минимум (минимальная необходимая версия WP для правильной работы темы)
Требуется PHP (минимальная версия WP PHP для правильной работы темы)
Описание (подробности, относящиеся к теме)
Теги (теги темы)
Автор(Имя разработчика темы)
и т.п.

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

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

Вариант первый: Импорт родительской таблицы стилей классическим способом

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

 @import url('../twentytwenty/style.css');

Эта команда сообщает WordPress, где искать исходный файл CSS. Теперь, если вы обновите свою домашнюю страницу, она вернется в нормальное состояние. Все, что вы сейчас добавите в style.css, переопределит импортированный родительский стиль. Попробуйте, например, добавить другой размер шрифта для заголовка h2 «Hello world!».

Обновите страницу и посмотрите в инспекторе элементов вкладок разработчика.

Вы заметите, что добавленное значение подсчитывается и по умолчанию (родительский стиль) «размер шрифта: 6,4 rem;» был переопределен.

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

По этой причине больше не рекомендуется импортировать родительский файл style.css таким образом.

Вариант второй: правильный импорт родительской таблицы стилей

Чтобы импортировать родительский файл style.css «правильным образом», нам сначала нужно добавить пустой файл functions.php в папку вашей дочерней темы.

Сделав это, откройте его в редакторе и добавьте открывающий тег PHP (<?php), после чего вы можете добавить следующий код PHP:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

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

Еще несколько замечаний по коду PHP:

'parent-theme-style' — это имя дескриптора, которое должно быть уникальным.
get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' сообщает WordPress об исходном расположении родительского расположения style.css.
get_template_directory_uri() извлекает URI каталога шаблона для нашей родительской темы. В нашем случае он выводит «http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty».

Добавьте функциональности в вашу дочернюю тему

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

Дочерняя тема functions.php

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

Например, давайте посмотрим, как мы можем изменить текст «Подробнее» для представления сообщений:

Шаг первый: создайте категорию тестовых постов:

Шаг второй: Создайте два новых поста в этой категории. Давайте добавим пример контента. На данный момент, если вы посетите страницу категории, вы увидите это:

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

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

В этом примере, чтобы получить то, что мы хотим, мы должны настроить фильтр «the_content_more_link», который изначально представлен в основном файле wp-includes/post-template.php в строке 369 следующим образом:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

В настоящее время это переопределяется родительской темой двадцать двадцать в своем файле function.php (строка 571) с помощью этого фрагмента кода:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

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

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

Хук ''the_content_more_link'' является общим для этих файлов, и в этом случае дочерний хук всегда имеет преимущество.

Затем обновите страницу и вуаля:

Как настроить шаблоны PHP

На приведенном выше снимке экрана показано содержимое шаблона темы TwentyTwenty для представления категории сообщений. Итак, как мы можем изменить его дизайн или добавить/удалить информацию с помощью дочерней темы?

Вот как вы можете это сделать:

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

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

Короче говоря, единственные файлы, которые на самом деле требуются для темы WordPress, — это файлы index.php и style.css. Дополнительные файлы и папки на самом деле являются файлами, вызываемыми изнутри index.php . Это фрагменты того, что вы в итоге увидите в выводе файла index.php .

Что касается темы Twenty Twenty, если мы просмотрим ее файл index.php , мы увидим в строке 79, что, когда контент представляет собой один или несколько постов, используются файлы php в каталоге template-parts/.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

В нашем случае нам нужно будет скопировать файл content.ph p из подпапки темы template-parts.

Кроме того, убедитесь, что вы копируете только те файлы PHP, которые планируете настраивать. Не копируйте каждый файл PHP в родительскую тему.

ПРИМЕЧАНИЕ. Структура папок должна быть такой же в дочерней теме, чтобы изменения отразились на внешнем интерфейсе.

Итак, мы сначала создаем подпапку 'template-parts' и помещаем в нее копию content.php .

Теперь вы можете открыть файл в редакторе и настроить его.

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

Настройте шаблон категории сообщений

У нас уже есть два поста в категории «тестовая категория». Теперь вы можете создать пункт меню «Категория публикации» и связать его с «категорией теста». Если вы нажмете на новый пункт меню, вы должны увидеть страницу просмотра категории сообщений.

Теперь вы можете дополнительно изменить файл content.php и изменить представление категории сообщений в соответствии с вашим собственным стилем. В качестве подсказки найдите ссылки на дополнительные включаемые файлы, как в строке 23:

 get_template_part( 'template-parts/featured-image' );

Это означает, что файл, который выводит избранное изображение, является template-parts/featured-image.php

Таким образом, вы можете скопировать файл в каталог дочерней темы и отредактировать его. Фантастика!

Вывод

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