Зачем нужна дочерняя тема WordPress

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

Если вы второй раз смотрите на WordPress и третий раз наступили на грабли с обновлением темы - читайте дальше.

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

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

Мне удалось найти в закромах WordPress со старой версией темы Twenty Twelve. Ее и буду использовать для примера.

1. Создаем папку дочерней темы:

mkdir wp-content/themes/twentytwelve-child

2. Для работы темы нужно два файла:

• style.css
• functions.php

Создадим их:

touch wp-content/themes/twentytwelve-child/style.css
touch wp-content/themes/twentytwelve-child/fnctions.php

3. Имя темы задается в style.css. Минимальный набор кода для style.css:

/* Theme Name: Twenty Twelve Child Template: twentytwelve Author: the WordPress team Version: 1.0 Text Domain: twentytwelve-child */ @import url("../twentytwelve/style.css")

Последняя строка подгружает стили из материнской темы.

В этот момент тема появляется в списке тем в админке WordPress и выглядит вот так:

Скопируйте screenshot.png из материнской темы для того что бы появилось изображение. По желанию его можно подредактировать:

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

Теперь список тем выглядит вот так:

После этого тему можно активировать и она даже заработает.

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

Стандартная тема выглядит вот так:

Давайте немного моифицируем ее для наглядности. Я скопировал файл header.php из материнской темы, поменял в нем отображение меню (над заголовком) и убрал отображение описания блога. При этом оригинальный header.php остался нетронутым. Получилось вот так:

Как мы видим сработал header.php из папки дочерней темы.

Засада только со стилями. Если Вы объявите новый стиль отображения, на пример, ширину зоны текста в файле style.css дочерней темы - он не сработает.

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

touch wp-content/themes/twentytwelve-child/custom.css

Внесите в него код из спойлера.site:

Site { margin: 0 auto; max-width: 90%; overflow: hidden; }

К сожалению директива @import url работает только один раз в файле style.css, поэтому второй файл стилей подключить не удасться.

В WordPress стили подключаются функией wp_enqueue_style() в файле functions.php.

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

Function get_child_template_directory_uri() { return dirname(get_bloginfo("stylesheet_url")); }

После этого мы можем смело использовать get_child_template_directory_uri() в других кастомных функциях.

Теперь подключаем custom.css:

Function child_styles() { wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); } add_action("wp_enqueue_scripts", "child_styles",12);

При необходимости можно копировать строчку и добавлять другие css файлы. Все будет работать.

Думаю не нужно объяснять, почему файл functions.php должен начинаться с

Кстати цыфра в add_action() определяет приоритет. 12 - самый крутой action, подразумевается, что стили, которые были подключены с помощью его, будут брать верх над стандартными из материнской темой.

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

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

(Visited 1 223 times, 1 visits today)

П латформа WordPress является магнитом для тех, кто хочет взять дело в свои руки, кто хочет взять полный контроль над своим веб – сайтом и хотят быть независимыми в управлении ими. WordPress делает это на самом деле легко и может полностью настроить веб – сайт. Если у вас есть немного знаний HTML, CSS и/или PHP, то нет ничего, что вы не можете изменить .

Я имею в виду, просто сравнить темы по умолчанию, Twenty Fifteen and Twenty Fourteen . Трудно поверить, что они работают на той же платформе, не так ли? Поэтому, вполне естественно для вас хотеть адаптировать внешний вид вашего сайта, чтобы соответствовать своим предпочтениям. Я сомневаюсь, что есть пользователи WordPress, которые не думают постоянно об этом. Тем не менее, возникает проблема.

Настройка WordPress: Вы могли бы делать это неправильно

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

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

В любом случае, ситуация далека от идеала.

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

Звучит неплохо? Отлично, потому что в этой статье мы подробно рассмотрим, что такое дочерние темы в WordPress , как их создавать и как использовать их, как правильно настроить свой веб-сайт.

Что такое дочерние темы и как их использовать?

Когда речь идет о дочерних темах, сначала мы должны говорить о родительских темах . Тема становится родительской, только когда кто – то строит дочернюю тему для нее. До тех пор, это просто тема, которую вы найдете в каталоге WordPress. Каждая тема включает в себя все файлы, необходимые для родительской темы.

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

Что такое дочерняя тема? В backend WordPress дочерняя тема ведет себя как обычная тема. Вы можете найти и активировать ее в разделе “Внешний вид” → “Темы”, так же, как и любую другую тему.

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

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

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

Преимущества дочерние темы

Есть многочисленные преимущества дочерней темы:

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

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

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

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

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

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

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

Основная настройка дочерней темы

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

Примечание:

Следующие действия могут быть выполнены непосредственно на сервере с помощью . Тем не менее, я рекомендую сначала настроить все локально, а затем сжать папку дочерней темы и установить ее как обычную тему через меню «Тема». Это позволит сделать все это гораздо проще.

Создание папки в wp-content/themes

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

Как и любая другая тема, дочерние темы находятся в папке wp-content/themes вашей установке WordPress. Таким образом, перейдем туда и создадим новую папку для вашей дочерней темы.

Наилучшей практикой является предоставление папки вашей темы, то же имя родительской темы и добавить -child . Поскольку мы используем тему twentyfifteen , мы назовем нашу папку twentyfifteen-child .

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

Создание таблиц стилей

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

Создание таблицы стилей легко: Просто создайте новый текстовый файл и назовите его style.css . Готово! Тем не менее, для того, чтобы она работала, нам придется вставить следующий код, так называемый “заголовок таблицы стилей,” в самом начале файла (код любезно предоставлено WordPress Codex):

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

Вот что означает каждая строка:

• Theme name
  Это имя, которое будет отображаться для вашей темы в бэкэнде WordPress.
• Theme URI
  Ссылка указывает на веб – сайт или демонстрацию страницы темы. Это как правило ссылка автора, которая должна присутствовать для того, чтобы тема могла быть принятой в каталог WordPress.
• Description
  Это описание вашей темы будет отображаться в меню темы при нажатии на кнопку “Theme Details.”
• Author
  Это имя автора – это вы в этом случае.
• Author URI
  Вы можете поместить адрес вашего сайта здесь, если вы хотите.
• Template
  Эта часть имеет решающее значение. Здесь идет имя родительской темы, а это означает его имя папки. Имейте в виду, что он чувствителен к регистру, и если вы не ставите в нужную информацию, вы получите сообщение об ошибке, так что дважды проверьте!
• Version
  Отображает версию вашей дочерней темы. Как правило, все начинают с 1,0.
• License
  Это лицензия вашей дочерней темы. Темы в каталоге WordPress, как правило, выпускается под лицензией GPL; вы должны придерживаться той же лицензии, что и ваша родительская тема.
• License URI
  Это адрес, где указывается ссылка на вашу лицензию темы. Опять же, придерживаться того, что говорит ваш родитель тема.
• Tags
  Теги помогают другим найти вашу тему в каталоге WordPress. Таким образом, если вы включите некоторые, убедитесь, что они актуальны.
• Text domain
  Эта часть используется для интернационализации и сделать темы переводимые. Это должно соответствовать “слизняка” вашей темы.

Если вы чувствуете себя немного перегруженным (уже? ), Вы может быть счастливы знать, что не вся информация на самом деле требуется. На самом деле, все, что вам действительно нужно, это название темы и шаблон.

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

/* Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 */

Активирование дочерней темы

После того, как вы создадите папку и таблицы стилей, перейдите в раздел “Внешний вид” → “Темы” в и найдите там дочернюю тему. При нажатии на кнопку “Theme Details”, вы увидите содержимое заголовка таблицы стилей. Вот и вся информация.

Хорошо, теперь нажмите на кнопку с надписью “Activate.” Хорошая работа! Ваша тема активирована. Тем не менее, если вы посмотрите на свой веб-сайт, он будет выглядеть следующим образом:

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

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

Создание файла functions.php

Файл functions.php позволяет изменять и добавлять функциональные возможности и возможности для веб – сайта WordPress. Он может содержать как PHP и встроенные функции WordPress. Кроме того, вы можете создавать свои собственные функции.

Короче говоря, functions.php содержит код, который коренным образом меняет вид и поведение веб – сайта.

Создание файла так же легко, как и создание таблицы стилей, если не легче. Все, что вам нужно, это текстовый файл с именем functions.php , а затем вставить следующий код:

Давайте посмотрим, что происходит, когда мы изменим порядок кода:

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

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

Работа с файлами шаблоном

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

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

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

Для нашего пользовательского шаблона страницы, мы просто скопируем файл page.php из родительской темы, переименуем его в custom-full-width.php и поместим его в папку с именем page-templates в нашей дочерней теме.

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

Единственное, что мы сделали здесь, это ввели заголовок, который говорит WordPress, что это шаблон страницы, где мы изменили get_header и get_footer , так что они будут включать в себя два файла с именами header-custom.php и footer-custom.php .

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

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

До сих пор наша страница выглядела так же, как и раньше. Это время для настройки. Давайте начнем с нашего пользовательского заголовка.

Еще раз, мы скопируем файл footer.php из темы двадцать пятнадцать родительской темы и вставим его в нашу дочернюю тему. На этот раз, однако, мы оставим его имя, как есть.

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

. Между этими тегами можно добавлять свой желаемый php-код.

Редактирование других файлов шаблонов

Кроме изменений CSS и функций, вы можете внести структурные изменения в вашу тему, откорректировав php файлы-шаблоны. Это следует делать с осторожностью, но за счет этого вы можете настроить любую часть темы. В отличие от редактирования файла functions.php , где функции оригинальной темы импортируются автоматически, при редактировании файлов-шаблонов дочерней темы они полностью заменяют шаблоны в родительской теме. Файл родительской темы игнорируется, а вместо него используется новый (с дочерней темы). Первое, что нам нужно сделать – это воссоздать старый файл, прежде чем мы начнем его менять. Для этого просто скопируйте файл-шаблон с родительской темы и вставьте его в папку с дочерней темой. Например, если мы хотим изменить файл-шаблон для шапки сайта (header.php), мы просто скопируем его из /wp-content/themes/sebweo/ и вставим в /wp-content/themes/sebweo-child/ (замените на свои пути! ).

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

Преимущества и недостатки дочерней темы

Преимущества использования дочерней темы WordPress

Безопасное обновление:

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

Легко расширяется:

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

Резервное копирование:

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

Недостатки использования дочерней темы WordPress

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

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

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

Зачем нужна дочерняя тема

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

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

Дочерняя (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.

Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.

Создаем дочернюю тему WordPress – практический пример

Напомню, все темы системы «лежат» в каталоге wp-content/themes . Далее по шагам.

• В каталоге wp-content/themes создаем папку с произвольным названием дочерней темы. Для примера создаю папку: first-child-theme. Название произвольно, скоро понадобится.
• В любимом текстовом редакторе (я использую Notepad++) создаем текстовой файл с расширением css и названием style . Название не меняем, а содержание файла должно содержать, пока, только заголовок:

/* Theme Name: First child theme Theme URI: http: //domen.ru/ Description: Создаю дочернюю тему Author: Игорь Серов Author URI: http: //сайт Template: zeefocus */

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

• Файл сохраняем и заливаем в папку дочерней темы, first-theme.
• В консоли сайта появляется дочерняя тема. Название совпадает с названием указанным в строке: Theme Name. При открытии темы показывается указанное описание темы — строка Description.

Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.

Как наполнить дочернюю тему

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

Для дублирования темы выбираем из двух вариантов исполнения:

• Копируем родительский файл style.css и переносим его в аналогичный файл дочерней темы (пока он всего один).
• Или в файле style.css дочерней темы вписываем дополнительную строку:

@import url(“../zeefocus/style.css”);

Где, zeefocus – основная, родительская тема.

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

Не забываем, функцию import вынести из заголовка файла style.css .

Другие файлы темы

Опять два варианта,

• создаем пустые файлы с аналогичными названиями пустым содержимым: () и пишем их, как нужно;
• или, проще, переносим файлы основной темы в дочернюю тему и их редактируем, как нужно.

Плагины child theme

О плагинах облегчающий создание дочерней темы сайта в статье.