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

Приветствую всех читателей!

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

Вы когда-нибудь обращали внимание, что при создании новой рубрики или страницы у вас спрашивается, есть ли родительские рубрики или страницы у создаваемого элемента? Это и есть тот самый способ, которым мы сейчас воспользуемся!

Темы wordpress с выпадающим меню

Многие новички пытаются найти готовые решения в гугле, сканируя поисковики на наличие темы с выпадающим меню, хотя это…кхм, сами понимаете :lol:

Все темы WordPress имеют это самое выпадающее меню, потому  как сам движок имеет функцию "Родительской" рубрики или страницы! Достаточно просто все сделать двумя движениями руки.

Вертикальное выпадающее меню WordPress

Итак, для начала нам надо определиться какой тип темы у вас установлен на блоге! Исходя из этого вы будете выбирать способ реализации  вертикального выпадающего меню :

  • есть темы не поддерживающие произвольное меню (в этих темах в полоске меню выводятся либо страницы, либо рубрики);
  • Есть темы поддерживающие произвольное меню.

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

Тема не поддерживает произвольное меню

Нам нужно создать главную рубрики и назначить для неё дочерние – в случае если в полоске меню выводятся рубрики или создать главную страницу и присвоить ей дочерние – если страницы. Пример рассмотрен в случае с рубриками:

 вертикальное выпадающее меню WordPress

Теперь у вас на сайте будет выпадающее меню: в полоске меню будет элемент "Выпадающее меню", а при наведении на него будут выпадать дочерние элементы. Пример, выполненный по аналогии:

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

Тема поддерживает произвольное меню

В этом случае куда больше возможностей и все намного проще. В этом случае, чтобы сделать выпадающее меню достаточно перейти в Внешний вид > Меню и перетащить необходимые рубрики, страницы (можно даже все вперемешку) следующим образом:

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

В результате чего получится вот такая картина:

wordpress шаблон выпадающее меню

Горизонтальное выпадающее меню

По этому же принципу делается и горизонтальное выпадающее меню!

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

Горизонтальное выпадающее меню WordPress Как сделать

 

Пояснение:

Спа-программы – родительская страница имеет дочерние "антицеллюлитная программа" и "клеопатра"

При этом страница  "антицеллюлитная программа" имеет дочернюю "шоколадное обертывание"

При желании, к шоколадному обертыванию можно назначить еще и еще дочерних и так далее!

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

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

 

И получим мы вот такой результат:

анимированное меню в WordPress-как сделать?

Если есть вопросы по созданию такого меню на вашем блоге, то спрашивайте в комментариях! Или у вас есть более интересные способы реализации такого меню? Буду рад послушать!

Неактивный главный пункт меню

Зачастую нужно сделать сделать неактивными (без ссылки) главные пункты меню, например, у вас будет меню "товары", при наведении будет выпадать список с товарами, то нужно сделать так:

выпадающее меню

Мы добавили ссылку, которая никуда не переводит при нажатии.

Теперь нужно присвоить ей родительские, например, категории товаров или страницы:

выпадающее меню с неактивной ссылкой

Не забудьте присвоить произвольному меню созданное меню

настроить меню wordpress

Надеюсь, у вас все получилось! Теперь у вас красивая навигация и, что самое ценное, удобная!

Не забудьте удалить внешние ссылки из счетчиков и кнопок на вашем сайте.

Подписывайтесь на обновления, если вам нравится материал блога!


Расскажите
Как вы благодарите полезные для вас сайты?

vsepro100.net был атакован и восстановлен недавно!
У вас быстро открывается сайт vsepro100.net

Добавить статью в соц сеть

Комментарии к: Выпадающее меню wordpress

  1. Вы пишите "Многие новички пытаются найти готовые решения в гугле, сканируя поисковики на наличие темы с выпадающим меню, хотя это…кхм, сами понимаете"

    Вы не обладаете информацией… Зачем писать??????????????????????????????????????????????? то чего не знаете???

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

    • Павел Гаврилин

      не встречал еще шаблона, где при создании дочерних страниц (как все написано в посте) что-то не работало бы.
      в посте написано как реализовывать выпадающее меню, без использования сторонних плагинов.
      То ли Вы плохо читаете ( точнее слово через абзац), то ли.. =))
      вы можете дать мне название темы, где это не работает и я дополню статью))

  2. Чувак, тебе огромное спасибо! Благодаря тебе, проблема была решена! ;-)

    • Павел Гаврилин

      Дамир, рад что помог!
      Будут вопросы – задавай, напишу инструкцию=)

  3. Привет! У меня установлена тема Nicol, в ней не работает выпадающее меню. Если переключиться на стандартную- все ок. Посоветуйте плагин хороший для этого.

    • Павел Гаврилин

      выпадающее меню работает, для этого нужно согласно инструкции настроить меню и впихнуть его в "menu2″, но вам придется для него прописывать css, ибо получается кривовато.
      Насчет плагинов не посоветую, т.к. уж для меню проще руками сделать…Мое мнение)) плагинов полно, посмотрите обзоры, что для вас лучше ..

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

    • Павел Гаврилин

      нууууу =) я так не могу))) давайте начнем с того, что скинете вашу тему и напишите конкретно, что пошло не так и что нужно сделать..))

  5. хорошо, вечером скину + скриншот.
    заранее спасибо!

  6. Добрый вечер, извините, но вчера пришел вечером домой и не было интернета, не смог сбросить. Сегодня отправил Вам на почту. Будет время рассмотрите плиз.
    За ранее спасибо!

    • Павел Гаврилин

      Хорошо. на выходных не обещаю – семья =) в понедельник гляну)

    • Павел Гаврилин

      Юрий, установил я эту тему, и не увидел там никакого встроено выпадающего меню, которое нужно убирать…
      там есть 2 меню, верхнее и нижнее ,работает исправно. Или я что-тоне так понял?

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

    • Павел Гаврилин

      Править CSS.
      Если вас интересует более адекватный ответ, то, уважаемые читатели, пишите хотя бы в URL адрес вашего сайта =)) я не телепат :arrow: или напишите сюда..

  8. Вот тема: http://www.iprobot.ru/?wptheme=glassy-evolution
    Как в горизонтальном меню сделать выпадающие подменю?

    • Павел Гаврилин

      Сделать можно. Вы готовы прописывать полностью CSS к меню? тогда подскажу..
      вам нужно разрешить меню для вашей темы – вставить в function:

      register_nav_menus(array(
        'header_menu' => 'Меню в header',  
        'sidebar_menu' => 'Меню в sidebar'
      ));
      

      потом в хэдел сразу после ul id="nav" вставить код:

      < ?php wp_nav_menu(array(
        'theme_location' => 'header_menu' // расположение меню в теме, вывели header_menu
      )); ?>
      

      Потом следуя инструкции на этой странице сделать меню. Но оно будет полностью без CSS

  9. industrial-alp.ru/
    Павел, подскажите, пожалуйста, как сделать правое меню (Виды услуг)выпадающим? И поменять местами регистр написания.
    Заранее спасибо

    • Павел Гаврилин

      Стас, вам либо нужен плагин, что не советую.
      Либо прописать css для вашего меню, что куда лучше и не загрузит лишним кодом сайт.
      К сожалению не располагаю сейчас временем, чтобы проделать такое..Но если с CSS совсем не дружны, то лучше плагин

  10. Спасибо! Молодчина, снял проблему. :arrow:

  11. Спасибо огромное! Помогли!

  12. Выпадающее меню не скрывается,неужели придется всё переделавать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Captcha Captcha Reload

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подписаться, не оставляя комментарий