Создание дочерней темы в WordPress. Зачем нужна дочерняя тема WordPress

20.07.2019

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

Проблема в том, что даже небольшое изменение темы может сделать невозможным ее обновление до более поздней версии в будущем, потому что, если вы все-таки попытаетесь это сделать, то можете потеряете все изменения.

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

Сегодня в статье я объясню для чего вам нужны дочерние темы и как работать с ними.

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

Как работают дочерние темы и почему их нужно использовать?

Дочерние темы — это отдельные темы, которые наследуют большую часть их функциональности от родительской (исходной темы). Если вы используете дочернюю тему, WordPress для начала будет проверять существует ли в теме особенная функциональность.

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

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

Обновления

Если вы видоизменяете тему без использования дочерней темы, у вас есть два варианта: либо вы решаете не обновлять ее в будущем, либо вы это делаете и теряете все изменения.

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

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

Структура

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

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

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

Это очень просто — создать дочернюю тему. Так просто, что вы можете взять и скопировать мой пример внизу.

Чтобы создать дочернюю тему нужно выполнить следующие шаги:

Создать директорию для темы
Создать таблицу стилей с информацией о вашей дочерней теме
Подключить стили родительской темы

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

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

1. Для начала создайте папку для вашей новой темы в директории тем. Вы можете выбрать для нее имя. Ради ясности я назову ее twentyfourteen-child

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

/* Theme Name: Twenty Fourteen Child Theme URI: http://yourwebsite..0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */

Theme Name: Twenty Fourteen Child

Theme URI: http://yourwebsite.com/twentyfourteen-child/

Description: My first child theme, based on Twenty Fourteen

Author URI: http://сайт

Template: twentyfourteen

Version: 1.0.0

Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated

Text Domain: twenty-fourteen-child

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

Большинство остальных моментов интуитивно понятные за исключением text domain и tags. The text domain используется для перевода строк. Он должен быть уникальным для вашей темы и использоваться каждый раз, когда вы используете функции перевода. Для большей информации ознакомьтесь с I18n for WordPress Developers . Секция с тегами представляет собой список тегов, которые используются для Репозитория Тем WordPress. Для примера я скопировал теги из style.css файла исходной темы.

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

У нас есть файл с таблицами стилей, поэтому WordPress не подгружает файлы исходной темы. Чтобы убедится, что мы загружаем таблицы стилей исходной темы давайте их подключим с помощью системы enqueueing. Это можно сделать в файле темы functions.php, поэтому давайте его создадим сейчас, просто копируя код внизу:

add_action("wp_enqueue_scripts", "enqueue_parent_styles"); function enqueue_parent_styles() { wp_enqueue_style("parent-style", get_template_directory_uri()."/style.css"); }

add_action ("wp_enqueue_scripts" , "enqueue_parent_styles" ) ;

function enqueue_parent_styles () {

wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ;

Как работают дочерние темы?

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

Однако в этом правиле есть одно исключение — файл с функциями для темы. Файл functions.php из обоих родительской и дочерней тем будет подружаться. Если функции в дочерней теме заменяют родительские, то вы получите либо мультифункциональный сайт, либо вам придется копировать все содержимое файла с функциями родительской темы в дочернюю тему — ведь что не сделаешь для расширения темы.

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

Небольшие заметки для разработчиков тем

Если вы создаете темы, то есть парочка руководств, которыми вы можете воспользоваться, чтобы упростить этот процесс. В двух самых важных описывается разница между get_stylesheet_directory() и get_template_directory() и процесс создания pluggable functions .

Правильна директория

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

/images/twitter.png" alt="Twitter Logo">Follow Me /images/github.png" alt="Github Logo">On Github

< a href = "http://twitter.com/danielpataki" > < img src = " /images/twitter.png" alt = "Twitter Logo" > Follow Me < / a >

< a href = "http://github.com/danielpataki" > < img src = " /images/github.png" alt = "Github Logo" > On Github < / a >

Одним из преимуществ использования get_stylesheet_directory_uri() является то, что разработчики дочерних тем могут использовать свою собственную картинку, просто размещая ее в правильном месте. С другой стороны, если картинка не существует в дочерней теме, то она не будет отображаться совсем.

Это объясняется тем, что, если дочерняя тема активна, то функция get_stylesheet_directory_uri() не проверяет (не знает) какой файл вы загружаете, соответственно она не будет проверять его существование и всегда будет возвращать URI для дочерней темы.

Изменяемые функции

Есть еще один метод, который следует использовать — pluggable функции WordPress. Он позволяет авторам дочерних тем переписывать функции, определенные в родительской теме. Под этим подразумевается оборачивание функций в функцию function_exists() .

Предположим, что вы создаете функцию для отображения custom post meta с именем my_meta() . Дочерняя тема никак не может изменить эту функцию, т.к. она не может быть определена дважды. Решением этой проблемы может быть только создание функции, которая не определена (помните, что файл с функциями дочерней темы загружается первым).

Хотите создать дочернюю тему 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, которая позволяет редактировать код темы без угрозы потерять все изменения при плановом обновлении.

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

Дочерняя (child theme, тема-потомок) это инструмент, позволяющий вносить любые корректные изменения внешнего вида (редакция файла style.css) и функционала сайта (файлы functions.php и другие файлы шаблона) и не потерять редакции при обновлении шаблона.

Стили и разметка темы родителя подкачиваются в тему потомок, а изменения в child theme наслаиваются на них. Все изменения мы вносим в дочернюю тему, а основная тема остается неизменной.

Создаем дочернюю тему WordPress – практический пример

Напомню, все темы системы «лежат» в каталоге wp-content/themes . Далее по шагам.

В каталоге wp-content/themes создаем папку с произвольным названием дочерней темы. Для примера создаю папку: first-child-theme. Название произвольно, скоро понадобится.
В любимом текстовом редакторе (я использую Notepad++) создаем текстовой файл с расширением css и названием style . Название не меняем, а содержание файла должно содержать, пока, только заголовок:

/* Theme Name: First child theme Theme URI: http: //domen.ru/ Description: Создаю дочернюю тему Author: Игорь Серов Author URI: http: //сайт Template: zeefocus */

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

Файл сохраняем и заливаем в папку дочерней темы, first-theme.
В консоли сайта появляется дочерняя тема. Название совпадает с названием указанным в строке: Theme Name. При открытии темы показывается указанное описание темы — строка Description.

Тема еще пустая и нужно ее наполнить и активировать. Можно наоборот: активировать, а потом наполнить.

Как наполнить дочернюю тему

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

Для дублирования темы выбираем из двух вариантов исполнения:

Копируем родительский файл style.css и переносим его в аналогичный файл дочерней темы (пока он всего один).
Или в файле style.css дочерней темы вписываем дополнительную строку:

@import url(“../zeefocus/style.css”);<\pre>

Где, zeefocus – основная, родительская тема.

Важно! Этой строкой мы подгружаем стили основной темы. Теперь, не нужно копировать файл стиля, можно вносить изменения в пустой файл дочерней темы и он будет записываться поверх стилей основной темы. Редактировать файл style.css можно из админки сайта, с соблюдением , на вкладке Внешний вид→Редактор .

Не забываем, функцию import вынести из заголовка файла style.css .

Другие файлы темы

Опять два варианта,

создаем пустые файлы с аналогичными названиями пустым содержимым: () и пишем их, как нужно;
или, проще, переносим файлы основной темы в дочернюю тему и их редактируем, как нужно.

Плагины child theme

О плагинах облегчающий создание дочерней темы сайта в статье.

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

Если вы второй раз смотрите на WordPress и третий раз наступили на грабли с обновлением темы - читайте дальше.

Итак, для чего нужны дочерние темы? Я уже частично ответил на этот вопрос. С определенной периодичностью в ядре WordPress, плагинах и темах обнаруживаются дыры (в плане безопасноти). Как правило толковые ребята, занимающиеся разработкой тем, плагинов и самой CMS, выпускают обновления. Все Ваши кастомизации пропадают в тот момент, когда вы устанавливаете эти обновления. Особенно плохо становится в ситуации с глубоко-модифицированной темой. Очень плачевно - при отсутствии резервной копии.

Для того что бы не терять все свои модификации - лучше не делать их в файлах главной темы.

Мне удалось найти в закромах WordPress со старой версией темы Twenty Twelve. Ее и буду использовать для примера.

1. Создаем папку дочерней темы:

mkdir wp-content/themes/twentytwelve-child

2. Для работы темы нужно два файла:

style.css
functions.php

Создадим их:

touch wp-content/themes/twentytwelve-child/style.css
touch wp-content/themes/twentytwelve-child/fnctions.php

3. Имя темы задается в style.css. Минимальный набор кода для style.css:

/* Theme Name: Twenty Twelve Child Template: twentytwelve Author: the WordPress team Version: 1.0 Text Domain: twentytwelve-child */ @import url("../twentytwelve/style.css")

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

В этот момент тема появляется в списке тем в админке WordPress и выглядит вот так:

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

cp wp-content/themes/twentytwelve/screenshot.png wp-content/themes/twentytwelve-child/

Теперь список тем выглядит вот так:

После этого тему можно активировать и она даже заработает.

Осталось сложить все модифицированые файлы в папку дочерней темы. Дело в том, что WordPress приоритизирует скрипты/файлы из папки дочерней темы над файлами/скриптами материнской темы. Если же какой-то из файлов не найден в папке дочерней темы - он берется из материнской.

Стандартная тема выглядит вот так:

Давайте немного моифицируем ее для наглядности. Я скопировал файл header.php из материнской темы, поменял в нем отображение меню (над заголовком) и убрал отображение описания блога. При этом оригинальный header.php остался нетронутым. Получилось вот так:

Как мы видим сработал header.php из папки дочерней темы.

Засада только со стилями. Если Вы объявите новый стиль отображения, на пример, ширину зоны текста в файле style.css дочерней темы - он не сработает.

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

touch wp-content/themes/twentytwelve-child/custom.css

Внесите в него код из спойлера.site:

Site { margin: 0 auto; max-width: 90%; overflow: hidden; }

К сожалению директива @import url работает только один раз в файле style.css, поэтому второй файл стилей подключить не удасться.

В WordPress стили подключаются функией wp_enqueue_style() в файле functions.php.

Создаем первую кастомную функцию в functions.php дочерней темы, которая будет возвращать папку или uri дочерней темы:

Function get_child_template_directory_uri() { return dirname(get_bloginfo("stylesheet_url")); }

После этого мы можем смело использовать get_child_template_directory_uri() в других кастомных функциях.

Теперь подключаем custom.css:

Function child_styles() { wp_enqueue_style("twentytwelve-child-style", get_child_template_directory_uri() . "/custom.css"); } add_action("wp_enqueue_scripts", "child_styles",12);

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

Думаю не нужно объяснять, почему файл functions.php должен начинаться с

Кстати цыфра в add_action() определяет приоритет. 12 - самый крутой action, подразумевается, что стили, которые были подключены с помощью его, будут брать верх над стандартными из материнской темой.

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

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

(Visited 1 223 times, 1 visits today)

Разработчики 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 предоставляет возможность создать полностью новый проект на основе родительской темы, без какого-либо вмешательства в ее файлы. С помощью небольшого кода и работы с каталогами, вы можете изменить ваш сайт настолько, насколько вы этого захотите.