Дочерние темы WordPress
В WordPress есть механизм дочерних тем, который позволяет создавать тему на основе уже существующий. Причём функционал новой может быть неполным — он будет автоматически компенсироваться аналогичными функциями из родительской темы. Таким образом созданные темы называются «дочерними». В этой статье рассмотрим их особенности и способы их создания.
Как сделать дочернюю тему
Дочерняя тема — это тема, которая создана на основе родительской. Недостающие части дочерней темы берутся из родительской. Благодаря чему дочерние темы часто используются в процессе разработки на работающем сайте: можно не беспокоиться о создании всего функционала сразу, потому что недостающие компоненты будут взяты из родительской темы.
Дочерние темы — это хороший инструмент разработки, но его гибкость зависит от правильности создания родитской темы. Некоторые темы подходят в качестве родительских лучше, чем другие. Поэтому далее в примерах этой статьи мы используем стандартную тему «Twenty Nineteen», которая доступна в WordPress из коробки.
Чтобы создать свою дочернюю тему, достаточно создать папку для неё и один «style.css» файл. Создадим папку по адресу:
/wp-content/themes/twentynineteen-childВ этой папке создадим файл «style.css» со следующим содержанием:
/* Theme Name: Дочерняя тема Template: twentynineteen */ /* стили родительской темы. Они должны стоять перед стилями дочерней темы, иначе их загрузки не произойдёт. */ @import url("../twentynineteen/style.css"); /* стили дочерней темы */ h1
Строки в комментарии «Theme Name» и «Template» являются обязательными. А «Template» содержит название той темы (регистрозависимое название её папки), которая является родительской для создания.
Обратите внимание, что из-за «@import» запроса файлы стилей загружаются последовательно, что увеличивает время загрузки страницы.
На этом создание дочерней темы можно считать законченным. Осталось только активировать тему в панели администрирования WordPress, чтобы увидеть изменения.
Как было сказано ранее, дочерняя тема берёт недостающие файлы из родительской. Если же файл создан в дочерней, то родительский не будет использоваться. Это верно для большинства файлов, кроме «functions.php», который содержит функции темы. Функции в этом файле из родительской темы не заменяют, а дополняют дочерние.
В коде примера мы импортировали через «import» стили родительской темы. Потому что файл style.css существует и в родительской, и в дочерней теме. А в таком случае он не будет загружаться из родительско темы — придётся загружать его принудительно.
Файл «functions.php» в дочерней теме
Файлы «functions.php» дочерней и родительской темы подключаются всегда. Причём сначала подключается «functions.php» в дочерней теме, а потом в родительской. Отсюда появляется тезис, который был озвучен в начале параграфа: не все темы подходят на роль родительской. Потому что если в родительской теме функции не проверяются на существование, то они будут конфликтовать с одноимёнными функциями в дочерней теме. Необходимо чтобы в родительской теме все функции были написаны так:
if( ! function_exists( 'название_функции' ) ) < function название_функции()< // код функции >>В таком случае при совпадении названий функций в двух файлах будет использоваться функция в дочерней теме.
Как создать дочернюю тему WordPress?
Дочерняя тема WordPress, или подтема – дополнительная тема, которая создается на основе родительской готовой темы WP. Благодаря дочерней теме можно изменять или дополнять функции и вид основной темы не боясь, что внесенные изменения будут потеряны.
Для чего нужны дочерние темы?
Когда вы используете готовую тему WordPress, то любые правки кода темы могут исчезать после каждого обновления шаблона. Чтобы этого не происходило и создаются дочерние темы – с ними вы спокойно редактируете код темы без угрозы, что редакции не будут потеряны при первом же обновлении от разработчика.
Как создать дочернюю тему?
Мы покажем процесс создания дочерней темы для версий WP до 5.9 (то есть для тем Twenty Twenty Twenty и старше).
Шаг 1. Создаем папку для дочерней темы
Создаем папку в каталоге тем: wp-content/themes. Называем, например twentytwenty-child
Шаг 2. Создаем файл style.css
Создаем в новой папке файл style.css. Он должен включать следующее:
/* Theme Name: Twenty Twenty Child Author: Hostpro Template: twentytwenty */ - Theme Name (обязательно) – название дочерней темы,
- Template (обязательно) – название папки родительской темы (регистрозависимое).
- Theme URI (необязательно) – адрес сайта дочерней темы
- Description (необязательно) – описание дочерней темы
- Author URI (необязательно) – адрес сайта автора дочерней темы
- Author (необязательно) – имя автора дочерней темы
- Version (необязательно) – версия дочерней темы
Если что-то пошло не так, попробуйте переключиться на другую тему, а затем снова вернуться.
Шаг 3. Создаем файл functions.php
Создаем новый файл functions.php на том же уровне, что и style.css – в папке twentytwenty-child (пожалуйста, обратите внимание, что файл должен называться именно functions.php, а не function.php).
В начале обязательно открываем тег
Если нам нужно внести всего несколько изменений, а не переписывать родительскую тему с нуля, то подключаем файл стилей родительской темы.
function child_theme_enqueue() // Parent styles wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); > add_action( 'wp_enqueue_scripts', 'child_theme_enqueue' ); Есть еще вариант с помощью директивы @import в файле style.css.
/* Theme Name: Twenty Twenty Child Author: Hostpro Template: twentytwenty */ @import url("../twentytwenty/style.css"); #site-title a color: #009900; >
Но поскольку браузер не может параллельно загружать оба файла стилей (то есть сначала он увидит стили дочерней темы, далее @import, а уже потом стили родительской темы), этот вариант будет медленнее и мы его не рекомендуем.
Шаг 4. Активируем дочернюю тему
Возвращаемся в админку WP и активируем нашу дочернюю тему.
Чтобы проверить, правильно ли мы подключили стили, заходим на сайт, жмем правой кнопкой мыши → «Просмотр кода страницы» → ищем в следующее:
rel='stylesheet' id='twentytwenty-style-css' href='https://hostpro.fun/wp123/wp-content/themes/twentytwenty-child/style.css?ver=6.1.1' media='all' /> Если нашли, значит работа над созданием дочерней темы завершена.
Вывод
Теперь мы сможем уверенно делать любые правки в шаблоне, не боясь, что изменения окажутся недоступными после первого же обновления темы. Также дочерняя тема пригодится при смене языковой версии сайта по умолчанию.
Супербыстрый WordPress Хостинг
С ускорителем сайтов LiteSpeed
Дочерняя тема WordPress: что это и как ее использовать? (Child Theme)
Привет, дорогой друг! В этом видео я расскажу вам о дочерних темах WordPress. Часть моих зрителей и заказчиков задают мне вопросы по поводу дочерних тем и я решил в этом видео ответить на все часто задаваемые вопросы по этому поводу.
Вопросы
1.Что такое дочерняя тема WordPress и чем она отличается от родительской темы? Может ли она заменить родительскую тему?
2.Зачем нужна дочерняя тема WordPress?
3.Где взять дочернюю тему?
4.Как правильно установить дочернюю тему?
Также, мы рассмотрим практическое применение дочерних тем на конкретных примерах.
Выводы
Дочерняя тема WordPress нужна для вставки произвольных функций, стилей и скриптов. А также, для кастомизации сайта и внесения программных изменений в код сайта не затрагивая файлы родительской темы. В результате, родительскую тему можно обновлять и не переживать, что все наши изменения будут потеряны после обновления или поломки сайта.
Создание дочерней темы
Эта функция доступна для сайтов с тарифными планами WordPress.com Business или eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.
Если на вашем сайте используется тарифный план с поддержкой пользовательских плагинов и тем, вы можете менять внешний вид темы с помощью пользовательских CSS и расширять стандартные функции, устанавливая сторонние плагины. Если этого недостаточно и нужно изменить базовый код темы, можно создать дочернюю тему.
Следует отметить, что это сложная процедура, для выполнения которой требуются знания HTML и PHP.
Что такое дочерняя тема?
Дочерняя тема наследует возможности и стиль родительской темы.
В своем выступлении Работая с дочерними темами с комфортом Кэтрин Преснер (Kathryn Presner) сравнила родительскую тему с рецептом шоколадного пирога. Можно создать дочерний рецепт под названием «Ореховый шоколадный пирог». Он будет включать все те же ингредиенты и последовательность действий, но с добавлением орехов.
Ниже приведены снимки экранов двух тем в нашем репозитории — Edin и Goran. Goran — дочерняя тема Edin. Она наследует основной дизайн Edin, но имеет дополнительные настройки.
Создание дочерней темы
Чтобы использовать дочерние темы на сайте WordPress.com, сначала нужно установить WordPress локально на свой компьютер. После создания дочерней темы на вашем компьютере нужно её сжать в zip-файл и загрузить на сайт с тарифным планом WordPress.com Business.
Вместо создания дочерней темы вручную можно использовать плагин, который сделает это за вас (например, Child Theme Configurator). В репозитории плагинов выполните поиск по ключевым словам «дочерние темы» и рассмотрите доступные варианты.
Примечание. Вы можете скачать копию бесплатных тем из нашей коллекции в нижней части каждой страницы каталога WordPress.com. Найдите ссылку для скачивания:
Нельзя создать дочернюю тему для темы, которая сама является дочерней.
Создание дочерней темы вручную
Эта функция доступна для сайтов с тарифными планами WordPress.com Business или eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.
Рассмотрим процедуру на примере темы Twenty Seventeen.
Шаг 1.
Найдите и скачайте файл темы из репозитория WordPress.org сюда. На Mac после загрузки файла дважды щёлкните по нему, чтобы извлечь папку. На Windows щёлкните правой кнопкой мыши и нажмите «Извлечь всё».
Шаг 2.
Создайте новую папку и назовите дочернюю тему, например, «twentyseventeen-child».
Рекомендуется, чтобы имя папки с дочерней темой заканчивалось на «child». Убедитесь, что в имени папки для дочерней темы нет пробелов.
Шаг 3.
Скопируйте и вставьте файлы style.css и functions.php из оригинальной родительской темы (twentyseventeen) в новую дочернюю тему (twentyseventeen-child).
Шаг 4.
Откройте файл style.css из папки новой дочерней темы в текстовом редакторе, например Notepad, Atom, Sublime Text. Для очистки файла введите команду+A > delete на Mac (CTRL+A > delete в Windows).
После этого скопируйте и вставьте следующие строки кода:
Обратите внимание, что код CSS ниже может быть предназначен для конкретной темы.
/ * Theme Name: Twenty Seventeen Child Theme URI: https://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Theme Author: John Doe Author URI: https://example.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentyseventeen */
Нужно включить в следующие строки название родительской папки, чтобы указать на то, что тема является дочерней для этой родительской темы.
– Theme name
– Description
Не меняйте следующие поля:
— Template
— Text domain
Другие поля не являются обязательными. Подробности о них см. здесь.
Строка шаблона должна содержать имя папки родительской темы. Внеся изменения, не забудьте сохранить этот файл.
Шаг 5.
Откройте файл functions.php из папки новой дочерней темы в том же текстовом редакторе. Для очистки файла введите команду+A > delete на Mac (CTRL+A > delete в Windows).
После этого скопируйте и вставьте код ниже, заменив значение $parent-style названием вашей темы, добавив -style в конце (в нашем случае получится twentyseventeen-style).
Внеся изменения, не забудьте сохранить этот файл.
get('Version') ); > add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Шаг 6.
Теперь нужно сжать эти папки в zip-файл.
- Найдите файл или папку, которые нужно сжать.
- Нажмите и удерживайте (или выберите правой кнопкой мыши) файл или папку, нажмите «Отправить» и выберите «Сжатая ZIP-папка».
В том же расположении будет создана новая сжатая папка с тем же именем. Чтобы переименовать ее, нажмите и удерживайте (или выберите правой кнопкой мыши) папку, нажмите «Переименовать» и введите новое имя.
- Найдите элементы, которые нужно сжать в zip-файл, в Mac Finder (файловой системе).
- Нажмите правой кнопкой мыши файл, папку или файлы, которые нужно сжать.
- Выберите «Сжать объекты».
- Найдите только что созданный архив ZIP в той же папке.
Шаг 7.
Загрузить пользовательскую тему можно в разделе Внешний вид → Темы, нажав кнопку Загрузить тему. Загрузите родительскую и дочернюю темы и активируйте дочернюю.
Чтобы получить дополнительную информацию о загрузке пользовательской темы, нажмите здесь.
Создание дочерней темы с помощью Child Theme Configurator
Эта функция доступна для сайтов с тарифными планами WordPress.com Business или eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.
Скачайте и установите плагин: https://wordpress.org/plugins/child-theme-configurator/. Чтобы узнать больше об установке плагинов, нажмите сюда.
Обратите внимание, что Child Theme Configurator — это сторонний плагин. Его служба поддержки находится по следующему адресу: https://wordpress.org/support/plugin/child-theme-configurator/
После установки выберите «Инструменты» > «Дочерние темы».
Шаг 1. Выберите родительскую тему.
Шаг 2. Нажмите Анализировать. Система проверит, что родительские темы используют стандартный режим работы WordPress и неожиданных ситуаций с вашей темой не будет.
Шаг 3. Это имя каталога или папки, в которой хранится тема на вашем сайте.
Шаг 4. Выберите папку для хранения стилей. Рекомендуется выбрать основную опцию stylesheet style.css, используемую по умолчанию
Шаг 5. Выберите вариант обработки таблицы стилей для родительской темы. Он определяет, как дочерняя тема будет использовать стили родительской темы. Рекомендуется использовать очередь стилей WordPress.
Шаг 6. Введите имя, описание, автора и версию дочерней темы. На этом этапе нужно ввести данные темы, которые будут отображаться с использованием CSS.
Шаг 7. Скопируйте меню, виджеты и настройки конфигуратора родительской темы. Если вы настроили родительскую тему в конфигураторе, эта опция скопирует настройки в новую дочернюю тему.
Внесение изменений в дочернюю тему
Не рекомендуем вносить изменения в свою тему прямо на работающем сайте. Ознакомьтесь с руководством по внесению изменений локально.
Поддержка дочерней темы
В службе поддержки WordPress.com подскажут, куда следует обратиться, или предложит альтернативу дочерней теме (если они есть). Помощь по работе с HTML и PHP наша служба поддержки не оказывает. Если вам потребуется дополнительная помощь, обратитесь к веб-разработчику или напрямую к автору темы.