Приложения и Книги 

CSS и HTML5: Респонсив навигационное меню. Добавляем меню в свой шаблон на CMS WordPress

В позапрошлой статье блога я писал про интересное нововведения последней версии 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-тега списка

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Отправить