Название статьи говорит само за себя, сегодня я хочу рассказать как сделать в WordPress довольно простую, но все же весьма полезную функцию — выделение активной страницы.
Вы удивитесь, насколько просто и легко можно реализовать это в WordPress, дело в том что здесь для этого уже все предусмотрено, вам фактически нужно только прописать в css-файле стиль активной страницы.
Разберем это на простом примере. Ниже приведен небольшой фрагмент кода, для отображения навигации по страницам в WordPress.
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>
Теперь, если сохранить страницу как html, или посмотреть фаербагом, мы увидим примерно следующее:
<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>
Обратите внимание, что класс page_item, присваивается только ссылкам, вызванным функцией wp_list_pages, то есть фактически последующие изменения не коснутся ссылки на главную страницу.
Далее, если мы перейдем по ссылке на другую страницу, код html измениться следующим образом:
<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>
То есть, к текущей активной странице добавляется класс «current_page_item». А дальше как говорится дело техники, достаточно назначить соответствующий стиль этому классу в css-файле:
#menu ul li.current_page_item {
background: #4A7EB8;
}
В результате, мы получили выделение любой текущей активной страницы (кроме главной) светло-синим цветом (как на картинке в примере).
Если же вам нужно, чтобы главная страница также отмечалась в качестве активной, для этого нужно написать немного php-кода:
<div id="menu">
<ul>
<li class="<?php if (is_home()) { echo "current_page_item"; } ?>">
<a href="<?php echo get_settings('home'); ?>">Home</a>
</li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>
В вышеприведенном коде, задействован условный тег Woprdpress is_home(), который проверяет является ли текущая страница домашней, то есть главной, и если это условие выполняется, то к ней также добавляется класс current_page_item.
С помощью условных тегов WordPress, можно делать и другие интересные вещи, но об этом мы поговорим в следующей статье.
Вольный перевод статьи: WordPress: Active Page Tabs
Спасибо, буду разбираться
Спасибо большое за описанный пример. Но мне пришлось в дописывать в конец выражения в CSS «a». Без этого не хотело работать.
#menu ul li.current_page_item a {background: #4A7EB8;
}
В общем-то это немного странно, а попробуйте записать вот так:
#menu li.current_page_item{background: #4A7EB8;
}
и если после этого заработает, то это видимо моя вина,
ulздесь возможно лишний.dreamhelg, убрал ul, все равно работает только тогда, когда в конце a добавляю
Скажите, пожалуйста, а как поступить вот в таком случае?
Есть некое количество страниц — скажем, А, Б и В. Страница Б имеет несколько дочерних страниц (1, 2 и 3). Для вывода списка страниц в сайдбаре используется , то есть будет отображаться только список родительских страниц. Хотелось бы сделать так, чтобы при посещении какой-либо из дочерних страниц (1, 2, 3) в качестве текущей выделялась бы ссылка на её родительскую (Б).
Огромное спасибо за статью и прошу прощения за корявое объяснение. :)
Используется «depth» равная 1 — почему-то в предыдущем комментарии это пропало.
спасибо огромное! вы оказали неоценимую помощь) +1
Спасибо, почти все получилось.
Если для страниц прописывается команда — current_page_item, то какая команда прописывается если в меню проставлены ссылки на страницу по тэгам?
Здравствуйте!
Спасибо огромное, всё работает, но мне нужно, чтоб активная страница имела другой цвет шрифта, а не фона, т.е. мне необходимо заменить «background:…» на «color:…»
Но почему-то это не работает, может что-то с чем-то конфликтует?
приведу часть кода:
#menu a{
color: #fff;
}
#menu a:hover{
color:#AD7CA7;
}
#menu a:active{
color:red;
}
#menu li{
font: 14px Arial, Tahoma, Verdana, sans-serif;
display: inline;
padding: 5px 30px 5px 0px;
}
#menu .current_page_item {
color: #FFFF00;
font-weight:bold;
}
_____
font-weight:bold; работает, а color нет.
Помогите пожалуйста.
Решил действовать по схеме товарища «Жомарт», что отписался выше :)
#menu .current_page_item a {
color:#AD7CA7;
font-weight:bold;
}
c «a» на конце всё работает, думаю, что это связано с тем, что активная страница остаётся ссылкой, т.е. она кликабельна.
Теперь буду искать возможность отключения кликабельности активной страницы :)
Спасибо ещё раз!
Можно просто
ul li.current_page_item a {
cursor: default;
}
Спасибо огромное! Спустя полтора года снова понадобилась эта информация и набрёл на сайт, в комментариях увидел какого-то «Mental», а оказалось, что это я сам и есть :D
Спасибо большое ещё раз! Только сейчас прочитал ваш ответ ))
Спасибо большое за статью!
а как сделать чтобы класс вешался не current_page_item, а какой-то свой — active, например?
Спасибо! Долго голову ломал как меню выделить и много статей перечитал, с помощью ваших указаний разобрал за 30 минут и сделал)
кстати у меня нормально сработал такой код:
#menu ul li.current_page_item a{
color: #fff;
display: block;
text-decoration: none;
background:url(images/menu.jpg) repeat-x;
}
Но я теперь голову ломаю над другим как выделить категорию (меню категорий) когда ты находишься в статей от это категории =) Может знает кто?)
Спасибо друг!, подсказал.
ниже пример применения класса к произвольному меню header_menu
nav ul li.current_page_item a{
color: #429FD3;
}
Большое спасибо, вы — умница!