Перейти к содержимому

WordPress. Создание дочерней темы

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

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

  1. Основной файл дочерней темы
  2. Создание дочерней темы
  3. Файлы дочерней темы
  4. Дочерняя тема родительской темы Tiny Framework

Основной файл дочерней темы

Единственным обязательным файлом дочерней темы WordPress является файл style.css.

Создайте текстовый файл и переименуйте его в style.css. Откройте его в любом текстовом редакторе (лучший из которых для этих целей, пожалуй, Notepad++), затем добавьте в него следующие обязательные строки, заменив фразы Nazvaniye Docherney Temy, papka-roditelskoy-temy, vash-domen.ru на свои:

/*
Theme Name: Nazvaniye Docherney Temy
Template: papka-roditelskoy-temy
*/

@import url("//vash-domen.ru/wp-content/themes/papka-roditelskoy-temy/style.css");

Расшифровка строк:

  • /* - тег, открывающий информационный заголовок дочерней темы.
  • Theme Name: - придуманное вами имя дочерней темы (замените им строку Nazvaniye Docherney Temy), которое будет отображаться на странице «Темы» из раздела меню «Внешний вид» вашей админ-панели WordPress.
  • Template: - регистрозависимое имя папки вашей родительской темы (замените им строку papka-roditelskoy-temy), которая будет использоваться как шаблон (template) для дочерней темы.
  • */ - тег, закрывающий информационный заголовок дочерней темы.
  • @import url - подключение файла стилей родительской темы, где в пути к этому файлу: vash-domen.ru - имя вашего домена, papka-roditelskoy-temy - регистрозависимое имя папки вашей родительской темы. Подключение файла стилей родительской темы необходимо из-за того, что файл style.css дочерней темы полностью заменяет аналогичный файл родительской темы, и без подключения или самостоятельного заполнения файла style.css дочерней темы необходимыми параметрами, сайт не будет правильно отображаться.

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

Ознакомьтесь для примера с содержимым файла style.css дочерней темы сайта «Дешевые авиабилеты»:

/*
Theme Name:     Tiny Framework Deshavia
Template:       tiny-framework
*/

@import url("//deshevyyeaviabilety.ru/wp-content/themes/tiny-framework/style.css");

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

Создание дочерней темы

  1. Создайте папку и переименуйте ее, например, если дочерняя тема условно называется Nazvaniye Docherney Temy, можно папке с этой темой дать имя - nazvaniye-docherney-temy, но не обязательно название дочерней темы и ее папки должны совпадать.
  2. Скопируйте в папку дочерней темы созданный ранее файл style.css.
  3. Загрузите папку дочерней темы на сервер в папку themes, расположенную в папке wp-content вашего сайта WordPress. Работать с папками и файлами на хостинге удобнее через файловый менеджер FileZilla Client.
  4. Зайдите в админ-панель вашего сайта и на странице «Темы» (раздел меню «Внешний вид») вы увидите свою дочернюю тему. Активируйте ее.

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

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

Файлы дочерней темы

Примечания к файлу style.css

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

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

Файл стилей rtl.css

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

Ознакомьтесь для примера с содержимым файла rtl.css дочерней темы сайта «Дешевые авиабилеты»:

/*
Theme Name:     Tiny Framework Deshavia      
Template:       tiny-framework
*/

@import url("//deshevyyeaviabilety.ru/wp-content/themes/tiny-framework/rtl.css");

Сделайте копию ранее созданного вами файла style.css дочерней темы и переименуйте копию в rtl.css. Откройте вновь созданный файл rtl.css в текстовом редакторе и замените в строке @import url(" ... /style.css"); имя файла style.css на rtl.css. Сохраните файл и загрузите его на хостинг в папку дочерней темы.

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

Файлы шаблонов

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

Файл functions.php

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

Структура файла functions.php проста: открывающий тег PHP в начале, закрывающий тег PHP в конце, и между ними ваш код.

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

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

Файл изображения темы

Если вы хотите, чтобы на странице «Темы» из раздела меню «Внешний вид» админ-панели WordPress ваша тема отображалась со своим изображением, сделайте скриншот главной страницы вашего сайта или подберите подходящую картинку. В графическом редакторе подгоните размер изображения до 1200px в ширину и 900px в высоту и сохраните с именем screenshot.png. Расширение должно быть именно .png, другие форматы изображений не рекомендуются. Загрузите файл screenshot.png на хостинг в папку дочерней темы.

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

Дочерняя тема родительской темы Tiny Framework

Если вы используете на своем WordPress-сайте тему Tiny Framework, то создавать для нее дочернюю тему совсем необязательно, так как она идет в подарок от разработчика и загружается во время установки родительской темы. Чтобы установить дочернюю тему родительской темы Tiny Framework, необходимо скопировать ее папку с именем tiny-framework-child, которая находится по пути /wp-content/themes/tiny-framework/inc/examples/ и вставить в папку themes, где расположена и папка родительской темы tiny-framework.

Остается только зайти в админ-панель и активировать дочернюю тему с именем «Tiny Framework Child Example». Если вы хотите изменить название дочерней темы, перед активацией отредактируйте ее имя в файле style.css.

Должен отметить, что в файле style.css дочерней темы Tiny Framework Child Example нет строки подключения файла стилей родительской темы. Здесь импорт стилей осуществляется с помощью PHP-кода, прописанного в файле functions.php дочерней темы.

После установки темы Tiny Framework в админ-панели WordPress появляется ссылка на сайт разработчика с подробной инструкцией по использованию Tiny Framework и её дочерних тем. С помощью Переводчика Google вполне можно разобраться.