Дочерние темы WordPress

Дочерние темы — относительно новая концепция, получившая широкое распространение начиная с WordPress 2.7. Суть ее заключается в следующем: к основной используемой теме (родительской теме) добавляется другая, дочерняя тема, которая определяет внешний вид присутствующих в ней файлов шаблона (это могут быть файлы home.php, style.css, single.php и т.д.).

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

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

Как работает дочерняя тема

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

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

Рассмотрим файл style.css:

/*   
Theme Name: Your Theme Name
Theme URI: http://your-theme-homepage.com
Description: Oh what a lovely description of your theme you'll put here!
Author: Your Name
Author URI: http://your-website.com
Template: If this is a child theme, you'll set the template theme's folder name here, otherwise 
remove
Version: A version number
.
Any general information, license statements, plugin requirements, or any other information you 
may want to share.
.
*/  

Для того, чтобы объявить дочернюю тему, необходимо отредактировать пункт Template ее файла style.css. В этот пункт необходимо внести название папки, в которой располагается родительская тема. Стандартная WordPress тема обычно находится в папке wp-content/themes/default/, поэтому, если вы хотите указать ее в качестве родительской, то в файле style.css дочерней темы в раздел Template нужно будет ввести строку «default»:

Template: default

Теперь, когда ваша тема получила статус дочерней, можно попытаться изменить ее цвета и шрифты. Первое, с чего стоит начать, это определиться, стоит ли заменять целиком весь файл style.css родительской темы на аналогичный файл дочерней темы, или ограничиться внесением в него небольших косметических изменений. Наиболее вероятен второй случай, поэтому остановимся на нем. Все, что потребуется — это импортировать таблицу стилей родительской темы. Делается это при помощи тега @import:

@import url("../notesblog-core/style.css");

Просто добавьте под заголовком файла правила, которые необходимо заменить в дочерней теме, например:

@import url("../notesblog-core/style.css");
div#content { font-family: Georgia, Times New Roman, serif; }
ul.sidebar ( color: #444; }

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

Полный файл стилей мог бы выглядеть так:

/*   
Theme Name: Small Notes
Theme URI: http://notesblog.com/core/small-notes/
Description: This is Small Notes, a child theme for Notes Blog Core.
Author: Thord Daniel Hedengren
Author URI: http://thedengren.com
Template: notesblog-core
Version: 1.0
.
You need to have both Child Notes and Notes Blog Core in your wp-content/themes/ folder for this 
theme to work.
.
*/
@import url("../notesblog-core/style.css");
div#content { font-family: Georgia, Times New Roman, serif; }
ul.sidebar ( color: #333; }

Помните про шаблоны страниц, которые вы хотели применить? Сделать это проще простого — достаточно всего лишь создать их в родительской теме и поместить в папку с дочерней темой. Каждый файл, присутствующий в дочерней теме, обладает высшим приоритетом, нежели аналогичные файлы родительской темы. Это означает, что даже если ваша родительская тема обладает файлом sidebar.php, загружен он будет все равно из дочерней темы. Если же вам не хочется менять его, то просто уберите файл sidebar.php из дочерней темы.

Дочерние темы и события

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

Блог про WordPress
Комментарии: 21
  1. Сергей

    спасибо за помощь

  2. Монтеро

    Несколько вопросов по теме:

    1) Если происходит обновление родительской темы, то меняется ли файл футер.пхп? Значит и счетчики, которые я вставил в футер будут стерты? Значит ли это, что в дочерней теме обязательно делать файл футер.пхп, где будут стоять счетчики статистики?

    2) Если идти по пути изменения темы через переименования первоначальной темы и внесения изменения в коде, что нужно поменять в новой теме, чтобы при обновлении первоначальной новая не изменялась? (первоначальная тема осталась в папке тем)

    3) Если в дочерней теме создавать футер.пхп, сайдбар.пхп и т.п.применяется ли тег @import? (Или можно ли его применять, чтобы целиком файл не переписывать)

    Заранее благодарю!

    1. Дмитрий (автор)

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

  3. Монтеро

    Я взял Twenty Eleven, внес в нее изменения, назвал по-новому и закачал в Вордпресс в папку "темы". Теперь там "девственная" Twenty и измененная с другим названием. Но боюсь, что в новой теме что-то осталось важное от дефолтной и при обновлении Твенти у меня обновится и моя новая. Вопрос в том, что обязательно нужно изменить в новой теме, чтобы она не обновилась вместе с дефолтной? Или обновится только папка с дефолтной темой. Путанно, но как смог пояснил))

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

    1. Дмитрий (автор)

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

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

  4. Монтеро

    О! Спасибо огромное! Как раз то, что надо насчет URL темы

  5. Монтеро

    А как быть в дочерней теме с "хлебными крошками" и кнопками социальных закладок? Создавать в дочерней теме (а точнее, копировать полностью из мамкиной темы) файлы single.php и page.php, в которых вставки уже на месте стоят?

    1. Дмитрий (автор)

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

  6. Монтеро

    Еще вдогонку вопрос по поводу импорта

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

    @import url("../twentyeleven/style.css")

    т.е. ("http: //your-site.com/wp-content/themes/twentyeleven/style.css")

    или кавычки и точки сами все сделают? ))

  7. Дмитрий (автор)

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

  8. Монтеро

    А как поступить с фавиконом? Какая схема будет самой правильной для "дочки", чтобы каждый раз при обновлении не прописывать заново (например, в header.php)?

    1. Дмитрий (автор)

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

  9. Владимир

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

    То есть обновлять я могу только родительскую тему. Но зачем мне она если я ее не буду использовать? Мне нужна только дочерняя, которую я обновлять не могу.

    1. Дмитрий (автор)

      Родительская тема — как каркас. Ее можно будет без проблем обновлять, и ничего не слетит. А все изменения будут включаться в дочерние темы. Дочерние темы не нужно обновлять — они просто несут в себе все изменения, которые накладываются поверх родительской темы. Файлы дочерних тем имеют больший приоритет по сравнению с файлами родительской темы, потому в первую очередь будут использоваться файлы дочерней темы. Это по большей части нужно тем, кто планирует обновлять свою тему — я поначалу наступал на эти грабли, когда по неопытности обновил Twenty Ten и все мои коррективы слетели… потом долго и упорно все восстанавливал по крупицам.
      Почему же вы не будете использовать родительскую тему? Она будет использоваться. Просто дочерняя тема может состоять всего из пары файлов (к примеру, single.php и style.css), а родительская — из кучи разных стандартных файлов. И заменяться будут только те файлы, которые совпадают у дочерней и родительской темы (в данном случае приоритетным будет файл single.php дочерней темы, он будет браться от нее).

  10. Волшебник

    Владимир, зайдите на мой сайт http://gvinevra.ru и посмотрите — он представляет собой дочернюю самописную тему twenty twelve, которая в свою очередь представляет собой набор всего нескольких файлов, в которые я внес изменения, а всё остальное это twenty twelve. Так например, я внес изменения в футер, хедер, style.css, functions.php, а всё остальное берется с twenty twelve, которая может обновляться. При этом при обновлении обновляется только родительская тема, а дочерние файлы никогда не затрагиваются. Поэтому ваши изменения никогда не слетят, в отличие от того, если бы вы правили непосредственно twenty twelve.

    А вообще есть два способа создания дочерней темы — можно либо целиком скопировать нужные файлы с родительской, которые вы хотите менять, а можно только добавить свой кусок кода к ним с помощью специальной функции и хуков, не заменяя всё. Таким образом обновляться будут все файлы родительской темы. И вы не упустите никакого функционала, который заменили.

  11. Владимир

    Волшебник. Спасибо, теперь понял.

  12. Волшебник

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

  13. Маргарита

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

    1. Дмитрий (автор)

      Попробуйте просто пересоздать ее заново. Это не должно занять много времени.

      Вот вам целый курс в помощь:

      https://oddstyle.ru/wordpress-2/stati-wordpress/osnovy-sozdaniya-dochernej-temy-wordpress.html

  14. Маргарита

    Дмитрий, спасибо большое за ваш труд! Так и сделала, все получилось.

  15. Едиге

    добрый день!
    У меня есть готовый дочерний шаблон, никак не могу установить его?
    Помогите плииз!

Добавить комментарий для Дмитрий Алёшин Отменить ответ

Получать новые комментарии по электронной почте.