Создание произвольных меню в WordPress. Функция wp_nav_menu

Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!

Цель

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

Этот трюк будет более полезным для навигации с большим количеством ссылок, как на скриншоте ниже. Вы можете конденсировать все кнопки в элегантно выпадающее меню.

Nav HTML разметка

Вот разметка для навигации. Тег необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.

Portfolio
Illustration
Web Design
Print Media
Graphic Design

CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента

. Это позволит кнопкам меню выстроиться по левому краю, по центру или вправо, указав text-align на

/* 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 элемент в относительное положение, чтобы возможно было поместить

указав 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; } }
  Высоких конверсий!
  
  Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (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"));
  
  В позапрошлой статье блога я писал про интересное нововведения последней версии 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 уже давно и очень хорошо зарекомендовала себя в области услуг раскрутка сайта , оптимизация и поисковое продвижение в интернете.
  
  Создание меню в Wordrpess, а также сортировка страниц и категорий часто становится довольно сложной проблемой для начинающих вебмастеров. В связи с этим я решил написать небольшое руководство, в котором мы подробно рассмотрим, как создавать произвольные меню в WordPress. С их помощью вы сможете самостоятельно создавать произвольные меню, добавлять или удалять пункты меню, изменять их название, расположение и вложенность.
  
  В одной из предыдущих статей мы уже рассматривали способ, . К счастью на данный момент в WordPress появилась встроенная функция, которая позволяет создавать произвольные меню, не прибегая к использованию плагинов. Данная функция доступна во всех версиях WordPress, начиная с версии 3.0.
  
  Сразу хочу обратить ваше внимание на то, что поддержка произвольных меню включена не во всех шаблонах. В связи с этим статья будет состоять из двух частей. В первой части статьи мы рассмотрим, как создавать пункты меню в WordPress через административную панель, если произвольные меню уже подключены в шаблоне.
  
  Во второй части статьи мы научимся самостоятельно включить поддержку произвольных меню в WordPress и настраивать вывод меню через wp_nav_menu . Эти знания вам пригодятся на случай, если в вашем шаблоне не предусмотрено использование произвольных меню или же вы сами пишете или и хотите добавить туда возможность создания произвольных меню.
  Создание меню и пунктов произвольного меню через административную панель WordPress
  Для создания меню переходим в Административную панель – Внешний вид – Меню и смотрим, включена ли поддержка произвольных меню в вашем шаблоне. Если нет, то можем пока пропустить данный шаг и перейти сразу ко второй части статьи. Если же меню уже поддерживается, то у вас откроется страница примерно следующего содержания.
  
  Для создания нового меню, вписываем его название в поле «Введите заголовок меню» и жмем «Создать меню».
  
  Лично я предпочитаю прописывать все названия латинскими буквами во избежание каких-либо проблем в будущем. Кириллические названия тоже поддерживаются, но я не рекомендовал бы вам их использовать. Это лично мое мнение.
  
  После создания меню нам нужно выбрать его в блоке «Области темы», который находится в левой колонке, после чего сохранить результат, нажав на кнопку «Сохранить».
  
  В данном случае тема оформления поддерживает лишь одно произвольное меню, поэтому особо выбирать не приходится. Нужно просто выбрать созданное нами меню из выпадающего списка и сохранить результат. Если же тема поддерживает два или более меню, то нужно выбирать меню исходя из его расположения в шаблоне.
  
  После сохранения результатов для добавления новых пунктов в меню достаточно отметить нужные категории или страницы и нажать кнопку «Добавить в меню».
  
  После этого их можно как угодно перемещать относительно друг друга и изменять вложенность.
  
  Итак, мы рассмотрели, как создавать произвольное меню через административную панель WordPress, как добавлять в него новые пункты и производить их настройку. Теперь давайте перейдем ко второй части статьи и научимся включать поддержку произвольных меню в WordPress и выводить их в шаблоне при помощи функции wp_nav_menu.
  Включение поддержки произвольных меню в WordPress
  Первым делом нам нужно зарегистрировать использование произвольных меню и самих меню. Для этого открываем на редактирование файл function.php вашей темы оформления и добавляем следующий код.
  
  Register_nav_menus(array("top" => "Верхнее меню"));
  
  Где «top» — идентификатор меню, а «Верхнее меню» — название месторасположения.
  
  Если нужно добавить несколько меню, то перечисляем их через запятую.
  
  Register_nav_menus(array("top" => "Верхнее меню", "left" => "Левое меню"));
  
  После добавления данного кода поддержка произвольных меню будет включена автоматически. Убедиться в этом вы можете, перейдя в Административную панель – Внешний вид – Меню. Но самой регистрации меню недостаточно. Меню нужно еще вывести в шаблоне. Для этого мы воспользуемся специальной функцией wp_nav_menu.
  Вывод произвольного меню. Функция wp_nav_menu
  Как уже говорилось выше, выводить произвольные меню мы будем при помощи функции wp_nav_menu, которая может принимать следующие параметры.
  
  $args = array("menu" => "", // Название меню (string). "container" => "div", // Контейнер меню (string). В него помещается список ul. "container_class" => "", // Класс контейнера (string). "container_id" => "", // Id контейнера (string). "menu_class" => "menu", // Класс тега ul (string). "menu_id" => "", // Id тега ul (string). "echo" => true, // Выводить на экран или возвращать для обработки (boolean). "fallback_cb" => "wp_page_menu", // Резервная функция на случай, если произвольное меню не существует (string). "before" => "", // Текст перед каждой ссылки (string). "after" => "", // Текст после каждой ссылки (string). "link_before" => "", // Текст перед анкором ссылки (string). "link_after" => "", // Текст после анкора ссылки (string). "depth" => 0, // Глубина вложенности (integer). 0 - неограниченно, 2 - двухуровневое произвольное меню. "walker" => , // Класс, собирающий меню. Default: new Walker_Nav_Menu. (object). "theme_location" => ""); // Расположение меню в шаблоне. Указываем идентификатор меню. (string).
  
  При этом параметры можно передавать как через массив, так и через строку. В любом случае меню будет работать. Для наглядности рассмотрим оба варианта.
  
  Передача параметров через массив
  
  Передача параметров через строку
  
  Wp_nav_menu("menu_id=topmenu&theme_location=top&container=");
  
  Лично я предпочитаю второй вариант, так как он более компактный, на мой взгляд. В любом случае результатом работы функции будет следующий код.
  - Пункт 1
  - Пункт 2
  - Пункт 3
  На этом я заканчиваю данную статью. Основные моменты мы рассмотрели и в 99% случаев данной информации вам будет достаточно для самостоятельного создания произвольных меню в WordPress. Если же у вас возникнут какие-то вопросы, вы всегда сможете задать их в комментариях.
  
  На этом все. Удачи вам и успехов в создании сайтов на WordPress.
  
  Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
  Создание навигации
  Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка

Печать

Также интересно:

Dark Sector: Прохождение Глава VIII: Неестественная история

Что делать если на компе нету диска D?

Как откатить или удалить проблемное обновление Windows Откат к предыдущей сборке windows 10

Рекомендуем почитать:

2023-08-11 00:02:15

Оператор для работы с наборами UNION Объединение запросов union

2023-08-11 00:02:15

IBM создала самый мощный в мире компьютер Топ 10 самых мощных компьютеров в мире

2023-08-10 00:03:18

Мы знаем далеко не все: какие социальные сети существуют в интернете Путешествия и отдых

В продолжение темы:

Windows

Компьютеры с процессором intel i5 Конфигурация тестовых стендов

Часть вторая : "Важнейшие характеристики каждого семейства процессоров Intel Core i3/i5/i7. Какие из этих чипов представляют особый интерес" Введение Сначала мы приведём...

Новые статьи