WordPress меню с Twitter Bootstrap 3

Всем хорош Bootstrap если ты пишешь сайт с нуля и руки развязаны. Но вот чтобы прикрутить его к CMS нужно постараться. Особо приходится поковыряться с меню. WordPress генерирует меню со своей версткой и стилями, которые никак не похожи на верстку Bootstrap. Но и это можно исправить.

Итак, в чем заключается задача. Мы сделаем так, чтобы стандартная функция WordPress для вывода меню wp_nav_menu() выдавала Bootstrap верстку. Для этого проделаем всего 3 шага:

Создадим свой объект (walker), строящий меню. Для этого в файл functions.php вашей темы добавляем код

class BS3_Walker_Nav_Menu extends Walker_Nav_Menu {

function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
$id_field = $this->db_fields['id'];

if ( isset( $args[0] ) && is_object( $args[0] ) )
{
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );

}

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

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( is_object($args) && !empty($args->has_children) )
{
$link_after = $args->link_after;
$args->link_after = ' <b class="caret"></b>';
}

parent::start_el($output, $item, $depth, $args, $id);

if ( is_object($args) &amp;amp;&amp;amp; !empty($args->has_children) )
$args->link_after = $link_after;
}

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

Второй шаг — добавляем фильтр. Вставляем в functions.php после вставленного кода следующий:

add_filter('nav_menu_link_attributes', 'nav_link_att', 10, 3);

function nav_link_att($atts, $item, $args) {
if ( $args->has_children )
{
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
}
return $atts;
}

И третий шаг — вывод меню в нужном месте:

<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php wp_nav_menu(array(
'container_class' => 'menu-header',
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
'walker' => new BS3_Walker_Nav_Menu,
'menu' => 'ВАШЕ МЕНЮ'
)); ?>
</div>
</div>
</div>
</div>
</nav>

Собственно, все. Теперь выводимое меню будет Bootstrap-совместимым.

• No related posts.