WordPress тема с двумя меню

Внешний вид — меню

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

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

Раздел меню доступен через Внешний вид > Меню консоли.

Настройки экрана

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

Некоторые элементы, например записи, по умолчанию скрыты.

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

Добавление пунктов в меню

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

  1. Найдите панель под названием Страницы.
  2. На этой панели выберите вкладку Все, чтобы открыть список всех опубликованных в настоящее время страниц на вашем сайте.
  3. Выберите страницы, которые вы хотите добавить, установив флажок рядом с заголовком каждой из них.
  4. Нажмите на кнопку Добавить в меню, расположенную в нижней части этой панели, чтобы добавить выбранные вами элементы в меню, созданное на предыдущем шаге.
  5. Нажмите на кнопку Сохранить меню как только вы добавите все нужные пункты меню.

Ваше пользовательское меню теперь сохранено.

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

Удаление пункта меню

Создание многоуровневых меню

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

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

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

  1. Наведите указатель мыши на «дочерний» пункт меню.
  2. Удерживая левую кнопку мыши, перетащите ее вправо.
  3. Отпустите кнопку мыши.
  4. Повторите эти шаги для каждого пункта подменю.
  5. Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

Добавление меню на ваш сайт

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

  1. Прокрутите вниз окно редактора меню.
  2. В разделе Область отображения установите флажок для того места, где вы хотите разместить свое меню.
  3. Нажмите на кнопку Сохранить меню чтобы сохранить изменения.

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

Перестановка, настройка пунктов меню

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

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

Затем выбор конфигурации:

Текст ссылки

Текст для этого конкретного пункта меню

Атрибут, используемый при отображении метки

Открывать в новой вкладке

Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.

Читайте также:  Postgresql get field types

Классы CSS (необязательно)

Классы CSS для этого пункта меню

Отношение к ссылке (XFN)

Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.

Описание

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

Источник

9 бесплатных плагинов WordPress для оформления меню

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

Значительная часть плагинов, расширяющих функциональные возможности и улучшающих внешний вид меню, платная. У других бесплатен базовый функционал, но за дополнительные опции придется заплатить некоторую сумму. Не каждый готов выкладывать десятки долларов за одно из расширений, особенно если сайт еще не приносит прибыли. Для вебмастеров, которых не устраивает типовое меню, мы сделали подборку бесплатных плагинов для меню WordPress. Сразу оговоримся: определение «бесплатный» в нашем случае означает, что у расширения достаточно широкие функциональные возможности в бесплатной версии. И напротив, это не означает, что у плагина нет премиальной подписки, дающей доступ к дополнительным опциям за дополнительную плату.

Max Mega Menu

Max Mega Menu – мега-популярное решение проблемы с созданием меню для мобильных и десктопных версий сайта на «движке» WordPress. Количество закачек плагина подбирается к 5 миллионам, а число активных установок превысило 300 тысяч. У плагина есть премиальная версия PRO ($19), но и в базовом функционале возможности достаточно высоки. Max Mega Menu преобразует дефолтное меню в раскрывающееся меню с полной шириной в навигационной панели, после чего вебмастер может добавлять в него виджеты, менять стиль с помощью редактора темы, создавать новые сценарии поведения в зависимости от действий пользователя и производить ряд других действий.

  • разработчик: megamenu.com;
  • текущая версия: 2.9.1;
  • последнее обновление: менее месяца назад;
  • версия WordPress: 4.9 и выше, тестировано до 5.5.1;
  • версия PHP: 5.6 и выше;
  • локализация: 9 языков;
  • русский язык: есть;
  • рейтинг WordPress: 4,95.

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

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

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

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

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

Nextend Accordion Menu

Nextend Accordion Menu – неплохой и удобный плагин для быстрого создания «аккордеона», выпадающего меню с вертикальным расположением пунктов. К сожалению, у расширения есть огромный недостаток: команда разработчиков отказалась от поддержки плагина, решив сконцентрировать усилия на других направлениях. Страница расширения удалена с официального сайта WordPress, осталась только ссылка на скачивание последнего релиза на форуме. На момент окончания поддержки у Nextend Accordion Menu было более 10 тысяч скачиваний и достаточно высокая оценка в пользовательском рейтинге – 4,7.

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

У расширения есть несколько готовых меню. Найти их очень легко. После активации плагина, в панели администрирования WordPress появится пункт «Accordion Menu». В первом подпункте находятся готовые решения. Во втором производится добавление и настройка пользовательских меню. Третий подпункт – предложение перейти на версию PRO.

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

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

Читайте также:  Sqlite как установить на python

Responsive Menu

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

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

Интересно, что в бесплатной версии можно установить фоновое изображение, но смена цвета фона – функция 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

WP Responsive Menu – достаточно близкий аналог Responsive Menu. Или наоборот. Возможности обоих расширений находятся примерно на одном уровне, задачу разработчики ставили перед собой одну и ту же. Правда, настроек в WP Responsive Menu поменьше, но и интерфейс проще. Опции бесплатной версии разнесены всего по двум вкладкам пункта WPR Menu панели администрирования меню WordPress: General Settings («Общие настройки») и Menu Appearance («Внешний вид меню»).

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

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

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

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

ShiftNav — Responsive Mobile Menu

По названию плагина «ShiftNav — Responsive Mobile Menu» понятно, что рассчитан он в первую очередь на мобильные платформы. Однако с не меньшим успехом его можно использовать и при создании десктопных версий сайтов на CMS WordPress.

  • авторы: Крис Маврикос, 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;
  • подробная документация.
Читайте также:  Картридж 725 аналог на canon 3010

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

WP Mega Menu

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

  • разработчик: 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:

  • 3 уровня вложения меню (5 в платной версии);
  • настройка стилей;
  • брендирование лого или текста;
  • «маска оверлея» (наложение одного изображения на другое);
  • интуитивно понятный интерфейс;
  • шрифты Google Fonts;
  • эффекты анимации;
  • подробная документация.

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

Заключение

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

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

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector