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

22.08
2008

Рубрики: WordPress |

Сегодня мы разберем по косточкам что из себя представляет так называемый сайдбар (sidebar), он же — панель навигации. Но прежде чем начать, хочу поделиться радостью, ибо Вебсовет теперь красуется в знаменитом каталоге DMOZ в разделе http://www.dmoz.org/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).

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

Вебсовет

1 2 3 4 5 6 7 8 9

Digg it Bookmark it Stumble it add to technorati

Комментарии (15) на запись “Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)”

  1. Илья 22.08.2008 16:10

    ПОЗДРАВЛЯЮ! Это заслуженно!

  2. Травинка 22.08.2008 16:41

    Квентор! Поздравляю!!! :-* Уряяяя!!! :))
    Сайтик заслуженно занял там место!

  3. Игорь Квентор 22.08.2008 17:37

    Спасибо, друзья! :)

  4. Виктор 23.08.2008 04:33

    Привет, Игорь! Присоединяюсь к поздравлениям…Заслужил…. Я уверен это очень приятно тем что была проделана большая работа…А это всегда очень помогает….

    Я не на многих сайтах пишу комменты..Но тут очень хочется..не по тому что Я верстальщик….Потому что тут много нужной информации для многих…. Спасибо! нужный сайт..В свое время мне его не хватала…:))))

  5. Игорь Квентор 23.08.2008 07:16

    Привет, Виктор! Спасибо на добром слове! :)

  6. Марина 25.08.2008 16:48

    Поздравляю, Вас! и присоединяюсь ко всем хорошим и теплым словам в ваш адрес…
    У меня такой вопрос: я добавила в header.php вертикальную полосу навигации по сайту, а в свойствах указала, что контент её должен обтекать (float: left;) это вроде работает. Но правильно ли это? Ничего в дальнейшем поломать это правило не сможет?

  7. Игорь Квентор 25.08.2008 20:12

    Марин, спасибо! :)
    Что касается обтекания, проверьте в разных браузерах и при различных разрешениях экрана. Если все нормально, то все будет и далее работать.

  8. Марина 25.08.2008 22:23

    Хорошо, спасибо :-)

  9. Максим 28.08.2008 11:44

    полезная статейка, попробую сверстать по вашим примерам!

  10. Rust 03.09.2008 16:48

    Игорь, у меня к вам такой вопрос - можно ли сделать так, чтобы сайдбар содержал разные ссылки на разных страницах?

  11. Игорь Квентор 03.09.2008 17:26

    Rust, можно. Есть разные варианты. Например, можно создать страницу stranitsa и одноименный файл пхп stranitsa.php в шаблоне. В этом файле прописать присоединение сайдбара за номером 2 и, соответственно, создать файл sidebar2.php, в котором повторить код аналогично основному сайдбару, но записать другие ссылки.
    Второй вариант: в одном сайдбаре для каждой страницы прописать свой набор ссылок. Например:

    <?php /* If this is the frontpage */ if ( is_home() ) { ?>
    <ul><li><a href="link1"></a></li>
    <li><a href="link3"></a></li>
    <li><a href="link5"></a></li></ul>
    <?php } ?>

    Список ссылок link1, link3, link5 будет выводиться только на главной странице.

    <?php /* If this is the page stranitsa */ if ( is_page('stranitsa') ) { ?>
    <ul><li><a href="link2"></a></li>
    <li><a href="link4"></a></li>
    <li><a href="link6"></a></li>
    <?php } ?>

    Список ссылок link2, link4, link6 будет выводиться только на странице с именем stranitsa, которую опять же необходимо создать заранее.

    Естественно, что сами ссылки при этом придется добавлять вручную прямо в код сайдбара. Автоматическая “доставка” ссылок из раздела Ссылки в админской работать не будет. Она может создавать ссылки только одним постоянным списком.

    Более подробно об этом можно почитать у Макса:
    http://maxsite.org/otobrazhenie-vidzhetov-v-saydbarah-pri-raznyih-usloviyah

  12. Найкрис Кроули 03.09.2008 18:14

    Не согласен, что размеры картинок ненужны. Код ими не так уж и засорится, а для визуального отображения они очень помогут. Это и при условии, что пользователь отключил картинки и когда скорость интернета медленная - сразу загрузится страница в том виде, как хотел автор и не будет “прыжков”, что порой очень неудобно и перед тем, как приступить к изучению текста, нужно ждать полной загрузки

  13. Игорь Квентор 03.09.2008 19:02

    Найкрис, тут речь идет не о картинках как таковых, которые используются, например, для оформления страницы, а только о кнопках. “Скакать” за неимением четко указанных размеров от этого сайдбар не будет, зато код страницы пройдет валидацию в W3C. Иногда это бывает важнее.

  14. Илья 13.09.2008 18:48

    Подскажите, пожалуйста, как в сайдбар вставляются дополнительные элементы? Например, рекламный блок в виде картинки с текстом, как на этом сайте. И можно ли сделать так, чтоб на страничках открывающихся по рубрикам, были разные рисунки. К одной рубрике - одна, к другой - другая, всего 5-7 штук. А может проще их будет “привязать” к отдельным страничкам?

  15. Игорь Квентор 13.09.2008 20:53

    У меня картинка книги и текст вставлены между двумя списками. Обычный текст, обычный код добавления изображения (тэг img) со ссылкой.
    Что касается вывода разных картинок в разных рубриках - это уже сложнее. Тут без php уже не обойтись. Проще всего прицепить разные картинки к разным страницам.

Трэкбеки

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




Поиск

Рубрики

Архив



SMS.копилка

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов