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

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

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

Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:

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

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

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

• Директория дочерней темы
• style.css
• functions.php

Первый шаг - это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes . Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “ -child ” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).

Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “ twentyfifteen-child ”, означающее, что родительской темой является Twenty Fifteen .

Следующий шаг - создание файла стилей для дочерней темы (style.css). Файл стилей должен начинаться со следующей мета-информации:

/* 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: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme 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

Важная информация, о которой вы должны знать:

• Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
• Строка “ Template ” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “ Template ” содержит “ twentyfifteen ”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом.
• В принципе, файла стилей (style.css) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файл functions.php (см. ниже).

Третий и последний шаг - постановка в очередь родительских и дочерних файлов стилей.

Заметьте, что предыдущий метод предполагал импорт родительских стилей, используя директиву @import . Сейчас это уже устаревшая практика.

Как правильно и корректно загружать стили

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

Данный метод также предполагает использование функции wp_enqueue_style() в дочернем файле functions.php . Поэтому вам нужно создать этот файл в директории с дочерней темой.

Первая строка дочернего файла functions.php начинается с открытия тега PHP (

Следующий пример функции будет работать, если родительская тема использует только один главный файл style.css , содержащий все CSS правила. Если ваша тема имеет больше одного.css файла (в т.ч. ie.css , style.css , main.css), тогда вам потребуется удовлетворить все необходимые зависимости родительской темы.

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

Как правило, файл стилей дочерней темы загружается автоматически. Если это не так, вам также надо будет его поставить в очередь. Настроив “ parent-style ” как зависимость, убедитесь, что стили дочерней темы загружаются после нее.

add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); wp_enqueue_style("child-style", get_stylesheet_directory_uri() . "/style.css", array("parent-style")); }

add_action ("wp_enqueue_scripts" , "theme_enqueue_styles" ) ; function theme_enqueue_styles () { wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ; wp_enqueue_style ("child-style" , get_stylesheet_directory_uri () . "/style.css" , array ("parent-style" )

Теперь ваша дочерняя тема готова для активации. Войдите в административную панель, далее на страницу Внешний вид > Темы . Вы должны увидеть вашу дочернюю тему в списке тем и готовую к активации. (Если в текущей инсталяции включена мультисайтовость, тогда вам надо переключиться на соответствующую панель, чтобы включить тему. После этого переключитесь обратно и активируйте тему).

Важно : После активации вам потребуется пересохранить ваше меню (Внешний вид > Меню или Внешний вид > Настроить > Меню ) и опции темы, включая фоновое изображение, а также изображение в шапке, если таковые предусмотрены родительской темой.

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

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

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

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

Использование functions.php

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

Таким образом, functions.php дочерней темы обеспечивает “умный”, беспроблемный способ изменения функциональности родительской темы. Скажем, вы хотите добавить функцию PHP к вашей теме. Самый быстрый способ - открыть файл functions.php темы и поместить функцию туда. Но это не очень умно: когда в следующий раз тема обновится, ваша функция просто исчезнет.

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

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

" . "\n"; } add_action("wp_head", "favicon_link");

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

if (! function_exists("theme_special_nav")) { function theme_special_nav() { // Сделать что-то. } }

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

Включение файлов в вашу дочернюю тему

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

Ниже пример использования конструкции require_once , который иллюстрирует, как вы можете использовать get_stylesheet_directory , когда нужно дать ссылку на файл, хранящийся в структуре дочерней темы.

require_once(get_stylesheet_directory() . "/my_included_file.php");

require_once (get_stylesheet_directory () . "/my_included_file.php" ) ;

Дополнительная полезная информация

Использование форматов постов

Дочерняя тема наследует форматы постов, определенные в родительской. Когда создаете дочернюю тему, знайте, что использование add_theme_support("post-formats") перекроет форматы, определенные в родительской теме, а не добавит к ним.

Поддержка RTL (написание справа-налево)

Для поддержки языков RTL, добавьте файл rtl.css к вашей дочерней теме. Он содержит:

/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */

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

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

Сегодня в статье я объясню для чего вам нужны дочерние темы и как работать с ними.

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

Как работают дочерние темы и почему их нужно использовать?

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

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

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

Обновления

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

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

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

Структура

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

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

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

Это очень просто — создать дочернюю тему. Так просто, что вы можете взять и скопировать мой пример внизу.

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

• Создать директорию для темы
• Создать таблицу стилей с информацией о вашей дочерней теме
• Подключить стили родительской темы

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

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

1. Для начала создайте папку для вашей новой темы в директории тем. Вы можете выбрать для нее имя. Ради ясности я назову ее twentyfourteen-child

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

/* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite..0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */

Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite.com/twentyfourteen-child/ Description: My first child theme, based on Twenty Fourteen Author URI: http://сайт Template: twentyfourteen Version: 1.0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child

В приведенном выше коде есть две важных строки, которые начинаются с “Theme Name” и “Template”. “Theme name” сообщает WordPress как ваша тема называется и это название отображается в селекторе тем. “Template” сообщает WordPress какую тему необходимо считать исходной темой.

Большинство остальных моментов интуитивно понятные за исключением text domain и tags. The text domain используется для перевода строк. Он должен быть уникальным для вашей темы и использоваться каждый раз, когда вы используете функции перевода. Для большей информации ознакомьтесь с I18n for WordPress Developers . Секция с тегами представляет собой список тегов, которые используются для Репозитория Тем WordPress. Для примера я скопировал теги из style.css файла исходной темы.

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

У нас есть файл с таблицами стилей, поэтому WordPress не подгружает файлы исходной темы. Чтобы убедится, что мы загружаем таблицы стилей исходной темы давайте их подключим с помощью системы enqueueing. Это можно сделать в файле темы functions.php, поэтому давайте его создадим сейчас, просто копируя код внизу:

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

add_action ("wp_enqueue_scripts" , "enqueue_parent_styles" ) ; function enqueue_parent_styles () { wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ;

Как работают дочерние темы?

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

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

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

Небольшие заметки для разработчиков тем

Если вы создаете темы, то есть парочка руководств, которыми вы можете воспользоваться, чтобы упростить этот процесс. В двух самых важных описывается разница между get_stylesheet_directory() и get_template_directory() и процесс создания pluggable functions .

Правильна директория

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

/images/twitter.png" alt="Twitter Logo">Follow Me /images/github.png" alt="Github Logo">On Github

< a href = "http://twitter.com/danielpataki" > < img src = " /images/twitter.png" alt = "Twitter Logo" > Follow Me < / a > < a href = "http://github.com/danielpataki" > < img src = " /images/github.png" alt = "Github Logo" > On Github < / a >

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

Это объясняется тем, что, если дочерняя тема активна, то функция get_stylesheet_directory_uri() не проверяет (не знает) какой файл вы загружаете, соответственно она не будет проверять его существование и всегда будет возвращать URI для дочерней темы.

Изменяемые функции

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

Предположим, что вы создаете функцию для отображения custom post meta с именем my_meta() . Дочерняя тема никак не может изменить эту функцию, т.к. она не может быть определена дважды. Решением этой проблемы может быть только создание функции, которая не определена (помните, что файл с функциями дочерней темы загружается первым).

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

Навигация по странице:

Что такое дочерняя тема wordpress и зачем она нужна

Дочерняя тема wordpress – это тема, которая используется в wordpress для изменения или расширения функций родительской (основной) темы.

Использование wordpress child theme позволяет полностью изменить CSS стили, Html и javascript код, а также PHP код или отдельные его функции без вмешательства в авторскую тему. Проще говоря, после наших правок мы сможем обновлять скачанную или приобретенную тему не теряя своих правок и функционала.

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

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

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

Замкнутый круг? – не совсем, можно не обновлять тему и не обращаться в поддержку 🙂

Хорошенький совет, не правда ли??

В этой ситуации нам может помочь wordpress child theme. Мы просто забрасываем в wp-content/themes чистую (без правок) приобретенную тему, а также создаем дочернею и забрасываем единственный файл: style.css (он обязательный).

Преимущества использования wordpress child theme

(нажимайте на цифры, чтобы посмотреть все преимущества)

• Wordpress child theme наследует все функции и возможности родительской темы + позволяет дописать свои или заменить существующие.

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

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

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

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

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

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

Предлагаю вашему вниманию краткую инструкцию по созданию wordpress child theme для темы Twenty Sixteen, которая идет в базе нового WP.

Краткая инструкция как сделать дочернюю тему wordpress

Нажимая на цифры ниже, вы сможете перейти к следующему шагу.

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

Вот так сейчас выглядит наш сайт:

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

Widget h2.widget-title{color:#228E4F;}

Вот так выглядят правки в стилях:

А так результат наших правок:

Предлагаю также создать другие правки. Например, всем СЕО разработчикам надоедает то, что у виджетах заголовки выводятся в h2. Лечить эту проблему довольно просто через wordpress child theme. Для этого мы должны:

1) Создать файл functions.php.

2) Записать в него вот такой код:

__("Sidebar", "twentysixteen"), "id" => "sidebar-1", "description" => __("Add widgets here to appear in your sidebar.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "

",)); unregister_sidebar("sidebar-2"); register_sidebar(array("name" => __("Content Bottom 1", "twentysixteen"), "id" => "sidebar-2", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "",)); unregister_sidebar("sidebar-3"); register_sidebar(array("name" => __("Content Bottom 2", "twentysixteen"), "id" => "sidebar-3", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "",)); } ?>

Здесь мы делаем очень простую вещ, удаляем все сайдбары зарегистрированные родительской темой unregister_sidebar("sidebar-3"); и закидываем новый код создания сайдбаров, который мы взяли с родительской темы. Вот и все. Смотрим результат:

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

Отличия родительской от дочерней темы wordpress

Отличие этих тем в логике работы:

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

если файл отличный от functions.php есть в дочерней теме, значит он заменяет собой аналогичный файл в родительской

Всем спасибо за внимание, на этом у меня пожалуй что все, делимся статьей со своими друзьями

, пишем комментарии 🙂