Как создать и вывести меню в wordpress – это просто с функцией wp_nav_menu. Навигационные панели с помощью CSS


В позапрошлой статье блога я писал про интересное нововведения последней версии 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 уже давно и очень хорошо зарекомендовала себя в области услуг раскрутка сайта , оптимизация и поисковое продвижение в интернете.

Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования 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 на




    • 

    2024 © gtavrl.ru.