дочерняя тема 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 — Правильный способ
Поднимите руку те, кто настраивал более 5 WordPress сайтов. Не опускайте руку, если вы настраивали более 10. Если же вы настроили более 20, то наверняка знаете о дочерних темах. Работа с дочерней темой — это отличный способ изменить родительскую тему WordPress. За эти годы WordPress темы стали очень разнообразными, но всё равно требуют настройки.
Предположим, что вы установили одну из стандартных тем, к примеру, TwentySixteen или TwentyFifteen. Вы настроили её стили и добавили несколько PHP функций. Но что случится, когда разработчики выпустят новую версию? У вас есть только два пути: загрузить обновления и потерять все настройки, или оставить старую версию и сделать сайт уязвимым.
Лучшим вариантом будет создание дочерней темы для настройки любой темы.
В этой статье мы расскажем о том, как правильно создавать дочерние темы в WordPress и поделимся кодом _child шаблона. Итак, давайте сначала узнаем побольше о концепции и важности дочерних тем в WordPress.
Что такое дочерние темы?
Принцип работы дочерних тем базируется на родительско-дочерних отношениях. Все темы WordPress, неважно платные или бесплатные, являются родительскими темами. А все дочерние темы перенимают свои характеристики у родительских. То есть, дочерняя тема получит весь набор функций от родительской темы.
Дочерняя тема – это тема, которая перенимает все функции и дизайн другой темы, названной родительской темой. Дочерняя тема является способом модификации уже существующих тем.
Если выходят обновления родительской темы, то дочерняя тема не меняется. Измениться может только родительский контент, а настройки дочерней темы остаются такими же.
Отличия дочерней темы от родительской
Таким образом, сохранить изменения и наслаждаться обновлениями можно только в дочерней теме. Позже в этой статье мы также обсудим методы создания дочерней темы.
Ну а сейчас давайте рассмотрим отличия дочерней и родительской темы:
Преимущества использования дочерней темы
Сама концепция дочерней темы — отличная. Мы предлагаем использовать дочерние темы со всеми премиум темами, а профессиональным разработчикам стоит включить их в пакет со своими темами.
У дочерних тем есть масса преимуществ:
Компоненты дочерней темы
Дочерняя тема является продолжением родительской темы, перенимая все функции и особенности. Как и обещали, вот основной состав дочерней темы:
Вы можете добавить любое количество шаблонных файлов, но вышеперечисленные файлы должны быть в каждой дочерней теме.
Создание дочерней темы в WordPress
Вы уже знаете о нескольких функциях и аспектах дочерних тем WordPress. Вы выяснили, для чего они нужны, а теперь пора обсудить их название. Простейшим способом создания дочерней темы будет использование плагина. В библиотеке WordPress.org вы можете найти огромное количество бесплатных плагинов, которые упрощают создание дочерней темы.
1. Child Theme Configurator
Плагин Child Theme Configurator создаёт дочерние темы за пару кликов. С его мощным CSS редактором вы можете настроить расширенный уровень функциональности. Плагин не только идентифицирует, но и меняет нужные атрибуты CSS.
2. Child Themify
Для создания дочерних тем мы можем также порекомендовать плагин Child Themify. Он очень лёгкий и создаёт дочернюю тему всего лишь нажатием кнопки.
3. _child Theme Boilerplate
Если вы разработчик, то вам наверняка будет интересно оценить готовый шаблон для дочерней темы. Он называется _child и был создан для оптимизации процесса создания дочерней темы в WordPress.
Файл style.css содержит стандартный хедер с информацией, которая помогает WordPress распознать его, как таблицу стилей дочерней темы. Тэги для Theme Name и Template — самые важные. Вы можете заменить тэг Template на подходящий slug родительской темы и вставить название дочерней темы.
Код для style.css:
Много разработчиков соединяют родительскую тему с дочерней в CSS, что замедляет загрузку сайта потому, что браузеру приходится загружать стили из родительской темы, а только после этого из дочерней. Но когда вы ставите в очередь обе таблицы стилей по отдельности, браузер может загрузить их одновременно, что ускорит загрузку вашей страницы.
Код для functions.php:
Итоги
Неважно, являетесь ли вы обычным пользователем или разработчиком. Дочерние темы – это отличный способ настроить ваши основные темы в 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? Создание дочерней (детской) темы WordPress займёт у вас всего пару минут. Всё делается автоматически, без необходимости создания в ручном режиме папок, файлов и т. д.. Всю работу за вас выполнит специальный плагин для создания дочерней темы WordPress.
Как создать дочернюю тему WordPress
Дочерняя тема WordPress
Детская (дочерняя) тема наследует внешний вид родительской темы и всех её функций, но может использоваться для внесения изменений в любую часть темы. Таким образом, настройки хранятся отдельно от файлов родительской темы.
Например, вы сделали в своей теме какие-либо изменения, отредактировали файлы шаблона, изменили стили и тому подобное. Красиво получилось, вы довольны.
А тут, происходит обновление темы и все ваши сделанные изменения утеряны. Это означает, что ваш сайт не только возвращается на прежний уровень, но и вся ваша работа летит к чертям. А было бы всё иначе, если бы использовалась дочерняя тема ВордПресс (WP).
Дочерняя тема WP работает в тандеме с родительской
Использование дочерней темы позволяет обновить родительскую тему, не затрагивая настройки, которые вы сделали для своего любимого сайта.
Тематический справочник wordpress.org
Плагин дочерней темы WordPress
Плагины позволяют сделать/создать дочернюю тему автоматически из любой темы ВордПресс, установленной на вашем сайте или блоге.
Внимание : Чтобы сделать простые изменения CSS на своем веб-сайте, вы можете использовать поле «Дополнительные CSS», вместо создания дочерней темы. Эти изменения, сделанные с помощью поля «Дополнительный CSS», останутся там даже после обновления темы. Но, если вы ищете другие дополнительные изменения, такие как редактирование файлов PHP и другие, необходимо создать дочернюю тему.
Генератор детской темы ВордПресс
Создавая дочернюю тему, она позволяет вам редактировать или добавлять функциональные возможности к вашему шаблону без необходимости перезаписывать какие-либо файлы родительской темы, рискуя ошибиться или потерять работу сайта при внесении обновлений.
Этот плагин создаст дочернюю тему за несколько шагов, быстро и безопасно. Он не будет замедлять работу вашего сайта. Установите плагин стандартным способом, из админки. Введите его название. На странице с результатами поиска, выберите Child Theme Generator:
Установка плагина WordPress
Дождитесь полной установки плагина, а затем активируйте его. Затем перейдите в Настройки, новый пункт: Child-Theme Gen. Русского языка нет, но всё и так понятно. Из выпадающего списка выберите родительскую тему (обязательно):
Создать новую дочернюю тему
Заполните остальные поля (не обязательно). Нажмите кнопку Create new child theme и плагин создаст для вас дочернюю тему. Можете сразу поставить галочку для активации Child темы. А после нажать Finished:
Дочерняя тема была успешно создана!
Это дочерняя тема для Kava
В итоге, на сайте или в блоге никаких отличий вы не увидите. Детская тема использует файлы от своего родителя. А так, будут выглядеть папки на хостинге. Родительская тема и созданная детская с дополнением child. Она находится в wp-content / themes вашей установки WordPress:
Новая детская тема
Да, вы можете поменять скриншот от плагина на свой. Если ваша тема не будет сильно отличаться от родительской, просто скопируйте файл screenshot.png из родительской темы в свою дочернюю:
Скриншот для детской темы
Если нужно сделать изменение на сайте, вы меняете не родительскую тему WordPress, а дочернюю. Теперь все работы производите только в Child theme. Обратите внимание, если вам необходимо редактировать файлы например, single.php, header.php, footer.php или другие, то вам надо скопировать их из папки родительской темы в папку child-theme.
Если файл шаблона (или часть шаблона, такая как header.php) с одинаковым именем существует в родительской и дочерней темах, WordPress будет использовать файл из дочерней темы.
Например, вы захотите удалить из футера (подвала) надпись «Сайт работает на WordPress» и вставить туда свою информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его уже в детской теме.
Как уже написано выше, есть и другие плагины. Например, самый популярный плагин Child Theme Configurator. Более 2 808 184 установок.
Плагин Child Theme Configurator
Конфигуратор детской темы
Вы можете создать любое количество дочерних тем из существующих родительских тем. Конфигуратор дочерних тем позволяет выбирать из установленных тем (даже существующих дочерних тем) и сохранять результаты в каталоге тем ВордПресс.
У плагина больше функций, есть версия PRO, но вполне хватит и бесплатных. Вы можете создать любое количество дочерних тем из существующих родительских тем:
Создание детской темы WP
Анализатор сканирует визуализированную тему и автоматически настраивает вашу дочернюю тему.
Если что, под вкладкой «Справка» в правом верхнем углу страницы есть учебное видео. И также текстовые инструкции:
Помощь по плагину Child Theme Configurator
Детская тема создана, даже скриншот от родительской установлен:
Созданная дочерняя (детская) тема
Данный модуль чуть посложней, но с очень большими возможностями. Когда вы будете готовы, просто активируйте дочернюю тему и ваш сайт WordPress автоматически примет пользовательские стили.
Бинго! Уже перевели на русский язык. Если что, перевод любых плагинов и тем с помощью этого плагина.
Если родительская тема изменяется (например, обновляется), нужно ли мне обновлять дочернюю тему?
Нет. В этом и есть смысл использования дочерних тем. Изменения в родительской теме автоматически наследуются дочерней темой.
Дочерняя тема не является копией родительской темы. Это особая функция WordPress, которая позволяет вам переопределять определенные стили и функции, оставляя остальную часть темы нетронутой.
Плагины Child Theme для WP
Если что, ищите дополнительно плагины в каталоге, по ключевому слову Child Theme. Это очень простые и удобные плагины для создания дочерней темы CMS WordPress:
Показаны результаты для: Child Theme
В заключение
Если у вас есть дополнительные вопросы или вам нужна помощь в этом процессе, пожалуйста, оставьте свои комментарии ниже.
Я надеюсь, что вы нашли этот пост полезным. Удачи и до новых встреч.