Как сделать меню категорий в wordpress

Добавил пользователь Alex
Обновлено: 05.10.2024

Создание меню навигации в теме для WordPress

Для создания меню необходимо воспользоваться функцией wp_nav_menu() , параметром которой является массив мета данных для настройки меню. Далее нужно это меню зарегистрировать в файле functions.php после чего в панеле WordPress, во вкладке Внешний вид появится новая вкладка с названием Меню, именно в ней мы сможем окончательно завершить создание и настройку меню для темы.

Шаг 1: Создание и определение параметров меню

Для начала нужно открыть файл header.php и в соответствующем блоке, в котором будет находится будущее меню, добавить функцию отображения меню wp_nav_menu() с набором аргументов определённых в массиве $args .

Помимо приведенных выше параметров, существуют также и другие параметры, которые при необходимости, можно добавить в массив.

Все доступные параметры меню приведены в таблице в конце статьи.

Шаг 3: Настраиваем меню в панеле управления

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

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

Пример добавления ссылок на страницы в меню

В завершении нам остаётся только перейти во вкладку Управление областями и соотнести названия только что созданных меню с теми именами, которые мы упомянули при регистрации в функции register_nav_menus() . На этом процесс создания меню завершен.

Управление областями меню

Для создания меню в других областях сайта, например в футере или сайдбаре, нужно всего лишь в соответствующих файлах ( footer.php , sidebar.php ), по аналогии с header.php , создать функцию wp_nav_menu() с определенными параметрами и зарегистрировать её.

В конечном итоге мы получим следующий результат.

Вывод готового меню в header.php

Вы можете визуально выделить активную ссылку меню, для этого укажите css-стили для селектора .current-menu-item.

Широко известно, что в WordPress 3.0 добавлена поддержка произвольных меню (настраиваемых меню). Вещь, на мой взгляд, крайне удобная и полезная. Собственно, отсюда и эта статья.

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

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

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

Заметка: меню работает через таксономию (nav_menu) WordPress, а произвольные (внешние) ссылки, записываются в основную таблицу БД posts. Такой подход более гибкий и динамичный, однако требует постоянной генерации таких меню.

Видео по меню в WordPress

Включаем поддержку произвольных меню (wp_nav_menu)

Для начала нужно зарегистрировать возможность использования произвольных меню и сами меню. Делается это в файле functions.php,с помощью функции register_nav_menu(), так:

Задаем название меню (меню в шаблоне можно выводить по указанному названию, функцией wp_nav_menu()

Создаем пункты меню. Используем левый блок: страницы ссылки, рубрики

Поддержка произвольных меню в WordPress включается для каждой темы отдельно, такой строчкой в файле functions.php add_theme_support('menus'); Однако, в этой строчке нет необходимости, если мы регистрируем меню. В этом случаем поддержка будет включена автоматически.

Вывод произвольных меню через функцию wp_nav_menu

В данном примере в шаблон нужно вставить примерно (зависит от необходимых вам параметров) такие, 2 кода:

Верхнее меню. Вставляем в шапку шаблона (header.php), там где будет выводится верхнее (top) меню:

Выведет созданное в админке меню, прикрепленное к расположению "Верхнее меню" с подобной структурой:

Нижнее меню. Вставляем в подвал шаблона (footer.php), там где будет выводится нижнее (bottom) меню:

Выведет созданное в админке меню, прикрепленное к расположению "Нижнее меню". Структура будет идентичная первой.

Обратите внимание, в первом варианте параметры были переданы через массив (array). Во втором через строку. Оба варианта правильны. Это обычное дело для функций WordPress - параметры можно передавать как массивом, так и строкой (строка потом преобразовывается в массив).

Чтобы вывести меню по его названию можно воспользоваться аргументом 'menu'. Название указывается, то которое было задано при создании меню в админке. В нашем примере (см. картинку) "Главное меню". Аргумент menu обладает большим приоритетом чем theme_location , а значит, если мы выводим по названию, то параметр theme_location будет игнорироваться.

Можно указать ID меню, а не название. Так, при изменении названия меню, код останется рабочим. ID меню можно посмотреть в УРЛ во время редактирования меню:

Заметки

Уберем обертку Div

Вы наверное обратили внимание, что меню "оборачивается", часто, ненужным тегом div. Его можно удалить, указав в аргументах для функции wp_nav_menu() пустой параметр 'container'=>'' .

Изменяем параметры по умолчанию

Чтобы постоянно не указывать один и те же параметр для вставляемых меню, их можно переопределить в functions.php . Делается это через фильтр wp_nav_menu_args :

По аналогии, можно создать свои аргументы по умолчанию: $args['аргумент'] = 'значение' .

Параметр walker

Из всех передаваемых аргументов, непонятным является walker. Для тех, кто хочет разобраться для чего он нужен, читайте раздел в описании функции wp_nav_menu(). Там коротко и ясно описан принцип. Если очень коротко, то с его помощью можно внедриться в процесс генерации меню и изменить его как угодно.

Включение доп. параметров у меню

Меню сайта на WordPress – это не только инструмент навигации, но и важная составляющая дизайна, существенно влияющая на общее восприятие сайта, юзабилити, оптимизацию и конверсию. Неудивительно, что вебмастеров зачастую не устраивают типовые варианты, сильно ограниченные как в плане эстетики, так и функционала. При этом многие владельцы сайтов сталкиваются с проблемой выбора подходящего дополнения для CMS WordPress, тем паче – для апгрейда меню сайта.

Max Mega Menu

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

большое количество опций в бесплатной версии;
есть русская локализация;
плагин постоянно улучшается;
удобный редактор в административной панели WordPress;
настройка сценариев поведения по наведению указателя мыши и клике;
добавление иконок в пункты меню;
оптимизированный код, сценарии занимают менее 2 Кб памяти JS;
несколько мест размещения;
упрощение создания мобильного меню;
добавление любых виджетов;
эффекты анимации;
очень подробная документация (англ.).

Перечень преимуществ далеко не полон, однако в рамках небольшого обзора не представляется возможным раскрыть все возможности Max Mega Menu.

часть опций доступна только в платной версии PRO (дополнительная интеграция с WooCommerce и ряд других);
не все действия интуитивно понятны (например, по умолчанию отключена подсветка активного пункта меню, пользователю придется покопаться в настройках или документации, чтобы включить эту опцию).

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

Nextend Accordion Menu

разработчик: Nextendweb;
русская локализация: нет;
количество скачиваний: 10000+;
рейтинг WordPress: 4,7.

Если решите проверить Nextend Accordion Menu в деле, не забывайте, что работа над проектом прекращена. А это значит, что уже никто не проводит проверку совместимости расширения с последними релизами WordPress, MySQL, языками скриптов и так далее. А еще – что возникшие проблемы не получится решить с помощью техподдержки.

Responsive Menu

Как понятно по названию, разработчики сделали ставку на респонсивный дизайн. Как утверждают авторы, в их плагине более 150 настраиваемых опций, что дает в совокупности более 22 тысяч вариаций настроек. Расширение прописывается в консоли WordPress, опции раскиданы по девяти вкладкам.

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

разработчик: ExpressTech;
версия WordPress: от 3.6, тестировано до 5.5.1;
версия PHP: 5.5 и выше;
текущая версия расширения: 3.1.30;
количество активных установок: более 100000;
локализация: 10 языков;
русский интерфейс: нет;
рейтинг WordPress: 4,7.

Базовый функционал Responsive Menu:

фоновое изображение для меню;
выбор шрифтов, установка выравнивания текста;
простое изменение цвета фона, границ, текста;
возможность добавления кастомных компонентов HTML;
импорт и экспорт по одному клику мыши;
загрузка пользовательских логотипов, изображений;
интеграция поискового механизма;
выбор размеров дисплея, на котором будет показываться данное меню;
эффекты анимации;
поддержка WPML, Polylang, RTL;
и другие опции.

К недостаткам Responsive Menu можно отнести отсутствие русской локализации, однако, во-первых, это явление временное, а во-вторых, интерфейс интуитивно понятен и назначение подавляющего большинства настроек ясно и без перевода даже людям с очень слабым знанием английского языка. Если же возникнет желание сделать апгрейд до PRO, за одиночную лицензию придется заплатить $14,99, а за мульти-лицензию (до 100 сайтов) – $49,99.

WP Responsive Menu

разработчик: MagniGenie;
версия WordPress: от 3.0, тестировано до 5.5.1;
версия PHP: от 5.4;
текущая версия плагина: 3.1.4;
количество активных установок: более 60000;
язык интерфейса: английский (США);
русская локализация: нет;
рейтинг WordPress: 4,7.

Преимущества WP Responsive Menu:

В премиальном варианте улучшена поддержка RTL, что не очень актуально для наших широт. Но есть в PRO и полезные функции, такие как, например, добавление в меню иконок социальных сетей или полная интеграция с WooCommerce. В то же время многих вебмастеров вполне устраивает базовый функционал. Чтобы в этом убедиться, достаточно сравнить число активных установок и количество продаж премиум-версии WP Responsive Menu.

ShiftNav — Responsive Mobile Menu

авторы: Крис Маврикос, SevenSpark;
версия WordPress: от 4.0, тестировано до 5.5.1;
количество активных установок: более 20000;
последний апдейт: 3 месяца назад;
язык интерфейса: английский;
русская локализация: нет;
рейтинг WordPress: 4,7.

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

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

WordPress Mega Menu — QuadMenu

На официальном сайте WordPress можно найти более десятка плагинов с названием Quad Menu, но по-настоящему успешным можно считать лишь одно расширение – работу авторства команды Mega Menu. Тот самый случай, когда лучшее представление о назначении дополнения дает не название плагина, а название разработчика. Quad Menu – неплохой вариант мега-меню для вебмастеров и студий, занимающихся созданием тем WordPress.

разработчик: Mega Menu;
версия WordPress: от 4.6, тестировано до 5.5.0;
количество активных установок: более 20000;
последний апдейт: 3 месяца назад;
локализация: английский, португальский, испанский;
русский интерфейс: нет;
рейтинг WordPress: 4,7.

Ключевые преимущества Quad Menu:

простое и автоматическое преобразование дефолтного меню в мега-меню;
простота настройки и большое количество опций;
поддержка дочерних тем;
возможность быстрого создания на 100% респонсивного меню без необходимости вмешательства в программный код;
большая подборка бесплатных тем;
эффекты анимации;
поддержка иконок Font Awesome Icons;
подробная документация.

WP Mega Menu

разработчик: Themeum;
версия WordPress: от 4.0, совместимость проверена до 5.3.4;
количество активных установок: более 20 тысяч;
последнее обновление: 2 месяца назад;
язык интерфейса: английский;
русская локализация: нет;
рейтинг WordPress: 4,6.

Наиболее примечательные особенности WP Mega Menu:

виджеты и поиск в меню;
импорт и экспорт тем;
интеграция с социальными сетями;
шрифты Google Fonts;
иконки Font Awesome Icons и Dashicons;
возможность вставки своего логотипа;
подробная документация, профессиональная поддержка.

Над плагином WP Mega Menu работает большая команда профессионалов высокого уровня, а это значит, что количество проблем с совместимостью и багов будет постепенно уменьшаться, а функционал расширения – улучшаться. Но и в текущей версии можно создать полноценное и элегантное мега-меню с большим количеством настроек.

Advanced Sidebar Menu

Как видно по названию, Advanced Sidebar Menu рассчитан в первую очередь на создание боковых навигационных меню. В этом плане плагин предлагает большое количество опций, начиная с простой интеграции дочерних категорий и заканчивая настройкой стилей виджетов. Однако в бесплатной версии возможности расширения довольно сильно ограничены. Большая часть функций доступна только по платной подписке, хотя многим вебмастерам и разработчикам тем WordPress вполне хватает возможностей бесплатной версии. Плагин реализован в виде виджетов.

разработчик: OnPoint Plugins;
текущая версия плагина: 8.0.4;
версия WordPress: 5.0.0 – 5.5.1;
версия PHP: от 5.6.0;
локализация: 7 языков;
русский интерфейс: отсутствует;
рейтинг WordPress: 4,6.

Особенности Advanced Sidebar Menu:

добавляет два виджета: Pages Menu, Categories Menu;
простое разделение страниц и категорий путем простановки запятой в списке ID;
возможность всегда отображать дочерние страницы или категории;
добавление родительских элементов в меню;
сортировка по названию, дате, порядковому номеру;
многое другое.

Advanced Sidebar Menu – удобный инструмент создания боковых меню 2 уровня и их привязки к родительским элементам в главном меню сайта WordPress. То есть, с помощью этого плагина можно задать зависимость содержимого вертикального меню от родительских элементов в шапке. Например, в хедере находятся названия регионов РФ, а в sidebar-меню выводятся города именно того региона, который выбран пользователем. К сожалению, значительная часть функций доступна только по платной подписке.

WP Mobile Menu

Один из немногих плагинов подобного плана с русским интерфейсом. Основное назначение WP Mobile Menu – быстрое создание адаптивных меню, оптимизированных под мобильные платформы. К сожалению, функционал бесплатной версии сильно урезан. По премиальной подписке доступно более 2000 иконок, поддерживается до пяти уровней вложений меню (в бесплатной версии – до трех). В функции PRO входят и slide-меню, и анимация иконок, и, самое главное, интеграция с WooCommerce (корзина, страница оформления заказа и так далее).

разработчик: Rui Guerreiro, Freemius;
текущая версия плагина: 2.8.1.4;
версия WordPress: 4.4 – 5.5.1;
версия PHP: от 5.6;
последний апдейт: 2 месяца назад;
количество активных установок: более 70000;
языки интерфейса: английский и русский;
рейтинг WordPress: 4,97.

Особенности WP Mobile Menu:

Бесплатная версия WP Mobile Menu годится для быстрого создания привлекательных, современных и удобных мобильных меню, однако базового функционала хватает далеко не всем. Если вам нужны опции экспорта и импорта, больший выбор шрифтов и иконок или полная интеграция с WooCommerce, лучше приобрести премиум-версию. Стоит она всего $4,99.

Заключение

При выборе плагина для оформления меню десктопных и мобильных версий сайтов на CMS WordPress обязательно придется учитывать тот факт, что все бесплатные версии имеют функциональные ограничения, снимающиеся по платной подписке. Как правило, на страницах расширений на официальном сайте WordPress тем или иным способом демонстрируются возможности дополнения. Либо это рабочее демо, либо видео с меню, сделанными при помощи соответствующего плагина.

Сегодня я публикую свою старую статью о том, как сделать меню в WordPress, а также перечислю популярные плагины меню WordPress.

Меню в WordPress

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

Создание меню WordPress можно осуществить несколькими способами:

Второй и третий пункты являются простыми и достаточно очевидными, поэтому подробнее я расскажу об остальных.

Создание меню WordPress стандартными способами

После того, как создано меню, вы можете добавлять в него разделы.

Произвольные ссылки

Чтобы добавить в меню WordPress ссылку на какую-нибудь страницу вашего сайта или какого-нибудь другого, введите ее URL и название, под которым она будет отображаться. Сюда можно добавить, например, ссылку на какой-нибудь отдельный пост.

Кстати, если хотите вывести неактивный пункт меню, прочитайте эту статью.

Категории

То же самое мы делаем и с категориями, чтобы их добавить в меню WordPress.

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

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

Верхнее меню WordPress

В некоторых темах WordPress верхнее меню отображается и в футере, то есть такой же код прописан и в файле footer.php.

Автоматическое добавление страниц в меню очень неудобно по двум причинам:

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

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

Если вы разбираетесь в HTML, сделать это не составит вам труда. Для тех, кто не понимает сути, вот объяснение: каждая строка, отвечающая за вывод пункта меню, будет отличаться от других по двум параметрам:

значением href — здесь вы меняете ссылку на нужную вам;
текстом между тегами и — здесь вы задаете текст ссылки пункта меню.

Плагины меню WordPress

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

Я перечислю пять разных плагинов WordPress для создания меню на своем сайте.

Floating Menu — простенький плагин для создания симпатичного меню на jQuery; — довольно необычное меню, которое можно разместить на одном из шести предложенных мест на периметре экрана, которое подойдет для вывода подписки на RSS, регистрационной формы, соцкнопок или поиска по сайту; — с помощью этого плагина вы можете создать вертикальное красивое меню для WordPress, которое будет использовать jQuery эффекты; — плагин WordPress меню, который похож на предыдущий, но создает меню не в боковой колонке, а в горизонтальном виде; — еще один плагин для меню WordPress, который использует jQuery и с помощью которого можно создать красивое аккордеон-меню (если вы не знаете, что это такое, — попробуйте этот плагин, вам должно понравиться).

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

Создание меню в WordPress

1. Для начала необходимо перейдите в панели администратора в Внешний вид — Меню.

Вот и все! Как видите, всего за несколько шагов можно легко создать новое меню в WordPress.

Порядок размещения меню в WordPress

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

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

Если у вас возникли вопросы по созданию меню, задавайте их в комментариях.

Приветствую друзья! В этом уроке вы узнаете как создать меню в WordPress и как добавить страницу в меню. В прошлых уроках мы уже разобрались с Вами как создавать страницы и записи в WordPress, а сегодня мы научимся и пошагово разберем как создать меню и как добавить вторую вкладку в шапке сайта (выпадающее подменю) в WordPress. Создание меню в WordPress 1. Для начала необходимо перейдите в панели администратора в Внешний вид - Меню. 2. Теперь необходимо создать меню, для этого нажимаем по "Создайте новое меню". 3. В текстовом поле вводим название для меню WordPress и нажимаем кнопку "Создать меню". 4. Меню создано. Теперь необходимо добавить нужные Вам страницы,…

Обзор

Проголосуйте за урок

Оценка

Читайте также: