Создание дочерней темы wordpress. Что такое дочерняя тема на WordPress? Плюсы, минусы, и больше

Хотите создать дочернюю тему WordPress? После знакомства с основами WordPress возникает вполне обоснованное и понятное желание изменить под свои вкусы и нужды шаблонный дизайн сайта. Создание дочерней темы это то, с чего стоит начинать создавать сайты. В этой статья я расскажу, как создать дочернюю тему в WordPress.

Зачем надо создавать дочернюю тему?

Создание дочерней темы – это лучший способ настроить под себя выбранный шаблон WordPress. Дочерняя тема обладает всеми теми характеристиками и внешним видом, что есть у родительской темы. Вы можете сделать все необходимые настройки и при этом никак не повлиять на основной шаблон. Также вы сможете легко обновлять родительскую тему, нисколько не беспокоясь о потере настроек.

Требования

Для того, чтобы вносить какие-либо изменения в шаблон, необходимы базовые знания CSS/HTML, также неплохо было бы знать PHP. Очень понадобятся навыки копирования и вставки кусков кода с других источников.

Для начала я бы посоветовал попрактиковаться на localhost’е. Вы также можете переместить действующий сайт на локальный сервер и потренироваться на нем или использовать фиктивный контент.

Начало работы

Любая хорошая тема WordPress может стать родительской темой. Однако существует огромный выбор тем и некоторые из них достаточно сложны для первых экспериментов в создании дочерних тем, поэтому в качестве примера я решил взять стандартную тему Twenty Thirteen , которая является одной из тем по умолчанию в WordPress.

Создание первой дочерней темы

Для начала в папке установки откройте / wp - content / themes / и создайте новую папку для дочерней темы. Назовите ее так, как хотите. Я, например, назову ее wpbdemo.

Откройте текстовый документ наподобие Блокнота и вставьте туда вот этот код:

/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Author: WPBeginner Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css");

Theme Name: WPB Child Theme

Theme URI: http://www.wpbeginner.com/

Description: A Twenty Thirteen child theme

Author URI: http://www.wpbeginner.com

Template: twentythirteen

Version: 1.0.0

Сохраните данный документ в только что созданной папке дочерней темы и назовите его как style.css.

Строки кода здесь само собой разумеющиеся. На что действительно следует обратить внимание, так это на строку Template : twentythirteen .

Она сообщает WordPress, что наша тема является дочерней темой, а папка с родительской темой названа twentythirteen. Обратите внимание, что название родительской папки чувствительно к регистру, т.е. если вы введете «Template: TwentyThirteen» — ничего работать не будет.

Последняя строка кода импортирует в дочернюю тему таблицу стилей родительской темы.

Это минимальные требования для создания дочерней темы. Теперь можно перейти в меню Внешний вид » Темы , где в качестве дочерней темы вы увидите WPB. Щелкните по кнопке Активировать для того, чтобы начать ее использовать на своем сайте.

Так как вы еще ничего не изменили в дочерней теме, то на сайте будет использоваться весь функционал и внешний вид родительской темы.

Настройка дочерней темы

В директории каждой темы содержится файл со стилями – style.css. чаще всего он является главным файлом со стилями, где есть CSS. Однако у некоторых тем в этом файле содержится лишь информация о теме. В этом случае, как правило, CSS файлы находятся в отдельном каталоге.

Здесь вам потребуются кое-какие знания и навыки работы с .

Google Chrome и Firefox идут со встроенным инструментом инспектирования, который позволяет просмотреть и CSS многих элементов веб-страницы.

Если вы хотите увидеть CSS навигационного меню, то просто подведите курсор мышки к меню, щелкните ПКМ и выберите «Просмотреть код».

Как только вы это сделаете, окно браузера будет разделено на две части. В нижней части экрана вы увидите HTML и CSS для страницы.

При наведении курсора мышки к различным строкам HTML, инструмент инспектирования в верхней части экрана будет выделять соответствующий элемент. Как видно из скриншота, я выбрал навигационное меню.

Инструмент хрома также в правой части отобразит CSS правила, относящиеся к выбранному элементу.

Вы можете попробовать отредактировать CSS прямо тут, чтобы сразу увидеть, как все будет выглядеть. Давайте поменяем цвет фона . navbar на #e8e5ce .

Фоновый цвет панели навигации изменился. Если он вам нравится, то можете скопировать это CSS правило и вставить дочерний файл темы style.css.

Navbar { background-color: #e8e5ce; }

Navbar {

Сохраните изменения в файле style.css и просмотрите сайт.

Повторите процесс для всего того, что вы хотите изменить в таблице стилей темы.

Вот полный список стилей, что я создал для дочерней темы. Не бойтесь экспериментировать – меняйте его на свое усмотрение.

/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author: WPBeginner Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css"); .site-title { padding: 30px 0 30px; } .site-header .home-link { min-height: 0px; } .navbar { background-color: #e8e5ce; } .widget { background-color: #e8e5ce; } .site-footer { background-color: #d8cdc1; } .site-footer .sidebar-container { background-color:#533F2A }

Theme Name: WPB Child Theme

Theme URI: http://www.wpbeginner.com

Description: A Twenty Thirteen child theme

Author URI: http://www.wpbeginner.com

Template: twentythirteen

Version: 1.0.0

@ import url ("../twentythirteen/style.css" ) ;

Site - title {

padding : 30px 0 30px ;

Site - header . home - link {

min - height : 0px ;

Navbar {

background - color : #e8e5ce;

Widget {

background - color : #e8e5ce;

Site - footer {

background - color : #d8cdc1;

Site - footer . sidebar - container {

background - color : #533F2A

У каждой темы WordPress свой макет. Давайте взглянем на строение темы Twenty Thirteen. Здесь есть: хедер, навигационное меню, контентная часть, зона нижнего виджета, вторая (боковая) зона виджетов, футер.

Каждая из этих секций обрабатывается различными файлами в папке twentythirteen. Называются эти файлы templates.

Как правило, эти файлы имеют имя той секции, к которой относятся. Например, футер обслуживается файлом footer.php, хедер и навигационное меню – файлом header.php. Некоторые секции, как например, контентная зона обслуживается несколькими файлами – «content templates».

Итак, начать работу надо с выбора файла темы, который вы хотите изменить; скопируйте его в дочернюю тему.

Например, вы хотите удалить с зоны футера надпись «работает на WordPress» и вставить туда информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его в простом текстовом редакторе, как например, Блокнот. Найдите строку, которую вы хотите удалить и замените ее на то, что хотите. Это может выглядеть так:

& lt ; ? php

* The template for displaying the footer

* Contains footer content and the closing of the #main and #page div elements.

* @package WordPress

* @subpackage Twenty_Thirteen

* @since Twenty Thirteen 1.0

? & gt ;

& lt ; / div & gt ; & lt ; ! -- #main -->

& lt ; footer id = "colophon" class = "site-footer" role = "contentinfo" & gt ;

& lt ; ? php get_sidebar ("main" ) ; ? & gt ;

& lt ; div class = "site-info" & gt ;

& lt ; / div & gt ; & lt ; ! -- . site - info -- & gt ;

& lt ; / footer & gt ; & lt ; ! -- #colophon -->

& lt ; / div & gt ; & lt ; ! -- #page -->

& lt ; ? php wp_footer () ; ? & gt ;

& lt ; / body & gt ;

& lt ; / html & gt ;

Кстати, поиск и устранение неисправностей намного проще проводить в дочерних темах. Например, если вы случайно удалили что-то, что необходимо родительской теме, то можно просто удалить файл из дочерней темы и начать все заново.Например, в этом коде я заменил надпись о теме Twenty Thirteen на уведомление об авторском праве.

Добавление нового функционала в дочернюю тему

В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.

Добавление фрагментов кода в родительский файл functions.php означает, что ваши изменения будут перезаписаны, вне зависимости от того будет ли апдейт родительской темы. Именно поэтому всегда рекомендуется работать в дочерней теме и добавлять все коды в ее файл functions.php.

Давайте создадим файл в папке дочерней темы и назовем его functions.php. В этом примере я хочу добавить кусок кода, который изменит стандартное изображение в хедере на свое изображение.

Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу inside / images / headers / folder .

Разработчики WordPress добавили возможность создавать дочерние темы, теперь у вас появилась возможность сделать свою подтему на основе родительской. Функция создания дочерней темы позволит вам изменить внешний вид родительской темы, а затем сохранить измененную тему отдельно, не затронув при этом первую. В этом руководстве вы узнаете, что такое дочерняя тема WordPress и как создать дочернюю тему в WordPress.

Для чего использовать дочернюю тему

Дочерняя тема позволяет изменять родительскую тему в соответствии с вашими пожеланиями. Главным преимуществом этой функции является то, что вы можете внести изменения в дочернюю тему без влияния на родительскую или любую другую тему использующую ее в качестве основы.

Как работает дочерняя тема WordPress

Дочерняя тема располагается в отдельной папке и содержит свои собственные файлы style.css и functions.php . При необходимости возможно добавить дополнительные файлы, но основные файлы темы обязательны для ее правильной работы.

Используя соответствующие .css и .php файлы, вы можете изменить практически все, начиная от стиля и параметров макета, до скриптов которые использует дочерняя тема.

Дочернюю тему можно сравнить со слоями в любом редакторе изображений. Когда посетитель заходит на ваш сайт, сначала загружается дочерняя тема, а затем подключаются отсутствующие стили и функции из родительской темы. В результате, большую часть кода пользователь получает из родительской темы, но перед отображением, он изменяется в соответствии с настройками дочерней темы.

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Доступ к панели управления WordPress
Доступ к (рекомендуется) или

Шаг 1 - Создание дочерней темы в WordPress

Процесс создания дочерней темы довольно прост и может быть легко выполнен внимательно следуя данному руководству.

Вам необходимо создать папку для дочерней темы в стандартном каталоге тем WordPress wp-content/themes . Для удобства и сохранения порядка в каталоге, лучше создать папку с окончанием -child после названия родительской темы. Если хотите, можете добавить название конкретного проекта. Запомните, название каталога не должно содержать пробелы для избежания возможных ошибок. Для создания новой папки воспользуйтесь FTP-клиентом или Файловым Менеджером. Мы рекомендуем использовать бесплатный FTP-клиент FileZilla

В этом руководстве мы будет использовать Файловый Менеджер, для создания дочерней темы на основе стандартной темы Twenty Seventeen, поэтому полный путь до папки будет выглядеть так wp-content/themes/twentyseventeen-child .

Войдите в панель управления Hostinger и нажмите на иконку Файловый Менеджер .
Перейдите в папку где установлен WordPress (обычно это public_html ), далее wp-content → themes .
Нажмите кнопку Новая папка , введите название дочерней темы и нажмите Создать .

Войдите в созданную папку дочерней темы.
Нажмите кнопку Новый файл , введите style.css в качестве имени файла и нажмите Создать .

Вставьте следующий код в файл:

/* Theme Name: Twenty Seventeen Child Theme URL: http://hostinger-tutorials.ru/twentyseventeen-child/ Description: Twenty Seventeen Child Theme Author: John Doe Author URL: http://hostinger-tutorials.ru Template: twentyseventeen Version: 1.1 Text Domain: twentyseventeen-child */ Custom CSS goes after this line

Смените все значения на соответствующие вашему домену и теме. Самыми важными полями являются Template и Theme name , так как они указывают WordPress на какой родительской теме основана ваша дочерняя тема. Далее, нажмите Сохранить для сохранения изменений.

Добавьте файл functions.php в тот же каталог, но не вставляйте туда код из родительской темы, так как он должен оставаться отдельным от нее. Вместо этого, создайте пустой файл или добавьте новые.php функции необходимые для вашей дочерней темы.
Из панели управления WordPress, перейдите в раздел Внешний вид → Темы и нажмите кнопку Активировать на вашей дочерней теме.

Зайдите на ваш сайт, вы можете увидеть, что тема отображается не совсем правильно (как на картинке снизу). Без паники, это происходит из-за того, что файл functions.php еще не подгружает CSS из родительской темы.

Из панели управления WordPress перейдите в раздел Внешний вид → Редактор и выберите файл functions.php .
WordPress имеет функцию загрузки CSS из родительской темы. Скопируйте данный код в файл function.php дочерней темы:

Нажмите Обновить файл внизу страницы для сохранения изменений.
Посетите ваш сайт вновь. Теперь CSS загружен и ваша дочерняя тема выглядит также, как и родительская.

Как вы могли заметить, процесс создания дочерней темы довольно прост, если иметь правильный подход и воспользоваться пошаговой инструкцией нашего руководства.

Шаг 2 - Настройка дочерней темы WordPress

Теперь вы скорее всего хотите поскорее начать изменять внешний вид дочерней темы. Вы же создали ее именно для этого, правильно?

Шаг 2.1 - Настройка внешнего вида вашей дочерней темы

Для настройки внешнего вида темы вам необходимо отредактировать файл custom.css в каталоге вашей дочерней темы. Для этого можно использовать текстовый редактор и FTP-клиент, файловый менеджер или редактор WordPress (Внешний вид → Редактор) . Вам также необходимы некоторые базовые знания о правилах CSS и умение проверять элементы сайта с помощью браузера.

К примеру, для изменения цвета заднего фона, добавьте следующие CSS правила в файл style.css :

Site-content-contain { background-color: #d5ffa0; position: relative; }

Ниже показано то, каким станет внешний вид вашего сайта после внесения изменений.

Данный процесс применим и для изменения других элементов сайта.

Шаг 2.2 - Добавление и удаление функций

Еще одним преимуществом использования дочерней темы является возможность иметь раздельные файлы functions.php , которые как и плагины, используются для добавления (или удаления) определенных функций. Имея файл functions.php в дочерней теме, вы можете быть уверены в его сохранности, так как он не будет удален или изменен после обновления стандартной темы.

Для добавления новых функций к вашей теме, добавьте нужный PHP код в файл functions.php вашей дочерней темы. К примеру, данный код отключит функцию поиска WordPress:

Function disable_search($query, $error = true) { if (is_search()) { $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false; // to error if ($error == true) $query->is_404 = true; } } add_action("parse_query", "disable_search"); add_filter("get_search_form", create_function("$a", "return null;"));

Заключение

Дочерняя тема WordPress предоставляет возможность создать полностью новый проект на основе родительской темы, без какого-либо вмешательства в ее файлы. С помощью небольшого кода и работы с каталогами, вы можете изменить ваш сайт настолько, насколько вы этого захотите.

Друзья, всем привет. Я рад приветствовать вас на моём блоге. И сегодня хочу рассказать о создании дочерней темы WordPress. На сегодняшний день – это самый оптимальный подход при создании сайта на платформе WP.

Как вы знаете, для того чтобы создать сайт нужно следовать определённым шагам. И одним из таких шагов является подбор темы оформления вашего сайта или блога. Тем очень много, и при выборе нужно, прежде всего, руководствоваться техническими характеристиками (валидность кода, скорость загрузки, мобильность, кросбраузерность и т.д.). А дизайн всегда можно доработать под нужды конкретного проекта.

Что такое дочерняя тема WordPress

Но, если тема регулярно обновляется, то все изменения, внесённые вами, будут сброшены к базовым настройкам.

Так вот, дочерняя тема – это 100% копия родительской темы (основной темы). Все изменения, сделанные в дочерней теме, будут отражаться и в родительской. Но при этом файлы родительской темы не будут меняться. И обновление темы будет проходить с учётом ваших изменений.

Как создать дочернюю тему WordPress

Для начала вы должны понять структуру построения папок на вашем сайте. То есть, создав сайт на платформе вордпресс, на сервере появится папка themes , в которой содержатся папки всех тем установленных по умолчанию и вами.

Именно в папке themes , рядом с родительской темой нужно будет создать новую папку с дочерней темой.

Подключаемся к серверу. Через или через файловый менеджер хостинга, это на ваше усмотрение.

Поочерёдно открываем папки:

папка с вашим сайтом

папка родительской темы

Рядом с папкой родительской темы создаём папку дочерней темы. Название не имеет значения. В смысле, английскими символами можете присвоить любое имя.

В папке дочерней темы создаёте файл style.css . Это обязательный файл. Именно он будет отвечать за взаимодействие родительской и дочерней тем.

Настройка файла style.css дочерней темы WordPress

Файл style.css в дочерней теме должен содержать информацию о родительской теме. По ней WordPress поймет, между какими темами организовано взаимодействие.

Так же файл style.css в дочерней теме заменяет этот же файл в родительской теме. И поэтому нужно обязательно подключить стили из родительской темы.

Итак, приступим.

Откройте файл style.css (я обычно создаю этот файл на своём компьютере в редакторе Notepad++, а потом копирую его в папку дочерней темы на хостинг).

Вставьте в файл style.css вот этот код:

/* Theme Name: Название темы (английскими символами) Theme URI: url адрес темы Description: Описание темы Author URI: url вашего сайта или страницы об авторе Template: название родительской темы (с соблюдением регистра) Version: 1.0.0 */

Вот пример, как выглядит этот код в моей новой теме.

Учтите, обязательными полями к заполнению являются Theme Name и Template . Остальные поля вы заполняете на своё усмотрение.

Теперь нужно организовать импорт стилей из родительской темы. Дело в том, что как только появляется файл style.css в дочерней теме, WP не загружает этот же файл из родительской темы. И как следствие без стилей ваша тема будет выглядеть ужасно.

Для подключения стилей из родительской темы нужно прописать всего лишь одну строчку кода:

@import url("../папка родительской темы /style.css");

Как вы понимаете – это условный путь к файлу стилей в родительской теме. Вы также можете прописать полный путь (абсолютный) к файлу стилей родительской темы.

А вот уже после подключения стилей вы можете добавлять свои стили оформления. Обратите внимание, что именно после, все ваши дополнительные стили должны идти после строчки импорта.

Но, чтобы видеть все новые изменения, необходимо открывать административную панель WordPress и активировать дочернюю тему.

Какие файлы можно хранить в папке дочерней темы

В этой папке вы можете хранить хоть все файлы родительской темы. Но, это вовсе не обязательно. Храните лишь те, с которыми вы будете работать. В которых будете делать изменения. Разберём несколько примеров.

Файл функции темы functions.php

Если хранить этот файл в дочерней теме, то он будет загружаться в дополнение к основному файлу родительской темы. Таким образом, в этом файле будут содержаться лишь ваши доработки по функционалу.

Причём вы должны понимать, что все изменения, внесённые в файлы дочерней темы, касаются не, только доработки, но и изменения функций и дизайна родительской темы.

Вот скажем, у меня в текущей теме постоянно была проблема с тем, что путались заголовки H1 и H2. Решение этой проблемы я раскрыл в . А в своей новой теме, я могу реализовать это через файл functions.php. Добавив лишь вот такой код:

Add_filter("tc_site_title_tag", "change_tag"); function change_tag() { if (!is_single () && !is_page ()) return "h1"; if (is_single () || is_page ()) return "p"; }

А всё потому, что моя новая тема, полностью построена на API ключах WordPress.

Основные файлы темы (шаблона)

После активации дочерней темы в административной панели вы не сможете редактировать основные файлы темы (single.php, page.php, index.php …). Потому, что их просто там не будет.

Для того чтобы они отображались в панели администратора, нужно просто скопировать файлы из родительской папки в дочернюю.

Копировать файлу нужно строго в то же место, где они находятся в родительской папке. То есть, чтобы путь к файлу отличался только названием родительской и дочерней папки.

После копирования нужных файлов, их можно будет редактировать через административную панель WP.

И по этой же схеме копируете другие файлы, и редактируете именно в дочерней теме. Файлы родительской темы останутся без изменения. А далее всё в ваших руках.

А теперь смотрим видеоурок и можно приступать к созданию дочерних тем.

Вот и всё, дорогие друзья, простой алгоритм создания дочерних тем в WordPress закончен. Пробуйте, внедряйте, и создавайте свои темы. Только хочу обратить ваше внимание на то, что лучше всего создавать дочернюю тему сразу после установки родительской. Иначе, если вы уже ковыряли родительскую тему, то ваша дочерняя тема не будет реализована на 100%, да встать может криво.

Так, что решили работать над новой темой, выбрали, создали дочернюю тему и работайте с ней.

На сегодня всё, до встречи в новых видеоуроках и статьях. И конечно же, если будут вопросы, пишите в комментариях, буду рад помочь. Желаю вам удачи и хорошего настроения!

Подписывайтесь на новые статьи!

71 коммент. к статье “Как создать дочернюю тему WordPress ”

Василий
Очень интересная тема. Сразу появилось несколько вопросов.
1. Максим, а использование дочерней темы как-то влияет на скорость загрузки сайта?
2. Я использую специальный плагин Function.php для вставки кода в файлы темы. Если дополнительно использовать еще дочернюю тему, например, для микроразметки. Возможно ли такое?
3. Если копировать полностью файлы с родительской темы, то после обновления темы ничего не изменится. А ведь автор может что-то оттуда удалить. Нам нужно сохранить только определенные строки кода, а остальные изменения пусть происходят. Такое возможно?
- Вася, привет. Дочерняя тема в действительности расширяет границы в доработках темы под свои нужды.
  1. На скорость загрузки дочерняя тема не влияет. Всё зависит от самой родительской темы и от кода, который мы вставляем в дочернюю тему. Если все доработки валидные, то и скорость загрузки будет на высоте. Я тестировал на GTmetrix и Pingdom. Главное чтобы родительская тема была шустрая.
  2. Функции темы в дочерней теме это по сути дела все наши доработки собранный в плагин Function.php. Так, что свободно можно использовать плагин и не лезть в файл функции темы. Ну и соответственно всю микроразметку нужно создать в дочерней теме.
  3. Все файлы копировать не нужно. Лишь те, в которых делаем изменения. Так файлы родительской темы остаются в оригинале. Файлы обновляются с учётом наших доработок. Я уже проверил.
Сергей Стеклов
У меня почему-то при обновлении темы Customizr слетает дочерняя тема. И все из-за отредактированных файлов, которые лежат в папке inc —> parts. А именно:
class-content-featured_pages
class-content-post_navigation
class-content-slider
class-footer-footer_main
class-header-header_main
Когда эти файлы удаляю, то дочерняя тема с обновленной родительской работаете нормально. Но сейчас у меня Customizr 3.3.26 работает с дочерней нормально. На как только начинаю обновлять родительскую, то дочерняя слетает. Получается, что приведенные выше файлы вообще, нельзя редактировать, так как с новой версией темы старые копии файлов могут не работать. Уже точно не помню, что именно в них менял. Но вроде точно убирал ссылку на разработчика в подвале, редактировал слайдер и еще что-то. Тема не Pro, то есть используется бесплатный вариант.
Наталья
На WP делаю второй сайт, использую готовые шаблоны. Второй сайт пока на Денвере, WordPress с темой оформления Storefront. Сама тема разработана под интернет-магазин, интегрируется с плагином магазина WooCommerce. Проблема в том, что Storefront уже является дочерней темой Twenty Ten. Вопрос: как быть в таком случае — создавать дочернюю тему от дочерней? Или оставить всё как есть? И что будет, если в процессе работы сайта просто НЕ ОБНОВЛЯТЬ ТЕМУ? Какие могут быть последствия (без обновлений)? И второй вопрос: если не обновлять тему, но регулярно обновлять движок магазина (WooCommerce) — возникнут ли в дальнейшем какие-нибудь фатальные конфликты? Заранее благодарю за ответ!
Тата
Спасибо за подробную и понятную информацию по дочерним темам. Сделала все, как написано. Обновила и движок, и тему — работает все, кроме плагина wppage. Теперь страницы, сделанные с его помощью отображаются как обычные страницы с сайдбаром установленной темы. Предполагаю, надо где-то прописать template_include для страниц wppage. Но моих познаний явно не хватает. Можете подсказать, Максим?
Лариса
Максим, и снова я. Начала создавать дочерние темы под сайты и возник вопрос: есть ли темы, которые не поддерживают создание дочерних тем? Есть у меня на тестовом домене тема, где не получается активировать дочернюю. При этом сайт слетает и выдает 500 ошибку. В чем может быть дело? Пробовала переносить в папку с дочерней темой один файл style.css и все папки и файлы родительской темы (кроме родительской таблицы стилей), все равно при активации ошибка и вытаскивание сайта из резервной копии…
- Лариса, такое бывает, когда в дочерней теме прописан путь к папке или файлу, которого нет в родительской. Нужно попробовать в дочерней теме создать только файл стилей без папок и других файлов. Когда тема подключится, то уже можно постепенно переносить нужные файл и в конечном итоге будет понятно что нарушает работу сайта.
  Я в таких случаях работаю через ftp соединение, копирую файл и проверяю работу. Если сайт перестал работать, значит причина в этом файле. Удаляю его — сайт начинает работать. А я выясняю причину, что в нём не так.
  - Лариса
    Спасибо за идею! Сделала так: создала папку с дочерней темой и файлом style.css. Активировала дочернюю тему из админки и получила сайт, лишенный стилей. Иногда такая картина бывает при медленном соединении интернета. У меня такие сайты на локалке получались во время осваивания html)))))))))) В теме много настроек, виджетов. Есть спец. поле для создания своих стилей. Попробовала в это поле скопировать полностью CSS родительской темы, получила какую-то кашу из виджетов (подвальные «налезли» на виджеты хедера)… Не понимаю, почему стили не подключаются по человечески… Кстати, в этой теме два файла functions… Один из них лежит в дополнительной папкеп со своим названием.
Лариса
Максим, в кодексе ВП написано, что можно создать в дочерней теме файл functions.php, который будет подгружатся в дополнение к родительскому. В нем можно написать директивы, которые будут переопределять директивы из родительской темы. Плюс написать свои директивы. Стили родительской темы так и не подключились у меня через импорт в файле css. Пришлось это сделать через дочерний файл functions.php. Через этот же файл сделала транслитерацию. Сайт в рабочем состоянии. Но! У меня не получилось переопределить функцию копирайта в подвале сайта (там ссылка на разработчика и на вордпресс).
- Лариса
  Все, ненужные копирайты убрала, но не через переопределение, а просто прописала участок кода из функции темы родительской и убрала оттуда условия, по которым появляются линки. Пока что все работает, но еще сайт не настраивала, он в классическом, первоначальном состоянии.
- Лариса, да именно через файл functions.php дочерней темы вносятся все изменения и они не слетают при обновлении родительской темы. Но, это хорошо работает на современных тема, где всё завязано на API.
  С копирайтом, если не получается изменить его в отдельности, то менять нужно весь выше стоящий блок. Или файл подвала можно скопировать в дочернюю тему и изменить копирайт. Так гораздо проще. 😉
Наталья
Да, жаль, что я время упустила. Поздно нашла вашу статью.
я сделала блог для своего мужа, а у него при каждом обновлении темы пропадает картинка в шапке и информация в футере. Каждый раз после обновления приходится всё это корректировать. Благо у меня всё это сохранено в еверноте и много времени на это тратить не приходится. Но напрягает.
Теперь, если придётся создавать новые сайты, буду сразу делать дочернюю тему.
Спасибо за подробный урок. Александр
Здравствуйте, Максим!
При вставке доработанных файлов с микроразметкой, возникают проблемки. Я уже говорил Вам, что не особо владею языком програмирования. Вот, например при вставке файлов sidebar-left и sidebar-right с доработкой, вы не указали, как правильно их в теги заключить, и на сайте остается только хейдер. Опять же при вставке class-content-page с микроразметкой по Вашим урокам, правый сайд-бар в страницах слетает под левый. А про functions я вообще ничего понятного не нашел ни где — при его вставке в любом виде (оригинал или с доработкой из уроков микроразметки), сайт становится недоступен. А ведь именно он, я так понимаю, является одним из основных элементов для правильного функционирования дочерней темы. Остальные файлы становятся нормально, только Яшка ругается на подвал (гугл нет): ПРЕДУПРЕЖДЕНИЕ: значение «© 2016» в поле copyrightYear не является корректным значением числа. Вывод статей у меня не с главной настроен, по этому, сами понимаете, при редактировании приходилось искать другие номера строк. Показ анонсов, тоже по другому. Не показываю теги рубрик, даты и автора — в Search Console куча урлов с ошибками появляется. В общем, гуглю, гуглю, а в итоге снова к Вам попадаю. Если сможете, что-нибудь подсказать — буду благодарен!
И это вызывает некоторые неудобства. Например, тема не переведена на русский язык. В папке languages есть только один файл nepalbuzz.pot. Допустим, в окне поиска высвечивается слово «Search…» Я хочу поменять его на «Поиск… » В файле nepalbuzz.pot нахожу такую строку, она ссылается на файл inc/default-options.php. Там тоже нахожу такую строку.
Но менять в родительской теме файлы не рекомендуется.
У меня уже создана дочерняя тема nepalbuzz-child. В style.css все указал, как положено.
И вот я хочу изменить файл default-options.php, скопированную в папку nepalbuzz-child/inc. Но чтобы изменение вступило в силу, мне придется скопировать туда и core.php и указать ссылку на него в function.php.
Но ведь в этом core.php содержатся ссылки и на другие файлы в родительской теме и в nepalbuzz-child их нет. Придется их все перенаправлять в родительскую тему?
Короче, возникает путаница со ссылками.
А если просто, не мудрствуя, скопировать ВСЕ содержимое родительской темы в дочернюю? Не возникнет ли проблем? Будут ли файлы меняться при обновлении темы? И обязательно ли при этом указывать в style.css родительскую тему?
Ольга
Здравствуйте! Подскажите, пожалуйста, если я уже вносила изменения в Родительскую тему и хочу обновить её, то при создании Дочерней темы какие файлы мне нужно из Рт переместить в Дт, чтобы мои, ранее сделанные, изменения в Родительской теме не потерялись при обновлении?
И ещё вопрос:
— после установки Дочерней темы сайт будет отображаться с новым дочерним урлом?

Дочерняя тема 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 может содержать и другие файлы, среди них:

style.css - (обязательный) полностью заменяет такой же файл родительской темы.

functions.php - дополняет functions.php родительской темы (загружается перед ним).

файлы шаблона - index.php , home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.

другие файлы - любые другие файлы/папки/что угодно. Например, подтема может использовать новые изображения, которые подключаются в дополнительных CSS правилах.

Файл 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 - (обязательно) название дочерней темы.

Template - (обязательно) регистрозависимое название папки родительской темы.

Заметка: при изменении нужно сбросить настройку, для этого нужно переключится на другую тему и вернуться обратно.

Theme URI - адрес сайта дочерней темы.
Description - описание дочерней темы.
Author URI - адрес сайта автора дочерней темы.
Author - имя автора дочерней темы.
Version - версия дочерней темы.

Файл function.php

В отличие от других файлов подтемы, functions.php не заменяет родительский файл, а дополняет его: он загружается прямо перед родительским и другими файлами подтемы.

Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны.

Использование хуков

В файле footer.php в теме twentyfifteen есть событие twentyfifteen_credits . Чтобы добавить свой текст в подвал, можно использовать это событие, для этого добавим следующий код в functions.php дочерней темы:

Переопределение функции

В файле 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 позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.

Поддержка дочерних тем (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 в директории с вашей дочерней темой:

Таким образом мы заменили текст в подвале темы Twenty Twelve на наш собственный.

Часто при работе с шаблонами в дочерних темах, проще скопировать существующий шаблон из родительской темы и вносить в него изменения уже в дочерней теме, сохраняя таким образом структуру всего HTML документа. Если вы совершили ошибку, вы всегда можете удалить шаблон и начать заново.

Вы так же можете создавать новые файлы шаблонов, которые отсутствуют в родительской теме, и WordPress будет подключать их согласно иерархии шаблонов . Например, если в родительской теме отсутствует файл page.php, вы можете создать файл с таким именем в вашей дочерней теме и WordPress его подключит при отображении какой-либо страницы.

Стоит так же отметить, что подобным образом изменять можно не все файлы родительской темы. Например, вы не сможете изменить файл, который был вызван PHP функцией include или require .

Работа с functions.php

Если у вас возникли вопросы по внесении изменений в существующие темы WordPress — оставьте комментарий и мы обязательно вам ответим.