Создание простой Wordpress темы

В этом уроке мы создадим простую тему для cвоего блога wordpress самостоятельно.

Введение.

Прежде чем начать, давайте взглянем на стандартную тему (тему по умолчанию, файлы index.php и single.php) WordPress и посмотрим как она устроена:

Исходный шаблон.
Предположим, что мы нарисовали в фотошопе вот такой шаблон (его исходник здесь), аналогично поделим его на блоки:

Сам процесс создания и верстке html-шаблона рассматривать в рамках этой статьи не будет, вы можете посмотреть видеокурс "Создаем сайт с нуля (фотошоп+верстка)" на сайте evgeniypopov.com в выпусках журнала 35 и 36, только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):

.aligncenter,
 div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
 float: left;
 }
.alignright {
 float: right;
 }

Следующие классы используются для выравнивания изображений, которые имеют подписи (можно скопировать из дефолтной темы, в дальнейшем при необходимости поправить):

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
 margin: 0;
 padding: 0;
 border: 0 none;
 }
.wp-caption p.wp-caption-text {
 font-size: 11px;
 line-height: 17px;
 padding: 0 4px 5px;
 margin: 0;
 }

Кроме того, существует еще несколько классов WordPress, которые необязательно описать в таблице стилей, но, т.к. WordPress генерирует страницы с их использованием, можно и им задать стиль:

.categories {...}
 .cat-item /* Этот класс присваивается всем категориям */}
 .current-cat {/* стиль текущей категории */}
 .current-cat-parent {/* стиль для предка(ов) текущей категории */}
 .children {/* класс для потомка */}
 .pagenav {/* постраничная навигация */}
 .page_item {/* любой элемент списка */}
 .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
 .current_page_parent {/*класс для родительской страницы по отношению к текущей */}
 .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
 .widget {/* все виджеты обворачиваются в этот класс */}

В процессе верстки используйте блоки и стили к ним, как это определено в скринах в начале статьи. Это не обязательно, но очень даже желательно.

К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:

<form id="searchform" action="http://localhost/testblog/" method="get" role="search">
 <div>
 <label class="screen-reader-text" for="s">Найти:</label>
 <input id="s" type="text" name="s" value="силами" gtbfieldid="2"/>
 <input id="searchsubmit" type="submit" value="Найти"/>
 </div>
 </form>

Поэтому учитываем это при верстки темы.

И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:

/*
Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/

Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами». Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.

Код страниц сверстанного шаблона приводить не буду, т.к. он достаточно большой, вы его просто скачайте, далее будем работать с ним.

Итак распакуйте архив, далее мы будет конвертировать index.html, single.html и page.html в wordpress тему (page.html такая же как и single.html, только без блока коментариев).

Принцип работы wp-темы:

Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы ( index.php <<header.php, sidebar.php и footer.php) для создания страниц.

На этом предварительная подготовка закончена и мы можем перейти к созданию темы из имеющегося исходного материала.

Шаг 1:
Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons. Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php и 404.php в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons скопируйте таблицу стилей style.css нашего шаблона, screenshot.png (300x225) и папку images.

Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php с метками, согласно которым будем его пилить:

Шаг 2 - Header.php
Открываем index.html и вырезаем все, что находится до коментария <!--/header --> , создаем новый файл header.php и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>index.html</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="#">My Blog</a></h1>
<div class="description">Blog Description</div>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/header -->

Теперь идем в папку с дефолтной темой, открываем header.php и копируем оттуда теги <title>, <link>, <h1>, and <div class=description> и ими заменям соответствующие строки в нашем header.php.

Затем все теги <li>, находящиеся id="nav" (список страниц в верхней части блога) заменям на функцию вордпресса

В итоге получаем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> </title>
 <link rel="stylesheet" href="" type="text/css" media="screen" />
 <link rel="pingback" href="" />
 </head>
 <body>
 <div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="/"></a></h1>
<div class="description"></div>
</div>
<ul id="nav">

</ul>
</div>
<!--/header -->

Шаг 3 - Sidebar.php
Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от <div id="sidebar"> до <!--/sidebar -->. Вырезанный код вставляем в новый файл sidebar.php и сохраняем его в директории нашей темы. Теперь в полученном коде заменяем все, что между тегами <ul> вызовом сайдбаров, получаем следующий код:

 <div id="sidebar">
 <ul class="ul-cat">
 
 </ul>
 <ul class="ul-archives">
 
 </ul>
 </div>
 <!--/sidebar -->

Таким образом мы вызываем 2 сайдбара. Если вы смотрели Sidebar.php дефолтной темы, то заметили, что кода там гораздо больше. Дело в том, что там просто прописано дополнительное условие, которое по умолчанию выводит архив и категории, в случае, если админ не подключил ни одного виджета к сайдбару. Мы это условие прописывать не будем.

Чтобы наши сайдбары заработали, их необходимо зарегистрировать. Для этого в директории темы создаем файл functions.php и в нем пишем:

  register_sidebar(array('name'=>'sidebar1'));
 register_sidebar(array('name'=>'sidebar2'));
 ?>

Осталось подключить форму поиска. Сделать это можно либо из админки путем добаления виджета в один из сайдбаров, а можно вызвать ее в sidebar.php, что мы и сделаем. В самом начале добавляем:

<div id="sidebar">
...............................................

Шаг 4 - Footer.php
Возращаемся к файлу index.html и вырезаем из него все от <div id=footer> до </html>. Вырезанный код вставляем в новый файл footer.php:

 <div id="footer">
<div class="left-col">
<h4>Recent Posts </h4>
<ul class="recent-posts">
<li><a href="#">Blog Title Text</a><br />
10/23/2006</li>
<li><a href="#">Blog Title</a><br />
10/23/2006</li>
<li><a href="#">Title Text</a><br />
10/23/2006</li>
<li><a href="#">Sample Blog Title</a><br />
10/23/2006</li>
</ul>
</div>
<div class="left-col">
<h4>Recent Comments</h4>
<ul class="recent-comments">
<li><a href="#">Nick:</a> This is a test comment</li>
<li><a href="#">Jen:</a> Hello, nice day!</li>
<li><a href="#">Someone:</a> Wow, this is another test comment</li>
<li><a href="#">Admin:</a> This is a comment</li>
</ul>
</div>
<div class="right-col">
<h4>About</h4>
<p>Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>Feel free to <a href="#"> contact me.</a></p>
</div>
<hr class="clear" />
</div>
<!--/footer -->
</div>
<!--/page -->
</body>
</html> 

По нашему шаблону здесь же мы должны вывести последние записи блога (Recent Posts) и последние коментарии (Recent Comments). Последние записи будем выводить в количестве 5 штук - showposts=5. Заменям все внутри <ul class="recent-posts"> :

<ul class="recent-posts">


<li>
<strong><a href="" rel="bookmark" title=" "></a></strong><br />
<small></small>
</li>

</ul>

Вывод последних коментариев сделаем с помощью плагина simple_recent_comments.php, скачайте его и положите в папку нашей темы. Теперь в нужном месте его нам нужно вызвать (заменям содержимое блока <div class="left-col">):

<div class="left-col">

<h4>Recent Commentsh4>', ''); } ?>
</div>

Шаг 5 - Index.php
Все что осталось в index.html сохраняем как index.php в папку с нашей темой, затем подключаем вызов header, sidebar и footer:

<div id="content">
<div class="post">
<div class="post-date"><span class="post-month">Oct</span> <span class="post-day">13</span></div>
<div class="post-title">
<h2><a href="#">Sample Blog Entry</a></h2>
<span class="post-cat"><a href="#">News</a></span> <span class="post-comments"><a href="#">3 comments</a></span> 
</div>
<div class="entry">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Read more...</a> </p>
</div>
</div>
<div class="navigation"> <span class="previous-entries"><a href="#">Previous Entries</a></span> <span class="next-entries"><a href="#">Next Entries</a></span> </div>
</div>
<!--/content -->

Шаг 6 - Вывод записей блога на странице index.php

Следующий рисунок демонстрирует принцип вывода записей блога. Сначала идет проверка, есть ли сообщения в базе, если нет выводит "Not Found". Если есть, выводит в цикле while

.

Открываем наш index.php и заменям статичный текст между <div id=content>..</div> функциями (тегами) wordpresspost date, title, category, comments, next и previous. Ориентируясь на рисунок выше получаем:

<div id="content">

 
<div class="post">
<div class="post-date"><span class="post-month"></span> <span class="post-day"></span></div>
<div class="post-title">
<h2><a href=""></a></h2>
<span class="post-cat"><a href="#"></a></span> <span class="post-comments"></span> 
</div>
<div class="entry">

</div>
</div>

<div class="navigation">
<span class="previous-entries"></span>
<span class="next-entries"></span>
</div>

<h2>Ничего не найдено</h2>
 
</div>
<!--/content -->

Теперь тема должна уже быть доступна из админки в списке тем, ее можно активировать и посмотреть, что вышло.

Мы использовали теги Wordpress:

the_time('M'), the_time('j') - вывод месяца и дня соответственно
the_permalink() - отображает постоянную ссылку записи
the_title_attribute() - заголовок текущей записи.
the_title() - заголовок записи или страницы
the_category(', ') - ссылку на категорию или категории, к которым принадлежит запись
comments_popup_link - выведет ссылку для комментариев во всплывающем окне если comments_ popup_script() используется, иначе выводит обычную ссылку на комментарии.
the_content - выводит содержание текущей записи. Если используется тег <!–more–> то сообщение показывается только до <!–more–> (только на главной странице, на странице записи будет показываться полностью).
next_posts_link - ссылка на предыдущие сообщения.
previous_posts_link - ссылка на следующие сообщения.

Шаг 7- Single.php
Этот файл мы создадим из только что законченного index.php , немного изменив его:

 
<div id="content">

 
<div class="post">
<div class="post-date"><span class="post-month"></span> <span class="post-day"></span></div>
<div class="post-title">
<h2></h2> <!-- изменен из index.php -->
<span class="post-cat"></span> <!-- изменен из index.php -->
</div>
<div class="entry">

 '<p><strong>Pages:strong> ', 'after' => 'p>', 'next_or_number' => 'number')); ?><!-- изменен из index.php -->
</div>
<!-- изменен из index.php -->
</div>

<div class="navigation">
<span class="previous-entries"></span>
<span class="next-entries"></span> 

wp_link_pages - Выводет ссылки на странице в многостраничном сообщении ( при использовании <!--nextpage-->).
comments_template() - Подключает файл шаблона comments.php из текущей папки темы
previous_post_link(' %link'), next_post_link('%link') - выведет заголовки предыдущей и следующей записи

Шаг 8 - page.php
Этот шаг проще предыдущего. Файл single.php сохраняем как page.php. Удаляем из page.php вывод даты, комменты, next/previous:

<div id="content">

 
<div class="post">

На этом можно и закончить. Основные файлы темы мы собрали. Вероятно вы заметили, что в дефолтной теме больше файлов. Например archive.php, он не является обязательным. Однако если мы подключим виджет "Архивы" или "Календарь" в сайдбаре и перейдем в какой - нибудь архив по дате, записи по выбранной дате выведутся на индексной странице, поэтому вполне можно обойтись без archive.php :)

Финал.
Иногда нужно/полезно вывести на странице заголовки всех записей. Для этой цели воспользуемся тегом wordpress query_post:

<?php
 /*
 Template Name: Archives
 */
 ?>
<div id="content">
<h2></h2>

<ul>
 
 <li>
 <h3><a href="" title=""></a></h3>
  | 
 </li>
 
 </ul>
</div>

 

query_posts('showposts=-1'); - выведет все записи. Сохраним это в файл archives.php. Обратите внимание на комментарии в начале кода Template Name: Archives, он здесь обязателен (далее вы поймете почему)

Идем в админку и создаем новую страницу. Указываем только заголовок и указываем в "Атрибутах" шаблон Archives, сохраняем страницу. И теперь на этой странице у нас будут выводиться все записи по шаблону archives.php, который мы описали чуть выше:

На сегодня это все. Спасибо за внимание.