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

Дата публикации:Сентябрь 17, 2010

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

В теме Notes Blog Core существует специальная область Submenu, располагаемая под основным заголовком. По умолчанию она пуста, поскольку не все люди нуждаются в отображении меню, однако, если такая необходимость все-таки возникла, достаточно поместить в эту область обычный неупорядоченный список. Зона виджетов Submenu определена в файле functions.php:

register_sidebar(array(
'name' => 'Submenu',
'id' => 'submenu',
'before_widget' => '<div id="submenu-nav">',
'after_widget' => '</div>',
'before_title' => false,
'after_title' => false
));

Собственно, участок кода, отвечающий за зону виджетов и размещенный в файле header.php, имеет следующий вид:

<div id="header">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" name="top"><?php
bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h1>
</div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Submenu') ) : ?><?php endif; ?>

В пределах div#header задается заголовок блога и его краткое описание. PHP-сниппет отвечает за поиск области виджетов с названием Submenu.

Для отображения меню применяется следующий вид разметки:

<ul>
<li>[menu item]</li>
<li>[menu item]</li>
<li>[menu item]</li>
</ul>

С помощью CSS можно задавать представление меню:

div#submenu-nav
{
width:100%;
float:left;
border: 1px solid #444;
border-width: 0 0 1px 1px;
border-left: 1px dotted #e8e8e8;
}
div#submenu-nav ul {}
div#submenu-nav ul li { list-style: none; fl oat:left; padding: 8px;
border: 1px dotted #e8e8e8; border-width: 0 1px 0 0; }

Естественно, представление меню должно соответствовать стилевой гамме вашего проекта.

Для того, чтобы правильно использовать рассмотренный выше метод, необходимо создать область виджетов и разместить в ней виджет, выполняющий добавление произвольного текста. В качестве данного текста вносится HTML-код, ответственный за представление меню. Стилевое оформление меню прорабатывается отдельно и записывается в CSS файл проекта.

Другим удобным решением является размещение списка страниц в области виджетов Submenu (в терминах темы Notes Blog Core). Подобный метод позволяет управлять представлением и порядком размещения страниц в меню. Однако, нужно отметить, что виджет, отвечающий за добавление страниц, отличается одной неудачной особенностью: он выводит дурацкий заголовок, даже если данное поле оставлено пустым. Для решения указанной проблемы достаточно установить плагин Widgets Reloaded (wordpress.org/extend/plugins/widgets-reloaded/). Он позволяет указывать те страницы, которые будут отображаться в меню, и задавать глубину вложения страниц (обычно глубина равна единице, что означает отображение страниц только верхнего уровня). Также, в том случае, если поле заголовка оставлено пустым, никаких дополнительных строк выведено не будет.

Поделиться

Оставить комментарий

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Предыдущая запись:

Следующая запись: