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; >
Это позволит поменять цвет шрифта для одного конкретного пункта меню. Ну, или задать для него любые другие визуальные изменения, если нужно.
WordPress.org
Русский
Рубрики
Внешний вид — меню
Раздел меню позволяет пользователю создать собственное меню (также известное как панель навигации, меню навигации или главное меню). Это раздел сайта, который помогает посетителям перемещаться по сайту. В зависимости от используемой темы обычно на сайте будет одно меню навигации, а некоторые темы могут включать дополнительные меню или меню подвала сайта. Важно иметь аккуратное и упрощенное меню навигации, чтобы не сбивать с толку посетителей.
По умолчанию WordPress автоматически добавляет все опубликованные страницы в меню. Однако возможна настройка меню, например добавление ссылки на категорию или на внешний сайт, изменение порядка ссылки меню или создание подменю.
Раздел меню доступен через Внешний вид > Меню консоли.
Настройки экрана # Настройки экрана
Настройки экрана позволяют вам выбрать, какие элементы будут отображаться или не отображаться в соответствующем разделе. При нажатии на вкладку «Настройки экрана» отображается список возможных элементов и параметров с флажком рядом с каждым. Установите флажок для каждого элемента или параметра, который вы хотите отобразить, или снимите флажок, чтобы этот модуль не отображался. Нажмите на вкладку Настройки экрана еще раз, чтобы закрыть ее.
Некоторые элементы, например записи, по умолчанию скрыты.
Создание меню # Создание меню
Добавление пунктов в меню # Добавление пунктов в меню
Вы можете добавлять в меню различные типы элементов, такие как страницы, рубрики или даже произвольные ссылки. Они разделены между панелями слева от меню, которое вы редактируете. Пример того, как добавить ссылку на страницу:
Ваше пользовательское меню теперь сохранено.
Примечание. Настройки экрана позволяют вам выбирать, какие элементы вы можете использовать для добавления в меню. Некоторые элементы, например метки, по умолчанию скрыты.
Удаление пункта меню # Удаление пункта меню
Создание многоуровневых меню # Создание многоуровневых меню
При планировании структуры вашего меню полезно думать о каждом пункте меню как о заголовке в формальном отчетном документе. В формальном отчете заголовки основных разделов (заголовки уровня 1) расположены ближе всего к левому краю страницы; заголовки подразделов (заголовки уровня 2) смещены немного дальше вправо; любые другие подчиненные заголовки (уровень 3, 4 и т. д.) в том же разделе имеют еще больший отступ вправо.
Редактор меню WordPress позволяет создавать многоуровневые меню с помощью простого «перетаскивания». Перетащите элементы меню вверх или вниз, чтобы изменить порядок их отображения в меню. Перетаскивайте элементы меню влево или вправо, чтобы создать подуровни в вашем меню.
Чтобы сделать один пункт меню подчиненным по отношению к другому, вам нужно расположить «дочерний элемент» под его «родителем», а затем перетащить его немного вправо.
Добавление меню на ваш сайт # Добавление меню на ваш сайт
Если ваша текущая тема поддерживает настраиваемые меню, вы сможете добавить новое меню в одну из Область отображения.
Если ваша текущая тема не поддерживает настраиваемые меню, вам нужно будет добавить новое меню через виджет «Пользовательское меню» в разделе виджетов.
Перестановка, настройка пунктов меню # Перестановка, настройка пунктов меню
После того, как элемент добавлен в меню, эти элементы меню можно изменить. Поместив курсор мыши на заголовок пункта меню, когда курсор мыши изменится на 4 стрелки, удерживайте левую кнопку мыши нажатой, перетащите модуль в то место, где вы хотите его разместить, затем отпустите кнопку мыши (это называется перетаскиванием). Помните, что вы можете перетащить элемент меню немного вправо от элемента меню над ним, чтобы создать иерархические отношения (родительский/дочерний) в меню.
У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе Настройки экрана убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.
Затем выбор конфигурации:
Текст ссылки
Текст для этого конкретного пункта меню
Атрибут, используемый при отображении метки
Открывать в новой вкладке
Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.
Классы CSS (необязательно)
Классы CSS для этого пункта меню
Отношение к ссылке (XFN)
Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.
Описание
Описание будет отображаться в меню, если текущая тема его поддерживает.
Меню сайта
Меню сайта представляют собой список ссылок, которые обычно обеспечивают основную навигацию для вашего сайта. Область для меню может изменяться в зависимости от вашей темы, а некоторые темы содержат дополнительные меню, например меню ссылок на социальные сети.
Создать меню
Ниже представлен порядок редактирования существующих меню сайта или создания произвольных меню сайта.
Области для меню, доступные в теме Rivington, — это Основное меню и Меню ссылок на социальные сети.
Пункты меню Ссылки на социальные сети оформлены как значки социальных сетей. В данном примере мы выбираем Основное меню.
Добавить
В дополнение к уже опубликованным страницам в пользовательское меню можно добавлять пункты меню разного типа:
Для добавления одного из этих пунктов меню:
Если вы хотите добавить в меню страницу или запись, которые не использовались ранее, задайте их имена в поле Добавить новую страницу или Добавить новую запись. Пустая страница//запись будет добавлена на ваш сайт и автоматически добавится в ваше меню.
Затем вы сможете добавлять содержимое на страницу или в запись через страницы//записи вашего сайта.
Область отображения меню
Если вы хотите, чтобы это меню отображалось на вашем сайте, выберите Область для меню. Для основной навигации корректный параметр зависит от используемой темы. Он часто указывается как «Основная», «Заголовок» или «Верхняя часть».
Если тема содержит меню ссылок на социальные сети, она будет автоматически преобразовывать пункты меню в значки сайтов популярных социальных сетей.
Автоматически добавлять страницы в ваше меню
В пункте Опции меню поставьте флажок «Автоматически добавлять новые страницы верхнего уровня в это меню», если вы хотите, чтобы новые создаваемые страницы автоматически добавлялись в меню.
Если вы не установите этот флажок, то изменить ваше пользовательское меню и добавить новые страницы для навигации можно будет позже.
Изменить порядок элементов меню
Для изменения порядка пунктов меню переместите пункт меню, нажав ссылку Изменить порядок:
Создать выпадающие меню
Вложение страницы создает подменю или выпадающее меню.
Создать неинтерактивный элемент меню
Вы можете создать неинтерактивный элемент меню, что полезно при создании выпадающих меню.
После добавления неинтерактивного элемента меню вы сможете добавить страницы или записи, которые вы хотите отображать в этом меню, после чегоизменить их порядок для создания вашего выпадающего меню.
Удалить пункты меню
Редактирование содержимого, которое отображается в меню вашего сайта, не приведёт к удалению страниц или записей, которые вы создали для своего сайта. При удалении элемента меню происходит только удаление ссылки на страницу из вашего меню.
Настроить текст пунктов меню
Чтобы изменить название пункта меню, отображаемое на сайте, отредактируйте метку навигации.
Например, страница может называться «Связаться с командой разработчиков», но вы хотите, чтобы в меню она просто отображалась как «Контакты».
Изменить дизайн меню
При желании изменить анимацию появления меню, например, положение, выравнивание или размер, можно использовать пользовательские CSS, доступные в плане WordPress.com Premium или выше.
Сохранить изменения
Часто задаваемые вопросы
Если в вашей теме меню по умолчанию не отображается, внесите любое изменение в это меню и сохраните его. В результате данное меню должно появиться в теме.
Активный пункт меню категории 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 плагины для меню: 6 лучших бесплатных решений
Приветствую вас, друзья!
Не так давно в комментариях к статье о выделении активного пункта меню с помощью JQuery один из посетителей попросил меня помочь разобраться с плагином меню для WordPress Jquery Vertical Accordion Menu, где подсветка текущего пункта меню не работала.
Я пообещал разобраться с этой проблемой, но, к сожалению, затянул с выполнением обещанного. Новогодние праздники, авралы на работе постоянно мешали мне заняться блогом. В итоге пришлось всту ‘
24 комментария к статье «WordPress плагины для меню: 6 лучших бесплатных решений»
Большое спасибо, добротная статья получилась)
На счет пункта меню в JQuery Accordion Menu Widget, на днях попробую, если не получиться отпишусь. Я в принципе так же делал, но не срабатывало, сейчас есть подозрение на саму тему. Будет по больше времени проверю 🙂
Рад, что мой труд был полезен 🙂 Спасибо за отзыв.
Спасибо за статью. Много полезного для себя узнал.
Статья понравилась. С JQuery Accordion Menu Widget у меня тоже проблемка. При клике на пункты меню, страница просто обновляется и все.
Хм… Про такой баг впервые слышу. При написании статьи устанавливал плагин на чистом WordPress, тестировал, никаких проблем не возникало. Скорее всего причиной может послужить неправильная структура меню либо неправильные ссылки, заданные в пунктах.
Если вдруг не в курсе, что это такое, и как этим пользоваться, то прочитайте статью о самостоятельном изменении интерфейса сайта. И чтобы обязательно пункты меню были развёрнуты и было видно ссылки в них.
В итоге должно получится что-то вроде этого.
Спасибо за ответ! Я уже успел удалить JQuery Accordion Menu Widget и теперь пытаюсь настроить Max Mega Menu. Там с настройками более менее все понятно, единственное не нашел где изменить ширину рубрик. Сейчас ширина стоит на авто. Это я нашел в коде благодаря вашей статье о самостоятельном изменении интерфейса сайта. Но в настройках этого плагина нет ширины рубрик. Только ширина выпадающих вкладок. Я делаю вертикальное меню и как-то не очень смотрятся разнокалиберные кирпичики рубрик))
Это, по идее, растянет элементы меню на всю ширину контейнера меню.Или пропишите этот код в уже существующем селекторе, если найдёте, конечно 🙂
Хотя, возможно, нужно внимательнее настройки Max Mega Menu, которых просто тьма, на самом деле.
У меня вопрос, касающийся изменения цвета. В плагине JQuery Accordion Menu Widget меня не устраивают скины. Не гармонируют с цветовой гаммой моего сайта.
Пытаюсь через Исследование элемента изменить цвет и вставить, скажем измененный вот такой код в таблицы стилей моей темы и ничего не происходит.
#dc_jqaccordion_widget-3-item ul a.dcjq-parent < padding: 10px 15px; background: #660f0f url(skins/images/bg_clean.png) repeat-x top center; font-weight: bold; text-transform: uppercase; >
Возможно ли как-то решить этот вопрос?
Спасибо.
Добрый день! Вопрос ваш (как и все) решаемый 🙂
Если возникнут ещё вопросы — пишите.
Здравствуйте!
Я переношу сайт на Вордпресс и возникла такая проблема: создание дополнительного меню в сайдбаре. Главное, что бы это меню выводилось не везде, а только для этой рубрики. У меня несколько рубрик, поэтому и доп. меню будет несколько.
Я только начал разбираться с Вордпресс. Если возможно, подскажите, какой плагин лучше подойдет для таких целей.
Заранее спасибо.
С уважением, Андрей.
Добрый вечер. Сам я на практике таким не занимался, но могу порекомендовать плагин Conditional Menus. По описанию, это то, что нужно в вашей ситуации.
Надеюсь, мой ответ был полезен 🙂
Почему в вордпрессе все такое поганое? Ни одного нет нормального.
А чем Вас Max Mega menu не устроил? Как по мне, достойный вариант среди бесплатных плагинов.
+1, как раз, то, что искал
Доброго времени суток 🙂 Вам необходимы плагины меню WordPress для вертикального выпадающего меню. Из представленных в статье плагинов 100% подойдёт JQuery Accordion Menu Widget. Посмотрите видео с демонстрацией его возможностей в статье — там как раз разбирается пример реализации такого меню. Вам останется только подкорректировать его стили под дизайн Вашего сайта.
Также рекомендую попробовать лидер рейтинга — Max Mega Menu, потому что его функционал действительно впечатляющий. Думаю, в сети можно будет найти примеры реализации Вашей задачи с его использованием, если предыдущий плагин чем-то не устроит.
А есть такие плагины меню, чтобы можно было создать вертикальный аккордеон с немногими рубриками, при нажатии на которые раскрывались бы многопунктные подрубрики (закрывая другие раскрытые рубрики), при наведении на которые справа появлялся бы список под-подрубрик? То есть, совместить функционал аккордеона и выпадающего меню.
Есть, конечно 🙂 Тот же JQuery Accordion Menu Widget при всей его архаичности позволяет это делать. Посмотрите видео в статье. На нём показан весь процесс настройки, чтобы получить нужный Вам результат.
Здравствуйте!
Приобрёл плагин Jet menu, после установки на сайт возникла внутренняя ошибка сервера 500
Здравствуйте. Какой подробный текст ошибки? Что пишется в логах? И, я думаю, в любом случае лучше обратиться к поставщику плагина — официальному производителю или диллеру, у которого Вы непосредственно купили плагин.
Хорошая статья, но сейчас стандарт мега меню это Groovy Menu
За ссылку спасибо, но говорить о том, что плагин с 200+ активных установок — стандарт — это смело 🙂
Добрый день. С интересом прочитал ваш обзор. Интересно было бы в деле посмотреть Max Mega Menu, о котором вы пишете. В заголовках плагина написано, что есть русская версия, но при инсталяции идет стандартная английская, или я не могу до нее добраться? Бьюсь несколько дней, начитался много чего, что-то поставил, но путем ничего не получилось, все прибил и вернулся к началу. Из моей писанины ясно, что я гуманитарий, но ручки шаловливые хотят большего. Изначально искал ответа на потребность создать в главном правом вертикальном меню два предмета с дочерними файлами, желательно, чтобы они открывались или выпадали при нажатии. Речь идет о двух книгах — в одной 29 глав, в другой 6 глав. Хотелось бы, чтобы родительское меню отражалось на всех страницах каждой книги. Следует иметь в виду, что и сейчас вертикальное меню большое, а засунуть еще список такой это ужас. Сайт личный — итоги творческой деятельности за много-много лет. Контент интересный, на мой взгляд. Делаю это не для большой аудитории. Продвижение мне не нужно и неинтересно. Извините за длинное письмо. Буду рад вашему ответу.
Здравствуйте. У Max Mega Menu интерфейс в админке на английском, но меню на сайте Вы можете создавать на любых языках.