Введение.
Этот ebook предназначен для тех, кто занимается созданием тем или хочет сделать свой шаблон для
WordPress. Есть обычный стандартный подход, по которому делается основная масса шаблонов, но
он, на мой взгляд не очень практичен и отнимает больше времени, чем должен. Поэтому, я начал
изучать более глубоко данную тему и, просмотря множество шаблонов и использовав разные
способы при вертске этих шаблонов, я нашел для себя один очень удобный и практичный способ.
Именно этот способ и мой опыт я излагаю в данном мануале. Особенность метода заключается в том,
что практически весь функционал шаблона находиться в 3х универсальных файлах. На первый
взгляд Вам может показаться не удобным и громоздким мой способ. Я рекомендую дочитать
внимательно от начала до конца весь этот мануал, чтобы убедиться в обратном.
Еще одна отличительная особенность этого способа – это практичность и компактность полученного
шаблона. Вы в этом тоже убедитесь по окончании чтения. В конце текста, я также прилагаю все
ссылки, которые Вам могут оказаться полезными при написании шаблонов, а также другие
альтернативные и более традициональные методы.
Файлы шаблона. Структура.
Файлы в своем шаблоне WordPress я разделяю на 3 части: основные (1), файлы архивов, поиска и
страниц (2) и универсальные файлы (3). Первая часть файлов является по сути составляющей всего
шаблона, вторая часть нужна для навигации и вообщем-то опциональна (зависит от блога, сайта), а
вот третья часть является самим «движком» шаблона. Ниже я привожу полный список всего, что нам
понадобиться в дальнейшем. Не пугайтесь количества файлов – это нормально и Вы будете приятно
удивлены во второй половине руководства.
1. Основные файлы шаблона:
style.css – стиль оформления, сюда пишем весь css-код
header.php – «шапка», то с чего начинается ваш шаблон
index.php – главный файл шаблона
single.php – файл каждого отдельного поста
comments.php – шаблон комментариев
sidebar.php – боковая панель
footer.php – «подвал», который заканчивает ваш шаблон
2. Файлы архивов, поиска и страниц:
archive.php – файл просмотра постраничных архивов (навигационный, стр.1,2,3…)
404.php – ошибка 404
search.php – результаты поиска
page.php – шаблон статической страницы
3. Универсальные файлы (за счет этих и получаем практичность верстки):
navigation.php – файл с ссылками навигации по архивам и между постами
searchform.php – форма поиска, которую можно подключить где угодно
theloop.php – LOOP всего темплэйта, движок шаблона так сказать
Строим шаблон. Универсальные файлы
Строение нашего шаблона я начну со стиля оформления (базовый css) и универсальных файлов,
потому что они являются ключевыми во всем шаблоне. Также по ходу дела, рассказывая что и куда
нужно подключать. Все необходимые комментарии приводятся прямо в листинге php-кода.
Создаем файл style.css :
_________________________________________________
/*
Theme Name: MyTheme
Theme URI: http://www.slaff.net/
Description: Practical theme from Slaff.
Version: 1.0
Author: Slaff
Author URI: http://www.slaff.net/
*/
__________________________________________________
Листинг 1. Файл style.css
Эти строки должны быть самыми первыми в файле. По этим строкам распознается Ваш шаблон в
панели администрировани. Ниже можете написать любой css, как Вам угодно. Рекомендую взглянуть
на CSS Garden (*) для вдохновления.
Теперь приступим к более сложной задаче – написание LOOP WordPress. Файл theloop.php –
полный листинг с комментариями и описаниями внутри:
___________________________________________________________
<?php if (have_posts()) : ?>
<?php /* Подключение навигации между страницами (не показывается на главной и в отдельных постах)
*/
if ( (is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) {
/* Подключаем файл */
include (TEMPLATEPATH . ‘/navigation.php’); }
?>
<?php /* Включаем сам LOOP */
while (have_posts()) : the_post();
?>
<?php /* Подключение навигации между постами (должно быть внутри LOOP’а) */
if (is_single()) { include (TEMPLATEPATH . ‘/navigation.php’); }
?>
<?php /* сам пост, включает постоянную ссылку, метаданные, счетчик комментариев и текст */ ?>
<div>
<><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»Постоянная ссылка для <?php
the_title(); ?>»><?php the_title(); ?></a></>
<p>Опубликовано <?php the_time(‘F jS, Y’) ?>. <?php comments_popup_link(‘Без
комментов’, ’1 Коммент’, ‘% Комментов’); ?> <?php edit_post_link(‘Редактировать’, ‘<strong>’,
‘</strong>’); ?></p>
<?php
/*
Самый интересный момент. Здесь при постраничном просмотре архивов или поиске
включается функция the_excerpt (краткая выдержка из поста).
Но на главной и в отдельном посте, как и полагается полный текст поста с ссылками, картинками
и т.д.
*/
?>
<?php if ( (is_archive()) or (is_search()) ) { ?>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_content(«Читать дальше…»); ?>
<?php } ?>
< ?php link_pages(‘<p><strong>Страницы:</strong> ‘, », ‘number’); ?>
</div>
<!–
<?php trackback_rdf(); ?>
–>
<?php endwhile; ?>
<?php /* Подключение навигации между страницами (показывается везде и на главной тоже) */
if ( (is_home() or is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) {
include (TEMPLATEPATH . ‘/navigation.php’); }
?>
<?php /* в случае ошибки 404 */
else :
?>
<div>
<>Error</>
<p>Произошла ошибка. Проверьте правильность запроса.</p>
</div>
<p align=»center»><?php include (TEMPLATEPATH . «/searchform.php»); ?></p>
<?php endif; ?>
__________________________________________________________
Листинг 2. Файл theloop.php
Удобно, не правда ли? Теперь нам нужно будет подключить его везде, где это нужно. Делается это в
одну строку кода. Для начала взгляните как подключаются “header”, “sidebar” и “footer”, чтобы в
дальнейшем не возникало вопроса “откуда это взялось”. На подключение этих трех модулей
шаблона есть 3 нужные нам WordPress функции:
_________________________________________________
<?php get_header(); ?> -подключение файла header.php
<?php get_sidebar(); ?> – подключение файла sidebar.php
<?php get_footer(); ?> – подключение файла footer.php
_________________________________________________
А вот следующая строка, позволит включить в любом месте любой файл из папки Вашего шаблона,
например theloop.php:
_________________________________________________
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>
_________________________________________________
Листинг 4. Пример включения в шаблон другого файла
Надеюсь, картина в общих чертах уже нарисовалась довольно четкая.
Теперь выберете следующие
файлы:
index.php
archive.php
404.php
search.php
page.php
И добавте в них такой код:
________________________________________
<?php get_header(); ?>
<div id=”content”>
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
________________________________________
Листинг 5. Структура шаблона
Не забывайте, что у нас есть еще файл навигации, который тоже должен быть универсальный и
понимать когда какие ссылки показывать:
____________________________________________________________
/* навигационные ссылки в посте, показываются ссылки на следующий и предыдущий пост от того, в
котором находимся в данный момент */
if (is_single()) { ?>
<div>
<div><?php previous_post(‘« %’,»,’yes’) ?></div>
<div><?php next_post(‘ % »’,»,’yes’) ?></div>
<div></div>
</div>
<?php } else {
/* или же показывать ссылки навигации между страницами, будь-то в архивах или просмотр отдельных
категорий */
?>
<div>
<div><?php posts_nav_link(»,»,’« Назад’) ?></div>
<div><?php posts_nav_link(»,’Вперёд »’,») ?></div>
<div></div>
</div>
<?php } ?>
___________________________________________________________
Листинг 7. Навигация, navigation.php
Теперь LOOP включен почти во все нужные места шаблона и в дальнейшем он сам будет определять,
что и где нужно вывести и показать. Но у нас остался еще single.php и комментарии. Здесь все точно
также, только добавляется вызов шаблона комментариев (comments.php):
__________________________________________
<?php get_header(); ?>
<div id=”content”>
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>
<?php comments_template(); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
____________________________________
Листинг 6. Отдельный пост и включение шаблона комментариев
В качестве дополнения.
Видете как все просто и сколько времени мы сэкономили? Я уже предвижу пару очевидных
вопросов, поэтому и продолжу раскрывать тему полностью.
1) Как подключить форму поиска?
Точно также как и LOOP, в листинге 4: <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
А сама форма поиска может иметь такой вид:
___________________________________________________________
<form method=»get» id=»searchform» action=»<?php echo $_SERVER['PHP_SELF']; ?>» style=»margin: 0;»>
<p><input style=»width: 97%; » type=»text» value=»введите запрос» name=»s» id=»s» onfocus=»if
(this.value == ‘введите запрос’) {this.value = »;}» onblur=»if (this.value == ») {this.value =
‘введите запрос’;}» /></p>
<input type=»submit» id=»searchsubmit» style=»display: none;» value=»Search» />
</form>
___________________________________________________________
Листинг 8. Пример формы поиска (searchform.php)
2) Как быть, если нужно подключать дополнительные фичи в LOOP только для отдельного поста?
Для этого нужно использовать функцию is_single();. Вспомните подключение навигации между
постами в LOOP (листинг 2). Эту функцию не обязательно использовать именно внутри LOOP.
3) Как показать что-то только на главной странице?
Пример:
_____________________________________________________
<?php
if ( (is_home()) && !(is_page()) && !(is_single()) && !(is_search()) && !(is_archive()) &&
!(is_author()) && !(is_category()) && !(is_paged()) ) { ?>
Это увидят только на главной странице блога
<?php } ?>
__________________________________________________________
Листинг 9. Показать только на главной странице блога
Подводя итог.
Как Вы видете, все оказалось очень просто и компактно. Взгляните на общий размер шаблона (без
графики и CSS) – это считанные килобайты. Плюсы этого метода очевидны:
· компактность
· практичность
· удобство
· универсальность
Применяя этот метод, Вы можете создавать шаблоны любой сложности. В мануале я использовал
только базовые функции WordPress, поэтому этот шаблон будет работать на любой версии движка.
Чтобы создать более интересный и навороченный шаблон, Вам стоит ознакомиться с WordPress
Codex, где в подброностях описаны все template tags и есть множество примеров.
