Wordpress и подсветка навигации

28 Mar, 2005

Делюсь своим недавним простым, но все же полезным решением проблемы подсветки навигации, типа "я тут". По крайней мере вкупе с этим строить сайты на базе Wordpress, именно сайты, а не блоги, может оказатсья проще. Вобщем ближе к делу.

В чем проблема?

Например у вас есть блог на ВП, а теперь вы решили создать кроме главной( она же блог), еще пару статичных страниц (или не очень статичных). Вот как у меня например. Создал я "Про это", "Ресурсы" и "Архив". Резонно было бы после всего этого сделать навигацию между этими разделами сайта.

Сделать это раз плюнуть - навигация то не меняется от страницы к странице. Но тут как всегда приходит мысль о подсветке нужного раздела. То есть если вы на главной в навигации выделяется меню "Блог", и в таком роде. Вот тут и появляется маленькая проблемка.

Решение

Решение чрезвычайно простое. Даже название решение - это громко сказано. :) Короче говоря. Так как я использую систему темплейтов для своего сайта. ( разложенный на мелкие куски макет странички сайта ) то все изменения коснулись лишь файла header.php.

Определение положения

Для того что бы знать какой элемент навигации подсветить нужно знать где мы находимся. Вот такой простой код помогает и лечит от всех проблем:
  1. if(is_home()) {
  2. $homid=" id="current"";
  3. }
  4. if(is_archive() || is_single()) {
  5. $arcid=" id="current"";
  6. }
  7. if(is_page('Стоит посетить')) {
  8. $resid=" id="current"";
  9. }
  10. if(is_page('Про это')) {
  11. $aboid=" id="current"";
  12. }
названия функций говорят сами за себя. Каждая определяет находимся ли мы на главной, на странице с одним постом или же в архиве, и конечно не на странице ли мы с названием...

Навигация

Ну а теперь дело за малым собственно навигация начинает выглядеть примерно так
  1. <ul>
  2. <li><a href="/"<?=$homeid;?>>Блог</a></li>
  3. <li><a href="/archive/"<?=$arceid;?>>Архив</a></li>
  4. <li><a href="/resources/"<?=$resid;?>>Ресурсы</a></li>
  5. <li><a href="/about/"<?=$aboid;?>>Про это</a></li>
  6. </ul>
Вот и все. Теперь id="current" будет у той странички на которой мы находимся. Остальное дело стилей. Как раз на моём блоге работает примерно такая схема.

10 комментариев к “Wordpress и подсветка навигации”

1.zaartix | 29 Mar, 2005
Просьба автору: еще по теме полезных вещей можно осветить проблеу типографики. Небольшое обсуждение тут, но решение далеко от совершенства: ссылка
2.akella | 01 Apr, 2005
Согласен, тема действительно интересная. Быть может посвящу этому один из постов. Хотя ИМХО лучше проводить ликбез среди наборщиков. ;)
3.Foreva | 30 May, 2005
Не оригинально, но интересно :)
4.Pocc | 09 Dec, 2005
Если можно, раскажи пожалуйста пошагово (если не в лом конечно) как ето сделать, к примеру на стандартном шаблоне. :-)
5.akella | 09 Dec, 2005
открываешь файл header.php из файлов скина и вставляешь там вот тот пхп код что я написал. То есть сначала первый кусок а потом второй. ВОт и все. Навигацию ессно под себя настрой...
6.Wordpress і підсвітка навігації | 17 Jan, 2006
[...] Цікаве рішення по вирішенню проблеми з підсвіткою навігації пропонує Юрій Артюх (akella). [...]
7.Lemony Snicket | 17 Jan, 2006
интересное решение - взял на вооружение :-)
8.sonika | 05 Sep, 2006
А почему "своим"? :) http://codex.wordpress.org/Dynamic_Menu_Highlighting
9.akella | 05 Sep, 2006
о! Я польщен! Боюсь что 28 марта 2005го года они это еще не напечатали ;). Легко заметить что страничка эта на сайте WP датирована нынешним(2006) годом, а вот статья моя уж полтора года как висит ;) Неужели сперли?!
10.sonika | 06 Sep, 2006
Не обратила внимание на даты :) Скорее всего сперли :)