Intereting Posts
В WordPress, как вы создаете несколько разных редакторов для одной страницы? Контактный формуляр 7: входы электронной почты по электронной почте или создание поля только для чтения Как показать термины, используемые только для определенного типа пользовательских сообщений. Создание фильтра $ wpdb-> обновление завершило сохранение триггера? Как работает plugins_loaded? Перемещение комментариев только с одной установки WP на другую Как удалить скрипт cufon из темы Dzonia Lite Перемещение главного меню в подменю пользовательского меню Возможно ли иметь общие пользовательские типы сообщений WordPress? Как я могу переписать URL-адрес для передачи запросов на пользовательский метод через AJAX? (Я не могу использовать admin-ajax.php) Можно ли скрыть панель сведений о деталях мультимедиа при открытии всплывающего окна wp.media? Нужно загрузить загруженный двоичный файл Избегание использования цикла для доступа к одному сообщению Пользовательские действия, не работающие в Woocommerce Целесообразно ли использовать `add_rewrite_rule ()` для обслуживания пользовательской страницы?

Меню WordPress Custom Walker Class

Мы используем пользовательский интерфейс jQuery для отображения меню на боковой панели. Мы уже писали разметку и javascript, и я просто пытаюсь заставить wp_nav_menu выводить ту же самую разметку, которую мы уже написали. Я создаю пользовательский класс Walker, расширяющий Walker_Nav_Menu.

Вот разметка, по которой мы собираемся

<h2><a href="#">Parent Item</a></h2> <div> <ul> <li><a href="">Child Item 1</a></li> <li><a href="">Child Item 2</a></li> <li><a href="">Child Item 3</a></li> <li><a href="">Child Item 4</a></li> <li><a href="">Child Item 5</a></li> </ul> </div> <h2><a href="#">Parent Item 2</a></h2> <div> <ul> <li><a href="">Child Item 1</a></li> <li><a href="">Child Item 2</a></li> <li><a href="">Child Item 3</a></li> <li><a href="">Child Item 4</a></li> <li><a href="">Child Item 5</a></li> </ul> </div> 

К сожалению, я не могу получить пользовательский класс Walker для вывода разметки, как мне хотелось бы. Любые примеры или учебные пособия по классу Walker будут отличными. Все еще не нашли точно, что я ищу на SE или Google.

благодаря

Solutions Collecting From Web of "Меню WordPress Custom Walker Class"

Самый простой способ – расширить класс Walker_Nav_Menu а не Walker_Class , (поскольку поля родителя / идентификатора установлены, и часто вы хотите сохранить часть разметки и т. Д.).

Основные методы:

  • start_el / end_el – отвечает за отображение элемента в списке
  • start_lvl / end_lvl – отвечает за отображение подменю

Кроме того, есть walk и display_element которые в значительной степени управляют только механикой класса. Для большинства целей вышеуказанные четыре функции – это те, которые необходимо изменить в расширяющемся классе.

Тем не менее, структура, в которой вы находитесь, на самом деле не вложен, поэтому вы на самом деле не используете класс Walker в полной мере. Однако этот пользовательский класс walker доставит вам большую часть пути:

 class SH_Accordian_Walker extends Walker_Nav_Menu { //Start 'sub menu' function start_lvl(&$output, $depth=0, $args=array()) { if($depth > 0) return parent::end_lvl(&$output, $depth); $output .= '<div><ul>'; } //End 'sub menu' function end_lvl(&$output, $depth=0, $args=array()) { if($depth > 0) return parent::end_lvl(&$output, $depth); $output .= '</ul></div>'; } // Start element function start_el(&$output, $item, $depth=0, $args=array()) { if( 0 == $depth ){ $output.= '<h2><a href="'.esc_attr($item->url).'">'.apply_filters( 'the_title', $item->title, $item->ID ).'</a></h2>'; return; } // level 2+ parent::start_el(&$output, $item, $depth, $args); } // Don't need to add any output - sub menus aren't nested function end_el(&$output, $item, $depth=0, $args=array()) { if($depth > 0) parent::end_el(&$output, $item, $depth); } } 

Это просто класс, чтобы продемонстрировать, что вам нужно делать. Поскольку ваша структура не вложена – это может выглядеть неправильно, если мы опустимся ниже двух уровней (например, на детей-внуков).

Применение:

 wp_nav_menu( array( 'theme_location' => 'primary', 'walker'=> new SH_Accordian_Walker, 'depth'=>2, 'items_wrap'=> '%3$s' ) ); 

(Недавно я написал этот учебник по классу Walker: http://wp.tutsplus.com/tutorials/creative-coding/understanding-the-walker-class/ , который может вам пригодиться)

Хотел бы я увидеть ваш ответ, прежде чем я спустился по кроличьей дыре. Однако мне удалось реплицировать разметку, предоставляемую нашим дизайнером, с использованием расширения класса Walker, и он отлично работает с JQuery UI Accordion.

  class sidebar_nav_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; if (0 == $depth) { // parent item $output .= '<h2>'; $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 ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); $output .= '</h2>'; } else { // child items $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $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 ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } function start_lvl(&$output, $depth, $args=array()) { $output .= "\n<div><ul>\n"; } // Displays end of a level. Eg '</ul>' // @see Walker::end_lvl() function end_lvl(&$output, $depth, $args=array()) { $output .= "</ul></div>\n"; } /** * @see Walker::end_el() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Page data object. Not used. * @param int $depth Depth of page. Not Used. */ function end_el(&$output, $item, $depth) { } } 

Это достало меня довольно далеко. Но у меня все еще была проблема с wp_nav_menu, которая обертывала всю вещь в UL. Это сломало скрипт jQuery Accordion. Поэтому мне нужно было удалить его, и после экспериментов закончилось создание меню с помощью пользовательского Walker следующим образом …

  <nav id="nav"> <?php $menu = wp_nav_menu( array( 'container' => false, 'echo' => false, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'walker' => new sidebar_nav_walker() ) ); echo preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu ); ?> </nav> 

Примечание. Я предлагаю меню не эхо себя в аргументах. Вместо этого я запускаю на нем регулярное выражение, чтобы удалить этот родительский уровень UL.

Также обратите внимание. Это будет выглядеть как дерьмо, если вы не скажете своему аккордеону jQuery НЕ для автоматического сохранения.

 $(function() { $("#nav").accordion({ collapsible: true, autoHeight: false }); }); 

Результат несколько близок к исходной разметке моего дизайнера, кроме классов WP добавляет.