Дек

Оформление меню в wordpress: при наведении, активный пункт

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

Итак, первым делом рекомендую почитать вам статью про вывод меню функцией wp_nav_menu. Она позволяет отобразить на сайте меню, которое создается и редактируется через админку системы в разделе «Внешний вид» — «Меню». Пример вызова функции:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' , 'menu' => 'topmenu' ) ); ?>

Здесь вы задаем отображение меню с названием «topmenu», а также определяем класс контейнера «menu-header» дабы потом использовать это значение в CSS стилях. Как только вы создали и наполнили меню, вставили функцию wp_nav_menu в header.php, переходим на сайт и проверяем как оно отображается.

Полезно при этом взглянуть на HTML код меню. Возможность посмотреть HTML код страницы есть в любом браузере. Для Firefox нужно выделить часть текста на веб-странице (можно выделить непосредственно само меню), кликнуть правой кнопкой мышки и выбрать «Исходный код выделенного фрагмента».

Структура меню в wordpress, как правило, реализуется через списки и имеет приблизительно такой код (после символа «//» идут комментарии, это не часть кода):

<div class="menu-header"> // общий контейнер
<ul class="menu"> // начало меню
<li id="menu-item-2158"><a href="#">Меню1</a></li> // первый пункт меню
<li id="menu-item-2159"><a href="#">Меню2</a> // второй пункт с подменю
<ul class="sub-menu"> // начало блока подменю
	<li><a href="#">Меню21</a></li>
	<li><a href="#">Меню22</a></li>
	<li><a href="#">Меню23</a></li>
</ul>
</li>
<li id="menu-item-2160"><a href="#">Меню3</a></li>  // третий пункт меню
</ul>
</div>

В примере меню с тремя пунктами «Меню1 — Меню2 — Меню3», у второго имеется выпадающее подменю. Выпадающий эффект реализуется через CSS стили. Это упрощенный вид HTML кода, если посмотрите на свой сайт, то там будет куда больше разных стилей и значений. Данная структура нужна для понимания как строится навигация (можно сказать теория). Если же для веб-проекта вам нужно супер функциональное меню то модуль Max Mega Menu подойдет как нельзя кстати.

Стиль при наведении

Для того чтобы задать стиль при наведении на пункт меню используется CSS свойства «hover». Вводите его в файле style.css.

ul.menu li a:hover {
	background:url(../img/nav_bg3.png) repeat-x;
	color: #dddddd;
}

Этот код задает цвет текста и фон плашки для меню при наведении. Если у вас меню имеется другой класс отличный от class=»menu», то следовательно нужно изменить код.

Активный пункт меню

Если выделить какой-то пункт меню на сайте и просмотреть HTML код меню, то можно заметить класс со словом «current», что переводится как текущий. Как только вы перейдете на ту или иную страницу сайта, в меню она будет обозначена соответствующим классом с «current». Собственно опять же в style.css и пишем что-то вроде.

ul.menu li.current-menu-item
	background:url(../img/nav_bg3.png) repeat-x;
	color: #dddddd;
}

Если у вас выпадающее меню, внимательно посмотрите классы с current не только для конкретного пункта, но и для родительского. Там используется что-то вроде «current-menu-parent» и «current-menu-ancestor».

Выделение любого пункта меню

Вордпресс добавляет для каждого пункта меню свой идентификатор, причем как в ID, так и в Class. Например используется что-то вроде.

<li id="menu-item-2158"><a href="#">Меню1</a></li>

Тогда в стилях пишете:

ul.menu li#menu-item-2158
	color: #dddddd;
}

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

Оцените статью:

(голосов - 8, средний балл: 6,13 из 7)

Загрузка...

Категории: Начинающим; Хаки и секреты;

Теги: css, вордпресс веб-разработка, меню и навигация, оформление блога, полезное для блога.

комментариев 13 к статье “Оформление меню в wordpress: при наведении, активный пункт”

Евгений 26.12.2013
Добрый вечер. Ищу способ разрешить скачку файлов из сайта только после лайка на ФБ или ВК. Не подсткажете как это сделать?
Tod 27.12.2013
Евгений, как вариант, можно попробовать плагин Boom Social. Достаточно функциональное решение, которое позволяет сделать и многие другие «социальные фишки». Правда, модуль платный.
Евгений 27.12.2013
Cпасибо за ответ. Я уже нашел другое решение. Бесплатное ))
Евгений 22.01.2014
Спасибо дружище, уж теперь то оторвусь со стилями=)
Дмитрий 28.01.2014
Здравствуйте! Подскажите, как вставить любое меню которое можно найти в интернете ( к примеру с эффектом LavaLamp ) к себе на блог? Нужно через какую нибудь функцию выводить само меню WordPress’а и оборачивать его в div’ы. Посоветуйте, а то ищу пост на такую тему уже месяца 2, может Вы знаете ?
Tod 28.01.2014
Дмитрий, я так понял вам нужно взять PHP, HTML коды из инструкции по установке меню и вставить их в файлы шаблона — header.php, например. Кроме того, загрузить нужные файлы на ФТП туда, где находится шаблон темы. Как правило, процесс установки скриптов есть на сайтах с этими самыми скриптами.
Катерина 26.03.2014
Помогите! Не знаю даже где искать! У нас сайт.Перевели на wordpress. Сейчас в разделе «каталог» пытаемся разместить картинки. Не понимаю как сделать так чтобы «галерея» (несколько картинок товара) не вставлялась в текст о товаре, а была отдельно.Мучаюсь месяц.
Tod 26.03.2014
Катерина, все зависит от того как у вас реализован каталог — через плагин или просто как контент. Про галерею в вордпресс была статья тут, но опять же нужно уточнить у тех, кто переводил сайт, как правильно его наполнять.
Катерина 26.03.2014
Tod , я именно, что «чайник» не знаю через плагин ли, но скорее всего второй вариант, так как нам ставили простую самую систему. Статью по ссылке читала- к нам не применяется. Аллгоритм такой:
Я открываю страницу товара , пишу текст, далее нажимаю «вставить медиафайл» из открывшейся вкладки с фотографиями выбираю «создать галерею», выбираю картинки и нажимаю загрузить, после чего вся галерея оказывается в тексте, других вариантов (я экспериментировала с настройками галереи) нет. Хотя ранее загруженные (вернее перенесенные со старого сайта) страницы товара отображаются как надо- картинки (пример : http://www.stilhaus.ru/goods/kloun/) выводятся отдельным блоком.Вообщем- SOS!
Tod 27.03.2014
Катерина, вероятно все это «зашито» в шаблоне, поэтому для изменения отображения галереи нужно обращаться к разработчикам. Хотя, если честно, все нормально смотрится, как по мне.
remark 25.09.2016
Подскажите, пожалуйста: у меня есть меню с под-менюшками (ul class»sub-menu»), и вот у этих под-меню при его выборе не дописывается класс, как текущий («current-item»), и нет возможности редактировать активное подменю. Не подскажете, в какую сторону копать?
Tod 25.09.2016
remark, странный какой-то прикол, по умолчанию WP выделяет активные пукнты current-menu-item или current-item не помню уже. Гуглить нужно, видимо, какой-то необычный случай, как например здесь.
Alfapivdenbud 13.02.2019
Большое спасибо, что помогли разобраться. Была проблема именно с созданием подменю.