webdonsk.ruWordpress как сделать красивое меню
Добавил пользователь Alex Обновлено: 09.09.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.
Дорогие друзья! Рад снова видеть Вас на страницах моего блога! Сегодня хочу поговорить с Вами о том, как сделать меню в вордпресс. Думаю, эта тема будет интересна всем, кто начинает свои шаги в создании блога, или хочет улучшить существующий сайт. По умолчанию, в шаблонах вордпресс, как правило, стоит простое оформление меню. Это вынуждает создавать новое индивидуальное меню, которое подчеркнуло бы дизайн сайта. На моем сайте я решил не реализовывать новое оформление меню в вордпресс, потому что у меня малое число страниц. Данное решение отлично смотрится при 5-6 страницах в главном меню.
Как сделать красивое меню WordPress с помощью плагина
Как сделать меню в вордпресс с помощью плагинов, я рассажу в данной статье. Создать меню с помощью плагина гораздо проще, чем возиться с кодом HTML и стилями CSS. Такое меню не потеряется после активации другой темы, а также не влияет на валидность кода. Я рассмотрел большое количество вариантов для реализации меню в вордпресс через плагины: Side menu, Responsive menu, Nav Menu Roles и другие. Однако самым удобным и простым плагином для создания меню в WordPress мне показался Max Mega Menu. Какие же преимущества имеет данный плагин:
-данное меню имеет русскую версию и не требует дополнительных знаний английского
-интуитивно понятный интерфейс плагина.
-возможность создания нового меню за 2 минуты
-не требует дополнительной активации или покупку дополнительных модулей
Меню, сделанное с помощью плагина Max Mega Menu
При создании меню для сайта на WordPress в Max Mega Menu вам будет доступна практически неограниченный полет для реализации Ваших идей. Это и выбор цвета меню, и его синхронизация с адаптивным шаблоном сайта, создание выпадающего списка и и многое другое. Давайте рассмотрим процесс установки плагина на Ваш сайт, и его последующую настройку для корректной работы.
Начало создания меню в вордпресс
Установка плагина Max Mega Menu на сайт wordpress
Настройка внешнего вида меню в вордпресс с помощью плагина
Включение меню плагина Max Mega menu
Вместе с WordPress в комплекте идет мощная система навигации при помощи меню, на основе которой разработчики и администраторы сайтов могут создавать кастомные красивые меню для собственных сайтов. Используя для этой цели редактор меню, пользователь вполне может самостоятельно добавлять и удалять навигационные меню, добавлять новые пункты и вкладки, создавать каскадные меню и выполнять ряд других кастомизаций по своему вкусу.
Когда была написана статья "WordPress плагины для организации меню", я понял, что в ней речь пошла о плагинах лишь потому, что сам я никогда не старался до конца понять систему настройки и редактирования меню. Именно тогда я сделал себе "зарубку на память" относительно того, чтобы изучить, как создаются навигационные меню в WordPress. Ранее я научился модифицировать уже существующие меню; но в этот раз предлагаю вам вместе со мной научиться созданию собственных меню "с нуля".
Как устроена система меню в WordPress
Начиная с WordPress 3.0 разработчики тем получили возможность самостоятельно задавать навигационные меню в собственных темах для сайта. Большинство современных тем для WordPress поставляются сразу с заданным расположением и структурой меню навигации, так что в подавляющем большинстве случаев у вас не будет необходимости редактировать меню навигации. Но все же, давайте предположим, что у вас появилась необходимость создать меню самостоятельно. Именно в этом случае вам надо сначала разобраться, как работает система меню навигации в WordPress.
На первом шаге при создании меню разработчики тем задают заголовки меню и расположение их на странице путем регистрации меню в структуре темы. Следующим шагом является прикрепление меню к заданным локациям и выбор стилей для отображения. Также разработчик темы может задать поддержку множества навигационных меню в своей теме. И последним шагом в работе с меню является редактирование меню самими пользователями с помощью встроенного редактора Menu Editor.
После регистрации нового меню вы сможете добавлять его к вашим темам оформления сайта. Выглядит это вот так:
Работаем над стилем оформления меню для WordPress
Функция wp_nav_menu позволяет вам задать контейнер для меню, а также значения параметров container id, menu id и menu class. Делается это для того, чтобы позже можно было легко менять стиль вашего меню. Перед тем, как вы углубитесь в настройку стиля для вашего меню WordPress, важно разобраться в классах CSS , которые используются в настройке и работе с меню для WordPress.
Давайте сначала посмотрим на то, как мы будем подгонять стиль для нашего меню навигации:
Теперь мы стилизуем неупорядоченный список, добавим эффекты и создадим вложенные меню:
Стилизуем готовую страницу:
Изучение классов CSS используемых в системе меню для WordPress
WordPress отображает меню в виде неупорядоченного списка. Если вы новичок в работе с CSS, тогда вам стоит остановиться, не читать этот пост дальше, а вместо этого почитать довольно ветхое по времени, но все еще актуальное руководство " CSS Design: Taming Lists " для того, чтобы обрести базовое понимание того, как из неупорядоченного списка создать красивое навигационное меню для своего сайта.
В этом неупорядоченном изначально списке WordPress каждому компоненту меню назначает свой класс. Есть класс для контейнера, который содержит весь неупорядоченный список; есть класс container ID, есть класс css для меню и отдельные классы для каждого типа и компонента меню с собственным css.
Для начала все это может звучать немного запутанно и непонятно, но на практике все не настолько страшно. Здесь так много отдельных классов, потому что WordPress позволяет вам задавать очень много типов меню для своего сайта. Вдруг вы захотите добавить категорию, страницу, настраиваемую внутреннюю или внешнюю ссылку. Каждый тип таких данных определен в WordPress отдельно, и так у дизайнеров есть более широкий набор опций для настройки меню в зависимости от выбранного оформления и стиля вашей темы.
| Класс CSS | Описание класса |
| .menu-item | Основной класс, который добавляется к каждому пункту в меню. |
| .menu-item-object- | Этот класс добавляется к каждому пункту меню, который является объектом вида категории, ссылки или тега и т.д. |
| .menu-item-object-category | |
| .menu-item-object-tag | |
| .menu-item-object-page | |
| .menu-item-object- | |
| .menu-item-type- | Здесь параметр используется либо для параметра “post_type”, либо для параметра “taxonomy” |
| .menu-item-type-post_type | |
| .menu-item-type-taxonomy | |
| .current-menu-item | Класс, который используется на странице, которую в данный момент просматривает пользователь |
| .menu-item-home | Этот класс связан с главной страницей сайта и меню, которое на ней отображается |
| .page_item | Обеспечивает обратную совместимость, когда меню по умолчанию возвращает к wp_page_nav |
| .page-item-$ID | |
| .current_page_item |
Дизайн сайта в основном связан с улучшением пользовательского интерфейса. Хотя для сайта важно быть визуально привлекательным, для него еще важнее быть эффективным при получении и управлении интернет-трафиком. Множество мер по поисковой оптимизации и SEO, которые мы принимаем, помогают привлекать и увеличивать трафик на наш сайт. Однако, как только посетители появляются на нашем сайте, они должны быть в состоянии легко перемещаться по нему, чтобы найти то, что они ищут. Вот где важны плагины меню навигации и WordPress.
Почему важно меню
Меню похоже на карту, которая направляет посетителей на вашем сайте и поэтому важно для успеха сайта. Это может побудить посетителей тратить больше времени на ваш сайт, что приводит к лучшему коэффициенту конверсии. В свою очередь, это позитивный сигнал для поисковых систем.
Часто, хотя поиск ведет посетителей на ваш сайт, они не остаются там долго и просто уходят. Это указывает на то, что навигация на вашем сайте может оказаться неэффективной. Меню, служащее практической функцией, занимает основное пространство на ваших страницах. Они могут сделать сайт визуально ярким и улучшить эстетику.
Хотя WordPress имеет множество функций, поддерживающих создание меню, его плагины могут вывести ваше меню на совершенно новый уровень. Эти меню могут отображать важное содержимое вашего сайта прямо на главной странице в комплекте с настраиваемыми ссылками и отличным изображением.
Ниже приведены лучшие бесплатные плагины WordPress для меню, а также несколько премиальных.
Бесплатные плагины WordPress
Ниже приведены семь бесплатных плагинов, которые добавляют функции в меню WordPress. Их можно бесплатно загрузить из репозитория плагинов WordPress, и вы можете проверить их функции перед поиском опций премиум-класса.
Меню Max Mega
Когда вы устанавливаете Max Mega Menu , оно автоматически преобразует существующее меню в мега-меню. С помощью нескольких кликов вы можете полностью преобразовать свое меню в удобное для пользователя, легко доступное меню. Конструктор drag-and-drop помогает создать меню на панели управления, и вы можете увидеть, как меню формируется в режиме реального времени, используя функцию предварительного просмотра.
Можно настроить мега-меню с помощью редактора, изменить поведение меню, используя собственные настройки WordPress. Плагин предлагает широкий спектр настроек, позволяя вам выбирать цвета, шрифты, размеры и многое другое.
Также возможно создать сложные меню с этим плагином и в то же время добавить интерактивные элементы, такие как карты. Поскольку он может интегрироваться с другими плагинами, вы можете включать такие функции, как календари и контакты.
Как правило, функция мега-меню - это то, что вы найдете только в премиальных или дополнительных плагинах, но оно доступно бесплатно в Max Mega Menu.
Для дополнительных функций, таких как поддержка WooCommerce и Easy Digital Downloads, вы можете перейти на платную версию .
Responsive Menu
Более ста тысяч загрузок, Responsive Menu представляет собой настраиваемый плагин , который позволяет работать с простым в использовании интерфейса для настройки меню. Помимо обычной настройки цветов, шрифтов, пробелов и кнопок, вы также можете настроить, добавив специальные элементы, такие как логотипы и значки.
Вы можете улучшить функции меню, используя настраиваемую интегрированную функцию поиска и выбирая настраиваемые триггеры меню. Если ваш сайт является многоязычным, вы будете рады поддержке WPML / Polylang и функции RTL.
Когда кнопка нажата, меню переходит в режим просмотра. Меню может отображаться сверху или снизу, справа или слева, может иметь любое фоновое изображение, которое вы выбираете. Этот плагин является хорошим выбором, если вы хотите иметь вертикальное меню, чтобы увеличить пространство экрана для изображений или видео.
Чтобы добавить такие функции, как Awesome Font Icons и анимации кнопок, вам необходимо приобрести премиальный плагин .
WP Respive Menu
Чтобы преобразовать ваше меню WordPress в скользящее меню, которое идеально подходит для мобильных устройств, вы должны попробовать WP Responsive Menu . Все функции, не необходимые для мобильного меню, могут быть скрыты. Тем не менее, пользователи настольных компьютеров получают доступ к меню по умолчанию с полным списком параметров. Он легко интегрируется с интерфейсом администратора WordPress и содержит множество удобных инструментов для создания меню.
Что делает WP Responsive Menu выдающимся, тот факт, что процесс создания меню упорядочен. Это поможет вам создать красивое и функциональное меню за считанные минуты, используя десятки вариантов, доступных для настройки вашего меню. Для получения дополнительных функций ознакомьтесь с плагином премиум-класса .
Nextend Accordion Menu
Аккордеонные меню скользят внутрь и наружу, сводя к минимуму и максимизируя пространство и контент на сайте. Используя меню Accendion Nextend, вы можете создать несколько экземпляров меню аккордеона и добавить его на свой сайт с помощью виджета или короткого кода.
Вы можете создавать несколько слоев подменю, настраивать внешний вид и эффекты и выбирать различные эффекты анимации для добавления в меню. Поскольку он использует кеширование для дерева меню JavaScript и CSS, он быстро загружается.
Версия премиум дает вам выбор из трех новых тем и множество дополнительных функций.
Admin Menu Editor
Admin Menu Editor не создает автоматически меню. Это просто поможет вам вручную отредактировать меню панели инструментов. После установки этого плагина он позволяет скрыть пункты меню, даже от администратора.
Вы можете создавать определенные пункты меню, изменять названия меню и организовывать элементы меню с легкостью перетаскивания. Переместите пункты меню на уровни подменю и создайте пользовательские меню, которые направляются на любую часть панели мониторинга или на внешний URL. Если все пойдет не так, как администратор, вы можете восстановить версию по умолчанию.
Кроме того, вы можете настроить его как глобальный плагин в многопользовательской сети. Это позволит сетевому администратору редактировать панель инструментов для всех сайтов и для всех пользователей одновременно. Чтобы установить разрешения для каждого пользователя, перетащите пункты меню между уровнями. Однако, если вы хотите открыть меню в новом окне, вам нужно перейти на премиум-версию .
Nav Menu Roles
Плагин является гибким и позволяет настраивать функциональность, создавая дополнительные флажки.
Responsive Select Menu
Этот плагин помогает оптимизировать пространство на мобильном экране и удобно использовать на сенсорных экранах для навигации.
Плагины Premium
Бесплатные плагины, упомянутые выше, делают свою работу достаточно хорошо. Если вам нужна какая-то конкретная или уникальная функция или более высокий уровень поддержки, вы можете также просмотреть эти премиальные плагины.
UberMenu
UberMenu - популярный плагин в премиальном сегменте. С его помощью вы можете создавать сложные мега меню, которые включают в себя множество уровней.
Плагин хорошо интегрируется с системой меню WordPress 3, но ваша тема должна включать в себя таблицу стилей, специфичную для UberMenu. Он включает в себя интуитивно понятный конструктор, который можно использовать для построения гибких сеток с несколькими столбцами. Наведите указатель мыши на блоки содержимого, вы можете вызвать параметры для настройки каждого блока.
Hero Menu
Загрузка параметров настройки, которые поставляются с Hero Menu, позволяет вам создавать любое требуемое меню. В этом плагине возможны как типичное меню, так и простое раскрывающееся меню. Для вас легко настроить 650 шрифтов Google, 60 цветовых пресетов и собственный фон. Создание меню легко с помощью редактора перетаскивания.
Вы можете назначать значки в пункты меню, выбирая из 270 + бесплатных значков. Если вы управляете магазином, имеется полная интеграция этого плагина с WooCommerce. Он даже позволяет отображать миниатюры изображений и цены в меню. Кроме того, все обычные материалы, такие как текст, формы и карты, также могут найти свое место в меню.
WP Mega Menu Pro
Если вам трудно выбирать между вертикальным и горизонтальным меню, возможно, WP Mega Menu Pro для вас. Этот плагин позволяет вам создавать меню в обоих направлениях. Кроме того, он объединяет 14 шаблонов, позволяющих вам начать работу. Он также включает визуальный построитель drag-and-drop.
Меню пользователя Slick
Slick Menu - отличный выбор для создания многофункциональных сложных мега-меню. Вы можете настроить каждый уровень в меню, используя цвета, фон, изображения, наложения и шаблоны. Slick Menu использует стандартный WordPress Customizer, который поможет вам контролировать ваше меню в режиме предварительного просмотра, даже когда это происходит. Особенность этого плагина - уникальная функция, которая позволяет добавлять видео в элементы меню.
WP Floating Menu Pro
WP Floating Menu Pro - единственный плагин в этом списке, специально разработанный для одностраничных меню. Плагин помогает создавать два типа меню: одностраничное меню и липкое меню. Как правило, одностраничные сайты делятся на многие разделы, каждый из которых имеет контент, который не соответствует странице. Когда посетители нажимают на элемент меню, они автоматически достигают этого раздела вместо другой страницы.
Тринадцать шаблонов включены, чтобы вы начали с создания и настройки вашего меню. Доступны семь позиций меню, которые можно поместить на любую из четырех сторон экрана. Вы можете создать любое количество меню для своего сайта и настроить меню для каждой страницы независимо. Доступны три различных набора значков меню, а также вы можете загрузить свои собственные значки.
Все плагины WordPress в этом списке выполняют одну и ту же базовую функцию, помогая направлять пользователей на нужные им страницы. Это дополнительные функции, отличающие их друг от друга. Эти плагины могут обрабатывать все, что угодно, от сложных многоуровневых многофункциональных меню до простых выпадающих меню.
Чтобы выбрать тот, который лучше всего подходит для вашего сайта, вам нужно будет изучить не только те функции, которые предлагает каждый плагин, но и ваш бюджет и необходимый уровень поддержки. Если ваш сайт насыщен содержанием, хорошо продуманное мега-меню может быть хорошим выбором. Однако, если вы хотите увеличить пространство, вертикальные меню, которые прячутся за переключателем, могут быть лучшим выбором. Уникальные требования вашего сайта будут определять наилучший вариант.
Читайте также: