Очередной блог фрилансерао моей работе в сети и не только

Название статьи говорит само за себя, сегодня я хочу рассказать как сделать в 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