Навигационное меню WordPress с использованием Twitter Bootstrap

3 февр. 2012 г., 21:51:23
Просмотры: 17.3K
Голосов: 3

Я использую 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>

0
Все ответы на вопрос 4
2

Для готового решения скопируйте этот пользовательский 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

Надеюсь, это поможет.

13 февр. 2012 г. 16:47:24
Комментарии

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

Jon Jaques Jon Jaques
24 февр. 2013 г. 17:22:02

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

Duane Duane
11 апр. 2013 г. 18:30:09
0

Я использовал другой подход вместо создания пользовательского 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/

15 окт. 2012 г. 10:49:26
1

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

Другие похожие вопросы.

3 февр. 2012 г. 22:46:20
Комментарии

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

PrivateUser PrivateUser
3 февр. 2012 г. 23:41:33
4

Попробуйте WP Bootstrap Menu, если вам не нужно что-то сложное.

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

23 янв. 2013 г. 04:28:59
Комментарии

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

fuxia fuxia
23 янв. 2013 г. 06:59:37

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

farhan farhan
24 янв. 2013 г. 08:15:32

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

fuxia fuxia
24 янв. 2013 г. 08:23:32

Спасибо, в следующий раз при публикации я добавлю подобные детали

farhan farhan
25 янв. 2013 г. 01:59:29