Рубрика: WordPress » Навигация »

Выделение текущей страницы в меню

Кодекс: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);
}
Опубликовано в рубрике Навигация | с метками , , . |

Еще записи

7 комментариев на «Выделение текущей страницы в меню»

  1. kipmjw говорит:

    Я думаю поставить специальный плагин. Посоветуйте, какой плагин лучше.

  2. Сергей говорит:

    Добрый день,
    есть необходимость кроме обычного меню использовать для навигации на странице дополнительную строку такого вида "Вы на странице: домашняя > родительская > текущая". С помощью каких тэгов wordpress это можно сделать? Спасибо.

  3. Сергей говорит:

    У Вас, кстати, такая строка используется :о)

    • MBlogM говорит:

      В используемой здесь теме эта навигация (она называется breadcrumbs) реализуется так:

      URL главной страницы: get_settings('home');
      ссылки на категории (разделы): the_category(', ');
      заголовок записи: the_title();

  4. Сергей говорит:

    Спасибо, нашёл плагин:breadcrumb-navxt буду пробовать ...

  5. RodgerFox говорит:

    Ммм... прекрассный блог. Если вернусь ещё раз обязательно в закладки. хороший справочник сделали. пойду пробовать что прочитал) помню по другому реализовывал, но найти не могу..

  6. no1dor говорит:

    Спасибо большое ...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *