Создать вертикальное выпадающее меню в wordpress. Как сделать красивые меню в WordPress плагинами и без

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

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

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

А знаний в CSS нет!

Первое решение, можно и бесплатно.

Второй ответ:

Учитывая, что это наш любимый WordPress – найти подходящий плагины.

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

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

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

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

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

Плагины меню для WordPress:

UberMenu :

Один из лучших с точки зрения функциональности, то, как он работает – можете глянуть «воочию» на официальном сайте разработчиков //wpmegamenu.com/ . Его главная особенность состоит в том, что меню можно снабдить кучей различных «плюшек», к примеру, в раздел «контакты» кроме основных пунктов добавить ещё и карту проезда, в качестве иллюстраций к категориям можно использовать красивые картинки.

Настраивается это все из админки, причем очень легко, по моему мнению UberMenu крайне необходим тем сайтам, которые часто делятся с посетителями различного-рода контентом: видео, аудио, картинки. С помощью данного плагина меню будет на 100% понятно даже для тех, кто впервые заглянул к вам на сайт или попросту «не разбирается в интернете». В общем говоря – плагин делает сайт визуально-понятным и от вас не потребуется инструкций, вроде «зайдите туда-то и туда-то», человек сам сориентируется.

На данный момент – это «дополнение» платное и обойдется вам в ~18 долларов, вместе с самим плагином вы получите от разработчиков дополнительные иконки и картинки для кастомизации меню в WordPress.

Stripe:

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

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

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

JQuery Vertical Mega Menu Widget:

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

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

P/S.Есть еще в сети интересные сервисы для генерации красивых менюшек.

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

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

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

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

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

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

10. UberMenu

Более 50 тысяч продаж говорят о том, что плагин UberMenu является достаточно популярным продуктом и трендом на платформе CodeCanyon. Этот плагин поддерживает практически все функции, которые Вам потребуются для апгрейда обычного скучного меню. UberMenu – это удобный, настраиваемый, адаптивный плагин меню WordPress. Он предлагает огромное количество пользовательских настроек для создания неповторимого дизайна. Кроме того, плагин позволяет создать версию для сенсорных экранов и использовать визуальные анимированные эффекты.

Ключевые функции UberMenu:

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

9. Admin Menu Editor

У WordPress есть редактор меню по умолчанию, но этот плагин намного более мощный. Если Вам недостает функций, Вы должны обязательно установить этот плагин. Он абсолютно бесплатный, его использует более 20 тысяч людей. С этим плагином с кастомизацией и созданием меню справится даже новичок: все это благодаря функции перетаскивания объектов мышкой. Плагин постоянно обновляется, чтобы быть полностью совместимым с версией WordPress.

8. NOO Menu

Если Вам понравился наш первый плагин, но Вы все еще хотите что-то другое, Вам обязательно нужно присмотреться к NOO Menu. Плагин предоставляет все основные функции, но обладает несколько другим пользовательским интерфейсом, который предлагает новые элементы дизайна. Как раз на дизайн и ориентируется этот плагин, который можно приобрести на платформе CodeCanyon. С помощью плагина можно добавить мега меню на сайт, а потом кастомизировать меню в соответствии со своим желанием. Плагин мало весит и адаптирован для смартфонов, планшетов и любых браузеров.

Ключевые функции NOO Menu:

Показывает изменения в режиме реального времени, что делает кастомизацию очень удобной
Поддерживает вертикализацию и горизонтацию.
В плагине предустановлено 9 стилей с аддонами для последующей кастомизации.
Множество шрифтов Google, опцию прозрачности и 350 иконок Font Awesome.

7. WordPress Menufication

Этот премиум плагин позволяет создавать навигацию, адаптированную для мобильных телефонов. Он использую первый мобильный пользовательский интерфейс с элегантными элементами дизайна и также является очень простым в использовании. В основном использует Flyout, а для анимации – CSS3. Плагин доступен на платформе CodeCanyon со всей необходимой документацией; также предоставляется 6 месяцев бесплатной поддержки производителя.

Ключевые функции WordPress Menufication:

It is totally integrated and compatible with WordPress default Menu system.
Поддерживает сенсорные жесты на тачскринах смартфонов и планшетов.
Позволяет добавлять логотип.
Автоматически улучшает функционирование.

6. Mega Main Menu

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

Ключевые функции Mega Main Menu:

Имеет 10 разных визуальных инструментов и функциональных способностей, что предоставляет широкий выбор.
Предоставляет более 600 шрифтов Google, 1600 иконок Vector и бесконечно разнообразную цветовую палитру.
Плагин поддерживает работу на смартфонах и планшетах.

5. LMM

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

Ключевые функции LMM:

Имеет опцию админа, которая позволяет контролировать доступные опции и разные конфигурации.
Предлагает неограниченное число тем с возможностью последующей кастомизации.
Совместим с WooCommerce и поддерживает цифровую загрузку.

4. ScrollNav

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

ScrollNav совместим с различными браузерами, такими как Chrome, Opera, IE11, IE10, Firefox и Safari. Этот плагин также поддерживает большое количество расширений, такие как PHP, HTML, JavaScript JS и CSS. Более того, ScrollNav совместим с BuddyPress 1.7.x, BuddyPress 1.8.x и BuddyPress 1.9.x.

3. Big Voodoo – мега меню плагин

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

Итак, как Big Voodoo улучшает Ваше меню? Добавление шорткода/пользовательского HTML в меню по Вашему выбору означает, что Вы можете быстро и удобно отображать виджеты и любые другие стили в Вашем меню. Вы можете добавить раздел или поделить на колонки Ваше меню, что приведет в более мощному и простому результату. Более того, Вы можете добавить к Вашему меню уже существующее меню.

Для корректной работы плагина Big Voodoo Вам понадобятся PHP 5.3 и WordPress 3.5. Установка этого плагина является простейшей процедурой. Сам плагин прост в использовании и обладает широким спектром функций. Он подойдет как для новичков, так и для опытных пользователей.

2. LMM

LMM – это аббревиация Liquida Mega Menu. В эффективности этого невероятно популярного мега плагина невозможно сомневаться. Самое интересное в отношении LMM – это то, что он превосходно работает, неважно, разработчик Вы или простой пользователь. Этот плагин оставляет о себе очень приятное впечатление. LMM прекрасно справляется с поставленной задачей, не заставляя Вас беспокоиться о технических неполадках. Если Вы хотите создать мощное меню, то LMM – идеальный вариант, обладающий кучей функций.

Те, кто уже использует этот мега меню плагин, будут настойчиво рекомендовать Вам LMM. Этот плагин предоставляет широкие возможности для кастомизации, а также обладает большим набором шрифтов Google и иконок Font. Более того, плагин совместим с WooCommerce, тем самым позволяя управлять платформами онлайн-шопинга. Liquida Mega Menu обладает великолепными темами, а также позволяет создавать меню вертикальной ориентации для мобильных устройств и меню горизонтальной ориентацией для устройств с широким экраном.

1. Supermenu

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

После установки плагина Вам дается несколько типов меню на выбор. Можно использовать CSS3 для создания анимации. Также в наборе идет более 600 шрифтов Google, среди которых Вы точно найдете тот самый, который будет полностью соответствовать Вашему вкусу.

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

Заключение

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

20.10.2012

admin

Те кто пользуется движком wordpress наверное заметили, что часто не всегда просто создать нужное боковое меню на сайте. Как создать вертикальное раздвижное меню именно об этом пойдет речь в данной статье.

В CMS wordpress не так сложно разместить верхнее или нижнее горизонтальное меню. И для многих новичков не составит труда установить такое меню у себя на сайте. Но, когда речь заходит про навигацию сбоку, не все знают, как конкретно это сделать. А ведь именно левое боковое расположение меню считается более оптимальным с точки зрения посетителя. Это могут подтвердить многие исследования. Потому что человек, зайдя на сайт, начинает его мониторить, начиная с левой стороны. Поэтому не зря гугл тоже разместил свою навигацию именно слева от поисковой выдачи.

Установка бокового меню в wordpress

Чтобы установить боковое меню в wordpress можно воспользоваться виджетом «Собственное меню». Правда, перед этим нужно будет создать свое уникальное меню. К примеру, ваш сайт, занимается продажей кухонных оборудований, таких как, краны, смесители и другая сантехника. Поэтому, прежде всего, нужно создать страницы типа «Главная», «Товары», «Статьи», «О нас». В статьях же можно выложить материалы о том, какой марки выбрать сантехнику, как купить мойку для кухни из искусственного камня, какие бывают виды смесителей и т. п. После чего, следует зайти в раздел «Меню» в админке вордпресса, и создать там новое меню из этих страниц, которое будет боковым. Теперь, как я говорил выше, можно расположить боковое меню с помощью виджета вордпресс. Для этого достаточно установить виджет в сайдбар и выбрать в нем соответствующее меню. А можно пойти другим путем, воспользоваться специальным плагином.

Видео установка плагина jQuery Slick Menu

Создание вертикального меню с помощью плагина jQuery Vertical Accordion Menu

Данный бесплатный плагин позволяет создать вертикальное раздвижное меню. Причем по умолчанию, уже есть пару готовых вариантов шаблонов меню, причем с различными цветами. Самая главная особенность данного плагина в том, что он позволяет создавать именно раздвижное меню. Это очень удобно, если скажем, в одном пункте меню у вас есть несколько подпунктов. При наведении мышкой на первый раздел будет раскрываться дополнительный список пункта. Еще одной приятной особенностью, которой обладает Vertical Accordion Menu, является наличие специального шорт-кода плагина. Который можно разместить в самих записях сайта, тем самым создав там меню.

плагин позволяет создавать различного цвета и стиля меню

Установить плагин можно через саму админку вордпресса, набрав там «jQuery Vertical Accordion Menu» или же скачать с официального сайта автора. После установки плагина, вам нужно зайти в «Виджеты», найти там виджет плагина, и перетянуть его в сайдбар. В самом виджете вы найдете все необходимые настройки плагина. Хочется добавить, что у автора jQuery Vertical Accordion Menu есть и другие специальные плагины, которые позволяют создавать различные многоуровневые меню, как вертикальные, так и горизонтальные.

Таким образом, создать вертикальное выпадающие (раздвижное) меню в wordpress, не так уж сложно, если использовать специальные плагины.

Здравствуйте уважаемые будущие веб-мастера. Продолжаем изучать

В Консоли WP можно создать меню, которое будет отображаться в боковой колонке Вашего сайта.

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

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

Здесь, под строкой «Добавить рубрику», расположено несколько полей для заполнения. В первом поле нужно прописать название рубрики, именно оно будет отображаться в меню.

Во втором, прописывается то же название, только английскими буквами. Например, если в первом написано «Рубрика», то во втором надо написать «rubrika».

Третье и четвертое поля не обязательны для заполнения, хотя по советам бывалых, четвёртое поле (описание), очень положительно влияет на продвижение сайта в поисковых запросах, так что в него можно внести краткое описание того о чём данная рубрика.

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

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

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

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

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

После того, как меню создано , необходимо нажать «Сохранить меню».

Теперь опускаемся по странице вниз до раздела «Рубрики», ставим галочки в чекбоксах (квадратиках), и нажимаем «Добавить в меню».

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

После завершения всех манипуляций, не забудьте «Сохранить меню».

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

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

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

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

Теперь, если на странице сайта щёлкнуть по названию рубрики в меню, то она откроется, и в ней будет написанная Вами, для этой рубрики, статья.

А в дальнейшем, если Вы познакомитесь, с моей помощью, с основами HTML и CSS (что, кстати, для меня оказалось совсем не сложно), то и менять внешний вид меню, темы оформления, а значит и всего Вашего сайта, Вы будете так, как Вашей душе угодно.

Перемена

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

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

Если тема поддерживает WordPress 3 Menu System, то верхнее menu можно создать через раздел «Внешний вид» — «Меню», в противном случае оно формируется автоматически из публикуемых страниц.
Создать меню, содержащее активные рубрики блога, можно с помощью виджета «Рубрики».
Меню с ссылками на страницы блога выводится с помощью виджета «Страницы». Лично я никогда этим виджетом не пользовался, потому что на блоге страницы WP используются для вывода технической информации (о себе, карта сайта, обратная связь и так далее). Лучшее место для них — в шапке блога в горизонтальном виде. Так уж принято.
Произвольное меню создается в разделе «Внешний вид» — «Меню», для вывода на блог используется одноименный виджет.
Использовать дополнительными плагины WordPress.

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

Стандартные возможности WordPress

Перейдите в раздел «Внешний вид» — «Меню», нажмите на кнопку «+» и введите заголовок.

Теперь необходимо добавить в него пункты:

Страницы — выберете нужные страницы и нажмите «Добавить в меню».

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

Не забывайте сохранять внесенные изменения.

В темах, которые поддерживают WordPress 3 Menu System присутствует так же опция «Области темы» — это место в , которое специально отведено под меню. Чаще всего оно предназначено для вывода верхнего горизонтального меню блога, которое часто называют «главным». В таком случае достаточно задать «Область темы», и оно автоматически появится на сайте.

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

Сохраните настройки и полюбуйтесь на свое творение.

Верхнее меню WordPress — как отредактировать и удалить

Во многих темах верхнее menu формируется автоматически из публикуемых страниц, которые в основном используются для общей информации — «О блоге», «Полезная информация», «Карта сайта» и так далее. Для этого в файле header.php используется следующий код:

> >

В моей теме оно дублируется еще внизу страницы, поэтому этот же код был и в шаблоне footer.php.

Чем это неудобно:

Формируется динамически из всех созданных и опубликованных страниц, хотите вы того или нет. Порой некоторые страницы нужно оставить незамеченными.
В некоторых темах под верхнее меню выделяется очень мало места, поэтому в нем отображаются только первые 3-4 пункта, а остальные скрываются под соседним слоем (будь то область контента или логотип). Смотрится это очень некрасиво, да и поисковые системы могут это счесть за преднамеренное сокрытие ссылок от посетителей.

Исправить эти недочеты достаточно легко — нужно просто удалить тот код, что я привел выше и написать следующую конструкцию:

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