Шаблон WordPress своими руками. Урок 9. Дочерняя тема

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

Полезно: чем записи WordPress отличаются от страниц

Общая информация

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

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

Теперь нам потребуется выполнить несколько элементарных шагов. Во-первых, следует сгенерировать папку для создаваемой уникальной дочерней темы. Далее формируем обычный текстовый документ и называем его стандартным для таблицы стилей «style.css». Открыть его можно через блокнот, Notepad++ или любой другой редактор. Уже в этом файле мы и будем формировать правильную шапку нашего сайта.

Давайте выполним все вышеперечисленные шаги еще раз по порядку. Открываем папку wp-content/themes и создаем там новую для нашей дочерней темы. Ее название можно задавать рандомным, так как оно никак не скажется на последующей работе. После, заходим в нее и делаем нашу таблицу стилей, а затем открываем ее для внесения изменений.

Полезно : Шаблон WordPress своими руками. Урок 1. Основы(Откроется в новой вкладке браузера)

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

  • Название – «Name» – является обязательным параметром;
  • Адрес вашего сайта, где в дальнейшем планируется использование продукта, – «Theme URI»;
  • Описание продукта или любая другая информация – «Description»;
  • Имя автора или псевдоним – «Author»;
  • Название родительского шаблона – «Template» – обязательный параметр;
  • Версия новой темы – «Version».

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

Полезно: контактные формы с плагином Contact Form 7

Для примера можно рассмотреть тот, который дан на официальном сайте WordPress:

/*

Theme Name:     Twenty Ten Child

Theme URI:      http: //example.com/

Description:    Дочерняя тема для темы Twenty Ten

Author:         Ваше имя

Author URI:     http: //example.com/about/

Template:       twentyten

Version:        0.1.0

*/

@import url(“../twentyten/rtl.css”);

#site-title a { color: #009900; }

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

Полезно: шаблон Theratio – очередной топ в hi-tech стиле

Разница

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

@import url(“www/mysite.ru/twentyten/style.css”)

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

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

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

Полезно: шаблон WordPress своими руками. Урок 4. Информация до разработки

Активация

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

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

Полезно: меню WordPress – добавление и настройка

Заключение

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