Дочерняя тема wordpress что это
Дочерние темы WordPress
Дочерняя тема WordPress (подтема) — это дополнительная тема, которая позволяет изменять/дополнять функции и внешний вид основной темы. При этом основная тема остается не тронутой, а значит её можно обновлять, не опасаясь, что внесенные изменения потеряются.
Дочерняя тема — это тема созданная на основе родительской. «На основе» значит, что если запрашиваемого файла темы нет, он будет взят из родительской темы: родительская тема как бы страхует дочернюю тему. С технической стороны, при создании дочерней темы, она становится основной, а родительская дополняющей темой.
Зачем нужна дочерняя тема?
Дочерние темы нужны для того, чтобы разработчики тем могли обновлять/улучшать свои темы, а пользователи могли обновлять темы и не терять при этом внесенные изменения.
Поэтому, если вы используете готовую тему WordPress, автор которой не бросил разработку, то не редактируйте файлы темы напрямую, а создайте дочернюю тему и изменяйте основную тему через дочернюю.
Что можно изменить в дочерней теме?
В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.
От сюда можно сделать вывод, что родительские темы бывают хорошие и плохие. Часто, подправить нужно не много: стили, изменить подвал и другие мелочи, а это можно сделать для любой родительской темы без особых проблем.
Создание дочерней темы
Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.
Директива @import сильно замедляет загрузку страницы, поэтому стили родительской темы лучше подключать иначе.
В результате у нас должна получиться такая структура:
twentyfifteen-child может содержать и другие файлы, среди них:
style.css — (обязательный) полностью заменяет такой же файл родительской темы.
functions.php — дополняет functions.php родительской темы (загружается перед ним).
Файл style.css
style.css — единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.
style.css дочерней темы полностью заменяет style.css родительской темы, т.е. файл стилей родительской темы вообще не загружается.
Пример style.css дочерней темы.
Template — (обязательно) регистрозависимое название папки родительской темы.
Заметка: при изменении нужно сбросить настройку, для этого нужно переключится на другую тему и вернуться обратно.
Файл functions.php
В отличие от других файлов подтемы, functions.php не заменяет родительский файл, а дополняет его: он загружается прямо перед родительским и другими файлами подтемы.
Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны.
Использование хуков
Переопределение функции
Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:
Заметка для разработчиков тем: давайте возможность переопределять функции в дочерних темах, для этого при создании темы оборачивайте функции в условие:
Файлы шаблона
В дочерней теме можно использовать все те же файлы темы, что и в любой теме WP. Полный список читайте в статье «Иерархия шаблонов темы».
Несколько примеров создания файла шаблона в дочерней теме:
#1 Добавление шаблона, отсутствующего в родительской теме
#2 Изменение шаблона, имеющегося в родительской теме
Допустим, у нас есть home.php в родительской теме и нам нужно его изменить.
Создаем home.php в подтеме.
Скопируем в него код файла из родительской темы.
Как это работает: шаг за шагом
Процесс работы дочерней темы со стороны WordPress:
WP открывает style.css темы установленной в настройках системы и считывает заголовки.
Директива Template: объявляет что у темы есть родительская тема и указывает её название. Теперь WP работает с темой как с дочерней.
Такая связь устанавливается при активации темы.
Локализация подтем
Для локализации WP будет использовать файлы перевода родительской темы. И разумеется, нужных строк перевода там может не быть. Поэтому для подтемы нужно создать файл перевода и подключить его в коде подтемы.
Для подключения есть спец. функция: load_child_theme_textdomain(). Используем её в functions.php подтемы:
Теперь можно использовать функции локализации WordPress в подтеме:
Так, для дочерней темы у нас будут отдельные файлы перевода, а для родительской будет использоваться родные файлы.
Функции WordPress связанные с дочерними темами
get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).
get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).
get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).
get_template_directory() — получает путь до текущей темы (родительской, не дочерней).
get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).
get_template() — получает название каталога текущей темы (родительской, не дочерней).
Т.е. если нужно получить ссылку на файл темы, но при этом используется дочерняя тема, то УРЛы от: get_stylesheet_directory_uri() и get_template_directory_uri() буду отличаться: первый будет на дочернюю тему, а второй на родительскую.
Плагин для быстрого создания дочерних тем
Чтобы не возиться с созданием папок и файлов, можно воспользоваться плагином One-Click Child Theme.
Он позволяет создать дочернюю тему из текущей в один клик. После создания темы плагин можно удалить. У плагина много хороших отзывов.
Заметки
Форматы записей
Функция add_theme_support(‘post-formats’) переопределит форматы, заданные родительской темой, а не дополнит их.
@import в style.css дочерней темы
Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней. Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы. В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла.
Лучше подключить файлы стилей по-отдельности в HTML: сначала стили родительской темы, а затем дочерней, чтобы они были ниже в HTML коде и перебивали родительские стили. Делается это так:
В результате в HEAD части HTML документа мы получим две ссылки на два файла стилей, которые при загрузке будут загружаться параллельно, а не последовательно. Это сэкономит нам время на один запрос к серверу от бразуера.
Подробнее про такой тип загрузки читайте в отдельной статье: Альтернатива @import в дочерних темах
Зачем нужна дочерняя тема WordPress
Вступление
WordPress всегда удивляла меня скрытыми возможностями. И удивляла не столько наличием этих возможностей, сколько простотой их реализации. Конечно, скрытые возможности не относятся к великим тайнам системы, просто до поры до времени, ты даже не знаешь, что «такое» можно сделать на WordPress. Доступность для редактирования кодов рабочих тем WordPress, позволяют изменять и дополнять внешний вид сайта от смены оформления до создания дополнительных виджетов и плагинов.
Зачем нужна дочерняя тема
Однако, есть одно небольшое неудобство: любые прямые корректировки кода темы, исчезают, а вернее возвращаются к первоисточнику, после каждого обновления шаблона. Чтобы избежать таких откатов, создается дочерняя тема WordPress, которая позволяет редактировать код темы без угрозы потерять все изменения при плановом обновлении.
Что такое дочерняя тема WordPress
Дочерняя тема WordPress (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.
Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.
Создаем дочернюю тему WordPress – практический пример
Здесь, важна только, последняя строка, это название папки с родительской темой. Именно из нее, система будет подкачивать стили шаблона.
Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.
Как наполнить дочернюю тему
Напоминаю задачу, нам не нужна пустая дочерняя тема, а нужна тема, дублирующая родительскую тему, чтобы в ней менять стили и разметку.
Для дублирования темы выбираем из двух вариантов исполнения:
Где, zeefocus – основная, родительская тема.
Важно! Этой строкой мы подгружаем стили основной темы. Теперь, не нужно копировать файл стиля, можно вносить изменения в пустой файл дочерней темы и он будет записываться поверх стилей основной темы. Редактировать файл style.css можно из админки сайта, с соблюдением безопасного редактирования, на вкладке Внешний вид→Редактор.
Не забываем, функцию import вынести из заголовка файла style.css.
Другие файлы темы
Опять два варианта,
Плагины child theme
О плагинах облегчающий создание дочерней темы сайта в статье: Как создать дочернюю тему WordPress при помощи плагинов
WordPress.org
Codex
Дочерние темы
Дочерняя тема WordPress — это тема, которая расширяет функционал другой темы, называемой родительской темой, и позволяет вам изменять или дополнять функционал родительской темы. Эта статья рассказывает как создать простую дочернюю тему, и объясняет что вы можете с ней сделать. Как пример родительской темы используется Twenty Ten, новая тема по умолчанию в WordPress 3.0.
Внимание! Если информация ниже вам покажется сложной для понимания, то можно воспользоваться более актуальным и быстрым способом создания дочерней темы с помощью плагина Child Theme Configurator
Создать дочернюю тему очень просто. Создайте папку, положите в нее соответствующим образом написанный файл style.css и дочерняя тема готова! С небольшим понятием о HTML и CSS, вы можете изменить эту очень простую дочернюю тему — меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.
По этой причине дочерние темы — рекомендованный способ внесения изменений в тему.
С базовым пониманием PHP, шаблонов WordPress и API плагинов WordPress, вы можете с помощью дочерней темы изменить буквально каждый аспект родительской темы, опять же, без каких-либо изменений файлов родительской темы.
Contents
Структура папки
Дочерняя тема размещается в своей собственной папке внутри wp-content/themes. Схема ниже показывает положение дочерней темы относительно ее родительской темы (Twenty Ten) в типичной структуре папок WordPress:
Эта папка может содержать как style.css, так и дополнительные файлы, относящиеся к теме:
Давайте посмотрим, как все это работает.
Необходимый файл style.css
style.css — единственный необходимый файл в дочерней теме. Он обеспечивает информационный заголовок, по которому WordPress опознает дочернюю тему, и он заменяет style.css родительской темы.
Как и с любой темой WordPress, информационный заголовок должен быть в начале файла, единственное отличие — в дочерней теме строка Template: обязательна, чтобы WordPress знал, какая тема является родительской.
Вот пример информационного заголовка файла style.css дочерней темы:
Краткое пояснение каждой строки:
Часть после закрывающего */ используется как обычный файл стилей. Здесь вы пишите правила стилей, которые будут применены WordPress.
Пример простой дочерней темы
Наша родительская тема для этого примера — Twenty Ten. Нам нравится практически все в ней, кроме цвета текста заголовка сайта, который мы хотим изменить с черного на зеленый. Используя дочернюю тему, мы сделаем это за три простых шага:
Вот что делает выше написанный код, шаг за шагом:
Примечание для директивы @import
Примечание для языков с письмом справа налево
Для поддержки языков с письмом справа налево (например, иврита или арабской письменности), добавьте файл rtl.css, содержащий ниже следующий код, в вашу дочернюю тему:
WordPress автоматически загрузит файл rtl.css только если is_rtl(). Даже если родительская тема не содержит файла rtl.css, рекомендуется добавить rtl.css в вашу дочернюю тему.
Использование functions.php
В отличие от style.css, файл functions.php дочерней темы не заменяет собой соответствующий файл родительской темы. Вместо этого, он загружается в дополнение к родительскому файлу functions.php. (А именно, прямо перед родительским файлом.)
Таким образом, файл functions.php дочерней темы предоставляет элегантный, надежный метод изменения функционала родительской темы. Скажем, вы хотите добавить функцию PHP к вашей теме. Быстрее всего открыть ее файл functions.php и поместить функцию туда. Но это не умный ход: при следующем обновлении вашей темы, ваша функция исчезнет. Вот правильное решение: вы создаете дочернюю тему, добавляете в нее файл functions.php, и помещаете вашу функцию туда. Функция будет делать то же самое, плюс она не будет затронута при будущих обновлениях вашей родительской темы.
Структура файла functions.php проста: открывающий тег PHP в начале, закрывающий тег PHP в конце, и между ними ваш код. Здесь вы можете определить любое количество ваших функций. Пример ниже показывает элементарный файл functions.php, который делает одну простую вещь: добавляет ссылку на favicon в элемент head HTML страниц.
СОВЕТ ДЛЯ РАЗРАБОТЧИКОВ ТЕМ. Факт, что файл functions.php дочерней темы загружается первым, означает что вы можете делать функции своей темы расширяемыми, т.е. заменяемыми посредством дочерней темы, объявляя их условно. Пример:
В этом случае, дочерняя тема может переопределить функцию PHP родительской темы просто объявив ее снова.
Привязка/вставка файлов в вашу дочернюю тему
Когда вам нужно вставить файлы, которые находятся внутри папки вашей дочерней темы, используйте get_stylesheet_directory(). Т.к. файл стилей родительской темы заменяется файлом style.css вашей дочерней темы, который находится в корневой папке дочерней темы, get_stylesheet_directory() указывает на папку вашей дочерней темы (а не на папку родительской темы).
Использование форматов записей
Дочерняя тема наследует форматы записей, определенные в родительской теме. Но, при создании дочерних тем, будьте осторожны, т.к. функция add_theme_support(‘post-formats’) переопределит форматы, заданные родительской темой, а не добавит к ней.
Файлы шаблона
Шаблоны в дочерней теме ведут себя так же, как style.css, они заменяют соответствующие файлы родительской темы. Дочерняя тема может заменить любой родительский файл шаблона просто создав файл с таким же именем. (ПРИМЕЧАНИЕ. Файл index.php может быть заменен только в WordPress версии 3.0 и выше.)
Опять, эта особенность WordPress позволяет вам изменять файлы шаблонов родительской темы без непосредственного их редактирования, так что все изменения сохранятся при обновлении родительской темы.
Вот несколько примеров использования файлов шаблонов в дочерней теме:
Дочерние темы
В этом уроке подробно поговорим про создание дочерних тем в WordPress – разберёмся, для чего они нужны и как с ними работать.
Также, если вы хотите научиться создавать темы для WordPress с нуля на основе готовой HTML-вёрстки, то рекомендую посмотреть мой видеокурс.
Зачем нужна дочерняя тема?
Прежде всего – для чего?
Как создать дочернюю тему?
В качестве примера давайте возьмём стандартную тему WordPress Twenty Twenty One — для неё и создадим дочернюю тему.
Шаг 1. Создание директории под дочернюю тему
Заходим в директорию /themes и создаём там ещё одну папку
Шаг 2. Создаём файл style.css
Например я добавил в свой файл это:
На этом этапе тема появляется во Внешний вид > Темы и её можно активировать.
Темы» width=»798″ height=»421″/>
После активации дочерней темы на этом этапе ничего не произойдёт – по сути на сайте у вас так же будет отображаться родительская тема.
Подробнее про структуру файлов
Сама структура файлов будет выглядеть на данном этапе так:
Дочерние темы могут содержать и другие файлы, давайте вкратце расскажу про них:
Дочерняя тема готова и теперь мы можем использовать её для кастомизации сайта! 🎉
Как работать с дочерней темой?
Подключение стилей дочерней темы
Подключить стили дочерней темы – проще простого:
Вставляем этот код в файл functions.php вашей дочерней темы. Да, сначала создайте его.
Однако в такой ситуации стили дочерней темы могут подключиться до стилей родительской и возможно нам это не нужно, тогда есть несколько вариантов решениея:
А вообще про подключение CSS и JavaScript у меня на сайте есть супер-подробный текстовый и видеоурок.
Замена файлов шаблона
В двух словах, файл шаблона дочерней темы, при наличии, заменяет соответствующий файл шаблона родительской темы.
Например вам нужно сделать изменения в файле single.php :
В дочерних темах поддерживаются все файлы из иерархии шаблонов WordPress и шаблоны страниц тоже.
Работа с functions.php
functions.php дочерней темы всегда подключается непосредственно перед functions.php родительской темы. Что делать, если нужно задействовать функцию после инициализации functions.php родительской? Используйте хук after_setup_theme с приоритетом больше 10.
И мы в итоге в наш functions.php дочерней темы вставляем заново эту функцию, переписав под себя:
Локализация
Функции
Когда я только начинал работать с WordPress, я не мог понять, почему некоторые авторы для получения URL темы используют get_template_directory_uri(), а некоторые – get_stylesheet_directory_uri(). Теперь-то я понимаю, что они на тот момент, так же, как и я, не понимали никакой разницы между этими функциями.
А в чём отличие этих и некоторых других функций, расскажу в этой таблице:
| Родительская тема | Текущая (родительская или дочерняя) |
|---|---|
| get_template_directory_uri() – получает URL папки родительской темы вне зависимости того, задействована ли она в родительской или в дочерней теме | get_stylesheet_directory_uri() – всегда получает URL папки текущей темы, если используется в родительской – то родительской, если используется в дочерней – то дочерней. |
| get_template_directory() – путь к директории родительской темы | get_stylesheet_directory() – путь к директории текущей темы |
| get_template() – название папки родительской темы | get_stylesheet() – название папки текущей темы |
| get_stylesheet_uri() – URL файлы style.css текущей темы. |
Видеоурок
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Настройка темы для WordPress с помощью дочерних тем
Итак, у вас на сайте есть тема для WordPress, неважно бесплатная или коммерческая, и вы хотите её настроить. Везде даются рекомендации делать это, создав дочернюю тему. Но что это значит и как это сделать?
Что такое дочерняя тема?
WordPress Codex определяет дочернюю тему (child theme) следующим образом:
Дочерняя тема WordPress (child theme) это тема, которая наследует функциональность другой темы, называющейся родительской (parent theme), и позволяет изменять или добавлять функции к родительской теме.
Использование дочерней темы для модификации существующей, это более безопасный и простой способ внести свои изменения. Вместо модификации файлов темы в исходной директории, вы можете создать дочернюю тему.
По сути, дочерняя тема в WordPress работает вместе с оригинальной, но замещает указанные вами её части, не внося реальных изменений в саму оригинальную тему.
Зачем вообще использовать дочернюю тему?
Если на вашем WordPress-сайте уже установлена бесплатная или коммерческая тема, то это отличная возможность адаптировать её под свои нужды. Возможно, вы хотите настроить некоторые цвета, добавить сайдбар, изменить отображение некоторых записей или что угодно еще.
Представьте, что в один прекрасный день вы зашли в панель администрирования своего сайта и увидели, что доступно обновление для установленной темы. Возможно, это исправление каких-то ошибок в CSS или безопасности темы.
Если вы нажмете кнопку « Обновить », то измененные вами в оригинальной теме файлы будут замещены обновленными! Все изменения будут потеряны, и вам придется начинать все сначала.
Используя механизм дочерних тем, вы можете обновлять родительскую тему сколько угодно без потери внесенных изменений. Возможно, что после очередного обновления родительской темы вам нужно будет внести некоторые корректировки в дочернюю, но это однозначно легче, нежели делать все заново.
Теперь понятно зачем, но что делать дальше?
Для примера, мы создадим дочернюю тему для WordPress, основанную на стандартной теме « Twenty Twelve ».
В данном случае, чтобы создать дочернюю тему, новую папку рядом с папкой темы « Twenty Twelve » и назовем её twentytwelve-child:
Содержимое файла стилей style.css в папке дочерней темы нужно изменить следующим образом:
В этом коде есть две важнейшие строки:
Теперь, вы можете войти в панель управления WordPress, увидеть там тему « Twenty Twelve Child » и активировать её.
Строка с оператором @import не является строго обязательной для того, чтобы дочерняя тема была валидной. Я включил её для того, чтобы проще было производить модификации.
Я создал свою дочернюю тему! Что теперь?
Теперь, всякий раз, когда вы захотите внести изменения в свою тему, все манипуляции надо производить с вашей дочерней темой.
Файлы из директории вашей дочерней темы замещают одноименные файлы в папке родительской темы. Поэтому любой файл, который вы хотите изменить, следует вначале скопировать из папки с родительской темой в папку с дочерей, после чего можно вносить правки.
То же самое можно сказать и о других файлах, которые находятся вне папки вашей родительской темы. Вы можете добавить их в папку с дочерней темой, и WordPress будет их использовать.
Исключение составляет лишь файл functions.php. Вначале загружается файл functions.php из дочерней темы, а за ним functions.php из директории родительской темы. Поэтому нет необходимости копировать functions.php из родительской папки в дочернюю, просто измените его в папке с дочерней темой.
Вышеописанный механизм позволяет взять всю функциональность из родительской темы. К родительским темам также можно подключать дополнительные функции ( pluggable function ) и переопределять их из дочерних без возникновения конфликтов.
Что значит pluggable function?
Если коротко, что pluggable function это механизм проверки на то, объявлена ли была функция ранее или нет. Это предотвращает конфликты в случае, когда в дочерней теме объявляется функция с уже существующим в родительской теме именем.
Заключение
Вашему вниманию были представлены основы настройки тем в WordPress с использованием дочерних тем. Это не сложнее, чем вносить изменения в оригинальную тему, и в то же время, это избавляет от головной боли при обновлении. Это также дает больше наглядности при просмотре внесенных в оригинальную тему изменений, потому что все правки находятся в отдельном файле.