Как создать меню в вордпресс

Приветствую друзья. Данная статья будет полезна в первую очередь новичкам, познающим основы. А расскажу я о том, как сделать выпадающее меню на сайте WordPress.

Есть несколько вариантов развития событий:

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

Для начала рассмотрим 1-й вариант, когда тема оформления имеет поддержку выпадающего меню.

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

1. Заходим в админку вордпресса. По умолчанию она находится по адресу http://доменсайта/wp-admin
2. Находим меню Внешний вид — Меню.
   
3. Если у вас уже создано меню, то просто выбираем из списка нужную нам область. Если нет, то создаем новое меню.
   
4. Для того что бы сделать выпадающее меню вы можете перетаскивать блоки с элементами меню, создавая древовидную структуру. Тем самым мы задаем иерархию, родительские разделы находятся на одном уровне слева, дочерние пункты которые должны выпадать, будут чуть правее внутри.
   

Создание мега-меню на WordPress + Elementor

Сохраняем и проверяем на страницах сайта, как теперь выглядит наша навигация. Наводим мышку на нужный пункт и смотрим:

Отлично, все работает! Но что делать, когда вы наводите мышку на нужный пункт, а ничего не выпадает? Скорей всего ваш шаблон не поддерживает многоуровневое меню и придется действовать по другому.

Как в Вордпрессе сделать выпадающее меню если шаблон не поддерживает

Самый простой вариант — установить плагин. Самый сложный — допиливать вручную необходимый функционал, внося правки в код шаблона и в верстку. Самый радикальный — сменить шаблон

Второй вариант пока не рассматриваем ибо статья для новичков, а ковыряние в коде не получится описать так, что бы описание было универсальным — детали могут меняться в зависимости от вашего шаблона. Так что рассмотрим 1 вариант — плагин.

Создаем выпадающее меню на WP плагином

Плагинов меню для Вордпресса довольно много. Есть замороченные с серьезным функционалом и большими возможностями, типа Max Mega Menu либо специально адаптированные менюшки для мобильных устройств вроде Responsive Menu.

Для наших целей вполне подойдет плагин Dropdown Menu Widget.

Устанавливаем его из админки, активируем и заходим в настройки. Там их достаточно много, можно настроить выбрать стили, настроить внешний вид, шрифты, цвета, ориентацию и т.д. При желании можно вносить свои стили CSS если вы разбираетесь в этом.

Рассмотрим основные настройки:

В меню Dropdown Menu Theme можно выбрать готовый стиль оформления менюшки.

В Menu Type указываем название нашей менюшки, которую мы создавали в админке вордпресса, что бы она автоматически подгрузилась плагином.

После того как установите нужные вам косметические настройки, сохраняем изменения и копируем шорткод

Его необходимо вставить в код шаблона, туда где вы хотите выводит ваше меню. Если речь идет об основной навигации, то как правило это файл шаблона header.php. Перед редактированием сохраните на всякий случай оригинал файла. Ищем там вывод нашего старого меню и заменяем на новый код:

Найти обычно не сложно, название классов будет что-то вроде nav, navi, navigation и т.п. Удаляем старый код и вставляем шорткод .

Сохраняем, заходим на сайт и любуемся новым выпадающим меню. Ну а для того что бы вся работе на сайте не пропала даром, советую пользоваться надежным и быстрым хостингом, а еще лучше арендовать vds сервер. Всем удачи!

Полезное по теме:

1. Как добавить свой код в меню вордпресса
2. Как сделать оптимизацию сайта под мобильные устройства в WordPress
3. Как вставить рекламный блок в ленте записей блога в Вордпрессе
4. Как сделать хлебные крошки в WordPress (breadcrumb)

Источник: ruskweb.ru

Как добавить дополнительное меню на сайт

Обычно шаблоны WordPress поддерживают вывод, как минимум, одного, а чаще нескольких встроенных меню, которые вы можете настраивать прямо из панели управления сайтом.

Но если вам захочется добавить второе или просто дополнительное меню, не предусмотренное шаблоном, то сделать это довольно просто.

Во-первых, в то место к коде шаблона, где нужно вывести меню, вставьте следующий код:

‘newmenu’ , ‘menu_id’ = > ‘newmenu’ ) ) ; ?>

wp_nav_menu — это функция WP, выводящая меню, определенное в панели управления сайтом в данном случае под названием newmenu. Это название определяется элементом массива ‘menu’, передаваемого в качестве аргумента в функцию. Вы должны указать свое название.

menu_id — это id элемента для управления им с помощью стилей css. Поскольку функция выводит меню с помощью списка, то в данном случае в коде вы получите такой тег:

Параметры функции рассмотрим ниже, а сейчас, после добавления кода, нужно зайти в админку во «Внешний вид — Меню» и жмем кнопку «Создать новое меню».

Далее указываем название меню, такое же, как вы указали в функции wp_nav_menu, и создаем его кнопкой «создать меню».
После этого настраиваем новое меню обычным образом и если вы все сделали без ошибок оно должно появиться на вашем сайте Вордпресс.

Параметры вызова функции wp_nav_menu:

$ args = array (
‘theme_location’ = > » ,
‘container’ = > ‘div’ ,
‘container_class’ = > » ,
‘container_id’ = > » ,
‘menu_class’ = > ‘menu’ ,
‘echo’ = > true ,
‘fallback_cb’ = > ‘wp_page_menu’ ,
‘link_before’ = > » ,
‘link_after’ = > » ,

• theme_location (строка) — Идентификатор расположения меню в шаблоне. Идентификатор, указывается при регистрации функцией register_nav_menu();
• menu (строка) — Меню которое нужно вывести. Соответствие: id, слаг или название;
• container (строка) — Чем оборачивать ul тег. Допустимо: div или nav. Если не нужно оборачивать ничем, то пишем false (container => false);
• container_class (строка) — Значение атрибута class у контейнера. По умолчанию: menu—container;
• container_id (строка) — Значение атрибута id у контейнера;
• menu_class (строка) — Значение атрибута class у тега ul;
• menu_id (строка) — Значение атрибута id у тега ul. По умолчанию: слаг меню;
• echo (логическое) — Выводить на экран (true) или возвратить для обработки (false);
• fallback_cb (строка) — Функция для обработки вывода, если никакое меню не найдено. Передает все аргументы ($args) этой функции. По умолчанию: wp_page_menu;
• before (строка) — Текст перед тегом < a >в меню;
• after (строка) — Текст после каждого тега < /a >;
• link_before (строка) — Текст перед анкором каждой ссылки;
• link_after (строка) — Текст после анкора каждой ссылки;
• items_wrap (строка) — Нужно ли оборачивать элементы в тег ul. Если нужно, указывается шаблон обертки;
• depth (число) — Сколько уровень вложенных друг в друга ссылок показывать (0 — все уровни);
• walker (объект) — Объект, который будет использоваться для построения меню (нужно указывать объект, а не строку). По умолчанию: Walker_Nav_Menu.

Источник: delaemsait.info

Создаем WooCommerce меню категорий и не только (через админку, виджеты, плагины)

Есть у некоторых разработчиков плагинов нехорошая привычка скрывать важные опции во вкладку «Настройки экрана». Отчасти из-за этого раньше я создавал навигацию для магазина через добавление произвольных ссылок, вручную прописывая URL’ы. Каково же было мое удивление, когда в одном из проектов увидел полноценное WooCommerce меню категорий товаров. Сегодня расскажу как легко его реализовать + рассмотрю другие смежные нюансы. В работе нам помогут некоторые виджеты и, рассмотренный ранее, модуль MegaMenu.

По формату заметка будет напоминать перечень ответов и подсказок по типовым ситуациям. Практически все задачи взаимосвязаны, поэтому советую почитать статью от начала и до конца, а затем задавать вопросы. Содержание:

• Стандартное WP меню для магазина.
• Подключение навигации в шаблоне.
• Продвинутая реализация через Max Mega Menu.
• Список категорий в сайдбаре (с помощью виджетов).

Меню категорий WooCommerce

Здесь есть несколько подходов. В начале рассмотрим классический вариант создания меню в WordPress через специальный инструмент в админке. Его особенностью является то, что пункты размещаются вручную, а следовательно вы можете сформировать любой результат, который вам нужен.

1. Первым делом переходите в раздел «Внешний вид» — «Меню».
2. Далее в «Настройках экрана» включаете опцию добавления категории в меню WooCommerce, которая по умолчанию не активна. Аналогичная фишка есть и для меток.
3. После этого в списке элементов навигации появится выбор категорий продукции.
4. Отмечаете галочками нужные объекты и кликаете «Добавить». Далее можете отсортировать их как захотите.
5. Не забудьте сохранить результат.

Навигационное горизонтальное меню WooCommerce

Если разрабатываете тему с нуля, то вам придется использовать функции вывода меню. Однако в большинстве случаев речь идет о готовом шаблоне, а там зачастую изначально предусмотрены специальные области отображения навигации. В таком случае в этом же разделе админки переходите во вкладку «Управление областями».

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

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

Продвинутое меню категорий WooCommerce

Самый популярный навигационный плагин меню WooCommerce, с которым я непосредственно работал — это Max Mega Menu (по ссылке найдете его обзор и принцип настройки). Не буду сейчас повторяться, а лишь пару слов скажу о том, как можно использовать данный модуль в магазине. Радует, что его бесплатных функций вполне достаточно.

Итак, когда плагин уже установлен, при наведении на разные пункты увидите соответствующую кнопку:

• Создаете главный (корневой) элемент меню, называете его «Магазин«, «Каталог товаров» и т.п. Именно для него вы будете редактировать основные настройки Mega Menu.
• Дальше в подпунктах можно добавить несколько подкатегорий и еще парочку дочерних в них. Пусть в примере будет 3 уровня иерархии: «Главная — Категории — Подкатегории«.
• Кликаете по Mega Menu в корневом пункте и вызываете всплывающее окно.

1. В настройках выбираете число колонок для отображения: если поставите 3, а подкатегорий у вас всего 6, то список расположится в 2 ряда. Менять местами элементы можете на предыдущем шаге.
2. Вся мощь данного модуля заключается в том, что вам разрешается размещать тут любые виджеты, например расположить WooCommerce корзину в меню или добавить лучшие товары.
3. Слева находятся разные полезные опции: скрытие на мобильных устройствах, скрытие заголовков (вызывайте окно Mega Menu для нужных элементов дабы сделать колонки без названий), вставка иконок рядом/вместо текста.

WooCommerce меню в сайдбаре

Список категорий продукции, располагающийся на сайте в сайдбаре справа или слева — традиционный элемент интернет-магазинов. Теоретически вы можете использовать методику, описанную в самом начале статьи, но есть и второй способ — создание навигационного меню в WooCommerce с помощью виджета, который называется «Категории товара».

Из настроек элемента пользователю доступны:

• Название блока.
• Тип сортировки (по порядку, имени).
• Отображение количества товаров в категории.
• Вывод выпадающего списка.
• Соблюдение иерархии.
• Скрытие пустых разделов.

Пользовательский класс и видимость на скриншоте выше, скорее всего, являются опциями установленной темы, а не конкретного виджета. Не забудьте сохраниться.

Отличительной фишкой такого подхода есть то, что результат формируется автоматически — то есть при добавлении в магазине новой категории товаров в админке, она сразу появится здесь. По теме не могу не упомянуть хак позволяющий скрыть категорию Woocommerce в данном блоке, если вдруг потребуется.

Также сделать меню WooCommerce в сайдбаре вы можете, совместив первый метод из текущей статьи и специальный виджет «Произвольное меню»:

В настройках указываете заголовок (если нужно) и выбираете один из ранее созданных объектов. Затем сохраняете виджет. Отображается информация в виде списка, при желании ее можно оригинально оформить через CSS стили.

Итого. Этих четырех методов создания WooCommerce меню с категориями товаров должно хватить в большинстве ситуаций. Недавно также рассмотрел как редактировать меню личного кабинета WooCommerce — возможно кому-то пригодится. Иногда встречаются задачи с добавлением корзины в навигационный блок, но это относится больше к другой теме.

В крайнем случае попробуйте реализовать ее через Mega Menu или соответствующую функцию в шаблоне. Если что-то новое будет появляться, обновлю статью.

Дополнения и вопросы по статье традиционно пишите ниже.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов — 8, средний балл: 5,50 из 7)

Категории: WooCommerce; Виджеты; Возможности;
Теги: базовые знания, виджеты, вордпресс веб-разработка, интернет-магазин, категории Woocommerce, меню и навигация, решение задач wordpress.

Похожие статьи:

1. Создаем список ссылок в сайдбаре с картинками +плагины блогролла
2. Добавление нового блока виджетов в шаблоны wordpress
3. Дайджест лучших статей WordPress Inside в 2017 (итоги года)
4. Дайджест лучших постов блога WordPress Inside в 2018
5. Лучшие статьи блога WordPress Inside за 2019 год

Источник: wpinsideblog.com