Конечно, же, чтобы приступить к введению в страницу сайта меню необходимо, чтобы в админке Wordpess существовала возможность введения меню. Однако, в админке на данный момент отсутствует такая возможность. Что же делать?
Для этого нам надо научить админ-панель такой возможности. Как это сделать, вы узнаете в данной статье.
Вывод меню средствами WordPress
Для достижения поставленной задачи необходимо выполнить следующие три пункта инструкций.
1. Зарегистрировать меню в файле functions.php нашей темы.
Создаем файл functions.php, в котором опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), регистрирующий позиции меню.
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 мы как раз передаем массив аргументов стандартной функции WordPressregister_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога:'header-menu' => 'header-menu1'. Зарегистрированная позиция в шаблоне будет носить названиеheader-menu, а в админке WordPress будет представлена как header-menu1.
Аналогичным образом второй аргумент 'footer-menu' => 'footer-menu1' регистрирует позицию для меню над подвалом.
Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.
Листинг 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).
Естественно, что вначале мы делаем проверку возможности добавления меню, а только потом - регистрируем. Окончательный листинг будет таков:
|
if(function_exists('register_nav_menus'))
{
add_action( 'init', 'register_my_menus');
}
|
|
function register_my_menus()
{
register_nav_menus
(
array( 'header-menu'=> 'header-menu1', 'footer-menu'=> 'footer-menu1')
);
}
|
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 вы увидите специальный пункт, отвечающий за работу с меню.
Рис. 1. Раздел по работе с меню WordPress админки блога.
Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.
Рис. 2. Создание меню WordPress.
Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.
Рис. 3. Закрепление за позициями соответствующих меню WordPress.
После этого, пользуясь функционалом, представленным на рис. 4., можно добавлять выбранный тип ссылок в меню, открытое на вкладке интерфейса, представленного на рис. 2.
Рис. 4. Функционал по добавлению пунктов в меню.
Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).
Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.
Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.
Выпадающее меню в WordPress средствами jQuery
Для организации выпадающего меню в WordPress мы будем пользоваться библиотекой jQuery.
Раз мы решили задействовать jQuery, то давайте подключим его к нашей теме. Для этого необходимо указать код листинга 6 в файле index.php обязательно до вызова функции wp_head().
Листинг 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 активной темы укажем следующую строку:
|
1
|
<scriptsrc="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>
|
Это стандартное подключение скрипта из внешнего файла. Т. к. файл script.js находится в папке с активной темой, путь к ней можно узнать благодаря использованию стандартного метода WordPress bloginfo('stylesheet_directory').
Без рубрики 
No Comments