Как сделать Bootstrap меню для Wordpress?! (вертикальное и обычное)
Сейчас я делаю новую тему для своего интернет-магазина shop.tool-ha.ru, хочу чтобы там всё было круто woocommerce, bootstrap, полный адаптив. Для большего удобства навигации я хочу сделать боковое меню. А так как всё это на bootstrap то естественно встал вопрос о «как это сделать». Реализация на мой взгляд получилась отличной. Посмотрите!
Сперва мне нужен выпадающий блок. ссылка на реализацию блока в bootstrap. Там все просто. Скопировал — вставил.
На стилях я тоже не хочу долго останавливаться по ряду причин. Ну во-первый это многие знаю, а во-вторых это не так уж сложно. Единственно я обращу внимание «самых маленьких» на пару вещей.
font-size: 1rem; — можете использовать px, rem, em. Всё что вам угодно
для класса .menu в своем проекте я использовал атрибут left:-15px; чтобы выравнивать полевому краю блока .container
.navbar-vertycal .dropdown-menu {position: absolute; top:0; left: 100%;} это для того чтобы меню раскрывалось с права.
Меню находиться в .col-lg-3 если нужно, чтобы меню было шире или уже измените размер колонки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* Стиль бокового меню */ .navbar-vertycal { font-size: 1rem; margin-bottom: 0; width: 100%; } .navbar-vertycal ul { width: 100%; } .navbar-vertycal li{ display: block; float: none; width: 100%; } .navbar-vertycal li a{ display: block; float: none; width: 100%; } .navbar-vertycal .navbar-collapse { padding: 0px; } .navbar-vertycal a { padding: 0.5em 1rem !important; } .menu { position: relative; border-left: 2px solid #1ce2e2; } .navbar-vertycal .dropdown-menu { position: absolute; top:0; left: 100%; } .caret { position: absolute; right: 0; top: 0.125rem; display: block; transform: rotate(270deg); height: 0.5rem; padding: 0.75rem 0; } |
Далее самое главное
Создайте файл Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu.php и подключите в файле function.php. В созданный файл поместите следующий текст
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu { /** * Display Element */ 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 ); } /** * Start Element */ 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) && !empty($args->has_children) ) $args->link_after = $link_after; } /** * Start Level */ function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "\n$indent<ul class=\"dropdown-menu list-unstyled\">\n"; } }; add_filter('nav_menu_link_attributes', function($atts, $item, $args) { if ( $args->has_children ) { $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; } return $atts; }, 10, 3); |
Это код вывода вертикального меню. Его нужно разместить внутри container>row>col-lg-3 (или например col-md-4)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="menu collapse in" id="collapseExample" aria-expanded="true"> <nav class="navbar navbar-vertycal" role="navigation"> <!-- 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' => 'navbar-vertycal', 'theme_location' => 'primary', 'items_wrap' => '<ul id="%1$s" class="nav navbar-nav">%3$s</ul>', 'walker' => new Bootstrap_Walker_Nav_Menu, )); ?> </div><!-- /.navbar-collapse --> </nav> </div> |
Меню Bootstrap целиком
Вы так же можете вывести и всё меню bootstrap, горизонтально например, используя следующий код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Вставляйте этот код <nav id="nav" class="navbar navbar-default" role="navigation"> <!-- 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="#">Kawaii Walls</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 Bootstrap_Walker_Nav_Menu, )); ?> </div><!-- /.navbar-collapse --> </nav> |
Обратите внимание что в случае с полным меню 'container_class' => 'menu-header', а в случае с вертикальным 'container_class' => 'navbar-vertycal'. Это основное отличие.