Создание 2-х колоночного шаблона WordPress. Часть 7. Сайдбар (Навигация)

Создание 2-х колоночного шаблона WordPress

Сегодня мы разберем по косточкам что из себя представляет так называемый сайдбар (sidebar), он же — боковая панель навигации сайта.

Но прежде чем начать, хочу поделиться радостью, ибо Вебсовет теперь красуется в знаменитом каталоге DMOZ в разделе /World/Russian/Компьютеры/Интернет/Дизайн_и_разработка_сайтов/Веб-строительство/Ресурсы_вебмастера/. Приятственно так, знаете ли :)

Open Directory Project at dmoz.org

Итак, приступим к освежеванию разбору той части шаблона Вордпресс, которая отвечает за навигацию.

В зависимости от количества этих боковых блоков навигации все шаблоны можно разделить на одно-, двух- и трех-колоночные.

Соответственно, в первом варианте у нас всю ширину шаблона занимает контент, а блок навигации находится в самом низу в подвале; во втором варианте имеем блок контента и один блок навигации (слева или справа).

В третьем варианте — уже два блока навигации. Причем в этом случае расположение блоков может так же варьироваться: контент слева + два блока навигации справа, контент справа + два блока навигации слева (очень редко), контент посередине + по одному блоку навигации с каждой стороны.

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

Признаюсь честно — я не сторонник этих «удобств» и считаю их излишествами для тех, кто хоть немного соображает в верстке.

Виджеты придуманы для тех, кому надо «чтобы легко и просто, вжик — и готово!» Зачастую же получается так, что набранный быстро при помощи виджетов сайдбар, выглядит, мягко говоря, неаккуратно. Как яркий пример — сползающая вниз кнопка «ОК» поисковой формы у довольно большого числа существующих блогов.

Кроме того, если вы все-таки влезли в код сайдбара и что-то там поменяли (например, исправили заголовки с буржуйского на русский), то при добавлении виджетов, вы всех этих изменений не увидите.

Потому что для каждого виджета определены свои собственные настройки, которые надо искать в файле widgets.php, а это весьма гиморно, уж поверьте на слово. Но, как говорится, хозяин — барин. Если есть желание повозиться с ними, то извольте.

Чтобы узнать, поддерживает ли выбранная тема виджеты, можно зайти в админ-панель, в раздел Внешний вид, пункт Виджеты. Если все пучком, то увидите прямоугольник с заголовком «Сайдбар 1», а ниже кучку прямоугольников поменьше, которые и есть те самые виджеты.

Добавлять их предельно просто: хватаете мышкой и тащите в прямоугольник сайдбара.

Так, с этим хватит, пожалуй.

Наша тема виджетов не поддерживает, о чем в указанном разделе админской прямо и сообщается:

«Сайдбары не определены. Вы видите это сообщение, потому что тема, который вы сейчас используете, не виджет-совместимая…»

Ну и ладно. Нам оно и даром не нать.

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

Там мы из оригинальной темы pool выдрали кусок кода, выводивший поисковую форму. В оригинале она располагалась в шапке, а нам необходимо поместить ее в сайдбаре. Вот этот кусок кода:

<div id="search">
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="s" id="s" size="20" value="search in blog..." />
</form>
</div>

Теперь откроем файл sidebar.php и поглядим, что у нас там есть. Открывает его, как и положено, див с идентификатором sidebar:

<div id="sidebar">

Следом идет кусок кода, который нам совершенно не нужен:

<?php if (function_exists('wp_theme_switcher')) { ?>
<div id="themes">
<h3><?php _e('Themes'); ?></h3>
<?php wp_theme_switcher(); ?>
</div>
<?php } ?>

Это так называемый переключатель (switcher) тем. Довольно бестолковая фишка, которая позволяет пользователям менять тему вашего блога, выбирая из тех, что загружены у вас в папку themes.

Оно вам таки надо? Меня лично устраивает одна единственная тема, а все остальное — от лукавого. Поэтому мы берем и смело удаляем ненужный кусок кода.

Но помните! Удаляя часть пхп-шного кода, не потеряйте его составляющие. В данном куске, например, это самый нижний «хвостик» — <?php } ?> (как вариант бывает — <?php endif; ?>). Если вы его оставите, то вместо сайдбара увидите «фатал ерроры» (Fatal error) или «парсы ерроры» (Parse error) — грозные предупреждения php-движка об ошибках.

Вместо удаленного блока мы ткнем как раз выдранный из шапки код поисковой формы.

Форма поиска встала на место, хотя и несколько кривовато. Ну, это мы исправим после при помощи правил в CSS, а пока просто поглядим на эту форму.

Кнопки нет. Она нам и не нужна. Любой в курсе, что запустить поиск можно путем нажатия на клавишу Enter. Но вот надпись в окошке поиска… Мало того, что на буржуйском — search in blog… — так еще и не исчезает сама, когда мы помещаем в окно курсор. Это не есть гут.

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

Поэтому мы перепишем код формы следующим образом:

<div id="search">
<form action="<?php bloginfo('url'); ?>" method="get">
<input class="text" name="s" type="text" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" /></form>
</div>

Обратите внимание, что слово «Поиск…» прописано в коде трижды. Это необходимо. Не буду рассказывать почему, просто знайте это.

Далее идет блок Рубрик (Категорий):

<div id="categories">
<h3><?php _e('Categories:'); ?></h3>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&feed=rss'); ?>
</ul>
</div>

Здесь мы можем смело исправить заголовок с вот этой записи:

<h3><?php _e('Categories:'); ?></h3>

на вот такую:

<h3>Рубрики</h3>

И это логично. Зачем выводить заголовок, используя PHP, когда можно просто прописать его по-человечески.

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

Два следующих блока выводят, соответственно, список архива и блогролл — список ссылок на дружественные ресурсы. Здесь мы тоже исправим только заголовки, а остальное оставим как есть.

Кстати! При желании вы, конечно же, можете переставлять блоки местами. Все в ваших руках.

Архив не всегда удобен, особенно когда дело касается свежих записей. Он выводит только названия месяцев и количество постов в скобках. А хорошо бы вывести так же в сайдбаре с десяток заголовков свежих постов. Для этого мы создадим еще один блок, который так и назовем «Свежие записи»:

<div id="recent-post">
<h3>Свежие записи</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>
</div>

Как видите, код так же забирает заголовки из архива. Но вот строчка в скобках как раз и указывает способ выведения не по месяцам, как в архивном блоке, а заголовками постов. Цифра после знака равенства означает количество выводимых заголовков. В нашем случае их десять.

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

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

http://www.ваш_сайт.ru/wp-login.php

и пользоваться ей в свое удовольствие.

Две другие ссылки совершенно лишние. То, что это именно Вордпресс, ваш блог и так сообщает всему миру всевозможными внутренними отсылками к http://wordpress.org/ , которых вы даже и не видите. А ставить ссылку на http://gmpg.org/xfn/ имеет смысл, если вы там плотно тусуетесь и варитесь в xhtml-ьной братии.

Весь файл sidebar.php мы рассмотрели. Остался вопрос: куда и как правильно ткнуть десяток кнопок-счетчиков от всевозможных Ливинтернет, Спайлог, Яндекс и иже с ними? Нет ничего проще! Получаете заветный код на указанных ресурсах, затем в коде сайдбара, как раз на месте удаленного блока Мета, пишете:

<h3>Пузомерки</h3>
и здесь уже пошли коды всякоразные от кнопок…

Без всяких div, ul и прочих излишеств. Если надо как-то отделять кнопки одну от другой, пользуйтесь тэгом <br />, либо двумя этими тэгами подряд, чтобы получился пропуск между кнопками.

Парочка советов напоследок:

1. Не используйте календарь. Он не дает посетителям никакой полезной информации. Человек будет искать осмысленный заголовок поста, а не тыкать наугад в число на календаре.

2. У всех картинок в сайдбаре (баннеры, кнопки/счетчики) удаляйте из кода всякий мусор вроде: border=”0”, width=”88”, height=”31” и пр. Отсутствие рамки у изображений мы и так прописали в самом начале нашего листа стилей (*). А размеры картинок не критичны. Они все равно проявятся во всей своей красе. Зато ваш код будет чистым и будет соответствовать указанному еще в header.php доктайпу (DOCTYPE).

Продолжение следует!

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

22.08.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: