Как изменить шаблон (тему) WordPress (на примере Twenty Eleven)

Опубликовано 15.04.2013 автором Алексей

Настройка шаблона WordPress Сегодня о том, как изменить шаблон или, как ещё говорят, тему WordPress (ниже по тексту будут встречаться оба слова, они равнозначны).

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

Зачем это нужно

Например, в чудесной и весьма популярной теме Twenty Eleven внизу страницы может понадобиться добавить копирайт для Вашего сайта, как у меня:

Подпись на странице сайта

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

Это лишь одна из задач, и если Вы собираетесь развивать сайт, то неизбежно возникнут и другие.

Плагин или изменение темы?

Скажу сразу: я ярый сторонник плагинов, но не для всего они есть, и, как в предыдущем примере, иногда плагин – это стрельба из пушки по воробьям.

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

Поэтому я предлагаю весьма радикальное решение: не менять шаблон вообще! Благо WordPress с недавних пор позволяет создавать дочерние темы. Давайте разберёмся, что это такое.

Дочерние темы, и с чем их едят плодят

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

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

Немного теории, переходящей в практику

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

Файлы там есть разные, но нам будут интересны те, что имеют расширение .php – все эти файлы отвечают за создание страниц Вашего сайта и их частей.

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

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

Чудесно? Я тоже так думаю!

Ближе к делу!

В нашем примере мы будем делать дочернюю тему для Twenty Eleven. Пара минут, и она уже будет красоваться в Вашей «админке»:

Тема Twenty Eleven Child

Лучше всего, если у Вас есть доступ к своему сайту по FTP. Тогда Вам надо добраться до каталога

wp-content\themes\

Там Вы увидите все установленные у Вас темы. У меня набор такой:

twentyeleven
twentyten
twentytwelve

Вот для первой из них, Twenty Eleven, мы и будем создавать дочернюю тему. Поэтому создайте новый каталог (избегайте пробелов!) и назовите его, например, twentyeleven-child.

Внутри этого каталога создайте файл

style.css

Файл можно создать с помощью «Блокнота» на своём компьютере, а потом скопировать на сервер. У файла должно быть такое содержимое:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      https://dvascheta.ru/
Description:    Customized Twenty Eleven 
Author:         Alexey Anisimov
Author URI:     https://dvascheta.ru/
Template:       twentyeleven
Version:        0.1.0
*/

@import url("../twentyeleven/style.css");

Вот что означают эти строки

/* служебный знак, указывающий, что начинается описание темы.
Theme Name: название Вашей дочерней темы, которое Вы можете придумать сами – так она будет называться, когда Вы перейдёте в раздел выбора темы у себя в «админке».
Theme URI: здесь можно указать ссылку на сайт темы, то есть, на Ваш сайт. Это будет полезно только если Вы собираетесь поделиться с кем-то Вашей новой темой. Эту строку можно не создавать.
Description: необязательная строка – описание к Вашей теме (вдруг потом забудете, зачем создавали? 😉 ).
Author: напишите тут своё имя! Тоже не обязательно.
Author URI: в отличие от предыдущей ссылки, тут можно указать ссылку на сайт автора. Полагаю, это тоже будет Ваш сайт. Строка тоже необязательная.
Template: а вот это очень важно! Тут должно быть точное название каталога, в котором находится родительская тема. В нашем случае это twentyeleven.
Version: можете вести версии Вашей темы. А можете и не вести, так как эта строка тоже необязательная.
*/ означает, что описание темы завершено.
Конструкция @import подключает файл стилей родительской темы.

Всё. Теперь Ваша тема является точной копией темы Twenty Eleven.

Установка Вашей новой темы

Если Вы используете FTP, то просто запишите файл style.css в созданный на Вашем сайте каталог twentyeleven-child.

Дополнение от 11.05.2013: Способ с загрузкой файлов по FTP хорош только тогда, когда Вы уже установили тему. То есть, если Вы уже используете дочернюю тему и Вам надо добавить туда пару изменённых файлов, то используйте FTP по возможности. Но если Вы её только устанавливайте, обязательно сделайте это с помощью архива (см. ниже). На практике проверено, что WordPress может не воспринять тему, если она была просто загружена.

Если у Вас нет доступа по FTP, то Вы в ходе работы на своём компьютере должны были создать каталог twentyeleven-child в котором сейчас размещается файл style.css. Заархивируйте этот каталог, чтобы получился .zip архив. Теперь Вашу новую тему можно установить через «админку» WordPress (Внешний вид — Темы — Установить темы — Загрузить), указав этот архив.

Внесение изменений

Теперь Вам предстоит самое сложно – определять, в какой файл нужно вносить изменения. Если вернуться к примеру с копирайтом, то Вам понадобится файл

footer.php

Вы копируете этот файл из родительской темы twentyeleven в свою новую twentyeleven-child, и ищете там блок:

<div id="site-generator">
   <?php do_action( 'twentyeleven_credits' ); ?>
   <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
</div>

И заменяете на:

<div id="site-generator">
   Copyright © 2011-2013 <a title="www.DvaScheta.ru" href="https://dvascheta.ru">"www.DvaScheta.ru"</a>. All rights reserved.
</div>

Ну или что считаете нужным.

Установка изменений

Теперь файл footer.php нужно скопировать в Вашу новую тему, если Вы используете FTP, а если не используете, как и прежде сделайте архив каталога twentyeleven-child, только теперь перед его установкой Вам придётся удалить Вашу дочернюю тему из «админки», иначе повторная установка темы с тем же названием вызовет ошибку.

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

Успехов!

Ещё одно дополнение от 11.05.2013:

Теперь, когда меняется родительская тема (в нашем случае Twenty Eleven), Вам придётся сравнить по содержимому все файлы, которые Вы включили в Вашу дочернюю тему.

Вот пример. На рисунке верхняя строка таблицы символизирует Ваш файл (скажем, footer.php) до внесения изменений (слева, в столбце Twenty Eleven), и после (справа, в столбце Twenty Eleven Child). Синим отмечена строка, которую Вы привнесли в этот файл (слово «Полтора»).

Сравнение версий

Теперь выходит новая версия темы Twenty Eleven (смотрим нижнюю строку таблицы). Разработчики WordPress добавили в файл ещё одну строку (зелёным – слово «Четыре»), и очевидно, что Ваших изменений в этом файле нет. Поэтому надо обновить соответствующий файл в Вашей дочерней теме.

Что Вы будете делать: дописывать «Полтора» к новому файлу из Twenty Eleven или возьмёте свой из Twenty Eleven Child и допишете туда «Четыре» – дело Ваше, но я очень рекомендую поддерживать файлы в актуальном состоянии.

О том, как сравнивать файлы по содержимому, читайте в статье «Чистка сайта от лишних файлов и вирусов».

Два раза успехов!

И напоследок…

Если совсем ничего не получается (или не совсем, а только что-то), то обращайтесь за помощью ко мне.

Понравилась статья? Поделитесь с друзьями: