Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

03.08.2010 | Рубрики: WordPress
Тэги: WordPress, файл sidebar.php, шаблон вордпресс

Конструктивные элементы шаблона Wordpress | Файл sidebar.php

Файл sidebar.php, как следует из его названия, выводит на блоге боковую колонку (иногда две) со всевозможной служебной информацией и навигацией. Обычно сюда выносят список рубрик, список свежих постов, ссылки из блогролла, различные баннеры и кнопки и пр.

Как уже говорилось ранее в теме про файл index.php, сайдбар прицепляется к шаблону при помощи вот такой строки:

<?php get_sidebar(); ? >

Движок Wordpress понимает и видит файл sidebar.php, поэтому в нужном месте страницы прицепит именно его, а не sidebar2.php или left-sidebar.php или что-то иное. Поэтому, если в шаблоне более одного сайдбара, то способ их привязки к странице несколько иной:

<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Вообще конструкция вида:

<?php include(TEMPLATEPATH."/имя_файла.php");? >

является универсальной и может быть применена к любому дополнительному файлу, лежащему в этом же шаблоне.

Прежде, чем рассматривать полезное содержимое файла sidebar.php, стоит сказать несколько слов про виджеты и их поддержку шаблонами. Не секрет, что многие пользуются именно виджетами при заполнении сайдбара(ов) нужными блоками. Wordpress позволяет легко делать это из админской части движка. Но чтобы шаблон поддерживал такую работу с виджетами, в его файле sidebar.php должен быть прописан специальный код, явно указывающий это. Код выглядит следующим образом:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ? >
………..
<?php endif; ? >

Многоточие здесь — это любой набор блоков, который будет размещаться в сайдбаре по-умолчанию. То есть, при установке такого шаблона, в сайдбаре уже будут те блоки, которые здесь прописаны. Если же вы станете добавлять новые блоки при помощи виджетов, то блоки «по-умолчанию» исчезнут со страницы.

Обратите внимание: в коде указан один сайдбар — sidebar1. Если у вас их два, то для второго соответственно пишется такой код:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ? >
………..
<?php endif; ? >

Однако вся эта красота не будет работать, пока вы не пропишете еще кусок кода в файле functions.php шаблона. Если у вас его нет, то придется создать. Содержание его следующее:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(1);
? >

Если сайдбаров будет два, то в скобках нужно поставить соответствующую цифру.

Окей! Поехали далее.

Из чего обычно состоит сайдбар:

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

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ? >" > <input type="text" value="Поиск..." name="s" id="s" onfocus="if (this.value == 'Поиск...') this.value = '';" onblur="if (this.value == '') this.value = 'Поиск...';"/> </form>

Обратите внимание: здесь слово «Поиск…» прописано в трех местах. Это означает, что само слово будет всегда присутствовать в окне ввода, а когда мы ставим туда курсор, то слово исчезает. Весьма удобно. Кнопка отправки отсутствует, поэтому имеет смысл дополнить это слово чем-то вроде «Поиск… Введите слово и нажмите Enter»

Свежие записи. Список свежих записей выводится при помощи следующего кода:

<ul>
<?php get_archives('postbypost', 10); ? >
</ul>

Цифра означает количество записей в списке. Писать сейчас о том, как исключить какие-то записи из списка и прочих ухищрениях не буду, так как получится слишком многабукав.

Рубрики. Список рубрик выводится при помощи такого кода:

<ul>
<?php wp_list_cats('sort_column=name&optioncount=1'); ? >
</ul>

sort_column=name означает, что рубрики будут выводиться по очереди в соответствии со своими именами, то есть по алфавиту.

optioncount=1 означает, что после названия каждой из рубрик будет в скобках выводиться число постов в данной рубрике. Соответственно, если это не требуется, то можно эту часть кода просто удалить, оставив лишь:

<ul>
<?php wp_list_cats('sort_column=name'); ? >
</ul>

Более подробно о возможностях и способах отображения рубрик можно почитать в Кодексе

Блогролл. Это список ссылок на дружественные блоги или на куда-либо еще. Обычный способ вывода выглядит следующим образом:

<ul>
<?php wp_list_bookmarks('categorize=0&title_li='); ? >
</ul>

Однако такой код будет выводить список ссылок на всех страницах блога. По-другому такие ссылки еще называют «сквозняками», так как идут сквозь все страницы сайта. Это не очень хорошо для самого сайта в плане seo. Поэтому имеет смысл исправить код таким макаром:

<?php if ( is_home() ) { ? >
<h2>Блогролл <ul>
<?php wp_list_bookmarks('categorize=0&title_li='); ? >
</ul>
<?php } ? >

Мы просто добавили условие, при котором ссылки блогролла будут отображаться лишь на главной странице блога, но ни на одной из внутренних. При этом вовсе не обязательно иметь в составе шаблона файл home.php. Движок сам определяет главную страницу, даже если для всех видов страниц используется один общий файл шаблона — index.php.

Тэги. Для вывода тегов я обычно использую плагин simple-tags. Чтобы показать их в сайдбаре, нужно добавить туда следующий код:

<?php if ( function_exists('wp_tag_cloud') ) : ? >
<p class="tags"><?php wp_tag_cloud('smallest=10&largest=18'); ? > </p>
<?php endif; ? >

smallest=10&largest=18 означают соответственно самый мелкий и самый крупный шрифт для тэгов. Чем чаще используется тэг, тем он жирнее.

Комментарии. Свежие комменты выводятся плагином get-recent-comments, а в сайдбаре за их вывод отвечает такой код:

<ul><?php get_recent_comments(); ? > </ul>

Вот, пожалуй, и все. Остальное: баннеры, просто ссылки, текст и пузомерки — это просто и не представляет больших сложностей при добавлении.

Напоследок еще парочка полезных замечаний:

1. Возвращаясь к поддержке виджетов, хочу предупредить, что движок Wordpress автоматически оформляет все добавленные виджеты в виде одного маркированного списка:

<ul>
<li>
Виджет
</li>
<li>
Виджет
</li>
<li>
Виджет
</li>
</ul>

Поэтому, если не хотите получить видимые маркеры этого списка, необходимо в файле style.css шаблона для списка первого уровня прописать отсутствие этих самых маркеров:

#sidebar ul {list-style-type: none;}

2. В добавление к пункту 1 также: все заголовки виджетов Wordpress автоматически оформляет тэгом h2. Поэтому все в том же файле стилей style.css необходимо будет прописать правила именно для этого тэга, чтобы заголовки отображались так, как вы хотите.