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

Дочерняя тема — это тема созданная на основе родительской. «На основе» значит, что если запрашиваемого файла темы нет, он будет взят из родительской темы: родительская тема как бы страхует дочернюю тему. С технической стороны, при создании дочерней темы, она становится основной, а родительская дополняющей темой.

Дочерняя тема получит весь набор функций от родительской темы. Создать дочернюю тему очень просто. Создайте папку, положите в нее соответствующим образом написанный файл style.css и дочерняя тема готова! С небольшим понятием о HTML и CSS, вы можете изменить эту очень простую дочернюю тему — меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.

По этой причине дочерние темы — рекомендованный способ внесения изменений в тему.

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

Первая и основная причина — это обновления. Дело в том, что темы состоят из большого количества файлов и являются довольно-таки сложными программами. Если обновить тему, в которую ранее были внесены изменения, то эти изменения просто исчезнут.
Вторая причина — это повторное использование кода: вместо того, чтобы создавать WordPress тему с нуля, можно воспользоваться уже готовыми шаблонами. А если есть свои оригинальные темы, то для установки их на тот или иной сайт и дальнейшей тонкой настройки можно создавать дочернюю тему, потому что производить поправки и изменения в дочерней теме очень удобно, т.к. все изменения хранятся в отдельном файле, что позволяет быстро увидеть отличия и вспомнить причину внесения изменений при необходимости.
Третья причина состоит в том, что создать дочернюю тему со своим дизайном может и новичок в WordPress, знаний css для этого вполне достаточно.
Четвертая причина — время разработки и количество ошибок значительно сокращаются.

Отличия дочерней темы от родительской

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

Структура папки

Дочерняя тема размещается в своей собственной папке внутри wp-content/themes. Схема ниже показывает положение дочерней темы относительно ее родительской темы (Twenty Seventeen) в типичной структуре папок WordPress:

public_html
wp-content
- - themes (папка со всеми темами)
    - twentyseventeen (папка родительской темы Twenty Seventeen)
    - twentyseventeen-child (папка нашей дочерней темы; может быть названа как угодно)
      - style.css (необходимый файл, должен быть назван style.css)

Эта папка может содержать как style.css, так и дополнительные файлы, относящиеся к теме:

style.css (обязательно)
functions.php (опционально)
файлы шаблона (опционально)
другие файлы (опционально)

style.css

style.css — единственный необходимый файл в дочерней теме. Он обеспечивает информационный заголовок, по которому WordPress опознает дочернюю тему, и он заменяет style.css родительской темы.

Как и с любой темой WordPress, информационный заголовок должен быть в начале файла, единственное отличие — в дочерней теме строка Template: обязательна, чтобы WordPress знал, какая тема является родительской.

Вот пример информационного заголовка файла style.css дочерней темы:

Theme Name: Twenty Seventeen Child

Theme URI: https://github.com/SolomashenkoRoman/twentyseventeen-child

Description: Child Theme Twenty Seventeen

Author: SolomashenkoRoman

Author URI: https://www.linkedin.com/in/solomashenkoroman/

Template: twentyseventeen

Version: 1.0

Краткое пояснение каждой строки:

Theme Name. (обязательно) Название дочерней темы.
Theme URI. (опционально) Адрес сайта дочерней темы.
Description. (опционально) Описание дочерней темы. Например: Моя первая дочерняя тема, бугага!
Author URI. (опционально) Адрес сайта автора дочерней темы.
Author. (опционально) Имя автора дочерней темы.
Template. (обязательно) Название папки родительской темы, регистрозависимое.
- ПРИМЕЧАНИЕ. При изменении данной строки вы должны переключится на другую тему и обратно на дочернюю тему.
Version. (опционально) Версия дочерней темы. Например: 0.1, 1.0.

Часть после закрывающего */ используется как обычный файл стилей. Здесь вы пишите правила стилей, которые будут применены WordPress.

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

Пример простой дочерней темы

Наша родительская тема для этого примера — Twenty Seventeen. Нам нравится практически все в ней, кроме цвета текста заголовка сайта, который мы хотим изменить с черного на зеленый. Используя дочернюю тему, мы сделаем это за три простых шага:

Создаем новую папку в wp-content/themes, и называем ее twentyseventeen-child (или как-нибудь еще).
Сохраняем код ниже в файл с именем style.css, и кладем его в созданную папку.
Переходим во Внешний вид › Темы и активируем нашу новую тему Twenty Seventeen Child.

style.css — единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.

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

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

Пример style.css дочерней темы.

Theme Name: Twenty Seventeen Child

Theme URI: https://github.com/SolomashenkoRoman/twentyseventeen-child

Description: Child Theme Twenty Seventeen

Author: SolomashenkoRoman

Author URI: https://www.linkedin.com/in/solomashenkoroman/

Template: twentyseventeen

Version: 1.0

@import url(«../twentyseventeen/style.css»);
#site-title a {
color: #009900;
}

Вот что делает выше написанный код, шаг за шагом:

/* открывает информационный заголовок дочерней темы.
Theme Name: объявляет название дочерней темы.
Description: объявляет описание дочерней темы. (Опционально; может быть пропущено.)
Author: объявляет имя автора дочерней темы. (Опционально; может быть пропущено.)
Template: объявляет родительскую тему, т.е. название папки родительской темы в правильном регистре.
*/ закрывает информационный заголовок дочерней темы.
Директива @import подключает файл стилей родительской темы.
Правило #site-title a задает цвет текста (зеленый) для заголовка сайта, переопределяя соответствующее правило в родительской теме.

Примечание для директивы @import

Не должно быть никаких других правил CSS выше директивы @import. Если вы поместите другие правила выше этой директивы, она не будет выполнена и файл стилей родительской темы не будет импортирован.

В результате у нас должна получиться такая структура:

wp-content/

└── themes/

├── twentyseventeen (родительская тема)

└── twentyseventeen-child (подтема; может иметь любое название)

└── style.css

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

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

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

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

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

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

add_filter(‘wp_title’, ‘filterTitle’);

function filterTitle($title) {

return $title.’ — Twenty Seventeen Child’;

}

add_filter(‘the_content’, ‘filterTheContent’);

function filterTheContent($content) {

return $content.’ — Twenty Seventeen Child’;

}

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

Шаблоны в дочерней теме ведут себя так же, как style.css, они заменяют соответствующие файлы родительской темы. Дочерняя тема может заменить любой родительский файл шаблона просто создав файл с таким же именем. (ПРИМЕЧАНИЕ. Файл index.php может быть заменен только в WordPress версии 3.0 и выше.)

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

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

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

Другие файлы

В дополнение к файлам style.css, functions.php, файлам шаблонов (index.php, home.php и т.д.), дочерняя тема может использовать любые типы файлов полноценных тем, если они правильно подключены. Например, дочерняя тема может использовать иконки и изображения, которые подключены в файле стилей, файлы JavaScript, дополнительные PHP файлы, вызываемые из шаблонов или functions.php.

Функции WordPress связанные с дочерними темами:

get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).
get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).
get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).
get_template_directory() — получает путь до текущей темы (родительской, не дочерней).
get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).
get_template() — получает название каталога текущей темы (родительской, не дочерней).
get_stylesheet_uri() — получает готовый URL на файл стилей style.css текущей темы. Если используется дочерняя тема, то получит ссылку на стили доч. темы. В этом случае для родительской темы такой функции в WordPress нет.

Подключение 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’) ); }

Локализация дочерних тем

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

Установка заголовков перевода

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

- Text Domain используется для обозначения всего текста, принадлежащего теме. Это уникальный идентификатор, который обеспечивает WordPress возможность различать все загруженные переводы. Это позволяет сохранять компактность файлов и обеспечивает лучшее взаимодействие с уже существующими инструментами WordPress. должен совпадать со slug темы. Например, если ваша тема представляет собой директорию twentyseventeen-child то Text Domain должен быть twentyseventeen-child.
Domain Path это папка, в которой WordPress будет искать файлы перевода .mo. По умолчанию, WordPress ищет файлы переводов в корневой папке темы. Однако размещение файла перевода в корневой папке может дезорганизовать структуру темы.
Если вы хотите хранить файлы перевода в другой папке, например: /languages, необходимо сообщить об этом WordPress, используя заголовок Domain Path.

Отредактируем style.css

Theme Name: Twenty Seventeen Child

Theme URI: https://github.com/SolomashenkoRoman/twentyseventeen-child

Description: Child Theme Twenty Seventeen

Author: SolomashenkoRoman

Author URI: https://www.linkedin.com/in/solomashenkoroman/

Template: twentyseventeen

Version: 1.0

Text Domain: twentyseventeen-child

Domain Path: /languages/

Загрузка Text Domain

load_child_theme_textdomain()

Загружает файл перевода дочерней темы (.mo) в память, для дальнейшей работы с ним.

Это обертка для load_theme_textdomain(). Создана для удобного подключения файла перевода для дочерней темы

Создание перевода для подтемы хорошо скажется на оптимизации и структурировании файлов. Например, используется тема twentyseventeen, к которой уже подключаются файлы перевода через load_theme_textdomain() и для темы уже есть перевод в папке languages. Мы создали подтему со множество новых строк с переводом. Мы можем добавить эти строки в файлы родительской темы, но при обновлении мы потеряем изменения. Чтобы этого не произошло, нужно создать еще один файл перевода.

.mo должен называться точно как локаль, например, ru_RU.mo

Следует вызывать во время хука after_setup_theme

Возвращает

True/false. True, когда .mo файл подключен, false в противном случае.

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

load_child_theme_textdomain( $domain, $path );

$domain(строка) (обязательный)

Идентификатор, который будет использоваться позднее в функциях перевода: __() _e() можно будет обратиться именно к этой строке перевода. Можно указать такой же как и у родительской темы.

$path(строка)

Путь до папки с файлом .mo. По умолчанию указывается путь до каталога подтемы: get_stylesheet_directory().

По умолчанию: false

Подключим файл перевода дочерней темы

define(«MY_THEME_TEXTDOMAIN», ‘twentyseventeen-child’);

/**

* Загрузка Text Domain

function childThemeLocalization(){

load_child_theme_textdomain(MY_THEME_TEXTDOMAIN, get_stylesheet_directory() . ‘/languages/’);

}

add_action(‘after_setup_theme’, ‘childThemeLocalization’);

Shortcode API

Что такое Shortcode?

Введенный в WordPress 2.5, Shortcode API является простым набором функций для создания макро-кодов используемых в содержимом записей. Для примера, следующий короткий код(shortcode) (в содержимом записи/страницы) добавил бы фотогалерею на странице:

Это позволяет разработчикам плагинов создавать специальные виды контента (например формы, генераторы контента) которые пользователи могут прикрепить к определённым страницам добавив соответствующий короткий код в тексте страницы. Shortcode API упрощает создание коротких кодов. API обрабатывает весь сложный синтаксический анализ, избавляя от необходимости написания пользовательских регулярных выражений для каждого короткого кода. Вспомогательные функции включены для установки и извлечения атрибутов по умолчанию. API поддерживает как самостоятельно закрывающиеся, так и не закрытые короткие коды.

Как создается Шорткод?

Короткие коды работают как фильтры WordPress, принимают параметры (атрибуты) и возвращают некий обработанный результат. Для этого: Вы должны определить функцию обработчика, которая анализирует shortcode и возвращает результат обработки. Затем зарегистрировать shortcode (вызывающий функцию обработчик) с помощью функции add_shortcode( $tag , $func ); Добавляет новый шоткод и хук для него.

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

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

Результат, который возвращает функция (обработчик шоткода) всегда должен возвращаться, а не выводиться на экран.

Шоткоды — это конструкция вида: [somename] или [somename id=»123″ size=»medium»] или [somename]текст[/somename] в тексте, которые будут заменены другим текстом созданным функцией-хуком отвечающим за шоткод.

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

add_shortcode( $tag , $func );

$tag(строка) (обязательный)

Название шоткода, который будет использоваться в тексте. Пр. ‘gallery’.
По умолчанию: нет

$func(строка) (обязательный)

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

Функция обработки шоткода

Функция указанная в параметре $func, получает 3 параметра, каждый из них может быть передан, а может нет:

$atts(массив)

Ассоциативный массив атрибутов указанных в шоткоде. По умолчанию пустая строка — атрибуты не переданы.
По умолчанию: »

$content(строка)

Текст шоткода, когда используется закрывающая конструкция шотркода: [foo]текст шорткода[/foo]
По умолчанию: »

$tag(строка)

Тег шорткода. Может пригодится для передачи в доп. функции. Пр: если шорткод — [foo], то тег будет — foo.
По умолчанию: текущий тег

Пример

add_shortcode( ‘twentyseventeen_child_guest_book’, ‘guestBookShortcode’);

function guestBookShortcode(){

$output = »;

$output .= ‘<form method=»post»>

<label>’.__(‘User name’, MY_THEME_TEXTDOMAIN ).'</label>

<label>’.__(‘Message’, MY_THEME_TEXTDOMAIN ).'</label>

<button class=»twentyseventeen-child-btn-add» >’.__(‘Add’, MY_THEME_TEXTDOMAIN ).'</button>

</form>’;

return $output; }

Media Button

Добавим кнопку для вставки шорткода.

add_action(‘media_buttons’,’addMediaButtons’);

function addMediaButtons(){

$button = ‘<a href=»#» id=»guestBookShortcodeButton» class=»su-generator-button button»>’

.__(‘Insert shortcode’, MY_THEME_TEXTDOMAIN).'</a>’;

echo $button;

}

Теперь нам нужен js файл который будет обрабатывать клик на кнопку. Создадим файл assets/js/twentyseventeen-child-admin-main.js.

jQuery(function($) {

$(document).ready(function () { });

$(document).find(‘#guestBookShortcodeButton’).click(function (e) {

insertShortcode(‘[twentyseventeen_child_guest_book]’); });

function insertShortcode(shortcodes){

if(typeof tinyMCE != «undefined»){

if( ! tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()){

if(QTags.insertContent(shortcodes) != true)

document.getElementById(‘content’).value += shortcodes;

} else if(tinyMCE && tinyMCE.activeEditor) {

tinyMCE.activeEditor.selection.setContent(shortcodes); }

} else{

document.getElementById(‘description’).value += shortcodes;

document.getElementById(‘tag-description’).value += shortcodes; } } } );

Подключаем twentyseventeen-child-admin-main.js к админ панеле.

add_action(‘admin_enqueue_scripts’, ‘loadScriptAdmin’);

function loadScriptAdmin($hook){

wp_enqueue_script(

‘twentyseventeen_child_admin_main’, //$handle

get_stylesheet_directory_uri() .’/assets/js/twentyseventeen-child-admin-main.js’, //$src

array(

‘jquery’, ) ); }

Пользовательские кнопки TinyMCE

TinyMCE — это имя визуального редактора, который поставляется с WordPress, который может быть использован для редактирования контента записей и страницы. Он поставляется с различными кнопками, но также можно добавить свои собственные кнопки на панели инструментов редактора и в противном случае изменить поведение редактора. Мощным способом сделать это является добавление «плагина» в редактор MCE, и в этой статье демонстрируется, как настроить плагин WordPress для этого.В этой статье предполагается, что вы уже знакомы с основами написания плагина и API-интерфейсов подключаемых модулей и фильтров. Кроме того, сами MCE-модули написаны на JavaScript, поэтому вам нужно быть знакомыми с JavaScript и соглашениями редактора MCE, а также с программированием на PHP.

Создание плагина редактора MCE

Первым шагом добавления плагина в редактор MCE является определение поведения плагинов путем создания файла плагина MCE (JavaScript). В результате вы создадите файл JavaScript и, возможно, также файл стиля CSS и файл HTML, которые определяют ваш MCE-плагин.

Загрузка плагина TinyMCE

Чтобы подключить плагин MCE к TinyMCE, вам необходимо подключиться к следующим фильтрам:

mce_buttons

Передает / выводит массив php с именами кнопок;

mce_external_plugins

Передает / выводит ассоциативный массив php ‘plugin_name’ => ‘plugin_url’. URL-адрес должен быть абсолютным и в том же домене, что и ваша установка WordPress.

Пример

add_action( ‘init’, ‘setupTinyMCE’ );

function setupTinyMCE(){

add_filter( ‘mce_external_plugins’, ‘addTinyMCE’ );

add_filter( ‘mce_buttons’, ‘addTinyMCEToolbar’ ); }

function addTinyMCE( $plugin_array ) {

$plugin_array[‘twentyseventeen_child_custom_class’] = get_stylesheet_directory_uri()

. ‘/assets/js/MYTinyMCE.js’;

return $plugin_array;

}

function addTinyMCEToolbar( $buttons ) {

array_push( $buttons, ‘guest_book_shortcode_button’ );

return $buttons; }

MYTinyMCE.js

(function() {

tinymce.PluginManager.add( ‘twentyseventeen_child_custom_class’, function( editor, url ) {

// Add Button to Visual Editor Toolbar

editor.addButton(‘guest_book_shortcode_button’, {

title: ‘Insert Shortcode’,

cmd: ‘guest_book_shortcode_button’,

image: url + ‘../../images/code.png’,

});

// Add Command when Button Clicked

editor.addCommand(‘guest_book_shortcode_button’, function() {

editor.execCommand(‘mceReplaceContent’, false, ‘[twentyseventeen_child_guest_book]’);

});

})();

Categories : Word Press, www

#17. Child Theme. Shortcode. TinyMCE

Latest Posts

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

Отличия дочерней темы от родительской

Структура папки

style.css

Пример простой дочерней темы

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

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

Другие файлы

Функции WordPress связанные с дочерними темами:

Подключение style.css родительской темы

Локализация дочерних тем

Установка заголовков перевода

Загрузка Text Domain

Возвращает

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

Подключим файл перевода дочерней темы

Shortcode API

Что такое Shortcode?

Как создается Шорткод?

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

Функция обработки шоткода

Пример

Media Button

Пользовательские кнопки TinyMCE

Создание плагина редактора MCE

Загрузка плагина TinyMCE

Пример

MYTinyMCE.js

Discussions