Для того чтобы создать 2 меню с сверху мы должны создать разметку сайта в файле header.php нашего шаблона сайта. И так открываем файл header.php и создаем разметку на примере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
И так в МЕНЮ [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 в наш шаблон и создаст для него еще одну область.
После добавления заходим в админку в «Управление областями»: