Управление меню

Меню — одна из важнейших частей дизайна. Меню должно быть удобным для посетителя, должно отражать существующую структуру страниц и в то же время оставаться простым, понятным и не перегруженным пунктами. Представление меню — важнейшая деталь в процессе разработки сайта. Всегда стоит помнить о том, что меню — это первое, к чему обычно обращается пользователь при изучении ресурса. Существует огромное множество различных подходов, позволяющих сделать визуализацию меню необычной и в то же время интуитивно понятной.

Вид меню должен зависеть от того, какой сайт вы разрабатываете. Одни сайты WordPress построены на основе страниц (например, статичные сайты), другие — на базе различных элементов, придающих динамичность и неоднородность проекту. В любом случае, меню должно быть подобрано таким образом, чтобы отражать реально существующую структуру. Иногда этого довольно сложно достичь: приходится вносить в код значительные корректировки. В следующем разделе мы рассмотрим использование страниц WordPress в меню.

Надлежащее использование страниц

Большинство сайтов WordPress построены на основе страниц, которые обычно и отражаются в меню. Конечно, можно было бы обойтись и без меню, отредактировав существующие шаблоны и добавив к ним ссылки на соответствующие страницы, однако в таком случае пришлось бы редактировать шаблон каждый раз, когда будет добавлена новая страница, что очень неудобно.

Изящный, небольшой тег шаблона wp_page_menu() позволяет решить проблему с отображением меню для страниц. Для того чтобы выполнить необходимую сортировку страниц, можно воспользоваться параметром sort_column:

<?php wp_page_menu('sort_column=menu_order'); ?>

В качестве menu_order указывают надлежащий порядок сортировки страниц в меню. Можно выполнить сортировку в алфавитном порядке (post_title), по дате публикации (post_date), по дате внесения изменений (post_modified) и т.д. Несмотря на то, что практически все существующие возможности, включая сортировку страниц, можно реализовать как с помощью тега wp_page_menu(), так и с помощью wp_list_pages(), первый вариант является более предпочтительным.

Другим полезным параметром, который принимает wp_page_menu(), является show_home. В зависимости от его значения — true (1) или false (0) — в меню будет отображаться или нет ссылка Home (На главную). Название данной ссылки можно менять путем присваивания указанному параметру какой-либо строки.

wp_page_menu() идеально подходит для создания меню, основанного на страницах. Вы всегда можете исключать различные пункты меню, определять их стилизацию и т.д. Подробности относительно использования wp_page_menu() можно узнать в кодексе: codex.wordpress.org/Template_Tags/wp_page_menu.

К сожалению, хорошего решения по объединению рубрик и страниц в меню, на текущий момент не существует. В связи с этим, если возникает указанная необходимость, удобнее воспользоваться виджетом, отвечающим за вывод регулярного текста.

«Раздвижные двери»

Методика под названием «раздвижные двери» позволяет использовать графическое изображение в качестве бэкграунда для меню без указания фиксированной ширины последнего. Существует множество справок и подробных статей для осуществления указанной методики, поэтому мы ограничимся лишь кратким рассмотрением данного вопроса.

Для начала создадим заготовку нашего меню:

<ul id="navigation">
<li><a href="menu-item-1">First Item</a></li>
<li><a href="menu-item-2">Second Menu Item</a></li>
<li><a href="menu-item-3">Third One</a></li>
<li><a href="menu-item-4">Number Four</a></li>
<li><a href="menu-item-5">Fifth!</a></li>
</ul>

Допустим, мы хотим, чтобы пункты меню были представлены как кнопки с закругленными углами. Это выглядит довольно эстетично и позволяет привлечь внимание к меню. Однако, для того чтобы применить бэкграундное изображение к пунктам меню, они должны быть фиксированного размера. Как же поступить?

Решение довольно просто: необходимо разрезать изображение на три вертикальных части.

Первая и третья части изображения будут содержать соответственно левый и правый закругленный угол, а вторая — все, что находится между ними (обычно используется заливка каким-либо цветом).

Добавим к каждому пункту меню элемент span:

<ul id="navigation">
<li><a href="menu-item-1"><span>First Item</span></a></li>
<li><a href="menu-item-2"><span>Second Menu Item</span></a></li>
<li><a href="menu-item-3"><span>Third One</span></a></li>
<li><a href="menu-item-4"><span>Number Four</span></a></li>
<li><a href="menu-item-5"><span>Fifth!</span></a></li>
</ul>

Теперь все, что нам необходимо: отредактировать стили CSS. Ссылка будет содержать первую часть изображения, фиксированную по левому краю, и определять требуемый цвет бэкграунда, т.е. вторую часть изображения. Третья часть изображения будет содержаться в span. Таким образом мы получили пункт меню с динамически меняющейся шириной.

Соответствующие стили CSS:

ul#navigation li {
fl oat:left;
padding: 5px;
list-style:none;
}
ul#navigation a:link, ul#navigation a:visited {
display:block;
}
ul#navigation a:hover, ul#navigation a:active {
background: #888 url(corners-left.gif) no-repeat left;
fl oat:left;
}
ul#navigation a span {
fl oat:left;
display:block;
}
ul#navigation a:hover span {
fl oat:left;
display:block;
background: url(corners-right.jpg) no-repeat right;
}

С помощью тега шаблона wp_page_menu() приведенный выше пример стилизации можно осуществить следующим образом:

<?php wp_page_menu('link_before=<span>&link_after=</span>'); ?>

Указанный сниппет позволяет добавить тег span к каждой ссылке меню.

Вывод рубрик вместо страниц в меню более сложен. Он построен на использовании wp_list_categories() и preg_replace. Мы отыскиваем теги li и a в коде меню, и затем добавляем к каждой ссылке открывающий и закрывающий теги span. В wp_list_categories() необходимо будет передать параметр echo=0, запрещающий отображение контента, пустой параметр title_li, отвечающий за вывод заголовка для списка рубрик, и параметр depth=1, отвечающий за вывод рубрик только верхнего уровня.

Ниже приведен код, отвечающий за вывод рубрик в меню:

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>',
wp_list_categories('title_li=&echo=0&depth=1')); ?>

Существует и третье решение. Оно основано на использовании встроенного менеджера ссылок, с помощью которого можно создать рубрику ссылок, отведенную специально под меню. Вывести указанную рубрику можно будет посредством wp_list_bookmarks(). Создание меню становится возможным, поскольку wp_list_bookmarks() поддерживает параметры link_before и link_after.

Для большей ясности приведем пример, в котором определяется вывод меню из рубрики с ID=15:

<?php wp_list_bookmarks('category=15&title_li&link_before=<span>&link_after=</span>'); ?>