Добавление индикаторов под-меню к родительским элементам меню используя функцию wp_nav_menu() WordPress опубликовал Радик Алиев категория  
просмотры 9 851

Добавление индикаторов под-меню к родительским элементам меню используя функцию wp_nav_menu() Wordpress

Привет Друзья! С точки зрения SEO пользовательского интерфейса или usability сайта очень удобно, чтобы по меню было видно, у каких пунктов меню есть подменю (часто это показывает стрелка или маленький треугольник, или картинка меню). При использовании wp_nav_menu() WordPress добавляет класс 'sub-menu' к тегам <ul> каждого подменю, но ничего к родительским элементам, поэтому их трудно различить.

Мы начнём с добавления следующего кода в наш файл function.php. Не забудьте заменить ‘wpandyou’ на название вашего собственного сайта или просто Вашим словом.

По сути, вышеприведённый код проверяет, имеет ли данный пункт подпункты, и если да, добавляет wpandyou-punkt-menu-parent в массив $classes. Для получения более подробной информации (в том числе о walker-ах, багах в ядре и других развлечениях) смотрите ссылки в конце поста.


Для того, чтобы этот код заработал, надо сообщить меню о его использовании, а это мы сделаем с walker аргументом при вызове функции wp_nav_menu(), первый простейший php пример, это вызов всех страниц в виде меню:

Пример выше отобразит все Ваши опубликованные страницы в админ панеле. Если нам необходимо отобразить меню из раздела Внешний вид -> Меню, нам необходимо указать, какое именно меню отобразить. Пример кода:

Где 'primary' — это название Вашего меню.

Теперь, когда у нас есть ключевой класс, мы можем воспользоваться CSS для вставки изображения или просто условного обозначения, например стрелки. Добавим следующие строки в style.css:

Если Вы изучаете CSS советую Вам почитать о новых способах вёрстки:

В данном CSS мы используем горизонтальное меню. Первая часть кода отвечает за вывод стрелок главного меню, а второй код выводит стрелки в sub-menu.

Полезные ссылки о Walker и wp_nav_menu():
stackexchange.com
Codex WordPress
wp_nav_menu() в Codex WordPress

Удачи Вам и хороших заработков!

Теги:

3 Комментарий

Оставить комментарий
  1. adward Март 26, 2014 at 2:28 дп #

    Клиент требует убирать из меню те страницы сайта (меню основано на страницах), для которых стоит статус «Черновик» или «На утверждении».

    Можно ли каким нибудь способом, либо:
    a) не формировать это меню в момент сборки, или же
    б) присваивать такому пункту какой либо, скажем, класс, например class=»hiddenitem»

    В данный момент меню формируется следующим образом:

    $args = array(
    ‘theme_location’=>’equipment-menu’,
    ‘container’=>’div’,
    ‘container_class’=>’children_menu_top’,
    ‘container_id’=>’menu’,
    ‘menu_class’=>’sf-menu’,
    ‘menu_id’=>’children_menu’,
    ‘before’=>’‘,
    ‘after’=>’
    ‘,
    ‘fallback_cb’=>false
    );
    wp_nav_menu($args);

    Спасибо за помощь! 😉

    • Gennady Март 26, 2014 at 3:28 дп #

      указанный код выводит готовое меню из раздела WordPress внешний вид->меню, т.к не указано какое именно меню речь идет о первом меню…, и в меню д.б отображаться то что в нем добавлено… вы уверены что ваше меню страниц со статусами “Черновик” или “На утверждении” выводится указанным способом?

  2. VRS Март 4, 2015 at 5:38 дп #

    Доброй ночи,
    а можно как-то волкер применить к тем меню, которые выводятся через виджет в сайдбаре?

Добавить комментарий

vk_like_site