Не знаю точно, по каким причинам шаблоны для сайтов WordPress упорно называют темами, но именно это во вступлении к этой статье, рождает тавтологию: тема данной статьи как создать дочернюю тему WordPress. А проще говоря, как сделать так, чтобы изменения, сделанные в шаблоне сайте, не исчезали после каждого обновления шаблона автором.
Зачем это нужно
Зачем нужна дочерняя тема, я пояснил во вступлении. Поясню на практике. Я давно не использую шаблоны в авторском варианте, постоянно что-то меняю в файле, отвечающем за дизайн (style.css), убираю ссылки из футера, меняю местами вступления и анонсы к статьям в архивах. Короче делаю правки в файлах шаблона. Каждый раз, когда автор обновляет шаблон, я бы терял и восстанавливал свои правки, если бы не использовал дочерние темы.
Нужно отметить, что с недавних пор, ситуация потерей правок несколько упростилась. Во всех современных темах, есть пользовательская правка файла стилей (style.css), который не меняется после обновления темы, однако, это не решает общую задачу статьи, создать дочернюю тему WordPress.
Создать дочернюю тему WordPress вручную
- Предположим, у вас тема «father», создаем к ней дочернюю темы;
- Создайте каталог дочерней темы, пусть будет «daughter»;
- В Notepad++ создайте файл.css со следующим содержимым:
Обратите внимание, что директива Template указывает родительскую тему и она обязательна.
Важно! Теперь, когда вы поместите в каталог «дочки» файл, он заменяет аналогичный файл у «родителя». Это правило НЕ работает для файла functions.php.
Но это не всё. Нужно стили «родителя» перенести в стили «дочки». Это делается двумя способами:
Способ 1. Просто перенести содержимое файла стилей (style.css) в аналогичный файл родителя;
Способ 2. Или добавить файл style.css дочки следующую строку:
@import url("../father/style.css");
Обращаем внимание на относительный адрес с указанием родительского шаблона (father).
Тематические плагины для создания дочерней темы
Про плагины для создания дочерней темы, скажу так, если вам нужна дочерняя тема, поставьте плагин, создайте «дочку», удалите плагин и не мучайтесь ручной работой. Работа с любым перечисленным ниже плагином займет 10-15 секунд, если вы не создаете дочернюю тему уже измененного шаблона.
Child Theme Wizard
Позволяет создать новую дочернюю тему без необходимости использования дополнительных инструментов прямо из интерфейса администратора WordPress.
Child Theme Configurator
https://ru.wordpress.org/plugins/child-theme-configurator/
Быстрая и простая в использовании утилита, которая позволяет анализировать любую рабочую тему и создавать дочернюю тему настраивать её. Child Theme Configurator позволяет легко идентифицировать и переопределять точные атрибуты CSS, которые вы хотите настроить. Анализатор сканирует предоставленную тему и автоматически настраивает вашу дочернюю тему.
Childify Me
https://ru.wordpress.org/plugins/childify-me/
Позволит создать дочернюю тему для любой установленной темы, непосредственно с панели Внешний вид>>>Тема.
Создать дочернюю тему измененного шаблона
Представим ситуацию, вы работаете со своим сайтом и вам надоело постоянно править шаблон после обновления. Что делать? Нужно создать дочернюю тему уже измененного шаблона. Как это сделать?
Вариант 1. Поставьте плагин Child Theme Configurator, он сам «просветит» ваш шаблон и перенесет измененные файлы в дочернюю тему;
Вариант 2. Сделайте «дочку» в ручном режиме и далее: Перенесите измененные файлы из родительской темы в дочернюю тему.
Всё! Теперь вы работаете на дочерней, измененной ранее теме.
Выводы
Теперь вы знаете, как создать дочернюю тему WordPress. Использование данного функционала упрощает работу с шаблонами и убирает задачу по контролю за постоянно изменяющимися темами. С дочерней темой можно править шаблон без боязни потереть исправления после обновления. Вопросы в комментариях.
Создание и настройка дочерней темы в WordPress - это очень важный инструмент в руках разработчика сайта. С грамотным подходом мы можем модернизировать практически любой элемент выбранной вами темы без изменения основной. Это дает нам преимущество при корректировке, и изменении темы, ведь мы с легкостью сможем вернуть все в исходное положение. В предоставленном уроке научимся создавать дочернюю тему и рассмотрим рычаги которые мы при этом получим.
Если мы перешли к изучению этого значит мы уже выбрали и установили тему которая нам по вкусу. Если же нет, тогда сначала нужно .
Определились? Отлично, теперь рассмотрим как же создать тему-дополнение .
Дочерняя тема wordpress, что нужно что бы создать
Итак, что бы создать дочернюю тему нам нужно сделать несколько простых шагов.
- Первым делом нам нужно создать папку для нашей будущей уникальной темы.
- Затем создать обычный текстовый документ и сменить его название на style.css, открыть который мы сможем при помощи специального редактора notepad++ или же другого того же типа.
- В созданном нами файле нужно будет написать правильное заглавие, так называемую шапку файла.
Давайте проделаем все вышеперечисленные операции вместе и по порядку. Начнем с того, что папку нашей дочерней темы WordPress темы нужно создать внутри wp-content/themes. Название можете придумать какое угодно, это никак не скажется на вашем сайте и нигде не будет видно, для наглядности давайте посмотрим на картинку как это можно сделать:
Создали? Ок, идем в нашу папку и создаем файл каскадной таблицы стилей style.css. После создания файла открываем его для редактирования.
Шапка style.css дочерней темы WordPress
Что бы правильно настроить нашу дочернею тему мы должны написать нашу шапку которая будет вмещать в себя следующие параметры:
- Название дочерней темы , то которое мы придумали для нашей папки, параметр является обязательным для заполнения по этому придумайте адекватное название - «Name».
- Можно указать адрес вашего сайта на котором будет использована тема - «Theme URI».
- Описание темы, хоть и биографию свою напишите, не имеет значения - «Description».
- Имя создателя темы, ваше, вашего соседа или же вымышленное, все зависит от вашего настроения - «Author».
- Обязательным и точным параметром является название папки родительской темы - «Template».
- Возможно указать версию вашей дочерней темы например 1.1.5 или что-то в этом роде - «Version».
Разобравшись с нужными нам атрибутами заголовка посмотрим какой пример нам дают на официальном сайте :
Это полный набор атрибутов шапки, а вот с того же ресурса только представлена минимальная шапка простейшей дочки.
Разница между дочерней темой WordPress и созданной уникальной темой.
Следует понимать разницу между дочерней темой и полностью написанной с нуля темой WordPress. лишь вносит изменения и дополнения в использованную нами за основу тему для WordPress. Как же прикрутить наш стиль к стилю родителя? Для этого существует команда. которая стоит выше всех остальных, иначе подключение не получится. Выглядит она так: @import url(«www/mysite.ru/twentyten/style.css»). Выходит что мы берем исходный стиль и пишем дополнения и изменения. Дочерняя тема стоит ниже родительской, по этому сначала грузится родительская, а уж потом поверх мы проводим изменения нашей дочерней, которая и воспроизводится.
Всем привет, сегодня хочу рассказать вам о замечательной функции движка 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
Для создания дочерней темы вордпресс, нам понадобится выполнить всего лишь несколько условий:
- Создать директорию с произвольным названием.
- В этой папке создать файл 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 есть в дочерней теме, значит он заменяет собой аналогичный файл в родительской
Всем спасибо за внимание, на этом у меня пожалуй что все, делимся статьей со своими друзьями
, пишем комментарии 🙂В некоторых случаях при работе над сайтом заказчик просит не вносить изменения в оригинальную тему. Это необходимо, если в будущем планируется делать ее обновления и внесенные в файлы изменения исчезнут.
Для подобных случаев в WordPress предусмотрен механизм создания дочерней темы (child theme). Такая тема использует в качестве основы родительский шаблон и при этом вы можете добавить в нее свои собственные файлы и функции.
Механизм работы с дочерними темами довольно простой. Прежде всего вам нужно в папке wp-content/themes создать новую папку для нее. Будем считать, что папка с основным шаблоном у нас называется parent, а мы создадим новую, которую назовем child.
В папку child нужно поместить, как минимум, один файл style.css. В нем необходимо разместить следующие инструкции:
/* Theme Name: Child Template: parent */
Theme Name: Child Template: parent |
Первая инструкция (Theme Name: Child) это просто название дочерней темы, фактически она не является обязательной, а вот вторая инструкция (Template: parent) является обязательной, и указывает, что данный шаблон является дочерним к parent.
Если вы помещаете в папку с дочерней темой какой-либо файл, то он заменяет такой же из родительского шаблона. Это правило действует для всех файлов, кроме functions.php.
@import url("../parent/style.css");
@ import url ("../parent/style.css" ) ; |
Для корректной работы перед директивой @import не должно быть никаких правил CSS.
Никаких дополнительных настроек делать не нужно. Иногда автоматическое подключение стилей css из дочерней папки может не работать. Разработчик шаблона должен использовать функции:
- get_stylesheet_uri() — адрес файла стилей;
- get_stylesheet_directory_uri() — адрес папки со стилями,
но он может подключать style.css каким либо другим способом, что приводит к возникновению проблем. В этом случае, скорее всего, будет не сложно посмотреть код и найти проблему.
Подробнее по файлу functions.php. Если в дочерней теме есть такой файл, то движок сначала загрузит именно его, а затем файл с этим именем из родительской папки. Таким образом вы можете свободно расширять функционал шаблона.
Все прочие файлы, находящиеся в дочерней папке, как уже было сказано, заменяют аналоги из родительской темы. То есть вы можете взять оригинальный single.php, внести в него изменения и поместить в дочернюю папку. При работе движка Вордпресс будет использоваться именно он.
Плюсы использования дочерней темы понятны: вы сохраняете нетронутой оригинальную тему и можете свободно ее обновлять. Минусов особых нет, если только в оригинальном шаблоне разработчик не допустил ошибки, затрудняющие использование.
Структура папок в дочерней теме должна совпадать с родительской структурой, если вы модифицируете файлы во вложенных папках.
Дочерняя тема 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 топовых площадках, как отечественного, так и зарубежного интернета. Покупайте уже сейчас популярные ресурсы для увеличения счетчиков в соцсетях, такие, как лайки, подписчики и пр., с большими оптовыми скидками и персональными условиями добавления.
