Вдохновленный статьей на хабре, решил создать свою версию про создание дочерней темы в 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. А проще говоря, как сделать так, чтобы изменения, сделанные в шаблоне сайте, не исчезали после каждого обновления шаблона автором.

Зачем это нужно

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

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

Создать дочернюю тему WordPress вручную

  • Предположим, у вас тема «father», создаем к ней дочернюю темы;
  • Создайте каталог дочерней темы, пусть будет «daughter»;
  • В Notepad++ создайте файл.css со следующим содержимым:
/* Theme Name: Daughter Template: father */

Обратите внимание, что директива Template указывает родительскую тему и она обязательна.

Важно! Теперь, когда вы поместите в каталог «дочки» файл, он заменяет аналогичный файл у «родителя». Это правило НЕ работает для файла functions.php.

Но это не всё. Нужно стили «родителя» перенести в стили «дочки». Это делается двумя способами:

Способ 1. Просто перенести содержимое файла стилей (style.css) в аналогичный файл родителя;

Способ 2. Или добавить файл style.css дочки следующую строку:

@import url("../father/style.css");

Обращаем внимание на относительный адрес с указанием родительского шаблона (father).

Тематические плагины для создания дочерней темы

Про плагины для создания дочерней темы, скажу так, если вам нужна дочерняя тема, поставьте плагин, создайте «дочку», удалите плагин и не мучайтесь ручной работой. Работа с любым перечисленным ниже плагином займет 10-15 секунд, если вы не создаете дочернюю тему уже измененного шаблона.

Child Theme Wizard

Позволяет создать новую дочернюю тему без необходимости использования дополнительных инструментов прямо из интерфейса администратора WordPress.

Child Theme Configurator

https://ru.wordpress.org/plugins/child-theme-configurator/

Быстрая и простая в использовании утилита, которая позволяет анализировать любую рабочую тему и создавать дочернюю тему настраивать её. Child Theme Configurator позволяет легко идентифицировать и переопределять точные атрибуты CSS, которые вы хотите настроить. Анализатор сканирует предоставленную тему и автоматически настраивает вашу дочернюю тему.

Childify Me

https://ru.wordpress.org/plugins/childify-me/

Позволит создать дочернюю тему для любой установленной темы, непосредственно с панели Внешний вид>>>Тема.

Создать дочернюю тему измененного шаблона

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

Вариант 1. Поставьте плагин Child Theme Configurator, он сам «просветит» ваш шаблон и перенесет измененные файлы в дочернюю тему;

Вариант 2. Сделайте «дочку» в ручном режиме и далее: Перенесите измененные файлы из родительской темы в дочернюю тему.

Всё! Теперь вы работаете на дочерней, измененной ранее теме.

Выводы

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

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


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

Определились? Отлично, теперь рассмотрим как же создать тему-дополнение .

Дочерняя тема wordpress, что нужно что бы создать

Итак, что бы создать дочернюю тему нам нужно сделать несколько простых шагов.

  1. Первым делом нам нужно создать папку для нашей будущей уникальной темы.
  2. Затем создать обычный текстовый документ и сменить его название на style.css, открыть который мы сможем при помощи специального редактора notepad++ или же другого того же типа.
  3. В созданном нами файле нужно будет написать правильное заглавие, так называемую шапку файла.

Давайте проделаем все вышеперечисленные операции вместе и по порядку. Начнем с того, что папку нашей дочерней темы WordPress темы нужно создать внутри wp-content/themes. Название можете придумать какое угодно, это никак не скажется на вашем сайте и нигде не будет видно, для наглядности давайте посмотрим на картинку как это можно сделать:

Создали? Ок, идем в нашу папку и создаем файл каскадной таблицы стилей style.css. После создания файла открываем его для редактирования.

Шапка style.css дочерней темы WordPress

Что бы правильно настроить нашу дочернею тему мы должны написать нашу шапку которая будет вмещать в себя следующие параметры:

  • Название дочерней темы , то которое мы придумали для нашей папки, параметр является обязательным для заполнения по этому придумайте адекватное название - «Name».
  • Можно указать адрес вашего сайта на котором будет использована тема - «Theme URI».
  • Описание темы, хоть и биографию свою напишите, не имеет значения - «Description».
  • Имя создателя темы, ваше, вашего соседа или же вымышленное, все зависит от вашего настроения - «Author».
  • Обязательным и точным параметром является название папки родительской темы - «Template».
  • Возможно указать версию вашей дочерней темы например 1.1.5 или что-то в этом роде - «Version».

Разобравшись с нужными нам атрибутами заголовка посмотрим какой пример нам дают на официальном сайте :

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

Разница между дочерней темой WordPress и созданной уникальной темой.

Следует понимать разницу между дочерней темой и полностью написанной с нуля темой WordPress. лишь вносит изменения и дополнения в использованную нами за основу тему для WordPress. Как же прикрутить наш стиль к стилю родителя? Для этого существует команда. которая стоит выше всех остальных, иначе подключение не получится. Выглядит она так: @import url(«www/mysite.ru/twentyten/style.css»). Выходит что мы берем исходный стиль и пишем дополнения и изменения. Дочерняя тема стоит ниже родительской, по этому сначала грузится родительская, а уж потом поверх мы проводим изменения нашей дочерней, которая и воспроизводится.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

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

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

Чем отличается «дочь»

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

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

Удобно ли работать

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

  1. Они автоматически сохраняют внесенные корректировки. Благодаря этому можно вносить коррективы напрямую в код, без рисков, что настройки собьются или будут утрачены при обновлении.
  2. Работа с ними - прекрасная подготовка для перехода к написанию основного кода для родительских вариантов.
  3. Улучшается рабочий процесс. Имея в распоряжении всего одну тематическую основу, вы можете создавать сайты, различные по сложности и функционалу.

Так как это продолжение родительской, набор особенностей и функций здесь идентичен. Главные составляющие:

  1. Директория (папка/место расположения файловых составляющих).
  2. «style.css», где прописаны основные и дополнительные свойства.
  3. «functions.php», где прописано определение функций.

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

Функционирование

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

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

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

Как создать

Сначала проверьте, есть ли у вас в распоряжении все необходимое. А именно доступ к FTP или файловому менеджеру, открытый доступ к самой панели управления ВордПресс. Итак, приступим.

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

Это достаточно простой процесс. Если будет детально следовать инструкции, его освоит любой пользователь.

Прежде всего создаем папку для дочери в стандартном каталоге. Чтобы в каталоге был порядок и содержимое было систематизировано, лучше назвать папку по образцу «Наименование родителя + окончание child». Для удобства можно добавить наименование того или иного проекта, для которого мы создаем theme. Главное, чтобы название каталога не имело пробелов, в противном случае это может привести к появлению ошибок. Файловый менеджер или FTP-клиент поможет создать новую папку. На сегодняшний день хорошо зарекомендовал себя такой FTP-клиент как FileZilla.

Для примера возьмем за основу «Twenty Seventeen», которая многим знакома. Работать я предпочитаю с Файловым менеджером, поэтому у меня путь до созданной папки выглядит таким образом:

Делаем следующее:


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

Шаг No2. Настройка

Чтобы приступить к работе, видоизменять, дополнять, адаптировать под запросы и требования вашего сайта «дочь», необходимо правильно выполнить настройки. Будем разбираться по порядку.

  1. Сначала нужно настроить внешний вид.

Для этого мы внесем коррективы в «custom.css», который расположен в каталоге. Сделать это можно через FTP-клиента, обычный текстовый редактор, файловый менеджер или специальный редактор ВордПресс (найти его можно, открыв «Внешний вид», после этого «Редактор»). Здесь понадобятся хотя бы минимальные знания правил использования CSS, а также навык проверки через браузер элементов сайта. Например, чтобы изменить цвет фона в «style.css», мы прописываем следующее правило CSS:

На следующей картинке представлено, как изменится дизайн сайта после внесенных корректировок. Фон стал салатовым:

Таким образом можно отредактировать любые имеющиеся элементы на сайте.

2.Работа с функциями.

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

Для добавления новой опции в файл вписывается и новый PHP-код. Например, код, представленный ниже, удалит опцию поиска WordPress.



Специальные сервисы для облегчения труда разработчика

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

  1. Child Themify.

Это максимально простой и легкий в использовании плагин с интуитивно понятным интерфейсом. Многие настройки здесь можно выполнять одним нажатием кнопки.

2. Child Theme Configurato.

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

3. _child Theme Boilerplate.

Здесь представлены готовые шаблоны для формирования «дочерей». Шаблон назван просто - «_child» - и разработан специально для упрощения работы. Шаблон предлагает интуитивную тему, от вас требуется только указать ссылку на «родителя». Шаблон данного типа позволяет создавать профессиональные варианты - здесь уже созданы 2 готовых файла, стандартные «functions.php» и «style.css».

Первый из них обладает особенной функцией под названием «aa_enqueue_styles()». Опция позволяет создавать очередь таблиц стилей, где сначала идут родительские, а затем дочерние. В результате стиль последних всегда определяется первыми.

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

Вот код, с помощью которого можно добавить данную опцию:

Второй файл имеет базовый хедер, содержащий особую информацию. Данные сведения позволяют WordPress распознать его как таблицу стилей «дочери». Поэтому особенно важно прописать код для «style.css»:



Подытожим

Не имеет значения уровень владения программированием, а также опыт работы с ВордПресс. Создать дочернюю тему WordPress не составит особого труда, при этом нет риска, что настройки удалятся после выхода. Путем написания небольшого кода или внесения изменений в уже написанный и проведения простых действий с каталогом вы можете изменить свой сайт. Главное - соблюдать инструкцию, постепенно переходя от одного пункта к другому. Не забывайте следующее: если появляются обновления для «родителя», «дочери» не изменяются, это правило касается вносимых изменений в контент, настройки и так далее.

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

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

Что представляет из себя дочерняя тема WordPress?

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

Значение: дочерняя тема (ДТ), главным образом, предназначена для правильного редактирования родительской темы (та, которая активированная в данный момент). Использование такого способа позволит сохранить все внесенные изменения родительской темы (РТ) при ее следующем обновлении.

Польза: Колоссальная. Поскольку это правильное решение в любых изменениях РТ.

Как создать дочернюю тему в WordPress

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

Об этом варианте мы вкратце и поговорим. В репозитории, как всегда, большой выбор плагинов в реализации решений каких-либо задач. Мой выбор пал на плагин «One-Click Child Theme », который создаст дочернюю тему в один клик.

После активации модуля «One-Click Child Theme» перейдите во вкладку «Внешний вид – Child Theme». На этой странице находится три поля для заполнения:

Как работать с дочерней темой

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

Файлы темы. Копируется из РТ файл, в котором требуется что-то сделать свое, и переносится в ДТ (учитывайте, если файл находится в подпапке темы, то в ДТ также создаете такую же папку). Затем уже начинайте с ним работать, меняете, добавляете то, что нужно и проверяете результат.

Стили оформления (style.css). Для того, чтобы иметь возможность редактировать стили родительской темы непосредственно в дочерней теме, нужно их вначале импортировать через файл style.css или файл functions.php . Иначе изменения не будут происходить. А делается это так:

CSS @import

/* Theme Name: child-my-theme Description: Дочерняя тема

Функция

Add_action("wp_enqueue_scripts", "my_theme_enqueue_styles"); function my_theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); }

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

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