Intereting Posts
Опубликовать вопрос после обновления до 3.3 Как изменить изображение профиля в wordpress? Лучшая практика: привязка к сайтам WPMU с других сайтов Перемещение wp-config.php, когда у вас есть вторая установка wordpress Как добавить атрибуты к таксономии, которые могут отличаться от должности для публикации? Выберите данные из базы данных и перечислите их в Loop (WordPress) Сохранение / запрос пользовательских данных даты WordPress в подкаталоге wp-admin проблема Только первая категория! Пользовательский тип сообщения + пользовательская таксономия = проблемы с листингом архива Контактная форма 7 отправляет нежелательный автоответчик Как изменить комментарий-страницу-1 # комментарий-25 на любую строку? Тема изменена по обновлениям Выполнять функцию для публикации и сохранения (а не только для сохранения) Получение иерархии родительских категорий в качестве объектов из шаблона категории

Пользовательская навигация с использованием wp_nav_menu и walker

Что у меня есть

Прямо сейчас у меня есть старый шаблон в простом HTML. Там я использую настраиваемое навигационное меню, созданное следующим образом:

<div class="collapse navbar-collapse main-menu main-menu-1" id="main-menu"> <ul class="nav navbar-nav"> <li class="active dropdown"> <a data-toggle="dropdown" href="#">Parent item 1</a> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Sub Item 1</a> </li> <li class="active"> <a href="#">Sub Item 2</a> </li> </ul> </li> <li class="main-menu-separator"></li> <li> <a href="#">Parent item 2</a> </li> </ul> </div> 

Что мне нужно

Прямо сейчас мне нужно выводить мою WordPress Navigation именно так. Включая каждый class и элемент data-toggle и все элементы main-menu-seperator li .

Я знаю, что для этого мне нужно использовать пользовательский ходунок. Но я действительно не знаю, как начать с этого.

Проблема

Я никогда не использовал пользовательские ходунки, Walker_Nav_Menu раньше распространяли Walker_Nav_Menu . Поэтому, если кто-нибудь может помочь мне создать мою навигацию, я бы очень признателен!

Следующая проблема заключается в том, что я не знаю, как установить class="active" в li элементах родителя и дочерних элементов.

Заранее большое спасибо!

ОБНОВЛЕНИЕ 1

Я просто пробовал вещи своим обычным ходоком, и сейчас получаю некоторые результаты.

Что мне нужно прямо сейчас:

  • Я хочу только добавить class «dropdown» к родительскому элементу li , если у элемента есть дочерние элементы.
  • Мне все еще нужен способ добавить мой разделитель li после каждого элемента меню.
  • Все еще отсутствует возможность показать «активное» состояние. Я видел, что wp_nav_menu уже wp_nav_menu некоторые classes такие как « current-page-item » и « current-menu-item »,

Это моя команда wp_nav_menu выглядит так:

 $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => 'collapse navbar-collapse main-menu main-menu-1', 'container_id' => 'main-menu', 'menu_class' => 'nav navbar-nav', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul class="%2$s">%3$s</ul>', 'depth' => 2, 'walker' => new FoxTransport_Walker() ); wp_nav_menu( $defaults ); 

И вот как выглядит мой ходунок прямо сейчас:

 class FoxTransport_Walker extends Walker_Nav_Menu { // add classes to ul sub-menus function start_lvl( &$output, $depth ) { // depth dependent classes $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent $display_depth = ( $depth + 1); // because it counts the first submenu as 0 $classes = array( 'dropdown-menu' ); $class_names = implode( ' ', $classes ); // build html $output .= "\n" . $indent . '<ul class="' . $class_names . '" role="menu">' . "\n"; } // add main/sub classes to li's and links function start_el( &$output, $item, $depth, $args ) { global $wp_query; $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent // depth dependent classes $depth_classes = array( ( $depth == 0 ? 'dropdown' : '' ) ); $depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); // passed classes $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); // build html $output .= $indent . '<li class="' . $depth_class_names . ' ' . $class_names . '">'; // link attributes $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= ' data-toggle="dropdown"'; $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', $args->before, $attributes, $args->link_before, apply_filters( 'the_title', $item->title, $item->ID ), $args->link_after, $args->after ); // build html $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } тем class FoxTransport_Walker extends Walker_Nav_Menu { // add classes to ul sub-menus function start_lvl( &$output, $depth ) { // depth dependent classes $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent $display_depth = ( $depth + 1); // because it counts the first submenu as 0 $classes = array( 'dropdown-menu' ); $class_names = implode( ' ', $classes ); // build html $output .= "\n" . $indent . '<ul class="' . $class_names . '" role="menu">' . "\n"; } // add main/sub classes to li's and links function start_el( &$output, $item, $depth, $args ) { global $wp_query; $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent // depth dependent classes $depth_classes = array( ( $depth == 0 ? 'dropdown' : '' ) ); $depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); // passed classes $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); // build html $output .= $indent . '<li class="' . $depth_class_names . ' ' . $class_names . '">'; // link attributes $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= ' data-toggle="dropdown"'; $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', $args->before, $attributes, $args->link_before, apply_filters( 'the_title', $item->title, $item->ID ), $args->link_after, $args->after ); // build html $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } 

ОБНОВЛЕНИЕ 2

Я просто решил одну проблему. Сейчас у меня активный класс. Решение для меня теперь состояло в том, чтобы добавить несколько строк в jQuery, где я получаю классы wordpress и добавляю свои, а именно:

 $('.current-page-item').addClass('active'); $('.current-menu-item').addClass('active'); $('.current_page_parent').addClass('active'); $('.menu-item-has-children').addClass('dropdown'); $('.menu-item-has-children > a').attr('data-toggle','dropdown'); 

Это означает, что остаются следующие вопросы:

  • Я не знаю, как добавить мой разделитель li после того, как каждый родительский элемент меню ожидает последнего.