Как сделать 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 -->

<!— 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 —>

<!-- 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 по умолчанию поддерживает именно это количество уровней вложенности. Еще я вызвал в меню форму поиска.

NavWalker

Шаг первый

Шаг второй

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

Leave a Reply Cancel Reply