Дек
25
12

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

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

Структура меню в 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;
}

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 6, средний балл: 6,83 из 7)
Загрузка...

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

комментариев 12 к статье “Оформление меню в 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 не помню уже. Гуглить нужно, видимо, какой-то необычный случай, как например здесь.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости