Название статьи говорит само за себя, сегодня я хочу рассказать как сделать в WordPress довольно простую, но все же весьма полезную функцию – выделение активной страницы.
Вы удивитесь, насколько просто и легко можно реализовать это в WordPress, дело в том что здесь для этого уже все предусмотрено, вам фактически нужно только прописать в css-файле стиль активной страницы.
Разберем это на простом примере. Ниже приведен небольшой фрагмент кода, для отображения навигации по страницам в WordPress.
[php]
<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>
[/php]
Теперь, если сохранить страницу как html, или посмотреть фаербагом, мы увидим примерно следующее:
[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>
[/html]
Обратите внимание, что класс page_item, присваивается только ссылкам, вызванным функцией wp_list_pages, то есть фактически последующие изменения не коснутся ссылки на главную страницу.
Далее, если мы перейдем по ссылке на другую страницу, код html измениться следующим образом:
[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>
[/html]
То есть, к текущей активной странице добавляется класс “current_page_item”. А дальше как говорится дело техники, достаточно назначить соответствующий стиль этому классу в css-файле:
[css]
#menu ul li.current_page_item {
background: #4A7EB8;
}
[/css]
В результате, мы получили выделение любой текущей активной страницы (кроме главной) светло-синим цветом (как на картинке в примере).
Если же вам нужно, чтобы главная страница также отмечалась в качестве активной, для этого нужно написать немного php-кода:
[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>
[/php]
В вышеприведенном коде, задействован условный тег Woprdpress is_home(), который проверяет является ли текущая страница домашней, то есть главной, и если это условие выполняется, то к ней также добавляется класс current_page_item.
С помощью условных тегов WordPress, можно делать и другие интересные вещи, но об этом мы поговорим в следующей статье.
Вольный перевод статьи: WordPress: Active Page Tabs
Leave a Reply to Жомарт Cancel reply