RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

WordPress: Как правильно изменять файлы стандартной темы. Дочерняя тема

Нет картинки Столкнулся с тем, что внеся все изменения в файлы стандартной темы, затем после автоматического обновления вордпресс их совершенно спокойно затёр своими. Даже ничего не спросил. Просто поставил перед фактом: "WordPress был обновлён..." Начал искать выход, чтобы и обновлялся движок сам, но при этом мои исправления в дизайне не обнулялись. Решением является правильная организация дочерней темы. И вот как.

1. Заводим дочернюю тему

Сперва убедитесь в том, что родительская тема существует — найдите директорию twentyseven в wp-content/themes. Затем создайте новую директорию в wp-content/themes и назовите её my-child-theme. В этой новой директории создайте файл style.css и вставьте в него следующий заголовок:

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

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

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

Активируйте её и вы увидите, что дизайн сайта не изменился - значит дочерняя тема верно наследуется от родительской.

 

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

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

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

 

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

С помощью дочерней темы вы так же можете легко изменять сами шаблоны родительской темы. Для этого достаточно создать файл в дочерней теме с тем же именем, что и у шаблона в родительской теме. Например, чтобы заменить шаблон footer.php на свой собственный (мне например надоело, что вечно удаляется код яндекс метрики из подвала после обновления wordpress, а устанавливать отдельный плагин для такой мелочи, ну зачем надо), создайте файл 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>

 

4. Работа с 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;

 

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.