Произвольное горизонтальное двухуровневое выпадающее меню на WordPress

2013-07-08 | WordPress

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

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

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

Приступаем к созданию меню.
Для создания выпадающего меню WordPress первым делом открываем файл шаблона functions.php в редакторе и добавляем в него следующий php-код:

function register_main_menus() {
	register_nav_menus(
		array(
			'nav' =>__('Меню навигации'), 
		)
	);

Далее открываем файл header.php, в нем находим

1	<?php wp_nav_menu(); ?>,

или

1	<?php wp_page_menu(); ?>,

или

1	<?php wp_category_menu(); ?>

и заменяем на:

1	<div id="nav" role="navigation"><?php wp_nav_menu('menu=first'); ?></div>

Если функция вывода меню отсутствует, тогда просто вставляем код в нужное место.

Название first (или любое другое) Вы должны прописать при создании произольного меню в админпанели. Мы еще к этому вернемся.

Теперь прописываем стили в файле style.css для созданного меню (main_menu):

#nav { /*стили меню 1-го уровня */
    height:28px;
    display:block;
}
 
#nav ul {
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}
 
#nav ul li {
    display:block;
    float:left;
    padding:0 10px;
}
 
#nav ul li a, div.nav ul li a:visited {
    float:left;
    padding:6px;
    text-decoration:none;
    font-weight:normal;
    font-family:Arial, Helvetica, sans-serif;
	color: #FFF;
}
 
#nav ul li a:hover {
    text-decoration:none;
	background-color:#FFF;
	color: #330099;
}
 
#nav .sub-menu { /* Стили меню 2-го уровня */
display: none;
position: absolute;
margin: 0;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
z-index: 999999;
}
 
#nav ul li:hover .sub-menu  {
margin-top: 28px;
border-color: #ffffff;
display: block;
width: auto;
clear: both;
position: absolute;
background: #000000;
}
 
#nav .sub-menu li {
clear: both;
}
 
#nav ul li.current_page_item a, div#nav ul li.current_page_item a:visited, div#nav ul li.current_page_item a:hover {
    text-decoration:none;
	color:#CCC;
	font-weight: bold;
}

Данные CSS-стили приведены в качестве примера который используется на моем блоге. У Вас он может отличаться!

Параметр ul li отвечает за оформление списка меню, #nav — за меню первого уровня, а .sub-menu отвечает за оформление пунктов выпадающего меню, меню второго уровня.

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

создание меню на WordPress

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

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

создание меню на WordPress

Где Пункт1 — это основной пункт, а Подпункт1 и Подпункт2 — подпункты Пункта1. Думаю, все понятно :-).

Нажимаем Сохранить меню.

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

Поделиться:

Записи по теме:

25 комментариев к записи "Произвольное горизонтальное двухуровневое выпадающее меню на WordPress"

Фил от 11.11.2013 в 18:40 пишет:

Спасибо большое!!! Долго искал! ВАШ вариант это то что было нужно!!!!! =)))

Ответить ↓
- Никита от 11.11.2013 в 23:23 пишет:
  
  Вариант действительно хороший. Самому нравится. И легко установить.
  
  Ответить ↓
Мозгунова Ирина от 24.11.2013 в 13:42 пишет:

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

Ответить ↓
Граждаин! от 26.11.2013 в 19:21 пишет:

Отлично! Почти то что нужно. Осталось разобраться с подсветкой активной категории.

Ответить ↓
Алекс от 14.12.2013 в 20:52 пишет:

В какое именно место в functions.php вставлять приведённый код?

Ответить ↓
Алекс от 14.12.2013 в 21:16 пишет:

Никита, ты пропустил в коде, вставляемом в functions.php, закрывающую скобку «}».

Ответить ↓
- Никита от 14.12.2013 в 22:54 пишет:
  
  Спасибо, поправлю.
  
  Ответить ↓
Алекс от 14.12.2013 в 22:49 пишет:

Создал, работает, но коряво получилось. Думаю, из-за неправильной вставки кода в header.php. У меня функция вывода меню там отсутствует, решил долепить к div id=»nav», хотя ниже функции меню идут. У меня mike)))
Не хочется копаться, к тому же ты уже проходил этот путь.

Ответить ↓
- Никита от 14.12.2013 в 22:55 пишет:
  
  Все-равно придется покопаться. У каждой темы могут быть свои хитрые заморочки.
  
  Ответить ↓
  - Алекс от 14.12.2013 в 23:27 пишет:
    
    У меня такая же тема, что и у тебя, специально выбрал. И тобою все заморочки пройдены. Если бы мне ещё было время копаться, разве бы я спрашивал. Скажи, какая у тебя строка идёт ниже вставляемого кода в header.php. Я найду тоже и код туда вставлю. Хотя, может, он и на правильном месте стоит.
    
    Ответить ↓
    - Алекс от 15.12.2013 в 05:50 пишет:
      
      Вроде разобрался. Не знаю, как у тебя, но я выбросил весь код в header.php между MENU и END MENU.
      Трёхуровневое, кстати, уже установил. Там отпишусь позднее, как будет время.
      Ёлку уже где-то спилить успел и на сайт принести))) Красивая!
      
      Ответить ↓
      - Никита от 15.12.2013 в 14:26 пишет:
        
        Если долго мучаться — что-нибудь получится Да, ёлка правда красивая. Специально выбрал с прозрачным фоном.
  - Алекс от 16.12.2013 в 00:15 пишет:
    
    А я и не собирался мучиться. Я же только ради любопытства и интереса, не более. Зачем в коде копаться, если это мне не нужно. Получилось — и хорошо, не получилось — ну, и ладно.
    Но статью уже распечатал — а вдруг пригодится
    
    Ответить ↓
    - Никита от 16.12.2013 в 00:17 пишет:
      
      Вы на денвере пока свой блог «готовите»?
      
      Ответить ↓
Ярослава от 10.01.2014 в 12:30 пишет:

Спасибо за отличную статью! Думаю скоро у себя в блоге реализовать. Понравилось то, что объясняете понятно.

Ответить ↓
- Никита от 10.01.2014 в 20:36 пишет:
  
  Когда будете реализовывать, будьте внимательнее! Все-таки у Вас другой дизайн.
  
  Ответить ↓
Алексей от 05.03.2015 в 22:34 пишет:

Спасибо! Вы очень мне помогли…..

Ответить ↓
Натали от 13.12.2015 в 19:07 пишет:

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

Ответить ↓
- Никита от 13.12.2015 в 21:13 пишет:
  
  Всегда пожалуйста!
  
  Ответить ↓
Витек от 21.07.2016 в 15:14 пишет:

Доброе время суток. Подскажите пожалуйста на вот на этом шаблоне(Tricolor Advanced ) вообще возможно сделать ? Я только добавляю первые строки выше указанного кода и дает ошибку.Может надо куда то именно в файле functions.php вставить этот код ?

Ответить ↓
- Никита от 24.07.2016 в 20:42 пишет:
  
  Можно на любом шаблоне сделать. Может в коде ошибку допустили.
  
  Ответить ↓
Grabowski от 28.09.2016 в 21:39 пишет:

Никита, позвольте вас расцеловать за такую красоту!!!

Ответить ↓
- Никита от 29.09.2016 в 20:22 пишет:
  
  рассмешили
  
  Ответить ↓
Александр от 21.10.2016 в 13:44 пишет:

Огромное спасибо за статью! «На носу» 2017 год, а статья по прежнему актуальна! Добавил меню в шаблон страницы товаров. Вот, что получилось:
http://belgrupp.by/product/svetodiodny-j-svetil-nik-ppl-595-u/

Ответить ↓