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

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

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

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

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

Дочерняя тема WordPress работает так же, как и обычная на поверхностном уровне. После активации она будет работать так же, как и любая другая ваша тема. Различие заключается в том, что дочерние темы имеют ‘родителя’, от которого они наследуют все свои атрибуты.

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

• Вы можете безопасно обновлять свои темы. При обновлении темы вы также теряете все изменения, которые внесли в ее код. Однако, если вы используете дочернюю тему и обновляете ее родителя, вы избегаете этой проблемы.
• Легче следить за изменениями, которые вы вносите в тему. Многие темы WordPress включают десятки файлов и сотни строк кода. Это означает, что любое изменение в них — независимо от того, насколько оно мало — может быть сложным, потому что легко потерять контроль над этими корректировками. С дочерней темой вы можете вносить изменения по своему желанию и при этом поддерживать порядок.

Давайте подведем итоги тому, что мы узнали на данный момент на примере.

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

Это кажется сложным, но становится простым, когда вы узнаете, как это сделать и увидите это в действии.

Когда использовать дочерние темы

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

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

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

• Если вы собираетесь вносить изменения — постоянные или временные — в функциональность или стиль вашей активной темы.
• Когда вы используете тему, которая постоянно обновляется (и это хорошо!), и вы не хотите потерять ваши настройки в этом процессе.
• Для тестирования изменений, которые вы хотите внедрить в вашу активную тему, используя безопасную среду.

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

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

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

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

1. Создайте папку для вашей дочерней темы

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

Существует множество способов взаимодействия со структурой файлов вашего сайта — например, через вашу панель — но мы предпочитаем использовать протокол безопасной передачи файлов (SFTP) из-за его простоты в использовании. Для доступа к вашему сайту через FTP вам понадобится специализированный клиент. Мы рекомендуем использовать FileZilla, поскольку он прост в освоении даже для начинающих и постоянно развивается. Если вы не знакомы с использованием FTP, вам также потребуется изучить этот навык перед тем как приступить к этим шагам.

После установки, перейдите в директорию вашего сайта с использованием ваших SFTP учетных данных. Обычно эта директория называется public_html, но в DreamHost по умолчанию используется имя добавленного вами домена (example.com).

Перейдите в директорию и направляйтесь в wp-content/themes/. Внутри вы найдете уникальную папку для каждой из ваших тем WordPress.

Теперь щелкните правой кнопкой мыши в любом месте каталога themes, выберите опцию Create directory, затем установите имя для вашей новой папки:

Папка вашей дочерней темы может иметь любое название, которое вы захотите. Однако в целях удобства мы рекомендуем дать ей имя, по которому её будет легко узнать, например twentytwentytwo-child (или что-то другое, в зависимости от родительской темы).

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

2. Создайте таблицу стилей темы

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

Хотя файл style.css вашей дочерней темы пригодится в будущем, он также выполняет важную функцию прямо сейчас. Он просто говорит WordPress: “Привет, я тоже тема, загрузи меня вместе с остальными!”

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

Наконец, нам необходимо добавить небольшой фрагмент кода в этот файл. Щелкните по нему правой кнопкой мыши и выберите Просмотр/Редактирование. Этот вариант загрузит копию файла на ваш компьютер и откроет его с использованием вашего локального редактора. Когда файл будет открыт, вам нужно вставить следующий текст:

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: http://example.com/twenty-twenty-two-child/
Description: Ваша первая дочерняя тема!
Author: Джон Доу
Author URI: http://example.com
Template: twentytwentytwo
Version: 1.0.0
License: GNU General Public License v2 или позднее
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: дочерняя тема
Text Domain: twenty-twenty-two-child
*/

На первый взгляд, это может показаться большим объемом информации, но для работы дочерней темы нужно правильно указать только одно поле: Template. В приведенном выше примере вы можете видеть, что мы использовали twentytwentytwo, что является названием директории темы Twenty Twenty-Two. Если вы используете другую тему в качестве родительской, вам нужно заменить это значение на название её папки (а не полное название темы).

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

Далее, после того как вы установите правильное значение шаблона и настроите код, вы можете сохранить изменения в файле style.css и закрыть текстовый редактор. Теперь FileZilla спросит вас, хотите ли вы заменить файл на сервере локальной копией, которую вы только что изменили. Скажите Да, и перейдите в вашу панель управления WordPress. Если вы посмотрите на вкладку Темы, вы должны увидеть новое добавление.

3. Настройте вашу дочернюю тему для наследования стиля родительской темы

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

Для этого мы будем использовать файл functions.php, который позволяет вам указать WordPress добавить новые функции. В этом файле мы добавим скрипт для «постановки в очередь» таблицы стилей вашей родительской темы (не той, которую мы только что создали). После этого ваша дочерняя тема будет готова к использованию.

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

Теперь откройте файл с помощью опции View/Edit в FileZilla и вставьте следующий код внутрь:

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

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

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

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

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

Чтобы использовать вашу дочернюю тему, вернитесь в вашу панель управления WordPress и перейдите в раздел Appearance > Themes. Внутри должна быть одна тема без картинки-превью — ваша дочерняя тема.

Кликните на кнопке Активировать рядом с названием темы и откройте ваш сайт как обычно. Если вы следовали предыдущим трем шагам точно, ваш сайт должен выглядеть точно так же, как и до начала работы.

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

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

5. Добавьте изображение в вашу дочернюю тему

Чтобы было понятно — когда мы говорим о выделенном изображении темы, мы имеем в виду графику, которая отображается над её названием во вкладке Themes . Вот несколько примеров.

Новые дочерние темы не поставляются с этими изображениями, поэтому вам нужно предоставить изображение, чтобы WordPress мог его загрузить. К счастью, это очень простой процесс. Всё, что вам нужно сделать, это добавить изображение в формате PNG с именем screenshot.png в директорию вашей дочерней темы.

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

Теперь, когда это позади, ваша вкладка Темы снова должна выглядеть великолепно, так что пора возвращаться к делам.

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

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

1. Добавить пользовательские стили

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

Настройка стиля вашей темы с помощью CSS проста, если вы знаете её элементы. Даже если вы их не знаете, вы можете легко узнать, используя инструменты веб-инспектора, такие как Chrome DevTools, которые включены в ваш браузер. Просто щёлкните правой кнопкой мыши по элементу, который хотите изменить, и выберите опцию Inspect .

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

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

2. Научитесь переопределять файлы вашей родительской темы

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

Представьте, например, что вы решите создать дочернюю тему для Twenty Twenty-Two. Родительская тема в этом случае содержит файл footer.php в своей папке темы:

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

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

3. Создать пользовательские шаблоны страниц

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

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

4. Использование хуков темы

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

Освоение создания хуков немного выходит за рамки данной статьи.

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

Раскройте преимущества дочерних тем WordPress

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