Кодекс:Dynamic Menu Highlighting
Использование PHP и функций WordPress
Статическая навигация (выделение элемента с id="current" средствами CSS):
<ul> <li><a href="#">Page One</a></li> <li id="current"><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> <li><a href="#">Page Four</a></li> </ul>
Динамическая навигация
Вариант 1: CSS на каждой странице
Здесь используется переменная $current, которая всегда содержит номер текущей страницы, и уникальный id у каждой страницы:
<ul id="navigation"> <li id="one"><a href="#">Page One</a></li> <li id="two"><a href="#">Page Two</a></li> <li id="three"><a href="#">Page Three</a></li> <li id="four"><a href="#">Page Four</a></li> </ul>
Определение $current в header.php между тегами <head></head>:
<?php
if ( is_page('Page One') ) { $current = 'one'; }
elseif ( is_page('Page Two') ) { $current = 'two'; }
elseif ( is_page('Page Three') ) { $current = 'three'; }
elseif ( is_page('Page Four') ) { $current = 'four'; }
?>
is_page(); - сравнивает строку с заголовком текущей страницы.
В CSS-файл нельзя поместить динамическое содержимое, поэтому нужно поместить CSS, выделяющий элемент списка, на страницу в header.php между тегами <head></head>:
<style>
#current {
background-color: yellow;
}
</style>
Выделение динамического содержимого цветом:
<style>
#<?php echo $current; ?> {
background-color: yellow;
}
</style>
Вариант 2: Все стили в одном CSS-файле
Определим текущую страницу и выведем ее id, чтобы выделить соответствующий элемент списка.
<ul> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Page Three</a></li> <li><a href="#">Page Four</a></li> </ul>
Элемент <li> (header.php):
<li<?php
if (is_home())
{
echo " id="current"";
}
?>><a href="#">Page One</a></li>
На «домашней» (home) странице получим:
<li id="current"><a href="#">Page One</a></li>
А на любой другой:
<li><a href="#">Page One</a></li>
Меню в header.php:
<ul id="menu">
<!-- Активная страница home-->
<li<?php
if (is_home())
{
echo " id="current"";
}?>>
<a href="<?php bloginfo('url') ?>">Home</a>
</li>
<!-- Активная страница Archive (все месяцы и категории),
посты, но не посты в категории 10 -->
<li<?php
if (is_page('Archive') || is_single() && !in_category('10'))
{
echo " id="current"";
}?>>
<a href="<?php bloginfo('url') ?>/archive">Archive</a>
</li>
<!-- Активная страница поста в категории 10 (Design) -->
<li<?php
if (is_category('Design') || in_category('10') && !is_single())
{
echo " id="current"";
}?>>
<a href="<?php bloginfo('url') ?>/category/design">Design</a>
</li>
<!-- Активная страница About-->
<li<?php
if (is_page('About'))
{
echo " id="current"";
}?>>
<a href="<?php bloginfo('url') ?>/about">About</a>
</li>
</ul>
В CSS-файле:
#current
{
background-color: #336699;
}
Этот метод работает только со страницами, но, используя условные теги WordPress (Conditional Tags) , его можно расширить, проверяя другие условия.
*** Можно также использовать плагин (например, плагин wp-menu, который позволяет добавлять, обновлять и удалять страницы, создавать карту сайта, подменю и т.д.). Кроме того, меню выводит CSS-класс current_page_item виджета Pages sidebar (входит в дистрибутив wordpress):
.widget_pages li.current_page_item a{
background-image:url(images/activelink.gif);
}
Я думаю поставить специальный плагин. Посоветуйте, какой плагин лучше.
Добрый день,
есть необходимость кроме обычного меню использовать для навигации на странице дополнительную строку такого вида "Вы на странице: домашняя > родительская > текущая". С помощью каких тэгов wordpress это можно сделать? Спасибо.
У Вас, кстати, такая строка используется :о)
В используемой здесь теме эта навигация (она называется breadcrumbs) реализуется так:
URL главной страницы: get_settings('home');
ссылки на категории (разделы): the_category(', ');
заголовок записи: the_title();
Спасибо большое ...