Выпадающее меню wordpress

Как сделать выпадающее меню?

Приветствую вас! Мы с вами проделали громадную работу на пути к созданию своего детища (блога) и плавненько подошли к его настройке и к его оформлению. Я знаю, что большинство из вас пользуются популярной и удобной программой WordPress, которая предназначена для управления контентом (СМS). Вот мы и подошли к нашей основной сегодняшней теме, это выпадающее меню wordpress. Как вы думаете, для чего вообще используется меню на сайте? Правильно для удобства, экономии места, ну и конечно же для красоты, без этого никак).

Итак, продолжим. Меню в WordPress, начиная где-то с 3 версии, имеет очень гибкие настройки, которые позволяют пользователю настраивать меню Вордпресс как ему необходимо. Меню мы с вами сделаем несколькими способами. Ну что вы готовы? Тогда приступим.

Как сделать выпадающее меню?

Способ 1

Топаем в админ панель сайта, затем «Внешний вид» — «Меню».

 

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

Вам нужно найти в верхнем правом углу вот такой чекбокс.

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

В поле ввода имени меню пишем любое название. Например, «Верхнее горизонтальное меню» и нажимаем на кнопку «создать меню».

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

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

Давайте разберем каждый блок по отдельности. 

• «Страницы» — это 1 блок, который позволяет вам добавлять в пункт «Меню страницы», которые уже есть на вашем ресурсе.
• «Ссылки» — это второй блок, который позволит нам добавить в меню совершенно любую ссылку.
• «Рубрики» — это третий блок, с помощью которого вы сможете добавить любую рубрику на свой блог. Напротив, нужной рубрики выставляем галочку и нажимаем «Добавить в меню».
• «Записи» — это четвертый блок, здесь вы сможете добавить ссылку на любой пост, который вы хотите видеть в выпадающем меню WordPress, и жмем «добавить в меню». Что вам это даст? А вот что. Эта функция вам пригодится, если вы хотите, чтобы посетители вашего веб-сайта обратили внимание на какую-нибудь важную статью.

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

«Атрибут title», в это поле вписываем разъяснение к пункту. Оно будет всплывет ели вы наведете курсор мыши на пункт меню. Для открытия пункта в новом окошке браузера, напротив выставляем галочку «Открыть ссылку в новом окне-Вкладке».

Так проходимся по всем пунктам и настраиваем их. Когда вы проделали все вышеперечисленные шаги, далее «Сохранить меню». Не забываем обновить сайт. Вуаля наше меню готово!

Способ №2 Плагин Mega Main Menu

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

Устанавливаем и настраиваем плагин выпадающего меню Вордпресс

Сначала устанавливаем наш Мега плагин из репозитория. Если не знаете, как установить плагин, то читаем эту статью.

Когда активировался наш плагин, идем «Внешний вид» — «Меню». Создаем новое или уже существующее меню. Чтобы не терять время зря я заранее сделал заготовку, которое имеет 2 уровня сложности в разделе «Каталог».

Чтобы на плагин начал свою работу его нужно включить. Делается это в панели управления в левой части, в области «Настройка Max Mega Menu».

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

Нам доступно несколько вариантов:

• Hover intent – практически тоже самое, что и «Наведение мышки».
• «Наведение мыши» – откроется при наведении
• «Клик мыши» – открывается при клике
• «Эффект» — в этой графе вы можете выбирать эффекты при открытии меню.

С какой скоростью оно будет открываться.

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

В открывшемся окошке Mega Menu вы можете проделать следующие действия:

Выбирать способы расположения элементов, это делается в разделе «Режим отображения»

Если вы хотите получить стандартное меню Вордпресс, то это вы легко сделаете в разделе «Выпадающее меню».

Если вы хотите, чтобы подпункты в раскрывающейся области располагались в столбик, то выбираем пункт «Мега меню».

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

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

Вам нужно скрыть надпись, стрелку, или вообще выключить ссылку, отключить отображение элементов на ПК или мобильниках, то это все вы можете сделать во вкладке «Settings».

Вкладка «Icon», здесь все понятно из самого названия.

Если у вас стоит бесплатная версия плагина, то вам будут доступны только стандартные иконки.

На главной странице Вордпресс переходим в раздел «Мега меню». Тут нам нужно следующее:

• «Темы меню»
• «Локации меню»

Задаем цветовое оформление.

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

Добавляем выпадающее меню на сайт

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

• «Внешний вид» — «Виджеты»
• Вам нужно выбрать виджет «Mega Menu» и добавить его в сайт бар.

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

Если вы желаете сделать дублирующее menu в футере блога, то проделываем следующие шаги:

Копируем php функцию в настройках плагина и топаем во вкладочку «Локации меню»

С помощью Notepad++ подключаемся к сайту по FTP, открываем файл «footer.php», он как вы наверняка знаете находится в корне оформления вашего проекта.

Скопированную функцию вставляем в соответствующем месте шаблона с новой строки.

Внимание! Верстка у шаблонов разная, то есть самостоятельно определяем блок, в который необходимо вставить код menu.

И последние шаги. Файл сохраняем и выгружаем его на свой хостинг, сочетанием клавиш CTRL+S или нажав на дискету. Ну что посмотрим, что мы наляпали?

Ну что, наше главное menu продублировано в подвале блога.

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

С уважением Вячеслав Коптяков!