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

Для того чтобы создать 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 в наш шаблон и создаст для него еще одну область.
После добавления заходим в админку в «Управление областями»:

Оставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *