Как использовать Bootstrap Navbar в меню навигации WordPress

Вопрос или проблема

<?php wp_nav_menu(array('theme_location => 'primary',)); ?>

<nav id="menu-bar" class="navbar navbar-fixed-top navbar-light w-100">
                <a id="" class="navbar-brand" href="#">  
                  </a>
                  <button style="display:block;" id="responsive_hamburger" class="hamburger navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="hamburger-box ">
                          <span class="hamburger-inner "></span>
                      </span>
                  </button>
                  <div class="collapse navbar-collapse float-right" id="navbar-content">
                          <?php $defaults=array(
                          'theme_location'    => 'primary',
                          'container_id'      => 'navbar-content',
                          'container'         => '',
                          'container_id'      => '',
                          'container_class'   => '',
                          'menu_id'           => false,
                          'menu_class'        => 'navbar-nav ml-auto',
                          'depth'             => 0,
                          'fallback_cb'       => 'class-wp-bootstrap-navwalker::fallback',
                          'walker'            => new wp_bootstrap_navwalker(),
                          'add_li_class'      => "nav-item mx-4"

                      );
                      wp_nav_menu($defaults);?>

                  </div>
                </nav>

Ответ или решение

Использование Navbar Bootstrap в меню навигации WordPress

В данной статье мы разберем, как интегрировать Navbar Bootstrap 4.3 и меню навигации WordPress, что позволит вам создать современный, отзывчивый интерфейс для вашего сайта. Мы будем использовать стандартный WordPress-код в сочетании с Bootstrap-классами для создания интуитивно понятного меню.

Шаг 1: Подготовка темы WordPress

Во-первых, убедитесь, что ваша тема WordPress зарегистрировала меню. Это делается в функции functions.php. Пример кода:

function my_theme_setup() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'text_domain'),
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

Шаг 2: Настройка header.php

Далее мы будем редактировать файл header.php, где будет располагаться ваша навигация с использованием Navbar Bootstrap. Вот пример кода, который вам нужно вставить:

<nav id="menu-bar" class="navbar navbar-fixed-top navbar-light w-100">
    <a class="navbar-brand" href="#">
        <!-- Можно добавить логотип вашей компании или название сайта -->
        Ваш Логотип
    </a>
    <button id="responsive_hamburger" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse float-right" id="navbar-content">
        <?php 
        $defaults = array(
            'theme_location' => 'primary',
            'container'      => false,
            'menu_id'       => false,
            'menu_class'    => 'navbar-nav ml-auto', // Позиционирование меню справа
            'depth'         => 0,
            'fallback_cb'   => 'class-wp-bootstrap-navwalker::fallback',
            'walker'        => new wp_bootstrap_navwalker(),
            'add_li_class'  => 'nav-item mx-4', // Добавление классов к элементам списка
        );
        wp_nav_menu($defaults); 
        ?>
    </div>
</nav>

Шаг 3: Подключение файлов CSS и JS Bootstrap

Убедитесь, что вы подключили стили и скрипты Bootstrap в вашей теме. Это делается в файле functions.php. Пример кода:

function theme_enqueue_styles_scripts() {
    wp_enqueue_style('bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles_scripts');

Заметки по коду

1. $defaults: это массив с параметрами, которые мы передаем в функцию wp_nav_menu(). Основные параметры, которые вы можете использовать, уже указаны в вышеупомянутом коде.

2. Классы Bootstrap: Классы, используемые в коде (navbar, navbar-toggler, collapse, и т.д.), помогут в создании адаптивного дизайна, который будет работать на всех устройствах.

3. wp_bootstrap_navwalker: это класс, который вам необходимо подключить для совместимости вашего меню с Bootstrap. Вы можете найти его здесь на GitHub.

Заключение

Интеграция Bootstrap Navbar в меню WordPress — это эффективный способ улучшить пользовательский интерфейс вашего сайта. Следуя вышеуказанным инструкциям, вы сможете легко настроить навигационное меню, которое будет красиво выглядеть и быть функциональным. Не забудьте протестировать ваше меню на мобильных устройствах, чтобы удостовериться в его отзывчивости и удобстве использования.