Что такое дочерняя тема в 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, автор которой не бросил разработку, то не редактируйте файлы темы напрямую, а создайте дочернюю тему и изменяйте основную тему через дочернюю.
Что можно изменить в дочерней теме?
В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.
От сюда можно сделать вывод, что родительские темы бывают хорошие и плохие. Часто, подправить нужно не много: стили, изменить подвал и другие мелочи, а это можно сделать для любой родительской темы без особых проблем.
Создание дочерней темы
Создать подтему легко! Ниже создается дочерняя к 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 не оставляет нам выбора и все подчиняемые элементы системы мы вынуждены называть «дочерние». Относится это к дочерним страницам, дочерним пунктам меню и к дочерним темам.
Дочерняя тема (Child Theme) — это особая функция WordPress, которая позволяет переопределять определённые стили и функции другой родительской темы (Parent Theme). Используя дочернюю тему, как рабочую, вы можете обновить родительскую тему WordPress без потери своих изменений.
Например, понравилась вам тема, но совсем не нравится её шрифт, фон и заголовки. Выход в трёх шагах:
Здесь вы можете резонно, задать вопрос: у меня на рабочем шаблоне есть customizer и я там могу делать любые неизменяемые правки стилей. Читать про Customizer WordPress.
Отвечаю. В том то и прелесть дочерней темы, что вы можете поместить в неё любой файл из родительской темы, а не только файл стилей и так же править их без потери своих изменений при очередном обновлении.
Например, не нравится вам, что в футере вашего сайта висит активная ссылка автора темы. Решение в двух шагах:
Ссылка больше не появится после следующего обновления родительской темы.
Самый простой способ создать дочернюю тему WordPress
А вот правильное создание дочерней темы с использованием хука, подключающего файлы стилей параллельно, а не последовательно, это не по теме этого раздела.
Чтобы не создавать рабочую тему руками, есть более простой вариант, из серии «всё придумали за нас». Он не просто проще, он на этом этапе освоения системы, в сто крат эффективнее.
Рекомендую для создания дочерней темы использовать плагин: WPS Child Theme Generator. Или более насыщенный по возможностям, но так же несложный, плагин: Child Theme Configurator.
Плагины очень хорошо обновляются и эта информация будет актуальная ещё очень долго. Автор первого плагина английский хостинг для WordPress. Автор второго, компания разработчик WordPress c 20-ти летней историей.
Заключение
Дочерняя тема WordPress инструмент отличный инструмент системы, однако на начальном этапе освоения WordPress не нужный. Однако не знать его — не комильфо.
Как Создать И Настроить Дочернюю Тему WordPress
Итак, вы создали свой сайт, выбрали подходящую тему, но не совсем довольны его внешним видом и хотели бы немного тему подкорректировать. При этом большое количество разработчиков начинают вносить правки в свою тему напрямую, что в корне неправильно. Ведь все изменения, которые будут внесены непосредственно в теме, будут потеряны после обновления темы разработчиком.
Гораздо лучше использовать дочернюю тему. Вы сможете вносить бесконечное количество правок и при этом не бояться, что они исчезнут после первого обновления.
Что такое Дочерние Темы?
Дочерняя тема полностью зависит от родительской темы, без которой она нежизнеспособна. С помощью дочерней темы мы дополняем и изменяем функционал родительской темы. Можно менять стили, функции, макет, шаблоны и многое другое. Можно изменить родительскую тему целиком. Однако, без родителя, дочерняя тема не будет функционировать.
Для создания дочерней темы достаточно 3 составляющих: папки, таблицы стилей и файла functions.php.
Когда использовать
Для внесения небольших правок на сайт достаточно пользовательских настроек темы, с помощью которых можно изменить шрифт, цвет, отступы и так далее.
Но если вы планируете более масштабные изменения, то дочерняя тема необходима.
Настройки
Давайте приступим к созданию дочерней темы на основе встроенной в WordPress Twenty Nineteen.
Примечание: шаги ниже можно выполнять непосредственно на вашем сервере через FTP-клиент. Но можно сначала настроить все локально, затем заархивировать папку дочерней темы и установить ее через Внешний вид-темы.
Создание папки
Style.css
Затем создадим таблицу стилей. Если вы еще не знаете, таблица стилей содержит код, определяющий дизайн веб-сайта. Итак, создаем файл и называем его style.css. Чтобы он работал, нам нужно вставить следующий код, так называемый «заголовок таблицы стилей», прямо в начале этого файла
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Twenty Nineteen Child Theme
Author URI: https://www.lenakso.top
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: twentynineteen-child
Вот что означает каждая строка:
Theme Name (Название темы). Имя, которое будет отображаться для вашей темы в WordPress.
Theme URI. Ссылка на демонстрационную страницу темы.
description (Описание): Описание вашей темы.
Author. Имя автора — в данном случае вас.
Author URI. Здесь можно указать адрес вашего сайта здесь, если хотите.
Template. Очень важная строка! Здесь указывается имя родительской темы, то есть имя ее папки. Имейте в виду, что он чувствителен к регистру, и, если вы поместите неправильную информацию, вы получите сообщение об ошибке!
Version. Версия дочерней темы.
License. Лицензия вашей дочерней темы.
License URI. Адрес, по которому открывается лицензия вашей темы.
Tags. Теги по которым можно найти тему в каталоге WordPress.
Но не все эти строки нужно заполнять, достаточно указать название темы и шаблона. Конечно, если вы не планируете опубликовать свою тему.
Итак, в файл style.css достаточно прописать следующий код:/*
Theme Name: Twenty Nineteen Child Theme
description: A child theme of the Twenty Nineteen default WordPress theme
Активировация
После создания папки и style.css, перейдите во «Внешний вид» — «Темы» в админ-панели WordPress и найдите там свою дочернюю тему.
Когда вы нажмете «сведения о теме», вы увидите содержимое заголовка таблицы стилей.
Теперь нажмите кнопку «активировать». Если вы посмотрите на свой сайт, он будет выглядеть не очень красиво. Причина в том, что у него еще нет стилей.
Зачем нужна дочерняя тема 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 при помощи плагинов