О чем молчит интернет

Конечно, же, чтобы приступить к введению в страницу сайта меню необходимо, чтобы в админке Wordpess существовала возможность введения меню. Однако, в админке на данный момент отсутствует такая возможность. Что же делать?

Для этого нам надо научить админ-панель такой возможности. Как это сделать, вы узнаете в данной статье.

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

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

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

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

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

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

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

В строке 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

Как видно из листинга 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 активной темы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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