Выпуск 27. Делаем собственный шаблон для WordPress (часть 4)
Продолжаем
Ну что ж, нам остались буквально несколько штрихов, чтобы завершить работу над программированием шаблона.
Боковая панель
Добавим в правую боковую панель (оранжевую) остальные функциональные блоки:
- Постоянные страницы
- Поиск
- Реклама
- Счетчики
Блок рекламы мы уже добавили, поэтому сайчас добавим счетчики, поскольку они делаются точно также, как и реклама, только для ушки мы будем использовать другое название, например "counters".
Открываем sidebar-2.php и в конце пишем уже известный нам код:
<?php
if (function_exists('show_ushka')) show_ushka('counters');
else {
?>
<div class="counters">
html-код счетчиков
</div>
<?php } ?>
Также добавим в style.css описание класса для счетчиков:
div.counters {margin: 5px;}
Поиск
Давайте расположим поиск по сайту в самом верху второго сайдбара. Для поиска в WordPress'е используется "стандартный" код:
<h2 class="box">Поиск</h2> <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <input type="text" name="s" id="s" /> <input type="submit" id="searchsubmit" name="Submit" value="Go!" /> </form>
Его нужно добавить в самое начало файла sidebar-2.php.
Сразу же пропишем в style.css оформление для этих элементов:
#searchform {margin: 5px; }
#s {font-size: 8pt; width: 110px;}
#searchsubmit {font-size: 8pt;}
То есть для всего блока я установил отсутупы по 5px, для текстового поля - размер шрифта 8pt, а ширину 110px. Для кнопки укажем размер шрифта тоже в 8pt.
Насчет кнопки. Разные браузеры по разному отображают кнопку. Поэтому добиться абсолютной идентичности не получится. Можно конечно использовать хаки, а можно сделать кнопку в виде картинки, тогда она будет единая для всех браузеров. Сейчас мы не будем ею заниматься, поскольку это уже часть дизайнерской работы.
Постоянные страницы
Для вывода списка постоянных страниц используется функция wp_list_pages, однако эта функция формирует не очень корректный SQL-запрос к базе данных и, тем самым, создает излишнюю нагрузку на сервер. Поэтому мы будем использовать другой способ, который я описал на своем блоге в статье "Ускоряем WordPress за счет постоянных страниц".
Не вижу смысла дублировать эту статью здесь, в частности приводить весь код, поэтому ограничусь лишь кратким описанием, что нужно сделать.
1. Как написано в статье, создаем файл maxsite-function.php и добавляем в него функцию maxsite_get_page.
2. Открываем файл index.php. В него в самое начало (после require_once('header.php');) дописываем:
require_once('maxsite-function.php');
3. В файле sidebar-2.php после блока поиска добавим:
<h2 class="box">Страницы</h2>
<ul class="is_link">
<?php maxsite_get_page('tag_start=<li>&tag_end=</li>') ?>
</ul>
Завершающие моменты
Практически наш шаблон-каркас готов. Кроме двух вещей: первая - нам нужен еще один файл для шаблона: comments.php и второе - мы еще не решили как будут выводиться рубрики.
Файл comments.php нам нужно взять из шаблона default. Сделать это нужно обязательно, поскольку в дальнейшем (возможно) мы будем изменять оформление комментариев (или встраивать плагины и т.д.) и делать это лучше со своей копией.
Файл comments.php
Итак, просто копируем файл из шаблона "default". Сразу же немного изменим оформление для комментариев. В частности, в нашем шаблоне поле ввода комментария получилось довольно широким. Поэтому мы добавим в style.css строчку:
#comment {width: 500px;}
Теперь наши комментарии выглядят симпатичней. 
Вывод рубрик
Раньше мы создали файл main-cat.php для того, чтобы выводить рубрики. Сегодня самое время поговорить о нем.
Для вывода рубрик в WordPress'е обычно используют тот же алгоритм, что и для вывода записей. То есть при клике на рубрику, мы получаем не только список заголовков, но и их тексты, что не всегда оптимально. На мой же взгляд, удобней оставить только заголовки с датой публикации (например так).
Алгоритм такого вывода практически ничем не отличается от вывода обычных записей, с той лишь разницей, что нет необходимости выводить текст, рубрику, а также вводить условия is_page и is_single, поскольку в рубрике выводятся только обычные записи. Кроме этого, сам вывод можно несколько упростить: ведь нам нужен простой список, и надобность в дополнительном оформлении отпадает.
Таким образом, мы можем за основу взять наш main.php, только удалим ненужный код. Мы его уже довольно подробно обсудили, поэтому я сразу привожу результат, который и возьмем за основу для дальнейшей модификации.
Файл main-cat.php:
<ul class="cat">
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><?php
echo '<a href="';
the_permalink();
echo '">';
the_title();
echo '</a> - ';
the_time('j F Y');
?></li>
<?php endwhile; else:
echo '<li><h1>Извините, ничего не найдено...</h1></li>'; endif; ?>
</ul>
Как видите, всё очень просто: мы запускаем цикл TheLoop и в нем выводим ссылку и дату.
Однако на страничке не хватает трех вещей:
- названия рубрики;
- её описания;
- навигации по этой рубрике.
Названия рубрики и её описание
Для того, чтобы вывести название рубрики (она у нас одна на всю страницу), мы воспользуемся функцией get_the_category_by_ID. Эта функция возвращает название рубрики по её номеру.
Однако, вы спросите, откуда мы возьмем номер рубрики? На самом деле, всё очень просто: WordPress создает глобальную переменную $cat, в которой и содержится номер текущей рубрики.
Для вывода описания, мы будем использовать функцию category_description, которая также в качестве аргумента принимает номер рубрики. В итоге у нас получается совсем несложный код:
<h1 class="cat"><?php echo get_the_category_by_ID($cat) ?></h1> <p class="cat"><?php echo category_description($cat) ?></p>
Не забудем сразу же описать стили в style.css. Я сделал это так:
h1.cat {font-size: 12pt; margin-bottom: 5px;}
p.cat {font-size: 9pt; font-style: italic;}
ul.cat {list-style-type: circle;}
Навигация по рубрике
Речь идет о том, что WordPress выводит на одной страничке заданное количество записей. Этот параметр задается в админ-панели (Настройки -> Чтение) и также влияет на вывод наших рубрик. Поскольку записей может оказаться больше, чем установлено для одной страницы, то мы просто не увидим все записи. В этой ситуации можно добавить ссылки "Раньше-Позже", однако мы сделаем по-другому.
Мы сделаем так, чтобы при выводе рубрики количество отображаемых записей было достаточно большим. В этом случае навигация нам просто не понадобиться.
Для решения этой задачи мы воспользуемся функцией query_posts. Эта функция модифицирует запрос к базе данных в зависимости от заданных параметров. Эту функцию очень часто применяют, когда нужно изменить стандартный вывод WordPress'а. Главное условие - эта функция должна вызываться до запуска цикла TheLoop:
query_posts("cat=$cat&showposts=100");
if (have_posts()) : while (have_posts()) : the_post();
...
То есть мы задаем вывод конкретной рубрики (cat=$cat) в количестве - до 100 записей (showposts=100).
Рубрики и подрубрики
Возможно вам не понравится, что при выводе записей рубрики, будут выведены и все записи из подрубрик. На самом деле это довольно спорно: нужно ли выводить записи и подрубрики, или нужно ограничиться только записями только выбранной рубрики.
Мне кажется, что логичней выводить записи только одной выбранной рубрики. Для того, чтобы исключить вывод записей подрубрик, нужно добавить одно-единственное условие. Вот так это выглядит в файле main-cat.php (строчки, которые НУЖНО добавить я выделил полужирным):
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($post->category_id == $cat) { ?>
<li><?php
...
?></li>
<?php } ?>
То есть мы прямо в цикле проверяем совпадение рубрики записи с текущей рубрикой. Если они совпадают, то выводим ссылку на запись, иначе - нет.
Готово!
Теперь можно вас поздравить - ваш шаблон готов! Сохраните его для своих будущих разработок, поскольку он содержит все нобходимые функциональные блоки. Еще раз просмотрите файлы шаблона, и убедитесь, что в них нет чего-то сложного или экстраординарного. (Моя версия здесь.)
Надеюсь, что эти уроки вам понравились, и свой отзыв вы можете оставить на моем сайте (а для чего я это делаю, а?!).
Продолжение следует!
Но, если вы решили, что на этом мы завершили работу с шаблоном, то вы ошиблись. Нам предстоит еще сделать оформление для нашего шаблона-каркаса. Но этим мы займемся в следующем выпуске.
Продолжение: http://maxsite.org/ras28
Весь курс создания шаблона:
