21 Март 2012

Меню WordPress

Приветствую вас, уважаемый читатель. В данной публикации пойдет речь о работе с меню WordPress.

Начиная с третей версии WordPress получил функционал, позволяющий настраивать меню блога посредством админки. Это очень удобная и интересная функция. Давайте детально с ней разберемся.

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

Встраивать управляемое админкой меню будем все в ту же тему, разработанную во втором видеуроке курса верстки для WordPress.

Скачать исходники разрабатываемой темы (11.94 кБ, *.zip).

Для начала удалим содержимое блока <nav></nav> в файле index.php (строка 32), раньше там была жесткая HTML-верстка трех пунктов меню.

Вывод меню средствами WordPress

В освободившийся контейнер <nav></nav> будем выводить меню, настроенное в админке WordPress. Для достижения поставленной задачи необходимо выполнить следующие три пункта инструкций.

1. Зарегистрировать меню в файле functions.php нашей темы.

Для этого в functions.php мы опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), описанный в ядре WordPress 3 и выше, регистрирующий позиции меню.

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

В нашей теме было всего лишь одного горизонтальное меню в шапке сайта. Для примера работы с функцией register_nav_menus() я предлагаю зарегистрировать два меню. Одно из них вывести под шапкой, а второе перед подвалом.

Листинг 1. Регистрация двух меню. Файл function.php активной темы WordPress

function register_my_menus()
{
register_nav_menus
(
array( 'header-menu' => 'header-menu1', 'footer-menu' => 'footer-menu1')
);
}

В строке 5 листинга 1 мы как раз передаем массив аргументов стандартной функции WordPress register_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога: 'header-menu' => 'header-menu1'. Зарегистрированная позиция в шаблоне будет носить название header-menu, а в админке WordPress будет представлена как header-menu1. Не пугайтесь, ниже я подробно поясню, что имеется ввиду.

Аналогичным образом второй аргумент 'footer-menu' => 'footer-menu1' регистрирует позицию для меню над подвалом.

Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.

Мы уже обсуждали работу с хуками в видокурсе «Разработка плагина для WordPress». Вкратце, хук — это событие генерируемое движком в тот или иной момент. Например, при отображении страницы блога, до отправки заголовков, возникает тот самый хук init, который мы будем использовать. В WordPress сущесвует множество других хуков (хуки возникают при формировании HEAD-части страницы, при отображении меню админки и т.д.) и на каждый из них можно прицепить выполнение той или ной функции. Для запуска функции при возникновении хука используется метод add_action().

В файле functions.php нашей темы мы уже применяли метод add_action для отключения лишнего содержимого раздела HEAD в WordPress. Можно прямо под существующей инструкцией add_action('init', 'remheadlink'); указать еще одну (см. листинг 2).

Листинг 2. Запуск функции register_my_menus хуком init. Файл functions.php

if (function_exists('register_nav_menus'))
{
	add_action( 'init', 'register_my_menus' );
}

Как видно из листинга 2, мы применяем условный оператор «if» для проверки, можно ли в данной версии WordPress использовать функцию регистрации меню — register_nav_menus(). Ведь движок WordPress может быть старым и не поддерживать работу с меню. Метод function_exists() вернет TRUE, если register_nav_menus() знаком данной версии WordPress.

Если WordPress умеет работать с функцией register_nav_menus, выполнится метод add_action( 'init', 'register_my_menus' ), который, при возникновении хука init запустит функцию register_my_menus (описанную в листинге 1).

2. Необходимо указать место для отображения зарегистрированных типов меню в файлах верстки нашей темы.

В нашем случае зарегистрировано два меню: header-menu и footer-menu. Откроем на редактирование файл index.php нашей темы и укажем позиции для вывода наших меню.

Как мы и договаривались,  header-menu будет выводиться под шапкой в блоке <nav></nav>. Для этого используем код листинга 3.

Листинг 3. Указываем место для вывода меню header-menu. Файл index.php активной темы

<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>

Ну и где-нибудь над подвалом аналогичным образом укажем место отображения footer-menu (см. листинг 4).

Листинг 4. Указываем место для вывода меню footer-menu. Файл index.php активной темы

<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
</nav>

3. Настройка меню в админке WordPress.

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

Работа с меню в WordPress

Рис. 1. Раздел по работе с меню WordPress админки блога.

Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.

Создание меню в WordPress

Рис. 2. Создание меню WordPress.

Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.

Расстановка зарегистрированных меню на позиции

Рис. 3. Закрепление за позициями соответствующих меню WordPress.

После этого, пользуясь функционалом, представленным на рис. 4., можно добавлять выбранный тип ссылок в меню, открытое на вкладке интерфейса, представленного на рис. 2.

Добавление пунктов меню в WordPress

Рис. 4. Функционал по добавлению пунктов в меню.

Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).

Вложенность пунктов меню

Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.

Вложенность пунктов меню для выпадающего меню

Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.

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

Меню уже отображаются на страницах WordPress

Рис. 7. Отображение двух меню на страницах блога.

Рассмотрим HTML-структуру меню header-menu-2.

Листинг 5. HTML-структура меню header-menu-2, сгенерированная WordPress автоматически

<nav>
    <div class="menu-header-menu-2-container">
        <ul id="menu-header-menu-2" class="menu">
            <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://www.sdelaysite.com">Мой блог</a>
              <ul class="sub-menu">
                <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://www.sdelaysite.com">Еще одна ссылка</a>
                  	<ul class="sub-menu">
                  		<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://www.sdelaysite.com">Третья ссылка</a></li>
                  	</ul>
                </li>
              </ul>
            </li>
        </ul>
    </div>
</nav>

Как видно из листинга 5, WordPress неплохо справляется с задачей формирования HTML-кода меню.

Все меню охватываются тегами <ul></ul>, причем заданное название меню участвует в формировании атрибута id (id="menu-header-menu-2"), поэтому название меню в админке блога должно быть набрано латиницей (см. рис. 2).

Вложенные пункты меню охватываются дополнительными тегами <ul></ul>. На этом факте можно отлично сыграть, при верстке выпадающего меню в WordPress.

Выпадающее меню в WordPress средствами jQuery

Для организации выпадающего меню в WordPress мы будем пользоваться библиотекой jQuery. Желающие могут познакомится с моим коротким видеокурсом «jQuery — легкий старт» для быстрого изучения основ программирования на jQuery.

Раз мы решили задействовать jQuery, то давайте подключим его к нашей теме. Для этого необходимо указать код листинга 6 в файле index.php обязательно до вызова функции wp_head() (т.е., например, в строке 9 файла index.php).

Листинг 6. Подключение jQuery в WordPress

<?php wp_enqueue_script('jquery'); ?>

jQuery будет использоваться для плавного «появления» вложенных пунктов меню.

Для начала вложенные пункты нужно скрыть. Используем для этого стили, которые укажем в файле style.css нашей темы (см. листинг 7).

Листинг 7. Скрываем вложенные пункты. Файл style.css

ul.menu ul.sub-menu
{
    display: none;
    position: relative;
    left: 50px;
}

Пояснение к листингу 7

Все ul, имеющие класс sub-menu (именно такой класс WordPress автоматически задает для тега ul, охватывающего вложенные пункты меню) и попавших в ul с классом menu (menu — класс, которым награждается внешний ul автоматически) скрыть свойством display: none.

Свойство position: relative позволяет сместить пункты меню относительно их первоначального положения, что я и делаю свойством left: 50px.

Дальнейшее оформление пунктов меню не входит в задачи данной статьи. Об этом мы поговорим в следующих публикациях блога.

Теперь остается подключить jQuery-скрипт, который будет заниматься отображением скрытых пунктов меню.

Скрипт мы спрячем в файл script.js, который сохраним в папке с нашей темой. Сам скрипт приведен в листинге 8.

Листинг 8. jQuery-скрипт, отображающий и прячущий вложенные пункты меню

var $j = jQuery.noConflict();
$j(document).ready(function()
{
	$j('.menu li').hover
	(
        function ()
		{
			//показать подменю
           $j("ul:first", this).slideDown(100);
        },
        function ()
		{
            //скрыть подменю
             $j('ul:first', this).slideUp(100);
        }
	);
})

Скрипт очень простой, но действует результативно.

Метод jQuery hover() чувствует наведение указателя мыши на тег <li> в меню и, если мышь находится над указанным элементом, срабатывает функция «показать подменю», если мышь уходит с элемента — выполняется функция «скрыть подменю».

Для отображения пунктов подменю используется метод slideDown(). Данный метод воздействует на первый ul, вложенный в данный элемент li — добиться такого выбора объекта воздействия можно селектором  $j("ul:first", this).

Аналогичным образом работает метод slideUp, скрывающий подменю.

Остается подключить файл script.js с jQuery-скриптом (листинг восемь) к нашей теме. Для этого в разделе <head> файла index.php активной темы укажем следующую строку:

<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>

Это стандартное подключение скрипта из внешнего файла. Т. к. файл script.js находится в папке с активной темой, путь к ней можно узнать благодаря использованию стандартного метода WordPress bloginfo('stylesheet_directory').

Рекомендую ознакомится с видеоуроком верстки меню WordPress.

С уважением, Андрей Морковин.

MAXCACHE: 0.87MB/0.00024 sec