wordpress подсветка активного пункта меню
Оформление меню в wordpress: при наведении, активный пункт
Сегодняшний пост будет, в принципе, достаточно простым, поэтому пригодится исключительно начинающим пользователям. Речь пойдет о том, как «подсвечивать» активные пункты меню в wordpress блоге. Если вы используете для сайта современные шаблоны, то там скорее всего данная проблема решена. При разработке собственной темы или менее профессиональных работ других дизайнеров данное руководство может вам помочь.
Итак, первым делом рекомендую почитать вам статью про вывод меню функцией wp_nav_menu. Она позволяет отобразить на сайте меню, которое создается и редактируется через админку системы в разделе «Внешний вид» — «Меню». Пример вызова функции:
Здесь вы задаем отображение меню с названием «topmenu», а также определяем класс контейнера «menu-header» дабы потом использовать это значение в CSS стилях. Как только вы создали и наполнили меню, вставили функцию wp_nav_menu в header.php, переходим на сайт и проверяем как оно отображается.
Полезно при этом взглянуть на HTML код меню. Возможность посмотреть HTML код страницы есть в любом браузере. Для Firefox нужно выделить часть текста на веб-странице (можно выделить непосредственно само меню), кликнуть правой кнопкой мышки и выбрать «Исходный код выделенного фрагмента».
Структура меню в wordpress, как правило, реализуется через списки и имеет приблизительно такой код (после символа «//» идут комментарии, это не часть кода):
В примере меню с тремя пунктами «Меню1 — Меню2 — Меню3», у второго имеется выпадающее подменю. Выпадающий эффект реализуется через CSS стили. Это упрощенный вид HTML кода, если посмотрите на свой сайт, то там будет куда больше разных стилей и значений. Данная структура нужна для понимания как строится навигация (можно сказать теория). Если же для веб-проекта вам нужно супер функциональное меню то модуль Max Mega Menu подойдет как нельзя кстати.
Стиль при наведении
Для того чтобы задать стиль при наведении на пункт меню используется CSS свойства «hover». Вводите его в файле style.css.
Этот код задает цвет текста и фон плашки для меню при наведении. Если у вас меню имеется другой класс отличный от то следовательно нужно изменить код.
Активный пункт меню
Если выделить какой-то пункт меню на сайте и просмотреть 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. Например используется что-то вроде.
Тогда в стилях пишете:
ul.menu li#menu-item-2158 color: #dddddd; >
Это позволит поменять цвет шрифта для одного конкретного пункта меню. Ну, или задать для него любые другие визуальные изменения, если нужно.
Подсветка активного подпункта меню
Выглядит это сейчас так [del]
Теперь заказчик решил, что активный подпункт меню должен подсвечиваться. Т.е. при переходе на другую страницу пункт меню должен оставаться открытым, а нужный подпункт должен быть выделен цветом. Так, как на изображении.
И что-то я не могу понять, как теперь из того что есть сделать то, что надо. Помогите, пожалуйста. Хоть пните в нужном направлении)))
Подсветка пункта меню главного
Привет, помогите решить такую проблему, сайт сделан на WP когда пользователь зашел на сайт пункт.
Каким плагином можно задать иконку для активного пункта меню?
Привет! Каким плагином можно задать иконку для активного пункта меню? Кодить не предлагать.
Вывод списка каталога, подсветка активного раздела
Здравствуйте! Использую на сайте: http://testdd1.1gb.ru/catalog/dymokhody/ компонент каталог от.
Стиль активного пункта меню
Здравствуйте, форумчане! Столкнулась с проблемой, что стиль, прописанный для одного меню (для.
Выделение активного пункта меню, Joomla 1.7
Мне необходимо, чтобы жирным выделялся текущий пункт меню. В сайтах с использованием некоторых.
Подсветка текущего пункта меню
Всем привет! На всех сайтах есть такая фишка, при переходе в определенный пункт меню или по ссылке.
Разворачивающееся меню с подпунктами и выделением активного пункта и подпункта
Никак не получается найти подобный скрипт, просто с выделением пункта есть, но нужно именно меню, с.
Подсветка активного меню
Здравсвуйте вот уже второй день бьют с проблемой подсветки активного меню на сайте, то есть когда.
Активный пункт меню категории WordPress?
Подскажите как сделать активным меню при выборе определенной категории товара Woocommerce.
На этом примере при выборе категории товара (cat1) ко всем пунктам меню добавляется класс current-menu-item
и все меню подсвечивается. А мне надо чтобы только определенный пункт меню подсвечивался. например пункт меню КОНТАКТЫ (id23)
Средний 4 комментария
Используйте стандартные классы.
Пычев Анатолий, да я то что там еще писал пробовал но повторюсь она не отрабатывает, там не is_category а is_product_category это другая таксономия и при таком использовании никаких изменений не происходит.
Пычев Анатолий, Может дело то вот в чем? оригинальная статья
Вы пытаетесь заставить его работать с in_category()функцией, но ничего не происходит? Ну в этом уроке вы узнаете, почему.
На самом деле это очень распространенная ошибка, и я тоже делал это раньше.
Во-первых, давайте начнем с того, что продукты в WooCommerce являются пользовательским типом product записи, а категории продуктов-пользовательской таксономией product_cat. Когда вы работаете с пользовательскими таксономиями, вы используете функции для категорий / тегов или для таксономий? Вот и все.
По сравнению с is_product_category (), WooCommerce здесь не имеет собственных условных тегов, поэтому мы должны использовать условные теги WordPress по умолчанию:
Как подсветить активный пункт в произвольном меню wordpress?
Предположу, что вывод этого меню выглядит как-то так:
Тогда его надо изменить примерно так:
Для выделения активного пункта меню необходимо сравнить текущий url с url пункта меню. Если они совпадают, добавить класс «current» к необходимому пункту меню и потом с помощью CSS его декорировать.
Выше я указал решение на PHP. Оно также подойдет, если все меню уже реализовано статично, только смотреться будет чуть хуже:
Также можно реализовать с помощью JS:
#main-menu <
position: relative;
padding: 0;
margin-top: 15px;
float: right;
font-size: 14pt;
>
#main-menu li ul <
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
>
#main-menu li ul li <
float: none;
margin: 0;
text-align: left;
font-size: 11pt;
background: #fff;
width: 130px;
padding-top: 3px;
padding-bottom: 3px;
border: 0;
>
#main-menu li a <
display: block;
color: #333333;
text-decoration: none;
>
#main-menu li a:hover <
color: #b2b935;
text-decoration: none;
>
#main-menu li:active <
color: #b2b935;
text-decoration: none;
>
#main-menu li:hover ul, #menu li.jshover ul <
display: block;
border-radius: 10px;
box-shadow: 0 5px 5px #b7b7b7;
z-index: 2;
#main-menu li:first-child <
border: inherit;
>
.current <
color: #b2b935;
text-decoration: none;
>
$(function () <
$(‘#menu li a’).each(function () <
var location = window.location.href;
var link = this.href;
if(location == link) <
$(this).addClass(‘current’);
>
>);
>);
add_action( ‘wp_enqueue_scripts’, ‘enqueue_styles’ );
function my_scripts_method() <
wp_enqueue_script( ‘jquery’ );
>
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
Выделение активного пункта меню с помощью jQuery
Доброго времени суток 🙂
Сегодня мы поговорим о довольно тривиальной задаче – выделении активного пункта меню с помощью jQuery.
Для начала, традиционно, пару слов о том, кому будет полезна данная информация.
В первую очередь, сегодняшняя статья будет бесценной для тех, кто решил создать сайт «с нуля» на чистом php+css+html+javascript или с помощью фреймворков.
Бесценна – потому что в этом случае у вас не будет готового функционала, как у любителей CMS, поэтому выделение активного пункта меню придётся реализовывать самостоятельно.
Но, если вы всё-таки относитесь к фанатам создания сайта на CMS, где данный функционал доступен «из коробки», приводимая далее информация не будет такой уж бесполезной, т.к. никто не сможет вам гарантировать, что устанавливаемый графический шаблон будет без багов 🙂
А бывает, что после установки какого-то модуля, ломается уже существующий функционал…
В общем, принципы организации подсветки активного пункта меню будут полезны всем, без исключения.
К тому же, стоит подчеркнуть, что рассматриваемый нами сегодня способ является кроссплатформенным, поэтому он подойдёт он всем без исключения.
Итак, переходим от лирики к практике.
Постановка задачи
Для начала опишем проблему более детально. Т.е. составим постановку задачи, которая является половиной успеха.
Итак, у нас есть главное меню сайта, которое состоит из пунктов, содержащих ссылки на страницы сайта.
Пункты меню, соответственно, имеют названия, созвучные с названиями страниц сайта.
Для примера возьмём главное меню, характерное для сайтов-визиток:
Как видно на картинке, меню в нашем случае состоит из следующих элементов:
HTML-код нашего меню будет таким:
Наша задача будет заключаться в выделении пункта меню, который соответствует текущей странице, т.е. странице, на которой находится пользователь сейчас.
Итак, все исходные данные и то, что должны получить в итоге, мы описали. Переходим к описанию алгоритма и его реализации.
Подсветка активного пункта меню – алгоритм
Итак, как же мы будет выделять текущий элемент? Самый лучший способ – поменять либо цвет его текста, либо фон.
Лично мне больше нравится первый вариант, вы же можете поступить так, как вам нравится.
Для подсветки текущего пункта меню добавим класс, который будет делать текст ссылки, содержащейся в нём, синим:
Сам алгоритм будет достаточно простым:
Подсветка активного пункта меню – варианты реализация
Насчёт языка реализации – проще всего обозначенный алгоритм будет реализовать на JavaScript. В частности, я буду использовать для этого популярную библиотеку jQuery.
Также можно использовать языки бэкэнда, в частности, самый популярный из них – PHP, встраивая PHP-скрипты в шаблон. Но, по мнению сторонников «чистого кода» этот подход не является оптимальным, т.к. засорять HTML-код шаблона логикой приложения – не есть хорошо.
Если же в вашем проекте используются шаблонизаторы (Smarty, Blade, Twig и др.), основным предназначением которых является как раз разделение бизнес-логики от представления за счёт введения своих конструкций, аналогичных функциям языков бкэнда, то PHP-вариант может вам подойти.
Но если проверка переменной и присвоение класса ещё можно сделать директивами шаблонизаторов (не люблю я их, кстати, т.к. не вижу большого отличия чистых php-скриптов от конструкций шаблонизатора, которые ещё выучить нужно), то получение url текущей страницы так просто не сделать.
Как альтернатива – в PHP-варианте можно было бы получение текущего url вынести в отдельный скрипт, который будет возвращать переменную с ним. А в шаблоне нужно было бы сверять с ней ссылки в пунктах меню и в зависимости от результатов присваивать им класс или нет.
Как резюме, — PHP-вариант приведёт вас к громоздкости кода шаблона или необходимости поиска требуемого php-скрипта или прописывании нового для вычисления текущего url и передачи этого значения в шаблон.
В принципе, если вас это не остановит – на PHP или другом языке бэкэнда, который используется у вас в проекте, вы уже сможете реализовать данную функцию самостоятельно, т.к. алгоритм я привел, осталось только перевести его.
Если возникнут какие-то проблемы с кодом – пишите в комментариях, буду рад вам помочь.
Кстати, при подборе ключевых слов для данной статьи, выяснилось, что некоторые люди всерьёз полагают, что выделение активного пункта меню можно сделать с помощью чистого CSS.
Но, хочу сказать, что данное предположение ошибочно, т.к. CSS – это язык оформления документа, в котором не предусмотрен функционал определения текущего url, на основании которого пункт меню может считаться активным.
Поэтому не тратьте время на поиски и используйте либо JS-вариант реализации, которая будет рассмотрена далее, либо бэкэнд-вариацию.
Подсветка активного пункта меню – jQuery реализация
Итак, давайте вместе составим наш jQuery-скрипт для выделения активного пункта меню на основании алгоритма, который был приведён выше.
Для начала создадим функцию, внутри которой мы будем писать наш код. Название для неё необязательно:
Итак, первым делом, определяем url текущей страницы и записываем его в переменную для дальнейшего использования:
Однако, если вывести полученное значение с помощью js-функций alert() или console.log(), то мы увидим полный путь, начинающийся с указания протокола и доменного имени сайта, что нам не нужно.
Наши ссылки в главном меню содержат относительные адреса страниц в формате «/адрес_страницы», что означает их адресацию относительно корня сайта.
Поэтому наша задача – это извлечь из текущего url ту его часть, которая будет сопоставима с адресами ссылок в меню.
Для этого разбиваем url на части, которые отделены друг от друга с помощью символа слэша («/»), выбираем самую последнюю из них и прибавляем ей в начало слэш:
Если вы предполагаете использовать на своём сайте формат относительных ссылок без слэша, то добавлять его не стоит.
Также, если в качестве адресов ссылок вы хотите использовать абсолютные значения, т.е. ссылки на страницы начинаются с указания протокола и доменного имени сайта в формате «http://домен.зона/адрес_страницы», то вышенаписанная строка вам вообще не нужна.
Дальше у нас по плану проверка адресов ссылок в главном меню на соответствие с текущим url. Лучше всего делать это в цикле перебором всех пунктов главного меню.
Поскольку меню имеет class menu, то, благодаря особенностям JavaScript и jQuery, прописываем следующий код цикла.
Теперь главная проверка на соответствие текущего urla и прописанного в качестве адреса ссылки:
В итоге, у нас получился симпатичный и лаконичный скриптик:
Всё, что теперь осталось для реализации подсветки активного элемента меню – это подключить скрипт на наш сайт. Если вы не знаете, как это делается, то хочу порекомендовать вам статью, где это написано, а также содержится ответ на вопрос «На чём написан сайт?».
После произведённых действий активный пункт меню должен выделяться среди остальных подобным образом:
Оставляйте ваши отзывы в комментариях, делитесь данной статьёй со своими друзьями в социальных сетях и не забывайте подписываться на обновления проекта – впереди вас ждёт ещё очень много интересного и увлекательного материала 🙂
На этом сегодняшняя статья подошла к концу. Надеюсь, она была для вас полезной.
P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.
Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.
Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.
И с друзьями не забудьте поделиться 😉