Как использовать меню в WordPress

Статья читается: 3 мин.

Привет!

Сегодня я вам расскажу как настроить меню на своем новом сайте. Как сделать меню выпадающем, как его разместить и где. А также расскажу о плагинах меню, которые вам помогут.

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

Вы просматриваете Google Analytics и ваш показатель отказов — через крышу. Поэтому вы решаете проверить каждый аспект своего сайта, но не можете найти, где проблема. Какого черта, думаете вы?

Как использовать меню в WordPress

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

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

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

Как создать идеальную навигационную систему в WordPress

Как использовать меню в WordPress

Готовы ли вы к приключениям в меню? В этом разделе мы рассмотрим, что делает навигационную систему отличной.

Будь проще

Лучшая навигационная система должна быть проста в использовании

Не усложняйте навигационные меню, включая страницы, которые пользователю необязательны. Придерживайтесь своего самого важного контента — контента, которого пользователь должен придерживаться достаточно долго. Свяжите только с наиболее важными страницами, такими как «О Нас«, «Контакты«, «Услуги» и т. д. И популярным контентом.

Говоря о простоте вещей, вам действительно нужно это мега-меню на вашем маленьком личном блоге? Я так не думаю: мега-меню великолепно да, но оно идеально подходит для сайтов-монстров с миллионами страниц контента и триллионами продуктов. Держать у себя его на сайте просто глупо.

Количество карт в формате Sitemaps

Карта сайта считается важным инструментом в идеальной навигационной системе. Помогая поисковым роботам легко и корректно сканировать ваш сайт, sitemaps также может пригодиться, когда пользователь потерян, и/или встречает 404 страницу ошибки. Подумайте об этом как о навигационном меню для всего сайта, опубликованном на специальной странице. Не следует опасаться, что это файлы, которые содержат ссылки на все ресурсы вашего сайта.

Самая лучшая новость — вы можете легко создавать файлы Sitemap, используя плагины, такие как Google XML Sitemaps, или просто пойти с темой WordPress, которая по своей сути поддерживает sitemap. Создайте специальную страницу «Карта сайта» и убедитесь, что вы видите список всех страниц и записей своего сайта при загрузке «https://zacompom.ru/sitemap«. Вы можете связать свою карту сайта со страницей 404 ошибки или добавить в свое главное меню.

Добавление меню навигации в несколько мест

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

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

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

Добавить форму поиска

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

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

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

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

Добавление меню навигации

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

Как? Просто перейдите на вкладку «Внешний вид» — «Меню» в области администрирования WordPress:

Как использовать меню в WordPress

Это запустит экран «Редактировать меню». Если вы или ваш разработчик никогда ранее не добавляли меню на свой сайт WordPress, вы должны увидеть этот экран:

Как использовать меню в WordPress

Идем дальше и даем вашему новому меню имя. Мы будем называть наш пример «основным меню». Введите свое предпочтительное имя и нажмите кнопку «Создать». Это запустит этот экран:

Как использовать меню в WordPress

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

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

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

Почему вы хотите добавить категории в меню WordPress? Если вы создали запись (например, уроки) в разных категориях (курсах), вы можете сгруппировать уроки в курсы, используя эту функцию. Это также полезная функция, если вы запускаете новостной сайт. Вот примерное меню:

Как использовать меню в WordPress

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

Как использовать меню в WordPress

Добавьте свою ссылку в текстовую область URL-адреса и название меню в тексте ссылки. Затем просто нажмите кнопку «Добавить в меню». Всегда включайте http:// или ваши ссылки не будут работать:

Как использовать меню в WordPress

Когда вы удовлетворены своим меню, выберите расположение меню и нажмите кнопку «Сохранить меню»:

Как использовать меню в WordPress

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

Как использовать меню в WordPress

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

Как использовать меню в WordPress

Здесь вы найдете меню с выпадающими пунктами. Я продолжу и сгруппирую все наши примеры в разделе «Learn Web Design». Это довольно легко. На экране «Изменить» просто перетащите подменю немного вправо — вот так:

Как использовать меню в WordPress

Затем нажмите кнопку «Сохранить меню». Теперь ваше меню будет выглядеть так:

Как использовать меню в WordPress

Короче и приятнее смотрится, верно? Вы можете создать дополнительные подменю в существующих пунктах, создав многоуровневые выпадающие меню:

Как использовать меню в WordPress

Наш пример меню навигации WordPress будет выглядить следующим образом:

Как использовать меню в WordPress

Что еще? Вы можете редактировать свои пункты меню из менеджера меню. Просто нажмите стрелку справа от меню:

Как использовать меню в WordPress

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

Бесплатные плагины меню в WordPress

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

Responsive Menu

Как использовать меню в WordPress

С превосходным рейтингом 4,9/5,0 и более 40 тыс. активных установок, «Responsive Menu» — это особый тип плагина меню, который поможет вам создать 100%-ное отзывчивое меню для вашего основного сайта — компьютеров, планшетов и смартфонов.

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

Max Mega Menu

Как использовать меню в WordPress

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

Он адаптивен и поддерживает все те сладкие функции, за которые вы бы убили. Например, вы можете разместить виджеты и значки в меню, ДОБАВИТЬ эффекты наведения или событие щелчка и включить элегантные эффекты перехода.

Кроме этого, Max Mega Menu поставляется со 100 другими вариантами настроек, действительным CSS3 и чистым кодом, которые делают его потрясающим. Этот плагин меню WordPress может похвастаться рейтингом 4.8/5.0 и более 20k активными установками. Есть pro версия с еще большим количеством функций, чем бесплатный вариант.

WP Responsive Menu

Как использовать меню в WordPress

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

Он полностью адаптивный, поставляется с интуитивно понятным интерфейсом администратора и легко интегрируется с системой меню WordPress по умолчанию. Добавить пользовательские формы поиска, пользовательские цвета и логотипы в меню, а также скрыть нежелательные элементы на мобильных устройствах теперь легко. WP Responsive Menu просто красиво и имеет рейтинг 4.6/5.0, а также более 30k активных установок.

Nextend Accordion Menu

Как использовать меню в WordPress

Если вам нравится эффект аккордеона, вам понравится Nextend Accordion Menu. Даже если вы никогда не слышали раньше о аккордеонах, вы должны полюбить этот плагин меню WordPress. Причина? Сейчас расскажу.

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

Единственное — это бесплатная (Lite) версия поставляется только с одной темой. Чтобы получить больше тем, вы должны обновить до версии Nextend Accordion Menu PRO. Тем не менее, этот плагин меню WordPress имеет великолепный рейтинг 4.6/5.0 и более 8k активных установок.

Mega Menu by WooRockets.com

Как использовать меню в WordPress

Я пытался держаться подальше от мега меню, но кажется, я не могу удержаться подальше от этих красот надолго. Вот почему я не мог устоять перед Mega Menu by WooRockets.com.

Что я могу сказать? Это красивый, отзывчивый, ориентированный на пользователя и мощный одновременно. Он поставляется с интуитивно понятным меню строителя, что делает создание красивых меню быстро. С помощью этого плагина, Вы можете превратить ваши меню — да во все что вы хотите!

Но и это еще не все. Вы можете просматривать меню в реальном времени, добавлять значки и виджеты в пункты меню, использовать пользовательские стили CSS, внедрять шрифты Google и использовать неограниченное количество цветов среди других функций. Mega Menu by WooRockets.com имеет рейтинг 4.0/5.0 и более 3k активных установок.

Платные плагины

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

Плагин UberMenu – WordPress Mega Menu

Как использовать меню в WordPress

По-видимому, мега-меню — это новая сенсация на рынке меню WordPress, а UberMenu — это «самое горячее» что есть. С более чем 45k продаж и рейтингом 4.65/5.00 вы не ошибетесь в UberMenu, трендовым плагином WordPress, который находится на несколько ступеней выше вашего типичного плагина.

Это номер один мега плагин меню на Codecanyon и поставляется с гибкими макетами, адаптивный дизайн, расширенный контент (так что вы можете добавить карты и многое другое в меню), расширенный пользовательский интерфейс и динамические элементы. Он поставляется с мощным настройщиком, который поддерживает более 50 комбо-стилей, вкладками подменю, несколько меню и огромное количество переходов.

Все эти (и более) функции сжаты в красивый плагин, который легко установить, изучить и использовать. Ubermenu был разработан и поддерживается Sevenspark, элитным автором, и продается всего за 18 баксов.

Mega Main Menu

Как использовать меню в WordPress

Вы ищете идеальное многофункциональное адаптивное меню WordPress для Вашего сайта? Предлагаю глянуть в сторону Mega Main Menu, плагина меню WordPress, который поддерживает неограниченное количество цветов + иконки, функциональность приклеивания, более 10 видов выпадающих меню, более 600 шрифтов Google, более 1600 векторных иконок, виджеты, шорткоды и удивительная поддержка среди других функций.

Mega Main Menu совместим с WPML, BuddyPress, WooCommerce, Bootstrap, текущей версией WordPress и основными браузерами. Он имеет средний рейтинг покупателя 4,62/5,00 и станет вам только 14 долларов США.

Адаптивный плагин меню — Superfly

Как использовать меню в WordPress

Кто не любит красивые вещи? Если Вы цените красоту проницательного дизайна и гениальности в работе — вы влюбитесь в Superfly, отзывчивый плагин меню WordPress, как никто другой.

Созданное меню выглядит потрясающе, элитный автор, Superfly — это вертикальное скользящее/статическое/нажимное меню навигации, которое добавляет полезность и стиль на ваш сайт. Чтобы открыть все меню как на мобильных устройствах, так и на настольных компьютерах, ваш веб-посетитель просто должен навести курсор мыши на край экрана.

Так что вы можете сделать сходу? Вы можете добавлять значки, расширенный контент, такой как карты, показывать меню только на определенных страницах и добавлять пользовательский стиль. Кроме того, вы можете создавать многоуровневые меню, добавлять социальные ссылки и многое другое, и все это из простой в использовании панели администратора. Superfly хорошо совместим с дефолтной системой меню WordPress. Он имеет впечатляющий рейтинг 4,89/5,00 и стоит всего 18 долларов.

Легкий плагин меню — STRIPE

Как использовать меню в WordPress

Согласно автору Stripe — это «2-уровневый плагин меню для WordPress, предназначенный для добавления в шапку или подвал вашего сайта. Он не будет заменять или влиять на Ваши меню WordPress, но будет оставаться фиксированным, чтобы оставаться видимым все время. Таким образом, Stripe-отличный плагин меню для реализации ссылок, таких как ваша электронная почта, номер телефона или социальные ссылки.

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

Отличный плагин. У меня все заработало менее чем за 10 минут. На самом деле мне это так нравится, что я удалил свой предыдущий плагин.

Stripe имеет отличный рейтинг 4.60/5.00 и будет стоить вам только 14 долларов.

И напоследок

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

От себя добавлю: если вам нужно сделать меню, выпадающее меню, настроить плагины или тему или у вас есть макет и вам нужна уникальная тема для своего сайта или блога — обращайтесь, я всегда вам помогу.

До скорых встреч!!!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
3 комментария к статье "Как использовать меню в WordPress"
  1. Антон: 27.03.2018 в 22:40 - Ответить

    Здравствуйте. Есть проблема.
    В «Shop online» подпункты (подкатегории) выпадают гармошкой при наведении на родительскую категорию. Когда я вставил подпункты (отдельные страницы) в «Brands», они постоянно высвечивались под родительским пунктом, просто выделяясь другим цветом и фоном (сейчас я их удалил, потому что они портят внешний вид). Как сделать, чтобы они тоже выпадали? Почему в одном и том же меню подпункты отображаются по-разному?

  2. Юрич: 28.03.2018 в 11:17 - Ответить

    Привет, Антон!
    В описании ничего не понял, можете прислать скриншот?

  3. Айк: 04.04.2018 в 02:55 - Ответить

    Спасибо за пост !
    Что нового в wordpress 4.9.5 ?