Интеграция Bootstrap 4 меню в WordPress

Содержание


Если сайт был сверстан с помощью Material Design фреймворка Bootstrap 4, то при посадке вёрстки в CMS WordPress одной из первых проблем является то, что меню не отображается должным образом.

Для решения данной проблемы был создан класс wp-bootstrap-navwalker (спасибо pattonwebz ), расширяющий и изменяющий функционал класса Walker_Nav_Menu. С помощью этого класса мы и решим данную проблему.


Шаг 1

Скачать и распаковать файл class-wp-bootstrap-navwalker.php по ссылке автора на github

Шаг 2

Перенести скачанный файл в папку с темой WordPress (/wp-content/themes/your-theme/)

Шаг 3

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

/**
 * Register Custom Navigation Walker
 */
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

Если у вас еще не зарегистрировано ни одно меню, то это также необходимо сделать в файле functions.php

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Шаг 4

Теперь можно добавить своё меню с помощью нативной WordPress функции wp_nav_menu (чаще всего меню добавляется в шапку сайта, а именно в файле header.php), пример вставки меню:

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

Свойство depth отвечает за уровни вложенности, также можно изменить обертку, id для стилей и само название класса.

Заключение

По началу добавление меню таким образом может показаться довольно сложным, так как сильно отличается от стандартного добавления меню на сайт, но на практике не занимает больше, чем 5-10 минут.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *