Навигационное меню WordPress с использованием Twitter Bootstrap
Я использую Twitter Bootstrap в своей теме.
Пытаюсь использовать меню Bootstrap в теме, но оно использует кастомные атрибуты типа data-toggle
.
Вот полный код.
<ul class="nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<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>
<li><a href="#">Другое действие</a></li>
<li><a href="#">Что-то еще</a></li>
<li class="divider"></li>
<li><a href="#">Отдельная ссылка</a></li>
</ul>
</li>
</ul>
Может кто-то помочь оптимизировать этот код для wp_nav_menu()?
Обновление:
Вот что я попробовал:
1) Кастомный класс подменю
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
}
2) wp_nav_menu
<?php wp_nav_menu( array( 'items_wrap' => '<ul class="nav">%3$s</ul>','walker' => new My_Walker_Nav_Menu() ) ); ?>
Помогите добавить класс "dropdown" и эту ссылку
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Выпадающее <b class="caret"></b></a>

Для готового решения скопируйте этот пользовательский Walker: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/
В нем не хватает одной или двух вещей, таких как data-toggle="dropdown"
и <b class="caret"></b>
.
Должно быть довольно просто разобраться, но вот моя модифицированная версия: https://gist.github.com/1817371
Надеюсь, это поможет.

Спасибо за это. У меня сейчас нет кода перед глазами, но я буквально рвал на себе волосы, пытаясь понять, как получить свойство had_children
. Это где-то задокументировано, случайно? (я имею в виду версию после WP3.4)

Не уверен, но @Jan Fabry дает краткое объяснение в этой ветке

Я использовал другой подход вместо создания пользовательского walker. Я применил функцию для добавления класса "dropdown" к любым родительским пунктам меню, которые содержат подменю. Поскольку WordPress по умолчанию выводит класс "sub-menu", я использую jQuery, чтобы добавить класс "dropdown-menu" ко всем элементам с классом "sub-menu". Затем с помощью jQuery я добавляю элемент <b class="caret"></b>
.
Я подробно описал это в полном руководстве о том, как реализовать выпадающее меню Bootstrap в навигационном меню WordPress: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

Подробности смотрите в этом ответе: ищите menu_item_parent
и устанавливайте class="dropdown-toggle"
условно.

Привет toscho, спасибо. Посмотрите эту страницу. Это именно то, что я искал. Я попробовал эти коды. Так как я не эксперт в PHP, у меня не получилось заставить это работать. Можете помочь с этим ответом? Спасибо.

Попробуйте WP Bootstrap Menu, если вам не нужно что-то сложное.
Вам потребуется заменить стандартную функцию wp_nav_menu()
на пользовательскую функцию из плагина в вашей теме, чтобы это работало. Учтите, что функция плагина не совместима с другими плагинами и не предлагает те же фильтры, что и стандартный WordPress walker.

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

Ой, извините, я не знал. Не знаю, что добавить - этот плагин генерирует точный код с пользовательской функцией, которая необходима для работы с bootstrap

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