Как сделать bootstrap 4 меню для WordPress (инструкция в 4 шага)

Йоу-йоу. Сделал себе новую тему для сайта и перенёс проект с pc-health.me на xakplnat.ru.

Xakplant сделан полностью и только лишь на bootstrap 4 без написания каких-либо стилей. Навыки по bs4 нужно было оттачивать и вот решил сделать это на своём сайте. Наверно вы уже заметили, что в шапке красуется отличное нативное бутстраповское меню родом из 4-й версии. В этой статье я расскажу вам как сделать 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';
}

Не забудьте поменять адрес, если у вас не такой как на примере. Если вы слабо понимаете что тут написано, вот вам маленькая справка: 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 -->

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

Шаг 4. Форма поиска

Форма поиска храниться в корне темы в файле searchform.php. Для того, чтобы форма стала такой же как у bootstrap 4, содержимое файла searchform.php нужно заменить моим кодом:

<form action="/" method="get" class="form-inline">
    <input class="form-control mr-sm-2" type="search" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="Search" aria-label="Search">
    <button id="searchsubmit" class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>

P.S.

Вот такой небольшой, но очень полезный материал для разработчиков wp тем. Однажды я наверное напишу, как сделал пагинацию на своём сайте.

Думаю это будет интересно,  а пока подписывайтесь на меня в инстаграме, вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.