Дочерние темы. Как создать дочернюю тему или wordpress child theme

Дочерняя тема 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; }

1. Зайдите во Внешний вид › Темы и активируйте новую тему «Моя дочерняя тема».

Обязательно нужно указать строку 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 дочерней темы:

Add_action("twentyfifteen_credits", function() { echo "Компания © 2015"; });

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

В файле functions.php родительской темы twentyfifteen есть функция twentyfifteen_fonts_url() - регистрирует шрифты google. Выглядит она так:

If(! function_exists("twentyfifteen_fonts_url")){ function twentyfifteen_fonts_url(){ // код функции... } }

Условие! function_exists("twentyfifteen_fonts_url") - если функция не существует, позволяет определить такую же функцию в functions.php дочерней темы.

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

Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:

Function twentyfifteen_fonts_url() { return ""; }

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

If(! function_exists("theme_function")){ function theme_function() { // Код. } }

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

Файлы шаблона

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

Несколько примеров создания файла шаблона в дочерней теме:

#1 Добавление шаблона, отсутствующего в родительской теме

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

Заметки

Форматы записей

Функция add_theme_support("post-formats") переопределит форматы, заданные родительской темой, а не дополнит их.

@import в style.css дочерней темы

Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней... Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы... В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла...

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

Add_action("wp_enqueue_scripts", "my_theme_styles"); function my_theme_styles() { wp_enqueue_style("parent-theme-css", get_template_directory_uri() ."/style.css"); // не обязательно, правильная родительская тема подключит его сама. //wp_enqueue_style("child-theme-css", get_stylesheet_directory_uri() ."/style.css", array("parent-theme-css")); }

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

https://doctorsmm.com/ - это недорогой сервис с эффективным SMM соц сетей. Здесь Вы сможете получить услуги по раскрутке на более чем 9 топовых площадках, как отечественного, так и зарубежного интернета. Покупайте уже сейчас популярные ресурсы для увеличения счетчиков в соцсетях, такие, как лайки, подписчики и пр., с большими оптовыми скидками и персональными условиями добавления.

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

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

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

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

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

Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:

• Если вы измените тему напрямую, и она обновится, то ваши изменения просто пропадут. Используя дочернюю тему, вы будете уверены, что ваши изменения сохранятся.
• Использование дочерней темы может ускорить время разработки.
• Использование дочерней темы - хороший способ изучить сам процесс разработки темы для Вордпресс.

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

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

• Директория дочерней темы
• style.css
• functions.php

Первый шаг - это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes . Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “ -child ” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).

Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “ twentyfifteen-child ”, означающее, что родительской темой является Twenty Fifteen .

Следующий шаг - создание файла стилей для дочерней темы (style.css). Файл стилей должен начинаться со следующей мета-информации:

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child

Важная информация, о которой вы должны знать:

• Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
• Строка “ Template ” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “ Template ” содержит “ twentyfifteen ”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом.
• В принципе, файла стилей (style.css) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файл functions.php (см. ниже).

Третий и последний шаг - постановка в очередь родительских и дочерних файлов стилей.

Заметьте, что предыдущий метод предполагал импорт родительских стилей, используя директиву @import . Сейчас это уже устаревшая практика.

Как правильно и корректно загружать стили

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

Данный метод также предполагает использование функции wp_enqueue_style() в дочернем файле functions.php . Поэтому вам нужно создать этот файл в директории с дочерней темой.

Первая строка дочернего файла functions.php начинается с открытия тега PHP (

Следующий пример функции будет работать, если родительская тема использует только один главный файл style.css , содержащий все CSS правила. Если ваша тема имеет больше одного.css файла (в т.ч. ie.css , style.css , main.css), тогда вам потребуется удовлетворить все необходимые зависимости родительской темы.

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

Как правило, файл стилей дочерней темы загружается автоматически. Если это не так, вам также надо будет его поставить в очередь. Настроив “ parent-style ” как зависимость, убедитесь, что стили дочерней темы загружаются после нее.

add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() { wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); wp_enqueue_style("child-style", get_stylesheet_directory_uri() . "/style.css", array("parent-style")); }

add_action ("wp_enqueue_scripts" , "theme_enqueue_styles" ) ; function theme_enqueue_styles () { wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ; wp_enqueue_style ("child-style" , get_stylesheet_directory_uri () . "/style.css" , array ("parent-style" )

Теперь ваша дочерняя тема готова для активации. Войдите в административную панель, далее на страницу Внешний вид > Темы . Вы должны увидеть вашу дочернюю тему в списке тем и готовую к активации. (Если в текущей инсталяции включена мультисайтовость, тогда вам надо переключиться на соответствующую панель, чтобы включить тему. После этого переключитесь обратно и активируйте тему).

Важно : После активации вам потребуется пересохранить ваше меню (Внешний вид > Меню или Внешний вид > Настроить > Меню ) и опции темы, включая фоновое изображение, а также изображение в шапке, если таковые предусмотрены родительской темой.

Файлы шаблонов

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

К примеру, если вы хотите изменить код PHP для шапки сайта, вы можете включить файл header.php в вашу директорию с дочерней темой, и этот файл будет использован вместо header.php родительской темы.

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

Использование functions.php

В отличии от style.css , файл functions.php дочерней темы не переопределяет родительскую копию. Напротив, он является как бы дополнением к ней (точнее, он загружается перед родительской копией).

Таким образом, functions.php дочерней темы обеспечивает “умный”, беспроблемный способ изменения функциональности родительской темы. Скажем, вы хотите добавить функцию PHP к вашей теме. Самый быстрый способ - открыть файл functions.php темы и поместить функцию туда. Но это не очень умно: когда в следующий раз тема обновится, ваша функция просто исчезнет.

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

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

" . "\n"; } add_action("wp_head", "favicon_link");

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

if (! function_exists("theme_special_nav")) { function theme_special_nav() { // Сделать что-то. } }

В этом случае, дочерняя тема может заменить PHP-функцию родителя, просто объявив ее заранее.

Включение файлов в вашу дочернюю тему

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

Ниже пример использования конструкции require_once , который иллюстрирует, как вы можете использовать get_stylesheet_directory , когда нужно дать ссылку на файл, хранящийся в структуре дочерней темы.

require_once(get_stylesheet_directory() . "/my_included_file.php");

require_once (get_stylesheet_directory () . "/my_included_file.php" ) ;

Дополнительная полезная информация

Использование форматов постов

Дочерняя тема наследует форматы постов, определенные в родительской. Когда создаете дочернюю тему, знайте, что использование add_theme_support("post-formats") перекроет форматы, определенные в родительской теме, а не добавит к ним.

Поддержка RTL (написание справа-налево)

Для поддержки языков RTL, добавьте файл rtl.css к вашей дочерней теме. Он содержит:

/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */

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

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

По средним статистическим данным, около 80% сайтов используют основные темы WordPress, и только около 20% – используют дочернюю тему. Это можно объяснить тем, что большинство клиентов не понимают, что такое дочерняя тема ВордПресс, или думают, что ее трудно настроить. В сегодняшнем уроке мы рассмотрим практические моменты создания и использования дочерней темы, а также ее важность.

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

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

Практика

В нашем примере мы создадим дочернюю тему для основной темы sebweo . Прежде всего, нам нужно создать новую папку для дочерней темы (назовем ее, например, sebweo-child). Полный путь от корня сайта будет /wp-content/themes/sebweo-child/ . В папке новой темы создайте файл style.css (единственный обязательный файл) и заполните информацию выделенную комментариями (между /* и */ ), как в примере ниже. Название темы, URI, Описание и Автора можно полностью заменить под свои нужды.

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css");

Важнейшими частями этого файла есть разделы «Template:» (идентифицирует родительскую тему) и инструкция CSS @import (импортирует стили CSS из оригинальной темы). Убедитесь в том, что путь к основному CSS файлу родительской темы правильный, и в параметре «Template:» правильно указано название родительской темы. Откорректируйте это под свои названия и пути. Все эти данные чувствительны к регистру! В нашем примере название темы (и, соответственно, название папки с родительской темой) пишется в нижнем регистре, если у вас используется название с верхним регистром – вы должны так и писать (например, Sebweo).

Активация дочерней темы

После того, как вы создали папку с дочерней темой и файл style.css , вы можете активировать свою новую дочернюю тему. Активация дочерней темы не отличается от активации обычной темы: просто зайдите в Консоль WordPress по адресу Внешний вид > Темы (Appearances > Themes), найдите только что созданную тему и активируйте ее (нажмите кнопку Активировать на блоке с темой).

Редактирования CSS стилей основной темы

Итак, мы создали дочернюю тему. Сейчас стили на сайте выглядят так же, как при оригинальной теме. Это потому, что мы импортировали все CSS стили с оригинальной темы (помните инструкцию @import ?). Чтобы отредактировать стили, добавьте любые изменения в CSS-файл дочерней темы под инструкцией @import . Стили в дочерней теме имеют больший приоритет, поскольку они загружаются после стилей основной темы и тем самым переопределяют их.

Например, нам нужно изменить фоновый цвет сайта с #fff на #f5f5f5 . Для этого мы можем добавить соответствующий CSS-код в файл sebweo-child/style.css:

Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css"); /* переписываем стили основной темы */ body { background-color: #f5f5f5; }

Сохраните файл и обновите сайт: вы увидите, что фоновый цвет изменился (при условии, конечно, что в основной теме использовался белый фоновый цвет для тега body).

Редактирования файла functions.php

Файл functions.php используется, как правило, для размещения основных функций темы. При использовании дочерней темы без этого файла, он автоматически будет подгружаться с родительской темы. Но если вам нужно добавить другие специальные функции к своей теме, вы можете сделать это, создав новый файл functions.php в папке с дочерней темой. Обратите внимание, что новые функции будут загружены непосредственно перед функциями родительской темы. Файл functions.php вашей дочерней темы должен начинаться с тега . Между этими тегами можно добавлять свой желаемый php-код.

Редактирование других файлов шаблонов

Кроме изменений CSS и функций, вы можете внести структурные изменения в вашу тему, откорректировав php файлы-шаблоны. Это следует делать с осторожностью, но за счет этого вы можете настроить любую часть темы. В отличие от редактирования файла functions.php , где функции оригинальной темы импортируются автоматически, при редактировании файлов-шаблонов дочерней темы они полностью заменяют шаблоны в родительской теме. Файл родительской темы игнорируется, а вместо него используется новый (с дочерней темы). Первое, что нам нужно сделать – это воссоздать старый файл, прежде чем мы начнем его менять. Для этого просто скопируйте файл-шаблон с родительской темы и вставьте его в папку с дочерней темой. Например, если мы хотим изменить файл-шаблон для шапки сайта (header.php), мы просто скопируем его из /wp-content/themes/sebweo/ и вставим в /wp-content/themes/sebweo-child/ (замените на свои пути! ).

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

Преимущества и недостатки дочерней темы

Преимущества использования дочерней темы WordPress

1. Безопасное обновление:

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

1. Легко расширяется:

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

1. Резервное копирование:

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

Недостатки использования дочерней темы WordPress

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