Навигационные панели с помощью CSS. Создание произвольных меню в WordPress. Функция wp_nav_menu
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (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"),)); }
Выводим меню
Второй вариант вывода меню
Более подробно про регистрацию и вывод меню в шаблоне
Использование
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"));
Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!
Цель
Цель этого урока показать вам, как из обычного меню сделать выпадающее меню на маленьком дисплее.
Этот трюк будет более полезным для навигации с большим количеством ссылок, как на скриншоте ниже. Вы можете конденсировать все кнопки в элегантно выпадающее меню.
Nav HTML разметка
Вот разметка для навигации. Тег необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.
- Portfolio
- Illustration
- Web Design
- Print Media
- Graphic Design
CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента
- элементе.
- указав display:none, но оставили.current
- отображающийся в виде блока. Затем на NAV ховере, мы поставили все
- на display:block (это даст результат выпадающего списка). Мы добавили графический значок на проверку.current элемента, чтобы указать, что этот элемент является активным. Для выравнивания меню по центру и справа, используйте левую и правую собственности позиционирования
- списка.
- items */ margin: 0; } .nav .current { display: block; /* show only current
- item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
Высоких конверсий!
В позапрошлой статье блога я писал про интересное нововведения последней версии wordpress — специальный механизм создания и управления . Теперь стало намного удобнее и проще обычным пользователям создавать различные по сложности меню, которые могут состоять не только страницы или категории блога, но и иметь ссылки на любые URL. Для отображения меню в шаблоне используется специальная функция wp_nav_menu — про нее сегодня и расскажу.
Если в админке wordpress нету раздела меню, то его можно активировать добавлением специального кода в файл functions.php
Здесь first — название созданного нами меню. Это использование функции в общем случае без виджетов, с ними там нужно будет немного по другому работать. Тем не менее функция wp_nav_menu может выводиться и без аргументов, в результате чего будут «просматриваться» разные ситуация — сначала совпадение по названию меню, если для него указан хотя бы один пункт меню, в противном случае будет просто отображено непустое меню ну и т.п. Но опять же советую просто использовать приведенный выше код и не разбираться потом что должна выводить функция без аргументов. Ее синтаксис выглядит следующим образом:
Здесь используются следующие параметры:
$menu — выбранный идентификатор для меню — ID, slug или название меню.
$container — меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.
$container_class — указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.
$container_id — можно добавить контейнеру ID, по умолчанию не указано.
$menu_class — класс для элемента меню UL, его значение — menu.
$menu_id — ID для элемента ul, по умолчанию равно значению menu-{slug}
$echo — если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.
$fallback_cb — если меню не существует, вызывается функция wp_page_menu.
$before — задает текст, который выводится перед ссылкой А.
$link_before — выводит фразу перед текстом ссылки, не задано.
$link_after — выводится после текста ссылки, тоже пустое.
$depth — задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.
$walker — какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.
$theme_location — локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.
Примеры использования функции wp_nav_menuСамый простой код, приведенный в кодексе:
Убираем контейнер DIV из меню
В принципе, ничего сложного в создании и управлении меню wordpress 3.0 нет. Разработчики значительно упростили процедуру работы и расширили возможности данного элемента навигации. Решение часто используется во множестве задач по шаблону, например, при создании для мобильной и десктопной версией. Чуть позже добавлю еще парочку сниппетов по теме.
P.S. Постовой. Интересный и полезный вебмастерам Блог по SEO , где вы найдете ответы на интересующие вас вопросы по seo.
Компания Aweb уже давно и очень хорошо зарекомендовала себя в области услуг раскрутка сайта , оптимизация и поисковое продвижение в интернете.
@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all
/* nav */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }
Центр и выравнивание по правому краю
Как уже упоминалось выше, вы можете изменить выравнивание кнопок с помощью “text-align”.
/* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }
Поддержка Internet Explorer
HTML5 тег и медиа запросы не поддерживаются Internet Explorer 8 и старше версиями. Включите CSS3-mediaqueries.js (или respond.js) и html5shim.js, чтобы обеспечить резервную поддержку. Если вы не хотите добавлять html5shim.js, то тогда замените тег на тег.
Здесь начинается самое интересное - создание респонсивности меню с медиа запросами! На 600px мы установили nav элемент в относительное положение, чтобы возможно было поместить
- список меню вверху с абсолютной позицией. Мы скрыли все элементы