Выпуск 26. Делаем собственный шаблон для WordPress (часть 3)
Наш шаблон уже обладает некоторой функциональностью, и сегодня мы продолжим добавлять в него нужные нам блоки.
Боковые панели
У нас есть две боковые панели: <div id="navigation"> (голубая) и <div id="extra"> (оранжевая). Нам нужно определить какие функциональные блоки мы в них разместим.
WordPress "предлагает" нам множество вариантов:
- Список рубрик
- Архив по месяцам (можно по дням, неделям и годам)
- Поиск
- Ссылки (blogroll)
- Список постоянных страниц
- Блок управления
- Календарь
С помощью дополнительных плагинов мы можем здесь же подключить облако рубрик. Так, же мы должны предусмотреть вывод рекламы и счетчики.
Структура блоков
Сейчас будет самое интересное. 
Дело в том, что все эти функциональные блоки, как правило оформляются в виде списков UL. Когда я впервые решил сделать собственный шаблон для WordPress, то естественно взял за основу default. В итоге я намучился капитально, поскольку элемент списка LI будет отображать булечку, но вот, например в самом названии блока (например "Ссылки"), этого не требуется. В итоге нужно прибегать к массе хитростей, чтобы сделать так, как положено.
Все это из-за того, что html-теги используются не по своему назначению. Там, где нужен список нужно использовать UL, а где заголовок, то h1(2-6). Для блоков лучше использовать DIV а не UL. При таком (подчеркну, грамотном) подходе, мы сможем сделать нужное нам оформление. При этом мы получаем:
- переносимые блоки, то есть можно код скопировать в любое другое место,
- так гораздо проще описывать стили в css-файле и добиться корректного отображения в разных браузерах.
Существует еще один момент, который вам нужно знать. В WordPress существуют предопределенные тэги и стили (классы) при вызове некоторых функций. Например, список рубрик выводится с тэгами ul и li, а для подрубрик используется класс "children". Изменить такие вещи можно только лишь, изменив файлы самого WordPress'а. Поэтому, когда мы будем использовать разные функции, то нужно учитывать эти особенности.
Порядок блоков
Поскольку мы будем делать все в виде раздельных блоков, то для нас не принципиален и их порядок. В дальнейшем вы сможете их разместить уже по своему желанию. За основу я возьму какую схему:
<div id="navigation"> (голубая)
- Рубрики
- Ссылки
- Архив по месяцам
- Блок управления
<div id="extra"> (оранжевая)
- Постоянные страницы
- Поиск
- Реклама
- Счетчики
Календарь я не буду сейчас подключать, поскольку он не такой востребованный. (Если будет нужно, то вернемся к этому разговору.)
Файл index.php
Приступаем к реализации.
Открываем файл index.php и в нем находим вывод боковушек. Сейчас там находится текст для примера. Нам он не нужен, поэтому удаляем его целиком, а вместо этого подключаем файлы:
<div id="navigation">
<?php
require('sidebar-1.php');
?>
</div><!-- div id="navigation" -->
<div id="extra">
<?php
require('sidebar-2.php');
?>
</div><!-- div id="extra" -->
Вам нужно также создать пустые файлы sidebar-1.php и sidebar-2.php.
Файл sidebar-1.php
Для начала давайте добавим в этот файл вывод рубрик. Сам вывод осуществляется с помощью функции wp_list_cats. Эта функция имеет множество аргументов, которые нужно разделить симоволом &. Вот такой код у меня получился:
<ul class="is_link">
<?php
wp_list_cats('optioncount=1&hide_empty=0&children=1&hierarchical=1');
?>
</ul>
Мы заключаем вывод рубрик в список с классом is_link (<ul class="is_link">). В аргументах выставляем значения:
- optioncount=1 - выводить количество записей в рубрике
- hide_empty=0 - отображать пустые рубрики
- children=1 - отображать подрубрики
- hierarchical=1 - выводить в виде "дерева"
Зачем мы задаем класс для этого списка? Это нужно для того, чтобы отличить список от других списков, например из текстов записей.
Теперь давайте наводить лоск.
Ширина блоков
Лично мне не нравится, что ширина сайта всего 700px. На мой взгляд это маловато по сегодняшним меркам (с учетом того, что у большинства мониторы с разрешением не ниже 1024px). Кроме этого ширина боковушек по 150px маловата для текстов, тем более, списков. Поэтому, есть смысл увеличить их.
Таким образом выставляем ширину первой боковушки 200px, вторую - 180px, а общую ширину - 900px. Также я добавлю небольшой отступ от первой боковушки (20px), чтобы блоки "не слипались". В итоге вам нужно найти и заменить в style.css следующие строчки:
#container {width: 900px; margin: 0 auto;}
#content {margin-right: 400px;}
#navigation {float: left; width: 200px; margin-left: -380px;}
#extra {float: left; width: 180px; margin-left: -180px;}
Чтобы вам понять, как это действует, обратите внимание на ширину блоков, а также их отрицательный отступ - таким образом вы поймете, откуда взялись эти значения.
Правда, если у вас есть подрубрики, то в этом глючном IE названия рубрик съедут на соседний блок. Поскольку заставить IE работать корректно все равно не получится, то мы просто добавим еще два хака, которые будут обрезать, все что не влезло в исходные блоки:
*html #navigation {overflow: hidden;}
*html #extra {overflow: hidden;}
Кстати говоря, если бы мы взялись делать шаблон не на DIV'ах, а на таблицах (TABLE), то такой проблемы могло бы и не быть, поскольку браузеры примерно одинаково работают с таблицами.
Списки
Теперь нужно прописать класс для списка "is_link":
ul.is_link {margin: 0px 10px 0px 25px; padding: 0px; font-size: 9pt;}
ul.is_link ul {margin: 0px 0px 0px 25px; padding: 0px;}
Первой строчкой мы задаем отступы для первого списка (слева - 25px, снизу - 10px, остальное - 0). Для вложенных списков WordPress создает UL и, поэтому, второй строчкой (для всех вложенных списков) мы также задаем отступы.
Заголовки блоков
Каждый блок имеет какой-то заголовок. Поэтому сразу же предусмотрим и его. Для этого используем тэг h2 и его класс "box":
В sidebar-1.php запишем:
<h2 class="box">Рубрики</h2>
В style.css:
h2.box {font-size: 12pt; margin: 10px 0px 5px 10px;}
То есть мы установили размер шрифта 12pt, отступы: сверху - 10px, справа - 0px, снизу - 5px, слева - 10px.
Теперь у нас вполне завершенный блок вывода рубрик.
Добавляем ссылки
Ссылки выводятся аналогично рубрикам. Для вывода можно использовать несколько функций, я предпочитаю get_links. В ней много параметров, которые можно менять по своим потребностям. Вот у меня получился такой код:
<h2 class="box">Ссылки</h2> <ul class="is_link"> <?php get_links(-1, '<li>', '</li>', '', true, 'rating', false, false, -1, 1, true) ?> </ul>
Как видите, здесь все знакомо, а для тех, кто хочет разобраться с get_links привожу её описание (указаны значения по-умолчанию):
get_links($category = -1, $before = '', $after = '<br />', $between = ' ', $show_images = true, $orderby = 'name', $show_description = true, $show_rating = false, $limit = -1, $show_updated = 1, $echo = true)
Архив по месяцам
Как вы уже догадались, архив делается точно также, только используем функцию wp_get_archives:
<h2 class="box">Архив</h2>
<ul class="is_link">
<?php
wp_get_archives('type=monthly')
?>
</ul>
Блок управления
Под блоком управления я понимаю ссылки на RSS записей и комментариев, ссылку на регистрацию и администрирование блога, а также ссылку на подписку через Яндекс-ленту и Google-Reader. Код получается очень простой и похожий на предыдущие блоки. Для формирования адресов блога мы используем функции WordPress (я сделал переносы строки, чтобы читать было удобно, но вам нужно их убрать):
<h2 class="box">Управление</h2>
<ul class="is_link">
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
<li><a href="<?php bloginfo('rss2_url') ?>">RSS сообщений</a></li>
<li><a href="<?php bloginfo('comments_rss2_url') ?>">RSS комментариев</a></li>
<li><a href="http://lenta.yandex.ru/settings.xml?name=feed&
url=<?php bloginfo('rss2_url') ?>">Добавить в Яндекс</a></li>
<li><a href="http://fusion.google.com/add?feedurl=
<?php bloginfo('rss2_url') ?>">Добавить в Google</a></li>
</ul>
Функция bloginfo, в зависимости от параметра, выводит его значение. Например rss2_url - это адрес RSS всех записей, а comments_rss2_url - только комментариев. Что касается добавления в Яндекс и Гугл, то я использую их стандартную ссылку, только добавил RSS-адрес сайта.
Добавим рекламный блок
Поскольку мы практически завершили наполнение функциональностью первого бокового меню, то есть смысл добавить для красоты (условно, конечно) во второй сайдбар рекламный блок.
Сделать это можно разными способами. Я всегда рекомендую свой плагин Ушки. После его установки нужно создать ушку с каким-либо названием, например "ads". После этого в коде нужно будет прописать её вызов.
Если же вы не хотите использовать этот плагин, то можно прописать код рекламы прямо в файле шаблона. Предусмотрим оба варианта: если плагин установлен, то выводится ушка, если нет - то указанный код.
Файл sidebar-2.php
Пишем:
<?php
if (function_exists('show_ushka')) show_ushka('ads');
else {
?>
<div class="ads">
Рекламная пауза
</div>
<?php } ?>
А в файле style.css добавим простое оформление:
div.ads { height: 400px; margin: 5px; border: red solid 1px;
background: #FFA080; text-align: center; }
Как вы понимаете, вместо фразы "Рекламная пауза", можно добавить свой html-код.
Продолжение следует...
Наш шаблон уже принимает вполне человеческие формы. Нам осталось совсем немного - добавить некоторые функциональные блоки и приступить к дизайну. Как обычно, вы можете скачать мой вариант этого урока и сверить со своим.
Продолжение: http://maxsite.org/ras27
Весь курс создания шаблона:
Постоянная ссылка: http://maxsite.org/?p=212
Версия для печати
