Сегодня мы разберем по косточкам что из себя представляет так называемый сайдбар (sidebar), он же — панель навигации. Но прежде чем начать, хочу поделиться радостью, ибо Вебсовет теперь красуется в знаменитом каталоге DMOZ в разделе http://www.dmoz.org/World/Russian/Компьютеры/Интернет/Дизайн_и_разработка_сайтов/Веб-строительство/Ресурсы_вебмастера/. Приятственно так, знаете ли :)
Итак, приступим к освежеванию разбору той части шаблона Вордпресс, которая отвечает за навигацию. В зависимости от количества этих боковых блоков навигации все шаблоны можно разделить на одно-, двух- и трех-колоночные. Соответственно, в первом варианте у нас всю ширину шаблона занимает контент, а блок навигации находится в самом низу в подвале; во втором варианте имеем блок контента и один блок навигации (слева или справа); в третьем варианте — уже два блока навигации. Причем в последнем случае расположение блоков может так же варьироваться: контент слева + два блока навигации справа (как на моем Вебсовете), контент справа + два блока навигации слева (очень редко), контент посередине + по одному блоку навигации с каждой стороны.
Наш шаблон имеет только один блок навигации, расположенный справа. Но прежде, чем начать его править под наши нужды, коснусь кратко темы виджетов. Признаюсь честно — я не сторонник этих «удобств» и считаю их излишествами для тех, кто хоть немного соображает в верстке. Виджеты придуманы для тех, кому надо «чтобы легко и просто, вжик — и готово!» Зачастую же получается так, что набранный быстро при помощи виджетов сайдбар, выглядит, мягко говоря, неаккуратно. Как яркий пример — сползающая вниз кнопка «ОК» поисковой формы у довольно большого числа существующих блогов.
Кроме того, если вы все-таки влезли в код сайдбара и что-то там поменяли (например, исправили заголовки с буржуйского на русский), то при добавлении виджетов, вы всех этих изменений не увидите. Потому что для каждого виджета определены свои собственные настройки, которые надо искать в файле 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).
Продолжение следует!
ПОЗДРАВЛЯЮ! Это заслуженно!
Ответить
Квентор! Поздравляю!!! :-* Уряяяя!!! :))
Сайтик заслуженно занял там место!
Ответить
Спасибо, друзья! :)
Ответить
Привет, Игорь! Присоединяюсь к поздравлениям…Заслужил…. Я уверен это очень приятно тем что была проделана большая работа…А это всегда очень помогает….
Я не на многих сайтах пишу комменты..Но тут очень хочется..не по тому что Я верстальщик….Потому что тут много нужной информации для многих…. Спасибо! нужный сайт..В свое время мне его не хватала…:))))
Ответить
Привет, Виктор! Спасибо на добром слове! :)
Ответить
Поздравляю, Вас! и присоединяюсь ко всем хорошим и теплым словам в ваш адрес…
У меня такой вопрос: я добавила в header.php вертикальную полосу навигации по сайту, а в свойствах указала, что контент её должен обтекать (float: left;) это вроде работает. Но правильно ли это? Ничего в дальнейшем поломать это правило не сможет?
Ответить
Марин, спасибо! :)
Что касается обтекания, проверьте в разных браузерах и при различных разрешениях экрана. Если все нормально, то все будет и далее работать.
Ответить
Хорошо, спасибо :-)
Ответить
полезная статейка, попробую сверстать по вашим примерам!
Ответить
Игорь, у меня к вам такой вопрос - можно ли сделать так, чтобы сайдбар содержал разные ссылки на разных страницах?
Ответить
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
Ответить
Не согласен, что размеры картинок ненужны. Код ими не так уж и засорится, а для визуального отображения они очень помогут. Это и при условии, что пользователь отключил картинки и когда скорость интернета медленная - сразу загрузится страница в том виде, как хотел автор и не будет “прыжков”, что порой очень неудобно и перед тем, как приступить к изучению текста, нужно ждать полной загрузки
Ответить
Найкрис, тут речь идет не о картинках как таковых, которые используются, например, для оформления страницы, а только о кнопках. “Скакать” за неимением четко указанных размеров от этого сайдбар не будет, зато код страницы пройдет валидацию в W3C. Иногда это бывает важнее.
Ответить
Подскажите, пожалуйста, как в сайдбар вставляются дополнительные элементы? Например, рекламный блок в виде картинки с текстом, как на этом сайте. И можно ли сделать так, чтоб на страничках открывающихся по рубрикам, были разные рисунки. К одной рубрике - одна, к другой - другая, всего 5-7 штук. А может проще их будет “привязать” к отдельным страничкам?
Ответить
У меня картинка книги и текст вставлены между двумя списками. Обычный текст, обычный код добавления изображения (тэг img) со ссылкой.
Что касается вывода разных картинок в разных рубриках - это уже сложнее. Тут без php уже не обойтись. Проще всего прицепить разные картинки к разным страницам.
Ответить
Игорь, скажи, мне очень трудно вставить плагин(например установленный у меня WP Cumulus(облако тегов) без поддержки в теме веджетов, научи меня выводит в сайдбар устанновленные плагины, где смотреть их код?
Ответить
Привет, Макс. Обычно к плагину идет описание с его установкой. Если плагин не используется как виджет, то в описании должен быть прописан небольшой кусок кода для ручной вставки в обычном сайдбаре. Например, у меня тэги выводились плагином simple-tags. В сайдбаре я добавлял вот такой код:
<?php if ( function_exists('wp_tag_cloud') ) : ?><h3>Тэги</h3>
<?php wp_tag_cloud('smallest=8&largest=18&number=0'); ?>
<?php endif; ?>
Ответить
А где это описание плагина смотреть смотреть? В редакторе?
Ответить
Нет, в архиве самого плагина. Обычно толковые плагины поставляются с файлом readme.
Ответить
Добрый день Игорь!
Я все продолжаю строить по вашей схеме и не всегда удачно :)
На сей раз проблема с формой поиска в сайдбаре. Форма вашей модификации с надписью “поиск” в теле формы. Работает корректно только в Firefox. В Internet Explorer и Opera при неудачном поисковом запросе идущие ниже рубрики выводятся (слетают) на место основной страницы. То есть - если что-то найдено, то все нормально… результаты поиска и все на своих местах. Как только ничего не найдено - все рубрики летят в основную страницу.
И еще - в IE по щелчку в форме слово “поиск” не исчезает. (но это уже не так критично как вышенаписанное).
———
Может это связано с тем, что у меня левый сайдбар, а не правый?
И еще в IE смотрел 6 версии, но Opera последней версии.
———
Сам шаблон тестово пока выложен вот здесь:
http://hot-design.grodno.ru/ (ссылку можно удалить)
Ответить
Сорри, я нашел причину. В index.php некорректно заккоментировал одну строку - из за этого изменился последующий код. Удалите мой предыдущий пост.
Осталось только, что в IE по щелчку в форме слово “поиск” не исчезает. На вашем сайте в том же IE при клике на форме поиска слово “поиск” исчезает.
Еще раз прошу прощения за лишний шум :).
Ответить
Дмитрий, это не “шум”, а вполне рабочие вопросы. Сам иной раз делаю ошибки и чаще по невнимательности :)
Что касается формы поиска, а конкретнее слова “Поиск..”, то возможно причина кроется в стилях к данной форме. Попробуйте проверить там и сравнить с моим файлом CSS.
Ответить
Здраствуйте, вопрос таков!
Я натянул на WP тему из предложенной вами на главное странице(200 штук), выбрать тему интересную оттуда и натянул. На локалке все в идеале. Залил на сервер, поставил на сайте и обнаружил проблемму, на главной все ОК, но если открыть заметку или созданую страницу, то картинки в слайдбаре,шапке и в “подвале” пропадают! Дело в том, что пропадают именно те картинки(8шт - 6 в слайдбаре, 1 лого в шапке и 1 в футере), которые прописаны напрямую в PHP-файле темы, а не в CSS. Все картинки, которые прописанны в CSS на месте! Как вылечить?
Ответить
В вашем вопросе уже есть половина ответа. Либо складывайте все картинки в одну папку и привязывайте их одинаково ко всем файлам страниц, либо добавляйте все картинки в файлы других страниц точно так же, как вы их добавили к главной странице.
Ответить
Нет Вы меня не понили, но уже нашел решения и его тут напишу, мало ли кому пригодится.
У меня были пути к картинкам прописаны просто wp-content/theme/название_темы/images/картинка.gif, а правильно:
1. /wp-content/theme/название_темы/images/картинка.gif
2. /wp-content/theme/название_темы/images/картинка.gif
3. /images/картинка.gif
Ответить
Упс, коды не распознаются.
1. /wp-content/theme/название_темы/images/картинка.gif
2. /wp-content/theme/название_темы/images/картинка.gif
3. /images/картинка.gif
Ответить
Понятно. То есть, просто добавили вначале пусти слэш. Все верно.
Ответить
Добрый день Игорь!
Доводилось ли вам делать рубрики в сайдбаре выпадающим списком? То есть, чтобы из родительской рубрики при нажатии выпадали вложенные подрубрики? Это могло быть удобно при создании каталожных вещей когда подрубрик очень много и они висят длинной портянкой.
В интернете нашел косвенные указания на то, что плагин My Category Order кроме сортировки рубрик позволяет делать их выпадающим списком. Но поскольку тема у меня сложилась не виджет-совместимая, да и вы не советовали, то данная опция у меня в этом плагине отсутствует. Может всё-таки есть способ реализовать выпадающий список рубрик, не делая тему виджет-совместимой?
Ответить
Здравствуйте, Дмитрий! Интересный вопрос. :) Попробую поковырять этот плагин и напишу отдельным постом.
Ответить
Нашел следующий код - автор утверждает, что после установки в сайдбар все будет работать как часы. У меня не заработал :-) Может поможет.
<form action=”/” method=”get”>
<?php
$select = wp_dropdown_categories(’show_option_none=Select category&show_count=1&orderby=name&echo=0′);
$select = preg_replace(”#]*)>#”, “”, $select);
echo $select;
?>
Блог тот довольно заброшен и обращаться к автору поста счел нецелесообразным :(.
Ответить
Но код, увы, при вставке, сильно видоизменился :(
Ответить
Попробую вставить кусок кода, который я нашел. Он работает, но конечно требует доработки. Список выпадает, но в этот список сгребаются все и категории и подкатегории. Получается в свернутом виде одна строка:
<form action="" method="get">
Ответить
Увы не получилось. В общем полюбопытствуйте здесь: http://roose.w6.ru/tegi-shablonov-wordpress-tegi-kategorijnachalo/
В самом низу страницы тот кусок кода о котором я выше писал.
Ответить
Дмитрий, в параметрах wp_dropdown_categories есть такая опция как child_of, с помощью нее вы можете вывести выпадающим списком подрубрики определенной рубрики. Если не получится обращайтесь.
Ответить
Я, к сожалению, не настолько силен в составлении кода. Обычно, если только в готовом что-то подправить. Вот здесь: http://art.grodno.su/ я реализовал слева выпадающий список, но, увы, не совсем так как хотелось. Он сворачивается полностью и выпадает полностью. С уровнем вложений подкатегорий не вышло :(. Пример кода могу привести, но сколько не пробовал на этом сайте, код в комментариях корректно не вставляется.
Ответить
Э… тогда значит я не понял что вы хотите. По мне нормальный выпадающий список у вас.
Ответить
Там, на этом проекте сейчас всего одна категория и несколько подкатегорий. Если бы там было хотя бы две категории, вы бы сразу поняли о чем я говорил в предыдущем комментарии. Скажем, там сейчас категория “художники” и подгатегории “а”, “б”, “в” и т.д. по алфавиту. А планируется весь алфавит - 33 буквы… ну пусть без мягкого и твердого знака. А потом будет категория “скульпторы” + 31 буква подкатегорий и т.д. то есть хотелось бы видеть категории, а подкатегории выпадающими по клику на категории. Потому что если выпадет портянка со всеми подкатегорями - то это будет счет на сотни позиций :-).
Пока же вот так.
Ответить
Игорь, а как сделать в теме поддержку виджетов?
Если можно, то на примере рассматриваемой вами темы.
Ответить
Игорь, не подскажете, как вывести в сайдбар пару урезанных по количеству знаков постов (можно последних)?
Ответить
Здравствуйте, Виталий! Попробуйте вот такую фишку:
<?php the_content_rss('', TRUE, '', 30) ; ?>Цифра 30 означает количество слов в фрагменте. Количество же самих фрагментов будет зависеть от ваших настроек вывода rss ленты
Ответить