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

Что такое дочерняя тема (child theme) и для чего её нужно создавать для сайтов на wordpress? Давайте рассмотрим данные аспекты и разберемся каким образом её можно сделать.

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

Дочерняя тема (child theme) — новая тема (подтема) для сайта на wordpress на основе базовой (родительской). Она берет все стандартные настройки шаблона из «родительской» темы. Такая тема получает возможности для внесения каких-либо изменений без опасений потери данных при обновлении.

Дочерняя тема фактически является копией родительской. И ссылается на основные каталоги данных дизайна и интерфейса к файлам в базе данных основной (родительской) темы.

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

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

Для чего нужна дочерняя тема

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

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

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

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

Child Theme wordpress

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

Сделать это можно двумя способами:

  • Скачать и активировать соответствующий плагин
  • Сделать в ручную через корневой каталог сайта

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

Создание child theme через плагин

Самый удобный и популярный плагин для создания «дочки» называется Child Theme Configurator.

Плагин для создания дочерней темы child theme configurator

Он присутствует в официальном магазине плагинов для wordpress. Жмем «Установить«. После установки и активации, переходим в раздел «Инструменты» -> «Child Themes«. Заходим в настройки плагина.

Плагин для создания дочерней темы child theme configurator 1

В меню плагина вы увидите вот такое окно. Нам нужно выбрать первый пункт на стартовом меню «CREATE a new Child Theme«. Выбираем его.

Плагин для создания дочерней темы child theme configurator 2

Дальше снизу будет список родительских тем (Parent Theme), среди которых нужно выбрать ту тему, «дочку» которой вы хотите создать. В моем случае, это тема «Basic«.

Плагин для создания дочерней темы child theme configurator 3

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

Плагин для создания дочерней темы child theme configurator 4

По результатам анализа нам должно высветиться вот такое сообщение «This theme appears OK to use as a Child theme«. Это значит, что плагин проверил наш шаблон на возможность создания «дочки» и дал добро.

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

Плагин для создания дочерней темы child theme configurator 5

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

Плагин для создания дочерней темы child theme configurator 6

Переходим к 9-ому пункту и нажимаем на кнопку «Create New Child Theme«. Ваша дочерняя тема создана и плагин можно удалить, так как свою роль он выполнил и уже не нужен для дальнейшей функциональности.

Создание дочерней темы вручную

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

Да и для общего понимания не будет лишним посмотреть как это делается в ручную.

Первым делом, нужно перейти в папку с сайтом на хостинге вашего регистратора.

создание дочерней темы в wordpress child theme в ручную 1

Заходим в по адресу: /www/ваш-сайт.ru/wp-content/themes/. Создаем новую папку с названием «My Child Theme» (или любым другим — не принципиально). У меня она получила название «basic child theme«.

Теперь заходим в папку с основной нашей темой (у меня это папка «basic«) и копируем оттуда файл style.css.

создание дочерней темы в wordpress child theme в ручную 2.1

Вставляем данный файл в папку для создания дочерней темы.

создание дочерней темы в wordpress child theme в ручную 3

Теперь в него нужно внести изменения. Выбираем файл style.css и жмем «Изменить«.

создание дочерней темы в wordpress child theme в ручную 4

Теперь выделяем всё содержимое файла и удаляем (через функцию «ctrl + A«). Мы получим чистый файл style.css в который будем вписывать нужный код.

создание дочерней темы в wordpress child theme в ручную 5.1

Так как я импортирую настройки темы basic, у меня все данные указаны для данной темы. Если у вас другая тема, нужно вписать её имя в данном коде.

Давайте разберемся с каждой строкой кода.

  1. Theme name: Имя вашей темы в админ панельке для вас.
  2. Template: указываем название родительской темы.
  3. @import url(«../имя-темы/style.css»); — указываем командой откуда брать данные шаблона для дочерней темы (адрес к регистру Parent Theme).
  4. .foo{ color:blue; } — необязательная настройка стиля произвольного шаблона для «Child Theme«.

/*
Theme Name: My child theme name
Template: имя-вашей-темы
*/

@import url(«../имя-вашей-темы/style.css»);

Вот так будет выглядеть полностью готовый файл style.css для дочерней темы:

создание дочерней темы в wordpress child theme в ручную 6

Оставляем вот такой кусок кода и жмем «Сохранить«. Ваша дочерняя тема готова.

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

Тему создали? Теперь нужно её наложить на свой сайт. Как это сделать?

как активировать дочернюю тему на wordpress

Переходим в раздел «Внешний вид» -> «Темы«. И ищем свою «дочку» по названию, которое присвоили ему через команду «Theme name» в файле style.css.

Если вы ставили тему через плагин, то его имя будет по формату: «тема-child». Ищите её по такому названию. Если тема была назвалась «twenty seventeen«, то его дочерняя тема (через плагин) будет называться: «twentyseventeen-child«.

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

В «Темах» находим свой дочерний шаблон и выбираем на нем кнопку «Активировать«.

активация дочерней темы в wordress

На последней фотографии, вы видите два шаблона Basic. Левый — дочерняя тема шаблона (Child Theme), а правый — родительская тема (Parent Theme). «Дочка» перенимает все настройки дизайна с родительской через команду @import.

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

При создании дочерней темы в ручную через код, вы можете столкнуться с одной проблемой. В «Редакторе» файлов дочерней темы будет только одна «Таблица стилей» в правом столбце «Файлы темы«.

проблема дочерней темы нет файлов темы

У родительской темы в «Файлах темы» будет множество строк, а у дочерней — только файл «Таблицы стилей (style.css)«. Что делать в такой ситуации?

Я решил этот вопрос так: Скопировал все файлы из папки родительской темы, кроме измененного style.css, и залил их в папку с дочерней.

Поэтому я бы предложил более простой способ решения данной проблемы.

проблема дочерней темы нет файлов темы что делать

Просто копируете всё содержимое папки родительской темы, вставляете в папку для дочерней темы и перенастраиваете файл style.css как в примере выше.

Вот и всё. Тогда все вкладки в «Редакторе» у вас сохраняться и в них можно вносить любые желаемые изменения.

Вывод

Создать дочернюю тему достаточно просто и необходимо это сделать в самом начале жизни вашего сайта на wordpress. Проще всего — использовать плагин, после того, как он создаст для вас child theme, его можно удалить.

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (5 оценок, среднее: 5,00 из 5)
Загрузка...

Комментарии 4

  • С плагином идея збс, зачем ставить руками, если можно сделать в 2 клика через плагин?

    • Люди по разному делают. Суть метода «руками» полезен, так как вы сможете копировать все содержимое «Файла темы» в дочернюю тему и вносить необходимые изменения в дочке сразу.
      Да, плагином и быстрее, и удобнее. Но кто делал руками — больше понимает в структуре функционирования сайтов на WordPress и работы с каталогами базы данных своего ресурса.
      Лишним не будет знать и такой метод…

  • То есть, дочерняя тема это копия родительской или новая тема? Чот не вкупил немного.

    • Ну что-то вроде того. Она не копирует всё содержимое «родительской темы» а только настойки шаблона и интерфейса (дизайна), и копирует данное содержимое через команду в файле style.css — @import.
      Вот и всё. Остальное содержимое у «дочки» — уникально. Как настроите — так и будет всегда.
      И вам не будет страшно обновление базового шаблона при выходе нововведений от создателя.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика