Возможности кастомизации движка WordPress практически безграничные – все зависит от вашей фантазии и возможностей. Я часто натыкаюсь на необычную реализацию «повседневных» модулей и функций рыская по просторам интернета.
Если тема Вашего блога предусматривает что эффектные меню то Вам повезло, если нет то придется рыть код таблиц стилей и прописывать самостоятельно все красивые эффекты.
Некоторые настолько «переделывают» свой сайт, что узнать с первого взгляда и даже спустя множество часов использования в нем WordPress не удается. Возникает вопрос – как сделать для себя также?
А знаний в CSS нет!
Первое решение, можно и бесплатно.
Второй ответ:
Вот один из ярких примеров красивого и оригинального меню WordPress, но такого можно добиться и с помощью стандартных функций используя специальный шаблон:
Сегодня плагинов есть тысячи, некоторые предназначены для добавления определенной функциональности и работают незаметно для вашей аудитории, другие же влияют на внешний вид темы и записей. Но вы, как и я, не будучи хорошо знакомым с CMS WordPress вряд ли догадываетесь о всех полезных и красивых плагинах/виджетах для этого движка. Сегодня я расскажу с помощью каких плагинов можно сделать красивое, но при этом достаточно функциональное меню.
Стандартными средствами движка вы можете лишь создать категории/подкатегории и вывести их в «древовидном» стиле, это неинтересно и типично – такое можно видеть сплошь и рядом. Конечно, иногда и этого хватает, но если нужно, к примеру, для каждой категории сделать иллюстрацию или небольшое пояснение рядом, притом, чтобы это выглядело уместно и было практичным?
Тут выход один – обратиться к плагинам, некоторые из них появились на свет лет 5 назад и успешно развиваются по сей день в ногу с самим WordPress-ом. Я буду делать обзор самых эффективных решений, возможно, в природе существуют и более красивые решения, но далеко не всегда они обладают нужной функциональность, поддержкой русского языка и другими мелочами, которые необходимы большинству администраторов.
Меню – основа для навигации пользователей, особенно важно это на сайтах коммерческой тематики, к примеру, если это «визитка» компании, которая занимается продажей товаров/услуг, нужно чтобы потенциальный покупатель с максимальной легкостью отыскал то, что его интересует. Плагины меню для WordPress, о которых я расскажу сегодня, позволяют это сделать, причем достаточно просто, некоторые из них платные, но, по моему мнению, не так уж критично заплатить несколько долларов за использование нужного модуля.
UberMenu :
Один из лучших с точки зрения функциональности, то, как он работает – можете глянуть «воочию» на официальном сайте разработчиков //wpmegamenu.com/ . Его главная особенность состоит в том, что меню можно снабдить кучей различных «плюшек», к примеру, в раздел «контакты» кроме основных пунктов добавить ещё и карту проезда, в качестве иллюстраций к категориям можно использовать красивые картинки.
Настраивается это все из админки, причем очень легко, по моему мнению UberMenu крайне необходим тем сайтам, которые часто делятся с посетителями различного-рода контентом: видео, аудио, картинки. С помощью данного плагина меню будет на 100% понятно даже для тех, кто впервые заглянул к вам на сайт или попросту «не разбирается в интернете». В общем говоря – плагин делает сайт визуально-понятным и от вас не потребуется инструкций, вроде «зайдите туда-то и туда-то», человек сам сориентируется.
На данный момент – это «дополнение» платное и обойдется вам в ~18 долларов, вместе с самим плагином вы получите от разработчиков дополнительные иконки и картинки для кастомизации меню в WordPress.
Stripe:
Плагин тоже платный – обойдется в сумму равную 14 долларам, но имеет совершенно другие цели и функции. Он минималистичен – в Stripe главным остается «незаметность» меню, при этом простая и красивая организация оного, чтобы человек, когда захочет зайти в «контакты» или любую другую категорию, без проблем отыскал её.
Стоить отдать должное художникам – они нарисовали красивые кнопки и анимацию, при наведении курсора на определенный пункт меню, ему отдается весь акцент, остальные же части «тускнеют» и отодвигаются на второй план.
Очень приятно, что внедрить такое меню можно практически в любой сайт без отрицательных последствий, да и смотреться будет гармонично с любым дизайном (шаблоном) – в общем говоря, достаточно универсально!
JQuery Vertical Mega Menu Widget:
Один из самых простых, среди представленных, его выделяет лишь полная бесплатность. Как видите из скриншота выше – авторы позиционируют свое творение, как идеальное для интернет-магазинов. На деле же – подойдет для любого сайта с множеством категорий, удобно организован вывод основных и подкатегорий с картинками и иллюстрациями.
Для крупного проекта, конечно же, WordPress не сильно годится, но небольшой интернет-магазин создать на основе этого меню можно. Если у вас 20-30 позиций в нескольких категориях, к примеру.
P/S.Есть еще в сети интересные сервисы для генерации красивых менюшек.
Там есть сложности в настройке кода, но об них я расскажу в следующих статьях, если конечно Вы попросите.
Меню для WordPress – это один из ключевых элементов сайта. Эта та часть площадки, с которой постоянно взаимодействует пользователь. От качества, эргономичности и дизайна менюшки зависит общее впечатление посетителей о сайте. Порой именно благодаря интересному, необычному меню можно превратить обычного интернет-серфера, который проходил мимо, в постоянного юзера вашего сайта.
Чтобы сделать качественное вертикальное, горизонтальное, многоуровневое или и любое другое произвольное меню, вам предстоит либо самостоятельно открывать и редактировать классы CSS, либо можно не спеша и без профессиональных навыков создать его при помощи плагина.
А поскольку их много, в этом обзоре будут рассмотрены возможности лучших платных и бесплатных модулей, которые позволят быстро вывести меню на ваш сайт.
Хоть в названии плагина и числится слово “мега”, с ним вы не сможете создать чего-то невозможного. Но простое вертикальное меню с собственными категориями любого плана при помощи модуля добавить на сайт вполне реально. Большой плюс JQuery Vertical Mega Menu Widget в том, что инструмент распространяется бесплатно. А значит без дополнительных затрат хоть сегодня вы сможете создать качественную менюшку для своего сайта.
JQuery Vertical Mega Menu Widget позволяет создавать виджет, всплывающее меню, вывод на экран которого можно всячески настраивать (меняя анимацию появления, перехода между категориями, вывод и т. д.). В итоге получится что-то похожее на accordion. Стиль его сможете настроить самостоятельно, редактируя классы CSS. И не забудьте во вкладке “Внешний вид” активировать виджет, и разместить его в определенной части сайта – иначе плагин JQuery Vertical Mega Menu Widget не сможет вывести accordion на страницу.
Плагин позволяет сделать разное, интересное и адаптивное меню для сайта. Всего модуль содержит три вариации менюшки:
Все три варианта с выходом последней версии плагина могут адаптироваться под мобильные устройства. Модуль совместим с WordPress 3.5+ и работает по простому принципу – настройка не займет много времени. Интегрируется в любую тему, так что ковыряться в CSS и коде шаблона не придется.
Еще один плагин из разряда Mega. Модуль JQuery Mega Menu Widget работает с использованием JQuery-библиотек – встраивает JavaScript в HTML. Вы сможете создать виджет, при наведении на который произойдет вывод выпадающих категорий.
JQuery Mega Menu Widget содержит множество настроек:
Также этот Mega плагин позволяет деактивировать анимацию полностью и создать широкоформатное меню, автоматически подстраиваемое под пропорции шаблона. Возможно, это не совсем mega модуль, но скачать его можно бесплатно, и уже через 10-15 минут у вас на сайте появится виджет.
Разнообразный инструмент, который обеспечит возможность добавить колоритное меню с современным дизайном. Основная особенность дополнения в том, что можно сделать не только заголовки категорий, но и загрузить к ним изображения. Вот какие типы менюшек предлагает вам создать плагин:
Чтобы добавить выбранное адаптивное меню, вам предстоит внести шорткод структуру шаблона.
Еще один jQuery-плагин, который позволяет создать многоуровневое функциональное меню для Вордпресс. Вы получите эстетически приятную округленную менюшку. Кнопки будут разделены спецификой CSS модуля. Сможете самостоятельно настроить стилевые классы, и сделать произвольное меню как раз под дизайн вашего ресурса. В дополнение jQuery Dropdown Menu доступна настройка цвета заднего фона, а также изменение размера и типа шрифтов для описания категорий. Это адаптивное меню.
Виджет работает только с CSS. В большей мере подходит для тех, кто разбирается в CSS, и хочет преобразить вывод уже существующего меню. С модулем Dropdown Menu Widget сможете создать ниспадающее произвольное меню с красивым дизайном. В модуле доступна настройка каждого отдельного элемента. Также имеются несколько стандартных тем CSS. Виджет позволяет сделать вертикальное или горизонтальное отображение многоуровневых категорий.
Этот инструмент не сможет добавить пользовательскую менюшку на сайт, но сделает меню для вебмастера. Модуль Ozh’ Admin Drop Down Menu предназначен для тех, кто устал постоянно заходить в панель администрирования WordPress в поисках нужной настройки. Плагин добавит невидимую для посетителей менюшку на страницах, которое можно будет удобно настроить для быстрого доступа к редактированию постов, добавлению медиа, созданию страниц и т. д.
Это флэш-меню. Разработчики не зря называют его динамическим – вертикальное меню работает с особыми анимационными эффектами. В итоге, сможете сделать адаптивное, стильное и удобное flash-menu. Цвет фона, текста, шрифт и размеры каждого элемента настраиваются в специальном разделе администрирования. Удобство менюшки для пользователя в первую очередь связано с возможностью остановить выбор категории во время скролла на страницах – то есть пользователю не придется постоянно открывать меню, если понадобилось прокрутить сайт.
Это необычная менюшка. Вы можете либо использовать ее в качестве стандартного меню для всего сайта, либо размещать его на отдельных страницах. Рассчитан плагин на использование на ресурсах ресторанов, кафе, баров и других заведений, где есть “Меню”. На проектах другой сферы деятельности использовать не рекомендуется – настройка под другие цели будет сложная.
Предельно простой плагин. Позволяет быстро создать плавающий виджет и вывести его сбоку экрана. Идеально подходит для блогосферы. Если вы пишите какой-то тематический блог, в котором множество терминов, и хотите обучать начинающих в этой сфере, тогда Custom Taxonomies Menu Widget вас выручит. Сможете сделать классифицированное иерархическое боковое меню с четкой категоризацией и отображением новых разделов. Порядок таксономии настраивается при помощи разных фильтров. Виджет этот бесплатный, и подходит только для обучающих порталов.
Если хотите, чтобы у вас была accordion менюшка на ресурсе, то JQuery Accordion Menu Widget – лучший инструмент, чтобы осуществить эту задумку. Функции плагина JQuery Accordion Menu Widget:
С последним пунктом будьте осторожны – низкая скорость анимации может уменьшить юзабилити инструмента.
Респектабельное и стильное меню. Удовлетворит потребности любого сайта, и быстро станет его украшением. А самое главное – Responsive Select Menu можно скачать бесплатно. Вывод менюшки можно будет организовать в любом положении: вертикальное, горизонтальное или в качестве виджета. Это полноценное адаптивное menu, в котором можно создать множество уровней разных форматов. Вы сможете добавить в менюшку кликабельные списки с описаниями подкатегорий, и даже встроить Google Maps с формами для регистрации! Стиль CSS полностью настраивается. Это не скучное стандартное меню, а инновационное и необыкновенное дополнение для вашего проекта!
Виджет, который размещается в любой части сайта. Вы получите стильное и аккуратное меню, вывод которого удобно настраивается при помощи различных типов анимации. Модуль JQuery Slick Menu Widget удобен тем, что с ним можно сделать адаптивное меню, которое будет следовать за пользователем, и содержание его может быть произвольное (от перечня главных рубрик портала до списка ссылок на группы социальных сетей). Инструмент предполагает настройку разных стилей CSS – в арсенале имеются 12 готовых вариантов дизайна и возможность самостоятельно их изменить. Вывод менюшки также настраивается, как и ее положение (вертикальное, динамичное, статичное и т. д.).
Большинство указанных в обзоре плагинов являются бесплатными. Но Fading Menu Plugin – платный инструмент, и он заслуживает того, чтобы за его использование заплатили. С ним вы сможете добавить на сайт произвольное меню, которое будет закреплено сверху страницы. На первый взгляд кажется, что это мелочная функция. Но на деле оказывается, что закрепление менюшки в верхней позиции может значительно уменьшить число “отказов” (одного из параметров пользовательского поведения), а это позитивно повлияет на ваши позиции в поисковике.
Настройка Fading Menu Plugin не отличается особой сложностью – вывод и содержание менюшки сможете настроить в стандартной панели WordPress. В процессе настройки у вас будет выбор: добавить виджет в верхней панели или снизу. Рекомендуется добавлять сверху – в этой части сайта пользователи обычно проявляют большую активность. Не забудьте также настроить стилевые параметры. Важно не сделать плагин ярким и перенасыщенным, а удачно его совместить с текущим шаблоном Вордпресс вашего сайта. Если есть время и возможности, можно добавить собственные иконки для менюшки. И обязательно внесите в разделы модуля категории, в которой периодически будут появляться новые записи – Fading Menu Plugin позволяет отображать новые уведомления в шапке меню.
Поддерживает вертикальное и меню в горизонтальном положении. Подходит как для создания менюшки с нуля, так и для корректировки уже существующего. Плагин содержит много разных настроек, которые легко регулируются в панели Вордпресс. Вывод менюшки доступен в одном из 20 стилей. Вертикальное меню может быть размещено с любой стороны страницы, а горизонтальное – снизу или сверху. UberMenu адаптивное и работает на всех популярных браузерах одинаково хорошо.
Какое бы произвольное дополнение из предложенного списка вы не выбрали, помните, что будь то вертикальное, горизонтальное или всплывающее виджет-меню, оно должно удачно сочетаться с остальными элементами сайта!
Меню – один из самых важных элементов на любом сайте. Именно от простоты и удобства навигации зависит, насколько комфортно посетителю будет странствовать по сайту. В WordPress существует 2 вида меню: вертикальное и горизонтальное. В этой статье рассмотрим такие вопросы: Как создать? Как добавить меню в тему, в которой оно не предусмотрено? Вывод меню, создание вложенности страниц, а так же общие настройки в WordPress.
Горизонтально меню вшито в большинство современных WordPress тем. Некоторые шаблоны позволяют делать дополнительные настройки навигации, а некоторые - нет. По умолчанию, все добавленные страницы будут отображаться в меню.
Достаточно часто начинающие пользователи WP задаются вопросом, о том, как создать выпадающее многоуровневое меню , будь то вертикальное или горизонтальное.
Многоуровневые выпадающие горизонтальные или вертикальные меню реализуются с помощью присвоения определенной иерархии страниц. Соответственно сделать это можно на этапе создания, либо же при редактировании страниц в разделе «Страницы» админки WP , где можно найти блок со следующими настройками:
Итак, для создания многоуровневой вложенности, необходимо присвоить родительскую страницу для другой страницы.
Для организации структуры, изображенной на скрине выше, необходимо было присвоить страницам «Саб 1» и «Саб 2» родительскую страницу «Пример страницы», а так же страницам «Саб саб 1» и «Саб саб 2» родительскую страницу «Саб 1». Я думаю, принцип построения понятен.
Что же делать, если тема (шаблон) не поддерживает вывод горизонтального меню ?
Случаи отсутствия встроенного меню в тему крайне редки, однако случаются. Обусловлено это тем, что в таких шаблонах просто-напросто не прописана функция вывода меню:
Необходимо просто добавить эту строчку в нужное место шаблона, будь то Header , Footer или Sidebar, которые расположены в файлах Header.php, Footer.php, Sidebar.php вашей темы. Стоит сразу же заключить функцию в теги , эти теги html 5 влияют на оптимизацию сайта, а так же дадут возможность без проблем присвоить стили для меню. То есть так:
Я упомянул про то, что придется присваивать CSS стили, это вполне логично, ведь разработчики темы не сделали этого и меню в ней по умолчанию не предусмотрено. И у тех, у кого проблемы с CSS, могут возникнуть, и возникнут, определенные трудности. Этим людям, я бы посоветовал обратиться к поисковикам, с запросом «горизонтальное меню» и найти подходящие стили для шаблона сайта.
Для примера выложу один вариант черного выпадающего многоуровневого меню - . Закачав файл, откройте его, скопируйте содержимое и вставьте в файл style.css, расположенный в папке с темой WordPress. Демо меню можно посмотреть .
С горизонтальным меню разобрались, а вот с выпадающим вертикальным…с ним все намного проще, оно реализуется с помощью плагинов. Их достаточно много, вот несколько из них:
Если же выпадающее меню не нужно, то вся работа сводится к тому, что необходимо просто воспользоваться виджетом «Произвольное меню» , предварительно его создав.
Создать меню очень просто, необходимо зайти во вкладку «Внешний вид» - «Меню», ввести название и нажать «Создать».
Разработчики WP позаботились о своих юзерах и сделали все, чтобы им было комфортно пользоваться продуктом, поэтому лишних комментариев не будет. Воспользовавшись левой колонкой, можно добавить необходимые пункты в меню. Эти пункты включают в себя:
После того, как пункты добавлены в меню, необходимо создать вложенность и упорядочить все ссылки. Делается это очень просто: путем перетаскивания пунктов располагаете их в нужном порядке, а в случае необходимости указания родительской страницы, необходимо перетащить желаемый пункт под родительский элемент.
Выпадающие мега-меню - отличная дизайнерская находка.Навигация по сайту , содержащим большое количество страниц, всегда представляла собой определенную проблему. Классическое статическое меню а-ля sitemap быстро разрастаются по мере роста числа страниц и занимают очень много места. Динамические выпадающие меню позволяют существенно экономить пространство страницы, но в жертву приносится удобство пользования - для навигации требуется активная и довольно точная работа мышью. Чуть промахнулся и раскрывается не то меню.
Толчком к развитию концепции мега-меню послужил, вероятно, ленточный интерфейс Microsoft Office 2007. Эта концепция находится как раз посредине между простым статическим меню и динамическим раскрывающимся. С одной стороны, такое меню достаточно информативно и интуитивно понятно, с другой - значительно сокращает необходимые манипуляции мышью. Раскрываясь, оно может использовать все доступное пространство экрана, что позволяет пользователю охватить взглядом все предлагаемые в данном контексте пункты, а при необходимости скрывается.
Как бы там ни было, а мега-меню сейчас, что называется, в тренде и если вы до сих пор еще не использовали его, то стоит присмотреться к нему поближе.
Кроме того меню также имеет ряд других замечательных особенностей, таких как:
Стоимость: $19
Стоимость: $15
Плагин предлагает широкие возможности для создания меню с современным и стильным дизайном: вертикальной или горизонтальной ориентацией, возможностью включать в пункты меню ссылки, изображения и даже карточки товаров WooCommerce или Easy Digital Downloads, что может пригодиться при разработке интернет-магазинов.
Стоимость: $19
Стоимость: $6
Стоимость: $29
Содержимое пунктов меню может представлять собой текст, ссылки, изображения, видео , формы и различные виджеты . Для размещения всего этого используется собственная 12-колоночная сетка.
Стоимость: $15
Дизайн современный и стильный и, конечно же, полностью .
Стоимость: $19
Одним из представителей данной разновидности мега-меню является Superfly - Responsive WordPress Menu Plugin. Впечатляющий инструмент как в плане дизайна, так и характеристик.
Стоимость: $22
Toggle menu - очень простое, минималистическое меню , которое, тем не менее, отлично справляется со своей основной функцией.
Стоимость: $5
В распоряжение разработчика WP Floating Menu Pro предлагает 13 и 7 различных вариантов расположения на странице, возможности настройки, цвета, содержимого и количества пунктов.
Для экранов разрешением менее 480px имеется возможность автоматического отключения меню.
Стоимость: $17
Стоимость: $14
Способен автоматически преобразовывать уже существующие обычные меню в одно мега-меню с полным контролем над процессом преобразования и сохранением или переназначением соответствующих действий.
Здравствуйте уважаемые будущие веб-мастера. Продолжаем изучать
В Консоли WP можно создать меню, которое будет отображаться в боковой колонке Вашего сайта.
Во многих темах оформления, такое меню можно сделать выпадающим, или раскрывающимся, что предусмотрено по умолчанию.
Для того чтоб было чем наполнить меню, нужно создать рубрики. Заходим в Панель инструментов — записи — рубрики.
Здесь, под строкой «Добавить рубрику», расположено несколько полей для заполнения. В первом поле нужно прописать название рубрики, именно оно будет отображаться в меню.
Во втором, прописывается то же название, только английскими буквами. Например, если в первом написано «Рубрика», то во втором надо написать «rubrika».
Третье и четвертое поля не обязательны для заполнения, хотя по советам бывалых, четвёртое поле (описание), очень положительно влияет на продвижение сайта в поисковых запросах, так что в него можно внести краткое описание того о чём данная рубрика.
Затем нажимаем кнопку «Добавить новую рубрику», и она появляется в списке в поле справа, а поля «Добавить рубрику» освобождаются для новых записей. Вот таким образом нужно создать все рубрики, которые будут в Вашем сайте.
Хотя, что это я говорю «все». Рубрики всегда можно добавлять, убирать, и редактировать названия, а так же добавлять и убирать их из меню. Так что создайте несколько рубрик, и пойдем смотреть, как делается меню.
Для этого, на панели инструментов заходим в раздел «Дизайн», или у кого-то, может быть, «Внешний вид», и далее «Меню».
Оказавшись на странице «Меню», нужно в первую очередь прописать его название в поле «Название меню», и нажать «Создать меню». Написанное здесь название нигде не отображается, и может быть любым.
Служит оно лишь для того, чтобы в случае создания и использования нескольких меню, можно было проще отличать их друг от друга.
После того, как меню создано , необходимо нажать «Сохранить меню».
Теперь опускаемся по странице вниз до раздела «Рубрики», ставим галочки в чекбоксах (квадратиках), и нажимаем «Добавить в меню».
После этого все выбранные рубрики появятся в поле справа, где их можно перетаскивать и смещать. Это уж кому как хочется. Для перетаскивания, нужно навести курсор на элемент, нажать левую клавишу, и тащить мышью.
После завершения всех манипуляций, не забудьте «Сохранить меню».
Следующим шагом, нам нужно разместить созданное меню на страницах сайта. Для этого проходим Внешний вид > Виджеты, и находим виджет «Произвольное меню».
Этот виджет нужно перетащить мышью в Основную область, где он сразу после перетаскивания откроется, и в нём отобразиться название созданного Вами меню.
WordPress позволяет создавать несколько меню, и если Вы их сделаете два или три, то в виджете нужно будет поставить название того, которое он будет выводить на страницах сайта.
Когда статья будет написана, поставьте галочку в чекбоксе той рубрики, в которой эта статья будет размещена, и только после этого нажимайте «Опубликовать».
Теперь, если на странице сайта щёлкнуть по названию рубрики в меню, то она откроется, и в ней будет написанная Вами, для этой рубрики, статья.
А в дальнейшем, если Вы познакомитесь, с моей помощью, с основами HTML и CSS (что, кстати, для меня оказалось совсем не сложно), то и менять внешний вид меню, темы оформления, а значит и всего Вашего сайта, Вы будете так, как Вашей душе угодно.
Перемена