Дочерняя тема 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; }
Обязательно нужно указать строку Template: twentyfifteen , (строка регистрозависима) она указывает что это подтема темы twentyfifteen.
Директива @import должна быть первым правилом в style.css . Если написать правила перед ней, то она не сработает и стили родительской темы не подключаться.
В результате у нас должна получиться такая структура:
Wp-content └── themes ├── twentyfifteen (родительская тема) └── twentyfifteen-child (подтема; может иметь любое название) └── style.css
twentyfifteen-child может содержать и другие файлы, среди них:
- другие файлы - любые другие файлы/папки/что угодно. Например, подтема может использовать новые изображения, которые подключаются в дополнительных CSS правилах.
style.css - (обязательный) полностью заменяет такой же файл родительской темы.
functions.php - дополняет functions.php родительской темы (загружается перед ним).
файлы шаблона - index.php , home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.
Файл 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 - (обязательно) название дочерней темы.
- Theme URI - адрес сайта дочерней темы.
- Description - описание дочерней темы.
- Author URI - адрес сайта автора дочерней темы.
- Author - имя автора дочерней темы.
- Version - версия дочерней темы.
Template - (обязательно) регистрозависимое название папки родительской темы.
Заметка: при изменении нужно сбросить настройку, для этого нужно переключится на другую тему и вернуться обратно.
Файл 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, позволяют изменять и дополнять внешний вид сайта от смены оформления до создания дополнительных виджетов и плагинов.
Зачем нужна дочерняя тема
Однако, есть одно небольшое неудобство: любые прямые корректировки кода темы, исчезают, а вернее возвращаются к первоисточнику, после каждого обновления шаблона. Чтобы избежать таких откатов, создается дочерняя тема WordPress, которая позволяет редактировать код темы без угрозы потерять все изменения при плановом обновлении.
Что такое дочерняя тема WordPress
Дочерняя (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.
Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.
Создаем дочернюю тему WordPress – практический пример
Напомню, все темы системы «лежат» в каталоге wp-content/themes . Далее по шагам.
- В каталоге wp-content/themes создаем папку с произвольным названием дочерней темы. Для примера создаю папку: first-child-theme. Название произвольно, скоро понадобится.
- В любимом текстовом редакторе (я использую Notepad++) создаем текстовой файл с расширением css и названием style . Название не меняем, а содержание файла должно содержать, пока, только заголовок:
Здесь, важна только, последняя строка, это название папки с родительской темой. Именно из нее, система будет подкачивать стили шаблона.
- Файл сохраняем и заливаем в папку дочерней темы, first-theme.
- В консоли сайта появляется дочерняя тема. Название совпадает с названием указанным в строке: Theme Name. При открытии темы показывается указанное описание темы — строка Description.
Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.
Как наполнить дочернюю тему
Напоминаю задачу, нам не нужна пустая дочерняя тема, а нужна тема, дублирующая родительскую тему, чтобы в ней менять стили и разметку.
Для дублирования темы выбираем из двух вариантов исполнения:
- Копируем родительский файл style.css и переносим его в аналогичный файл дочерней темы (пока он всего один).
- Или в файле style.css дочерней темы вписываем дополнительную строку:
Где, zeefocus – основная, родительская тема.
Важно! Этой строкой мы подгружаем стили основной темы. Теперь, не нужно копировать файл стиля, можно вносить изменения в пустой файл дочерней темы и он будет записываться поверх стилей основной темы. Редактировать файл style.css можно из админки сайта, с соблюдением , на вкладке Внешний вид→Редактор .
Не забываем, функцию import вынести из заголовка файла style.css .
Другие файлы темы
Опять два варианта,
- создаем пустые файлы с аналогичными названиями пустым содержимым: () и пишем их, как нужно;
- или, проще, переносим файлы основной темы в дочернюю тему и их редактируем, как нужно.
Плагины child theme
О плагинах облегчающий создание дочерней темы сайта в статье.
Дочерние темы в WordPress позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.
Поддержка дочерних тем (child themes) в WordPress появились ещё давно, но большинство пользователей на сегодняшний день всё равно предпочитают вносить изменения в код исходной темы напрямую. В этой статье мы расскажем о том, как работают дочерние темы в WordPress, и почему именно с помощью дочерних тем следует вносить любые изменения в существующие темы.
Что такое дочерняя тема
Дочерняя тема в WordPress — это тема, которая наследует внешний вид и весь функционал родительской (исходной) темы. Такое наследование позволяет легко изменять и дополнять отдельные участки родительской темы, не изменяя при этом саму исходную тему. Благодаря этому подходу обновление родительской темы не повлияет на подобные изменения.
Родительской темой может выступить любая другая тема для WordPress (за исключением дочерних тем), и для работы дочерней темы, обе темы должны быть установлены, но активировать необходимо именно дочернюю.
Как создать дочернюю тему
Самая простая дочерняя тема состоит из одного файла style.css , в котором указывается имя дочерней темы, и название директории с родительской темой. В этом же файле часто указывается ссылка на таблицу стилей родительской темы с помощью CSS директивы @import .
В качестве примера мы создадим дочернюю тему My Child Theme и будем использовать стандартную тему Twenty Twelve в качестве родительской.
Сперва убедитесь в том, что родительская тема существует — найдите директорию twentytwelve в wp-content/themes . Затем создайте новую директорию в wp-content/themes и назовите её my-child-theme . В этой новой директории создайте файл style.css и вставьте в него следующий заголовок:
/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css");
С помощью этого заголовка мы определили название нашей новой темы, а так же указали родительскую. Директива @import в данном случае подгружает все стили из темы Twenty Twelve, поверх которых мы будем вносить наши изменения. Без этой директивы, наша дочерняя тема будет наследовать только шаблоны (разметку) родительской темы, а не стиль.
После этого ваша директория с темами должна выглядеть примерно следующим образом:
Зайдя в раздел Внешний вид → Темы, вы увидите, что ваша новая тема уже доступна для активации.
Если вы её активируете и перейдёте на главную страницу вашего сайта, вы увидите, что ваша дочерняя тема выглядит в точности как стандартная тема Twenty Twelve.
Работа со стилями
Стили CSS дочерней темы можно задать прямо в файле style.css сразу после директивы @import . Например, для установки цвета фона и цвета ссылок в вашей теме, добавьте следующий код в конец файла стилей:
Body { background: red; } a { color: green; }
Таким образом вы можете изменять стили любых элементов родительской темы, а найти необходимый элемент вы можете легко с помощью средств разработчика в браузере Google Chrome или с помощью расширения Firebug для браузера Firefox.
Работа с шаблонами
С помощью дочерней темы вы так же можете легко изменять сами шаблоны родительской темы. Для этого достаточно создать файл в дочерней теме с тем же именем, что и у шаблона в родительской теме. Например, чтобы заменить шаблон footer.php на свой собственный, создайте файл footer.php в директории с вашей дочерней темой: