Вывод меню с помощью функции wp_nav_menu. Навигационные панели с помощью CSS. Более подробно про регистрацию и вывод меню в шаблоне
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus) .
Регистрируем меню
Add_action("after_setup_theme", function(){ register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)); });
Второй вариант регистрации меню (не знаю, на сколько он правильный, поэтому лучше использовать первый вариант)
If (function_exists("register_nav_menu")) { register_nav_menus(array("main_menu" => __("Primary menu", "crea"), "foot_menu" => __("Footer menu", "crea"),)); }
Выводим меню
Второй вариант вывода меню
"menu-header", "theme_location" => "primary")); ?>
Более подробно про регистрацию и вывод меню в шаблоне
Использование
wp_nav_menu(array("theme_location" => "" // (string) Расположение меню в шаблоне. (указывается ключ которым было зарегистрировано меню в функции "menu" => "", // (string) Название выводимого меню (указывается в админке при создании меню, приоритетнее чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется) "container" => "div", // (string) Контейнер меню. Обворачиватель ul. Указывается тег контейнера (по умолчанию в тег div) "container_class" => "", // (string) class контейнера (div тега) "container_id" => "", // (string) id контейнера (div тега) "menu_class" => "menu", // (string) class самого меню (ul тега) "menu_id" => "", // (string) id самого меню (ul тега) "echo" => true, // (boolean) Выводить на экран или возвращать для обработки "fallback_cb" => "wp_page_menu", // (string) Используемая (резервная) функция, если меню не существует (не удалось получить) "before" => "", // (string) Текст перед каждой ссылки "after" => "", // (string) Текст после каждой ссылки "link_before" => "", // (string) Текст перед анкором (текстом) ссылки "link_after" => "", // (string) Текст после анкора (текста) ссылки "items_wrap" => "", "depth" => 0, // (integer) Глубина вложенности (0 - неограничена, 2 - двухуровневое меню) "walker" => "" // (object) Класс собирающий меню. Default: new Walker_Nav_Menu));
Аргументы параметра $args
theme_location(строка)
Идентификатор расположение меню в шаблоне. Идентификатор, указывается при регистрации меню функцией register_nav_menu().
По умолчанию: ""
menu(строка)
Меню которое нужно вывести. Соответствие: id, слаг или название меню.
По умолчанию: ""
container(строка)
Чем оборачивать ul тег. Допустимо: div или nav.
Если не нужно оборачивать ничем, то пишем false: container => false.
По умолчанию: div
container_class(строка)
Значение атрибута class у контейнера меню.
По умолчанию: menu-{menu slug}-container
container_id(строка)
Значение атрибута id у контейнера меню.
По умолчанию: ""
menu_class(строка)
Значение атрибута class у тега ul.
По умолчанию: menu
menu_id(строка)
Значение атрибута id у тега ul.
По умолчанию: слаг меню
echo(логическое)
Выводить на экран (true) или возвратить для обработки (false).
По умолчанию: true
fallback_cb(строка)
Функция для обработки вывода, если никакое меню не найдено.
Передает все аргументы $args указанной тут функции.
Установите пустую строку » или ‘__return_empty_string’, чтобы ничего не выводилось, если меню нет.
По умолчанию: wp_page_menu
before(строка)
Текст перед тегом в меню.
По умолчанию: ""
after(строка)
Текст после каждого тега в меню.
По умолчанию: ""
link_before(строка)
Текст перед анкором каждой ссылки в меню.
По умолчанию: ""
link_after(строка)
Текст после анкора каждой ссылки в меню.
По умолчанию: ""
items_wrap(строка)
Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки.
По умолчанию: ""
depth(число)
Сколько уровень вложенных друг в друга ссылок показывать. 0 — все уровни.
walker(объект)
Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker(). По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже…
По умолчанию: Walker_Nav_Menu
item_spacing(строка)
Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard
По умолчанию: "preserve"
Пример
Выводить меню, только если оно существует
По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр fallback_cb как "__return_empty_string" :
Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));
Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в wordpress через панель управления, а также о том, как вывести его в любом месте вашего сайта с помощью функции wp_nav_menu, все будет намного проще, чем мои ранее написанные руководства по созданию меню.
Скачать исходники для статьи можно ниже
Нижеуказанное руководство основано на моей предыдущей статье –
Однако, здесь мы будем делать все проще (не будем трогать файл functions.php или использовать скрипты, чтобы сделать меню выпадающим), а именно научимся делать вертикальное меню или горизонтальное не выпадающее меню.
Приступим же!
1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.
Здесь создаем нужное нам меню.
Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:
2. Для вывода меню в wordpress будем пользоваться следующей функцией:
Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.
Для меню, созданного в нашем примере данная функция будет выглядеть следующим образом:
3. Вставляем меню в нужном месте нашего сайта.
Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.
Для примера возьмем стандартную тему wordpress – Twenty Twelve.
Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.
В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:
...
>Сохраняем изменения и переходим на свой сайт, смотрим, что у нас получилось:
Как видите меню у нас получается вертикальное, и это хорошо, если вам нужно вертикальное меню, однако, допустим, что нам нужно горизонтальное меню, тогда нам нужно прописать стили оформления для нашего меню – “rubrici”.
4. Прописываем стили меню.
Для начала, обернем функцию вывода нашего меню в новый блок, например “menu2”, для того чтобы прописать для него стили оформления.
То есть код в файле header.php (путь 3 данного руководства) будет выглядеть так:
...
>Следующий шаг, который нам нужно сделать – это прописать стили оформления для нашего нового блока (“menu2”), в котором и содержится наше новое меню (“rubrici”).
А для этого в панели управления wordpress, в левом меню, выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, а справа среди шаблонов выбираем файл – style.css.
Переходим в его коде в самый низ и вставляем следующий фрагмент:
#menu2 { padding: 0 0 0 20px; margin: 0; } #menu2 li { float: left; list-style: none; font: 12px Tahoma, Arial; } #menu2 li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; } #menu2 li a:hover { background: #1A4473; } #menu2 li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; }
После чего переходим на сайт и смотрим, что у нас получилось:
Как видите наше меню превратилось из вертикального в горизонтальное, осталось только подкорректировать стили оформления под свой сайт.
Например в данном примере нам нужно растянуть по ширине каждый пункт меню – за это отвечает атрибут:
Width: 70px;
Меняю его на:
Width: 170px;
После чего мое меню будет выглядеть следующим образом:
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
- , где в каждом пункте
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег