Оформление меню в 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; } |
Это позволит поменять цвет шрифта для одного конкретного пункта меню. Ну, или задать для него любые другие визуальные изменения, если нужно.
комментариев 13 к статье “Оформление меню в wordpress: при наведении, активный пункт”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,90 из 7, голосов - 48)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Иконки в меню WordPress — добавляем вручную и с плагином (4,84 из 7, голосов - 25)
- Как откатить Вордпресс и модули на предыдущие версии (вручную и с плагинами) (3,73 из 7, голосов - 30)
- Увеличиваем максимальный размер файла загрузки (Maximum File Upload Size) и др.параметры (5,35 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Добрый вечер. Ищу способ разрешить скачку файлов из сайта только после лайка на ФБ или ВК. Не подсткажете как это сделать?
Евгений, как вариант, можно попробовать плагин Boom Social. Достаточно функциональное решение, которое позволяет сделать и многие другие «социальные фишки». Правда, модуль платный.
Cпасибо за ответ. Я уже нашел другое решение. Бесплатное ))
Спасибо дружище, уж теперь то оторвусь со стилями=)
Здравствуйте! Подскажите, как вставить любое меню которое можно найти в интернете ( к примеру с эффектом LavaLamp ) к себе на блог? Нужно через какую нибудь функцию выводить само меню WordPress’а и оборачивать его в div’ы. Посоветуйте, а то ищу пост на такую тему уже месяца 2, может Вы знаете ?
Дмитрий, я так понял вам нужно взять PHP, HTML коды из инструкции по установке меню и вставить их в файлы шаблона — header.php, например. Кроме того, загрузить нужные файлы на ФТП туда, где находится шаблон темы. Как правило, процесс установки скриптов есть на сайтах с этими самыми скриптами.
Помогите! Не знаю даже где искать! У нас сайт.Перевели на wordpress. Сейчас в разделе «каталог» пытаемся разместить картинки. Не понимаю как сделать так чтобы «галерея» (несколько картинок товара) не вставлялась в текст о товаре, а была отдельно.Мучаюсь месяц.
Катерина, все зависит от того как у вас реализован каталог — через плагин или просто как контент. Про галерею в вордпресс была статья тут, но опять же нужно уточнить у тех, кто переводил сайт, как правильно его наполнять.
Tod , я именно, что «чайник» не знаю через плагин ли, но скорее всего второй вариант, так как нам ставили простую самую систему. Статью по ссылке читала- к нам не применяется. Аллгоритм такой:
Я открываю страницу товара , пишу текст, далее нажимаю «вставить медиафайл» из открывшейся вкладки с фотографиями выбираю «создать галерею», выбираю картинки и нажимаю загрузить, после чего вся галерея оказывается в тексте, других вариантов (я экспериментировала с настройками галереи) нет. Хотя ранее загруженные (вернее перенесенные со старого сайта) страницы товара отображаются как надо- картинки (пример : http://www.stilhaus.ru/goods/kloun/) выводятся отдельным блоком.Вообщем- SOS!
Катерина, вероятно все это «зашито» в шаблоне, поэтому для изменения отображения галереи нужно обращаться к разработчикам. Хотя, если честно, все нормально смотрится, как по мне.
Подскажите, пожалуйста: у меня есть меню с под-менюшками (ul class»sub-menu»), и вот у этих под-меню при его выборе не дописывается класс, как текущий («current-item»), и нет возможности редактировать активное подменю. Не подскажете, в какую сторону копать?
remark, странный какой-то прикол, по умолчанию WP выделяет активные пукнты current-menu-item или current-item не помню уже. Гуглить нужно, видимо, какой-то необычный случай, как например здесь.
Большое спасибо, что помогли разобраться. Была проблема именно с созданием подменю.