Выпадающее меню Bootstrap с использованием wp_nav_menu в WordPress

Question

Выпадающее меню Bootstrap с использованием wp_nav_menu в WordPress

27 февр. 2013 г., 10:27:00

Просмотры: 16.5K

Голосов: 4

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

Вот мое меню:

<ul class="nav">
   <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
</ul>

Вот что у меня в functions.php для меню:

add_action('after_setup_theme', 'blankslate_setup');
function blankslate_setup(){
register_nav_menus(
array( 'main-menu' => __( 'Главное меню', 'blankslate' ) )
);
}

function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // function

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Когда я добавляю подменю (через Внешний вид - Меню), генерируется следующее:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Родитель</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">Дочерний</a></li>
        </ul>
    </li>
</ul>

Для работы с Bootstrap мне нужно, чтобы меню генерировалось так:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Родитель <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Дочерний</a></li>
        </ul>
    </li>
</ul>

Мне необходимо:

Добавить класс "dropdown" для пунктов меню, у которых есть дочерние элементы
Добавить class="dropdown-toggle" и data-toggle="dropdown" к ссылке (.dropdown a)
Добавить <b class="caret"></b> после названия выпадающего меню (внутри ссылки .dropdown a)
Заменить class="sub-menu" на class="dropdown-menu" для подменю

Надеюсь, кто-нибудь сможет помочь!

Cody

279

меню выпадающий список twitter bootstrap

Комментарии

Если поискать на Github, можно найти несколько пользовательских функций-обходчиков (walker) для wp_nav_menu в Bootstrap.

RRikesh

27 февр. 2013 г. 11:28:06

Все ответы на вопрос

Комментарии

Спасибо, я попробую это. Я забыл обернуть некоторый код в пунктах 3 и 4 :)

Cody

27 февр. 2013 г. 12:27:34

Ок, теперь это имеет смысл, я думаю приведенный выше код должен решить все проблемы.

Sunyatasattva

27 февр. 2013 г. 12:38:58

Как думаешь, есть ли способ сделать это в functions.php? Или каким-то другим способом, который позволит мне изменять только тему.

Cody

27 февр. 2013 г. 12:49:12

Вы можете полностью использовать это в вашем файле functions.php, возможно, подключите через include внешний файл, чтобы сделать код чище, но это всё.

Sunyatasattva

27 февр. 2013 г. 13:55:39

Спасибо! Вы спасли день, всё работает как часы :)

Cody

27 февр. 2013 г. 14:17:45

Чтобы исправить проблему с выпадающим меню, вам следует:

перейти в файл class-wp-bootstrap-navwalker.php

найти строку

$atts['data-toggle'] ="dropdown";

и заменить её на

$atts['data-bs-toggle'] ="dropdown";

moaz studio استديو معاذ

1

3 мар. 2021 г. 07:59:34

Sunyatasattva 1.63K · Accepted Answer · 2013-02-27T11:58:59Z

Вам понадобится создать собственный класс-обходчик, расширяющий Walker_Nav_Menu, примерно следующим образом:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\n<ul class=\"dropdown-menu\">\n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class=\"dropdown-toggle\" data-toggle=\"dropdown\"', $item_html );
           $item_html = str_replace( '</a>', ' <b class=\"caret\"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Дополнительный уровень выпадающего меню,
                // как показано здесь: http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Не совсем понятно, что именно вам нужно в пунктах 3 и 4.