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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Так как я импортирую настройки темы 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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Дочерняя тема WordPress (подтема) - это дополнительная тема, которая позволяет изменять/дополнять функции и внешний вид основной темы. При этом основная тема остается не тронутой, а значит её можно обновлять, не опасаясь, что внесенные изменения потеряются.

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

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

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

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

Что можно изменить в дочерней теме?

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

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

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

Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.

Создайте папку с любым названием в каталоге тем: wp-content/themes . Пусть twentyfifteen-child

Создайте в новой папке файл style.css . С содержимым:

/* Theme Name: Моя дочерняя тема Template: twentyfifteen Не обязательные параметры: Theme URI: http://site.ru/ Description: Дочерняя тема для темы twentyfifteen Author: Kama Author URI: http://site.ru/about/ Version: 1.0 */ /* импортируем стили родительской темы */ @import url("../twentyfifteen/style.css"); /* Свои дополнительные стили */ .foo{ color:red; }

1. Зайдите во Внешний вид › Темы и активируйте новую тему «Моя дочерняя тема».

Обязательно нужно указать строку Template: twentyfifteen , (строка регистрозависима) она указывает что это подтема темы twentyfifteen.

Директива @import должна быть первым правилом в style.css . Если написать правила перед ней, то она не сработает и стили родительской темы не подключаться.

В результате у нас должна получиться такая структура:

Wp-content └── themes ├── twentyfifteen (родительская тема) └── twentyfifteen-child (подтема; может иметь любое название) └── style.css

twentyfifteen-child может содержать и другие файлы, среди них:

style.css - (обязательный) полностью заменяет такой же файл родительской темы.

functions.php - дополняет functions.php родительской темы (загружается перед ним).

файлы шаблона - index.php , home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.

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

Файл style.css

style.css - единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.

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

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

Пример style.css дочерней темы.

/* Theme Name: Моя дочерняя тема Template: twentyfifteen Theme URI: http://site.ru/ Description: Дочерняя тема для темы twentyfifteen Author: Kama Author URI: http://site.ru/about/ Version: 1.0 */ // стили родительской темы @import url("../twentyfifteen/style.css"); // дополнительные стили.foo{ color:red; }

• Theme Name - (обязательно) название дочерней темы.

Template - (обязательно) регистрозависимое название папки родительской темы.

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

• Theme URI - адрес сайта дочерней темы.
• Description - описание дочерней темы.
• Author URI - адрес сайта автора дочерней темы.
• Author - имя автора дочерней темы.
• Version - версия дочерней темы.

Файл function.php

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

Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны.

Использование хуков

В файле footer.php в теме twentyfifteen есть событие twentyfifteen_credits . Чтобы добавить свой текст в подвал, можно использовать это событие, для этого добавим следующий код в functions.php дочерней темы:

Add_action("twentyfifteen_credits", function() { echo "Компания © 2015"; });

Переопределение функции

В файле functions.php родительской темы twentyfifteen есть функция twentyfifteen_fonts_url() - регистрирует шрифты google. Выглядит она так:

If(! function_exists("twentyfifteen_fonts_url")){ function twentyfifteen_fonts_url(){ // код функции... } }

Условие! function_exists("twentyfifteen_fonts_url") - если функция не существует, позволяет определить такую же функцию в functions.php дочерней темы.

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

Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:

Function twentyfifteen_fonts_url() { return ""; }

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

If(! function_exists("theme_function")){ function theme_function() { // Код. } }

В этом случае, дочерняя тема может переопределить функцию родительской темы просто объявив ее в своем functions.php .

Файлы шаблона

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

Несколько примеров создания файла шаблона в дочерней теме:

#1 Добавление шаблона, отсутствующего в родительской теме

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

Заметки

Форматы записей

Функция add_theme_support("post-formats") переопределит форматы, заданные родительской темой, а не дополнит их.

@import в style.css дочерней темы

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

Лучше подключить файлы стилей по-отдельности в HTML: сначала стили родительской темы, а затем дочерней, чтобы они были ниже в HTML коде и перебивали родительские стили. Делается это так:

Add_action("wp_enqueue_scripts", "my_theme_styles"); function my_theme_styles() { wp_enqueue_style("parent-theme-css", get_template_directory_uri() ."/style.css"); // не обязательно, правильная родительская тема подключит его сама. //wp_enqueue_style("child-theme-css", get_stylesheet_directory_uri() ."/style.css", array("parent-theme-css")); }

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

https://doctorsmm.com/ - это недорогой сервис с эффективным SMM соц сетей. Здесь Вы сможете получить услуги по раскрутке на более чем 9 топовых площадках, как отечественного, так и зарубежного интернета. Покупайте уже сейчас популярные ресурсы для увеличения счетчиков в соцсетях, такие, как лайки, подписчики и пр., с большими оптовыми скидками и персональными условиями добавления.

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

Что представляет из себя дочерняя тема 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. И тогда обычным нам способом добавлять в него нужные вам функции. Таким образом, будет правильный подход к модификации и расширений возможностей родительской темы.

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

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

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

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

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

Дочерняя тема располагается в отдельной папке и содержит свои собственные файлы style.css и functions.php . При необходимости возможно добавить дополнительные файлы, но основные файлы темы обязательны для ее правильной работы.

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

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

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

• Доступ к панели управления WordPress
• Доступ к (рекомендуется) или

Шаг 1 - Создание дочерней темы в WordPress

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

Вам необходимо создать папку для дочерней темы в стандартном каталоге тем WordPress wp-content/themes . Для удобства и сохранения порядка в каталоге, лучше создать папку с окончанием -child после названия родительской темы. Если хотите, можете добавить название конкретного проекта. Запомните, название каталога не должно содержать пробелы для избежания возможных ошибок. Для создания новой папки воспользуйтесь FTP-клиентом или Файловым Менеджером. Мы рекомендуем использовать бесплатный FTP-клиент FileZilla

В этом руководстве мы будет использовать Файловый Менеджер, для создания дочерней темы на основе стандартной темы Twenty Seventeen, поэтому полный путь до папки будет выглядеть так wp-content/themes/twentyseventeen-child .

1. Войдите в панель управления Hostinger и нажмите на иконку Файловый Менеджер .
2. Перейдите в папку где установлен WordPress (обычно это public_html ), далее wp-content → themes .
3. Нажмите кнопку Новая папка , введите название дочерней темы и нажмите Создать .

1. Войдите в созданную папку дочерней темы.
2. Нажмите кнопку Новый файл , введите style.css в качестве имени файла и нажмите Создать .

1. Вставьте следующий код в файл:

1. Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name , так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.

1. Добавьте файл functions.php в тот же каталог, но не вставляйте туда код из родительской темы, так как он должен оставаться отдельным от нее. Вместо этого, создайте пустой файл или добавьте новые.php функции необходимые для вашей дочерней темы.
2. Из панели управления WordPress, перейдите в раздел Внешний вид → Темы и нажмите кнопку Активировать на вашей дочерней теме.

1. Зайдите на ваш сайт, вы можете увидеть, что тема отображается не совсем правильно (как на картинке снизу). Без паники, это происходит из-за того, что файл functions.php еще не подгружает CSS из родительской темы.

1. Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php .
2. WordPress имеет функцию загрузки CSS из родительской темы. Скопируйте данный код в файл function.php дочерней темы:

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

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

Шаг 2 - Настройка дочерней темы WordPress

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

Шаг 2.1 - Настройка внешнего вида вашей дочерней темы

Для настройки внешнего вида темы вам необходимо отредактировать файл custom.css в каталоге вашей дочерней темы. Для этого можно использовать текстовый редактор и FTP-клиент, файловый менеджер или редактор WordPress (Внешний вид → Редактор) . Вам также необходимы некоторые базовые знания о правилах CSS и умение проверять элементы сайта с помощью браузера.

К примеру, для изменения цвета заднего фона, добавьте следующие CSS правила в файл style.css :

Site-content-contain { background-color: #d5ffa0; position: relative; }

Ниже показано то, каким станет внешний вид вашего сайта после внесения изменений.

Данный процесс применим и для изменения других элементов сайта.

Шаг 2.2 - Добавление и удаление функций

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

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

Function disable_search($query, $error = true) { if (is_search()) { $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false; // to error if ($error == true) $query->is_404 = true; } } add_action("parse_query", "disable_search"); add_filter("get_search_form", create_function("$a", "return null;"));

Заключение

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

По средним статистическим данным, около 80% сайтов используют основные темы WordPress, и только около 20% – используют дочернюю тему. Это можно объяснить тем, что большинство клиентов не понимают, что такое дочерняя тема ВордПресс, или думают, что ее трудно настроить. В сегодняшнем уроке мы рассмотрим практические моменты создания и использования дочерней темы, а также ее важность.

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

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

Практика

В нашем примере мы создадим дочернюю тему для основной темы sebweo . Прежде всего, нам нужно создать новую папку для дочерней темы (назовем ее, например, sebweo-child). Полный путь от корня сайта будет /wp-content/themes/sebweo-child/ . В папке новой темы создайте файл style.css (единственный обязательный файл) и заполните информацию выделенную комментариями (между /* и */ ), как в примере ниже. Название темы, URI, Описание и Автора можно полностью заменить под свои нужды.

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css");

Важнейшими частями этого файла есть разделы «Template:» (идентифицирует родительскую тему) и инструкция CSS @import (импортирует стили CSS из оригинальной темы). Убедитесь в том, что путь к основному CSS файлу родительской темы правильный, и в параметре «Template:» правильно указано название родительской темы. Откорректируйте это под свои названия и пути. Все эти данные чувствительны к регистру! В нашем примере название темы (и, соответственно, название папки с родительской темой) пишется в нижнем регистре, если у вас используется название с верхним регистром – вы должны так и писать (например, Sebweo).

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

После того, как вы создали папку с дочерней темой и файл style.css , вы можете активировать свою новую дочернюю тему. Активация дочерней темы не отличается от активации обычной темы: просто зайдите в Консоль WordPress по адресу Внешний вид > Темы (Appearances > Themes), найдите только что созданную тему и активируйте ее (нажмите кнопку Активировать на блоке с темой).

Редактирования CSS стилей основной темы

Итак, мы создали дочернюю тему. Сейчас стили на сайте выглядят так же, как при оригинальной теме. Это потому, что мы импортировали все CSS стили с оригинальной темы (помните инструкцию @import ?). Чтобы отредактировать стили, добавьте любые изменения в CSS-файл дочерней темы под инструкцией @import . Стили в дочерней теме имеют больший приоритет, поскольку они загружаются после стилей основной темы и тем самым переопределяют их.

Например, нам нужно изменить фоновый цвет сайта с #fff на #f5f5f5 . Для этого мы можем добавить соответствующий CSS-код в файл sebweo-child/style.css:

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css"); /* переписываем стили основной темы */ body { background-color: #f5f5f5; }

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

Редактирования файла functions.php

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

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

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

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

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

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

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

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

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

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

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

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

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

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