Создание шаблона WordPress с нуля.

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

Шаблоны, подключённые к нашей системе, Вы можете найти в по адресу

основная_папка/wp-content/themes/папки_с_шаблонами

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

Основные файлы шаблона:

  1. style.css - сюда пишем весь css. тоесть это файл оформления страницы;
  2. header.php - то с чего начинается ваш шаблон, то есть шапка сайта WordPress;
  3. index.php - главный файл шаблона;
  4. single.php - файл каждого отдельного поста;
  5. comments.php - шаблон комментариев;
  6. sidebar.php - боковая панель;
  7. footer.php - "подвал", который заканчивает ваш шаблон;

Файлы архивов:

  1. archive.php - файл просмотра постраничных архивов (навигационный, стр.1,2,3...)
  2. 404.php - ошибка 404
  3. search.php - результаты поиска
  4. page.php - шаблон статической страницы

Универсальные файлы (за счет этих и получаем практичность верстки):

  1. navigation.php - файл с ссылками навигации по архивам и между постами
  2. searchform.php - форма поиска, которую можно подключить где угодно
  3. theloop.php – LOOP всего темплэйта, движок шаблона так сказать

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

/*
Theme Name: MyTheme
Theme URI: http://www.woolfs.ru/
Description: My favorite theme
Version: 1.0
Author: Felix
Author URI: http://www.woolfs.ru/
*/

Эти строки должны быть самыми первыми в файле. По этим строкам распознается Ваш шаблон в панели администрировани. Ниже можете написать любой 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>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка для <?php
the_title(); ?>"><?php the_title(); ?></a></h1>
<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>
<h1>Error</h1>
<p>Произошла ошибка - проверьте, пожалуйста, правильность запроса.</p>
</div>
<p align="center"><?php include (TEMPLATEPATH . "/searchform.php"); ?></p>
<?php endif; ?>

Удобно, не правда ли? Теперь нам нужно будет подключить его везде, где это нужно. Делается это в одну строку кода. Для начала взгляните как подключаются “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'); ?>

Надеюсь, что для Вас картина всего этого "безобразия" в общих чертах нарисовалась. Теперь найдите следующие файлы:

  1. index.php
  2. archive.php
  3. 404.php
  4. search.php
  5. page.php

И добавте в них такой код:

<?php get_header(); ?>
<div id=”content”>
<?php include (TEMPLATEPATH . '/theloop.php'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Не забывайте, что у нас есть еще файл навигации, который тоже должен быть универсальный и понимать когда какие ссылки показывать:

<?php
/* навигационные ссылки в посте, показываются ссылки на следующий и предыдущий пост от того, в
котором находимся в данный момент */
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 } ?>

Теперь 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(); ?>

Видете как все просто и сколько времени мы сэкономили? Я уже предвижу пару очевидных вопросов, поэтому и продолжу раскрывать тему полностью.

Как подключить форму поиска?
Точно также как и LOOP, в листинге 4: <?php include (TEMPLATEPATH.'/searchform.php'); ?>. А сама форма поиска может иметь такой вид:

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>" style="margin: 0;">
<p><input style="width: 97%; " value="введите запрос" /></p>
<input style="display: none;" value="Search" />
</form>

Как быть, если нужно подключать дополнительные фичи в LOOP только для отдельного поста?
Для этого нужно использовать функцию is_single();. Вспомните подключение навигации между постами в LOOP (листинг 2).Данную функцию совсем не обязательно использовать точно внутри LOOP.

Что нужно сделать, что бы показать определённые данные на главной странице?
Пример:

<?php
if ( (is_home()) && !(is_page()) && !(is_single()) && !(is_search()) && !(is_archive()) &&
!(is_author()) && !(is_category()) && !(is_paged()) ) { ?>
Это увидят только на главной странице блога
<?php } ?>

Подводя итог

Как Вы видете, все оказалось очень просто и компактно. Взгляните на общий размер шаблона (без графики и CSS) – это считанные килобайты, и мы от этого получаем:

  • · компактность кода;
  • · практичность нашего шаблона;
  • · удобство его же;
  • · универсальност - он будет работать во всех версиях.

Теперь применяя показанный мною метод, Вы можете создавать собственные шаблоны для WordPress любой сложности. В стетье я использовал только базовые функции WordPress, поэтому этот шаблон будет работать на любой версии движка. Чтобы создать более интересный и навороченный шаблон, Вам стоит ознакомиться с WordPress Codex, где в подброностях описаны все template tags и есть множество примеров.