Как настроить смартфоны и ПК. Информационный портал

Создание дочерней темы в WordPress. Как создать и настроить дочернюю тему в WordPress

Не знаю точно, по каким причинам шаблоны для сайтов 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 позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.

Поддержка дочерних тем (child themes) в WordPress появились ещё давно, но большинство пользователей на сегодняшний день всё равно предпочитают вносить изменения в код исходной темы напрямую. В этой статье мы расскажем о том, как работают дочерние темы в WordPress, и почему именно с помощью дочерних тем следует вносить любые изменения в существующие темы.

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

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

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

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

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

В качестве примера мы создадим дочернюю тему My Child Theme и будем использовать стандартную тему Twenty Twelve в качестве родительской.

Сперва убедитесь в том, что родительская тема существует — найдите директорию twentytwelve в wp-content/themes . Затем создайте новую директорию в wp-content/themes и назовите её my-child-theme . В этой новой директории создайте файл style.css и вставьте в него следующий заголовок:

/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css");

С помощью этого заголовка мы определили название нашей новой темы, а так же указали родительскую. Директива @import в данном случае подгружает все стили из темы Twenty Twelve, поверх которых мы будем вносить наши изменения. Без этой директивы, наша дочерняя тема будет наследовать только шаблоны (разметку) родительской темы, а не стиль.

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

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

Если вы её активируете и перейдёте на главную страницу вашего сайта, вы увидите, что ваша дочерняя тема выглядит в точности как стандартная тема Twenty Twelve.

Работа со стилями

Стили CSS дочерней темы можно задать прямо в файле style.css сразу после директивы @import . Например, для установки цвета фона и цвета ссылок в вашей теме, добавьте следующий код в конец файла стилей:

Body { background: red; } a { color: green; }

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

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

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

Текст подвала

Таким образом мы заменили текст в подвале темы Twenty Twelve на наш собственный.

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

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

Стоит так же отметить, что подобным образом изменять можно не все файлы родительской темы. Например, вы не сможете изменить файл, который был вызван PHP функцией include или require .

Работа с functions.php

Если у вас возникли вопросы по внесении изменений в существующие темы 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”);<\pre>

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

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

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

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

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

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

Плагины child theme

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

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

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

Для подобных случаев в WordPress предусмотрен механизм создания дочерней темы (child theme). Такая тема использует в качестве основы родительский шаблон и при этом вы можете добавить в нее свои собственные файлы и функции.

Механизм работы с дочерними темами довольно простой. Прежде всего вам нужно в папке wp-content/themes создать новую папку для нее. Будем считать, что папка с основным шаблоном у нас называется parent, а мы создадим новую, которую назовем child.

В папку child нужно поместить, как минимум, один файл style.css. В нем необходимо разместить следующие инструкции:

/* Theme Name: Child Template: parent */

Theme Name: Child

Template: parent

Первая инструкция (Theme Name: Child) это просто название дочерней темы, фактически она не является обязательной, а вот вторая инструкция (Template: parent) является обязательной, и указывает, что данный шаблон является дочерним к parent.

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

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

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

Для корректной работы перед директивой @import не должно быть никаких правил CSS.

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

  • get_stylesheet_uri() — адрес файла стилей;
  • get_stylesheet_directory_uri() — адрес папки со стилями,

но он может подключать style.css каким либо другим способом, что приводит к возникновению проблем. В этом случае, скорее всего, будет не сложно посмотреть код и найти проблему.

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

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

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

Структура папок в дочерней теме должна совпадать с родительской структурой, если вы модифицируете файлы во вложенных папках.

Лучшие статьи по теме

Категории: