Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Иногда у владельцев WordPress-блогов возникает необходимость создания произвольного меню. Как правило, во многих WordPress-шаблонах горизонтальное меню либо отсутствует, либо по умолчанию выводится списком рубрик, или страниц. Если шаблон не поддерживает никакого меню, его всегда можно добавить.
Главным преимуществом такого меню является то, что каждый его пункт может быть ссылкой на что угодно — от конкретной записи/страницы до ссылк на другой сайт.
Выпадающее меню WordPress
Приступаем к созданию меню.
Для создания выпадающего меню WordPress первым делом открываем файл шаблона functions.php в редакторе и добавляем в него следующий php-код:
function register_main_menus() {
register_nav_menus(
array(
'nav' =>__('Меню навигации'),
)
);
Далее открываем файл header.php, в нем находим
<?php wp_nav_menu(); ?>,
или
<?php wp_page_menu(); ?>,
или
<?php wp_category_menu(); ?>
и заменяем на:
<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») и нажимаем Создать меню
Переходим к построению произвольного меню. Вы можете добавить в меню любую ссылку с любым названием пункта.
Для того, чтобы сделать выпадающие подпункты, меню нужно строить так, как показано на скриншоте:
Где Пункт1 — это основной пункт, а Подпункт1 и Подпункт2 — подпункты Пункта1. Думаю, все понятно :-).
Нажимаем Сохранить меню.
Таким образом можно создать двухуровневое выпадающее меню WordPress-блога.
Спасибо большое!!! Долго искал! ВАШ вариант это то что было нужно!!!!! =)))
Вариант действительно хороший. Самому нравится. И легко установить.
Это очень здорово и функционально, когда меню выпадающее, да ещё и двухуровневое. Спасибо за хорошую идею и подсказку.
Отлично! Почти то что нужно. Осталось разобраться с подсветкой активной категории.
В какое именно место в functions.php вставлять приведённый код?
Никита, ты пропустил в коде, вставляемом в functions.php, закрывающую скобку «}».
Спасибо, поправлю.
Создал, работает, но коряво получилось. Думаю, из-за неправильной вставки кода в header.php. У меня функция вывода меню там отсутствует, решил долепить к div id=»nav», хотя ниже функции меню идут. У меня mike)))
Не хочется копаться, к тому же ты уже проходил этот путь.
Все-равно придется покопаться. У каждой темы могут быть свои хитрые заморочки.
У меня такая же тема, что и у тебя, специально выбрал. И тобою все заморочки пройдены. Если бы мне ещё было время копаться, разве бы я спрашивал. Скажи, какая у тебя строка идёт ниже вставляемого кода в header.php. Я найду тоже и код туда вставлю. Хотя, может, он и на правильном месте стоит.
Вроде разобрался. Не знаю, как у тебя, но я выбросил весь код в header.php между MENU и END MENU.
Трёхуровневое, кстати, уже установил. Там отпишусь позднее, как будет время.
Ёлку уже где-то спилить успел и на сайт принести))) Красивая!
Если долго мучаться — что-нибудь получится
Да, ёлка правда красивая. Специально выбрал с прозрачным фоном.
А я и не собирался мучиться. Я же только ради любопытства и интереса, не более. Зачем в коде копаться, если это мне не нужно. Получилось — и хорошо, не получилось — ну, и ладно.
Но статью уже распечатал — а вдруг пригодится
Вы на денвере пока свой блог «готовите»?
Спасибо за отличную статью! Думаю скоро у себя в блоге реализовать. Понравилось то, что объясняете понятно.
Когда будете реализовывать, будьте внимательнее! Все-таки у Вас другой дизайн.
Спасибо! Вы очень мне помогли…..
Никита, спасибо большое за дельный код и подробную инструкцию!! Получилось гораздо проще и симпатичнее,, чем при настройке некоторых плагинов выпадающего меню
Всегда пожалуйста!
Доброе время суток. Подскажите пожалуйста на вот на этом шаблоне(Tricolor Advanced ) вообще возможно сделать ? Я только добавляю первые строки выше указанного кода и дает ошибку.Может надо куда то именно в файле functions.php вставить этот код ?
Можно на любом шаблоне сделать. Может в коде ошибку допустили.
Никита, позвольте вас расцеловать за такую красоту!!!
Огромное спасибо за статью! «На носу» 2017 год, а статья по прежнему актуальна! Добавил меню в шаблон страницы товаров. Вот, что получилось:
http://belgrupp.by/product/svetodiodny-j-svetil-nik-ppl-595-u/