Дочерние темы в WordPress

Создаем дочернюю тему в WordPress

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

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

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

Чтобы создать дочернюю тему необходимо:

В папке с темами wp-content/themes  создать директорию будущей дочерней темы. Например создадим папку «child-theme».

Для минимальной дочерней темы достаточно создать в директории нашей дочерней темы «child-theme» файл style.css со следующим содержимым:

/**
 * Theme Name: My Child Theme
 * Template: twentytwelve
 */
@import url('../twentytwelve/style.css');

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

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

Дочерняя тема в WordPress

Дочерняя тема в WordPress

Зайдя в раздел Внешний вид → Темы, вы увидите, что ваша новая тема уже доступна для активации.

Дочерняя тема в WordPress

Дочерняя тема в WordPress

Если вы её активируете и перейдёте на главную страницу вашего сайта, вы увидите, что ваша дочерняя тема выглядит в точности как стандартная тема Twenty Twelve.

Работа со стилями

Стили CSS дочерней темы можно задать прямо в файле style.css сразу после директивы @import. Например, для установки цвета фона и цвета ссылок в вашей теме, добавьте следующий код в конец файла стилей:

body { background: red; }
a { color: green; }

Таким образом вы можете изменять стили любых элементов родительской темы, а найти необходимый элемент вы можете легко с помощью средств разработчика в браузере Google Chrome или с помощью расширения Firebug для браузера Firefox.

Работа с шаблонами

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

	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
		<div class="site-info">
			Текст подвала
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

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

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

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

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

Работа с functions.php

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

Это значит, что в вашем файле functions.php вы можете использовать события, фильтры и так называемые «переопределяемые» функции, для того чтобы манипулировать поведение родительской темы. Например, в файле footer.php в теме Twenty Twelve вызывается событие twentytwelve_credits. Чтобы добавить наш собственный текст во время этого события, мы можем использовать следующий код в functions.php нашей дочерней темы:

<?php
function my_child_theme_credits() {
	echo 'Дополнительный текст подвала';
}
add_action( 'twentytwelve_credits', 'my_child_theme_credits' );

Вы так же можете переопределять некоторые функции родительской темы. Например, в теме Twenty Twelve используется функция twentytwelve_content_nav для отображения навигации по записям. Если вам необходимо изменить поведение этой функции, например использовать навигацию WP-PageNavi, вы можете её переопределить в файле functions.php в дочерней теме:

function twentytwelve_content_nav( $html_id ) {
    if ( function_exists( 'wp_pagenavi' ) )
        wp_pagenavi();
}

Учтите, что переопределять можно не все функции родительской темы, а только те, которые обёрнуты в условие с функцией function_exists, например:

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
...
endif;

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

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

function my_child_theme_setup() {
	load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

После этого вы можете использовать функции локализации WordPress в ваших строках:

_e( 'My translatable text goes here.', 'my-child-theme' );

Обратите внимание на второй параметр (текстовый домен), он должен совпадать с тем, что вы указали в вызове функции load_child_theme_textdomain. Таким образом WordPress будет пользоваться директорией languages в дочерней теме для всех строк с доменом my-child-theme, при этом строки в исходной теме будут по прежнему переводиться с помощью исходных языковых пакетов.

Заключение

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

Если же вы хотите внести изменения только на уровне CSS (не изменяя при этом шаблоны), вы так же можете воспользоваться каким-либо плагином для редактирования CSS.

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