Как сделать bootstrap 4 меню для WordPress

NavWalker

Navwalker это такой класс который расширяется от объекта Walker_Nav_Menu и нужен для того чтобы видоизменить меню стандарными методами. Таких walker’ов в интернете много, но нам нужен определённый.

Шаг первый

Наш первый шаг — скачиваем нужный нам navwalker по этой ссылке с github. Если на момент прочтения вами этой статьи на github’е не будет этого файла то скачайте с моего сайте WP_Bootstrap_Navwalker.

Шаг второй

Кладём в папку с нашей темой скаченный файл и подключаем его

// Подключение bootstrap navwlker
if ( ! file_exists( get_template_directory() . '/wp-bootstrap-navwalker.php' ) ) {
	// file does not exist... return an error.
	return new WP_Error( 'wp-bootstrap-navwalker-missing', __( 'It appears the wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
	// file exists... require it.
    require_once get_template_directory . 'wp-bootstrap-navwalker.php';
}
// Подключение bootstrap navwlker
if ( ! file_exists( get_template_directory() . '/wp-bootstrap-navwalker.php' ) ) {
	// file does not exist... return an error.
	return new WP_Error( 'wp-bootstrap-navwalker-missing', __( 'It appears the wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
	// file exists... require it.
    require_once get_template_directory . 'wp-bootstrap-navwalker.php';
}

Не забудьте поменять адресс если у вас не такой как на примере. Если вы слабо понимаете что тут написано вот вам маленькая справка: get_template_directory() это путь до папки с родительской темой и от неё нужно писать путь дальше. Если у вас дочерняя тема то вам за место get_template_directory() нужно поставить get_stylesheet_directory() или get_stylesheet_directory_uri().

Шаг третий. Вызываем меню в header.php

На странице программиста, который написал нужный нам walker есть пример, но я объясню другой пример т.к. в его примере не учтено, что нужно добавить еще и строку поиска в меню. В моём примере в файле header.php пишем следующие:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="<?php echo home_url() ?>"><?php bloginfo( 'name' ); ?></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'        => 'primary-menu',
                'depth'           => 2,
                'container'       => false,
                'menu_class'      => 'navbar-nav mr-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker()
            ) );
            ?>
            <?php get_search_form(); ?>
        </div>
    </div><!-- Container End -->
</nav>
<!-- Navbar End -->
  1. <!— Navbar —>
  2. <nav class=«navbar navbar-expand-lg navbar-dark bg-dark»>
  3. <div class=«container»>
  4. <a class=«navbar-brand» href=«<?php echo home_url() ?>»><?php bloginfo( ‘name’ ); ?></a>
  5. <button class=«navbar-toggler» type=«button» data-toggle=«collapse» data-target=«#navbarColor01» aria-controls=«navbarColor01» aria-expanded=«false» aria-label=«Toggle navigation»>
  6. <span class=«navbar-toggler-icon»></span>
  7. </button>
  8. <div class=«collapse navbar-collapse» id=«navbarColor01»>
  9. <?php
  10. wp_nav_menu( array(
  11. ‘theme_location’ => ‘menu-1’,
  12. ‘menu_id’ => ‘primary-menu’,
  13. ‘depth’ => 2,
  14. ‘container’ => false,
  15. ‘menu_class’ => ‘navbar-nav mr-auto’,
  16. ‘fallback_cb’ => ‘WP_Bootstrap_Navwalker::fallback’,
  17. ‘walker’ => new WP_Bootstrap_Navwalker()
  18. ) );
  19. ?>
  20. <?php get_search_form(); ?>
  21. </div>
  22. </div><!— Container End —>
  23. </nav>
  24. <!— Navbar End —>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="<?php echo home_url() ?>"><?php bloginfo( 'name' ); ?></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'        => 'primary-menu',
                'depth'           => 2,
                'container'       => false,
                'menu_class'      => 'navbar-nav mr-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker()
            ) );
            ?>
            <?php get_search_form(); ?>
        </div>
    </div><!-- Container End -->
</nav>
<!-- Navbar End -->

Обратите внимание на некоторые вещи. ‘depth’  => 2 говорит о том что вложенность меню будет 2 уровня т.к. bootstrap по умолчанию поддерживает именно это количество уровней вложенности. Еще я вызвал в меню форму поиска.

Leave a Reply

Ваш адрес email не будет опубликован.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>