Вот Москва!
Вот Москва!
Перейти к контенту

Как создать 2 меню сверху с помощью Bootstrap 4

Вот.Москва!
Опубликовано вход Bootstrap 4 ·
Tags: Bootstrap4
Для того чтобы создать 2 меню с сверху мы должны создать разметку сайта в файле  header.php нашего шаблона сайта. И так открываем файл header.php и создаем разметку на примере:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
</header>
   <div class="col-lg-12 bg-dark sticky-top"> // создаем блок меню и делаем его прилепленным на верху а так же цвет черный делаем
  <div class="container">
       <div class="row">
     <div class="col-lg-6">
                            // МЕНЮ [1]
     </div>
                 <div class="col-lg-6">
                // МЕНЮ [2]
                 </div>
              </div>     
         </div>
   </div>
</header>
И так в МЕНЮ [1] вставляем этот код
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
<nav class="navbar navbar-expand-xl p-2 navbar-light bg-dark">
                       <div class="navbar-brand"> // создаем еще блок так называем логотип
                              <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?> // скрипт для подключения логотипа
                              <a href="<?php echo esc_url( home_url( '/' )); ?>">
                              <img src="<?php echo esc_attr(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                              </a>
                            <?php else : ?>
                           <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                          <?php endif; ?>
                               </div>
         <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> // это само меню, тут мы задали, что оно у нас будет адаптировано под моб. телефон и т.д ( лучше прочитать учебник по botstrap 4)
                   <span class="navbar-toggler-icon"></span>
                   </button>
                   <?php    
                   wp_nav_menu(array(
                   'theme_location'    => 'naw1', // это ID Меню
                   'container'       => 'div',
                   'container_id'    => 'main-nav',
                   'container_class' => 'collapse navbar-collapse',
                   'menu_id'         => false,
                   'menu_class'      => 'navbar-nav',
                   'depth'           => 3,
                   'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                   'walker'          => new wp_bootstrap_navwalker()
                   ));
                   ?>
               </nav>
А в МЕНЮ [2] вставляем этот код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<nav class="navbar navbar-expand">
         <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                   <span class="navbar-toggler-icon"></span>
                   </button>
                   <?php
                   wp_nav_menu(array(
                   'theme_location'    => 'naw2', // тут мы указываем id naw2
                   'container'       => 'div',
                   'container_id'    => 'main-nav',
                   'container_class' => 'collapse navbar-collapse',
                   'menu_id'         => false,
                   'menu_class'      => 'navbar-nav',
                   'depth'           => 2,
                   'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                   'walker'          => new wp_bootstrap_navwalker()
                   ));
                   ?>
               </nav>
Сохраняем наш header.php и открываем файл functions.php и регистрируем там наши 2 меню
1
2
3
4
register_nav_menus( array(
  'naw1' => esc_html__( 'Меню блога', 'wp-bootstrap-starter' ), //  'Меню блога', название меню 1
  'naw2' => esc_html__( 'Меню магазина', 'wp-bootstrap-starter' ), //  'Меню магазина', название меню 1
 ) );
Если вы не создаете дочернюю тему, то добавляем ее в основной файл функций вашей темы.
Данная функция позволит нам добавить дополнительное меню WordPress в наш шаблон и создаст для него еще одну область.
После добавления заходим в админку в «Управление областями»:
Рубрика: Web разработки



все права зпщищины
Яндекс.Метрика
Назад к содержимому