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

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

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

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

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

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

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

mkdir /wp-content/themes/twentytwelve-child

1. Для работы темы нужно два файла:
   • style.css
   • functions.php

Создадим их:

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

1. Имя темы задается в 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 должен начинаться с <?php и заканчиваться ?>

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

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

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