Intereting Posts
Перенаправление дома в /wp-login.php?action=register Множественное количество с опциями Изменение размера редактора wordpress Расположение меню по идентификатору меню или идентификатору меню в start_el () Walker Как запустить WordPress из другого места в том же домене Проблемы с миграцией базы данных – Ошибка № 1046 Нет выбранной базы данных Что происходит с текстом в файле functions.php вне приложения php? Переименование загрузки изображений с шириной в имени файла Загрузка различных JS для http и https Почему деактивация плагина вызывает ошибку: «У вас недостаточно прав для доступа к этой странице»? WordPress удаляет файлы изображений по какой-либо причине Плагин для создания неограниченных пользовательских коротких кодов? max_input_vars: сколько я использую? Можно ли настроить Rich Text для каждого пользователя? Тип сообщения только для «Admin» в разделе «Внешний вид»> «Меню»

Бутстрап dropdown Nav таблетки, не работающие с wp_nav_menu ()

Я использую Bootstrap nav пилюли с раскрывающимися элементами в виде меню WordPress, меню без выпадающего меню выглядит хорошо, но когда я добавляю вложенную ul как раскрывающееся меню, то не работает, как ожидалось.

HTML

<nav class="navbar navbar-default pull-right" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav nav-pills head-menu"> <li class="current"><a href="index.html">Home</a> </li> <li><a href="authors.html">Authors</a></li> <li><a href="catalogue.html">Catalogue</a></li> <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Featured <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="featured-videos.html">Featured Videos</a></li> <li><a href="featured-author.html">Featured Author</a></li> </ul> </li> <li><a href="media.html">Media</a></li> <li><a href="team.html">Team</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> 

PHP

 <nav class="navbar navbar-default pull-right" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'items_wrap' => '<ul class="nav nav-pills head-menu">%3$s</ul>') ); ?> </div> </div> </nav> 

Все хорошо, когда нет раскрывающихся элементов, как исправить эту проблему?

Solutions Collecting From Web of "Бутстрап dropdown Nav таблетки, не работающие с wp_nav_menu ()"

Включили ли вы загрузочные файлы .js? Если это так, он должен открыть раскрывающийся список при нажатии.

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

 <?php /** * Class Name: wp_bootstrap_navwalker * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager. * Version: 2.0.4 * Author: Edward McIntyre - @twittem * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ class wp_bootstrap_navwalker extends Walker_Nav_Menu { /** * @see Walker::start_lvl() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param int $depth Depth of page. Used for padding. */ public function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent<ul role=\"menu\" class=\" category-list\">\n"; } /** * @see Walker::start_el() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. Used for padding. * @param int $current_page Menu item ID. * @param object $args */ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; /** * Dividers, Headers or Disabled * ============================= * Determine whether the item is a Divider, Header, Disabled or regular * menu item. To prevent errors we use the strcasecmp() function to so a * comparison that is not case sensitive. The strcasecmp() function returns * a 0 if the strings are equal. */ if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) { $output .= $indent . '<li role="presentation" class="divider">'; } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) { $output .= $indent . '<li role="presentation" class="divider">'; } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) { $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title ); } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) { $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>'; } else { $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 ) ); if ( $args->has_children ) $class_names .= ' cd-library'; if ( in_array( 'current-menu-item', $classes ) ) $class_names .= ' active'; $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $atts = array(); $atts['title'] = ! empty( $item->title ) ? $item->title : ''; $atts['target'] = ! empty( $item->target ) ? $item->target : ''; $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; // If item has_children add atts to a. if ( $args->has_children && $depth === 0 ) { $atts['href'] = '#'; $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; $atts['aria-haspopup'] = 'true'; } else { $atts['href'] = ! empty( $item->url ) ? $item->url : ''; } $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args ); $attributes = ''; foreach ( $atts as $attr => $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } } $item_output = $args->before; /* * Glyphicons * =========== * Since the the menu item is NOT a Divider or Header we check the see * if there is a value in the attr_title property. If the attr_title * property is NOT null we apply it as the class name for the glyphicon. */ if ( ! empty( $item->attr_title ) ) $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;'; else $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } /** * Traverse elements to create list from elements. * * Display one element if the element doesn't have any children otherwise, * display the element and its children. Will only traverse up to the max * depth and no ignore elements under that depth. * * This method shouldn't be called directly, use the walk() method instead. * * @see Walker::start_el() * @since 2.5.0 * * @param object $element Data object * @param array $children_elements List of elements to continue traversing. * @param int $max_depth Max depth to traverse. * @param int $depth Depth of current element. * @param array $args * @param string $output Passed by reference. Used to append additional content. * @return null Null on failure with no changes to parameters. */ public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) { if ( ! $element ) return; $id_field = $this->db_fields['id']; // Display this element. if ( is_object( $args[0] ) ) $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] ); parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); } /** * Menu Fallback * ============= * If this function is assigned to the wp_nav_menu's fallback_cb variable * and a manu has not been assigned to the theme location in the WordPress * menu manager the function with display nothing to a non-logged in user, * and will add a link to the WordPress menu manager if logged in as an admin. * * @param array $args passed from the wp_nav_menu function. * */ public static function fallback( $args ) { if ( current_user_can( 'manage_options' ) ) { extract( $args ); $fb_output = null; if ( $container ) { $fb_output = '<' . $container; if ( $container_id ) $fb_output .= ' id="' . $container_id . '"'; if ( $container_class ) $fb_output .= ' class="' . $container_class . '"'; $fb_output .= '>'; } $fb_output .= '<ul'; if ( $menu_id ) $fb_output .= ' id="' . $menu_id . '"'; if ( $menu_class ) $fb_output .= ' class="' . $menu_class . '"'; $fb_output .= '>'; $fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) . '">Add a menu</a></li>'; $fb_output .= '</ul>'; if ( $container ) $fb_output .= '</' . $container . '>'; echo $fb_output; } } } //Use theme <?php wp_nav_menu( array( 'menu' => 'main-nav', 'theme_location' => 'main-nav', 'depth' => 2, 'container' => false, 'menu_class' => 'main-navigation', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?>