Как изменить Woocommerce с помощью дочерей темы. Часть 13 – настройка bootstrap меню и регистрация пользователей

Когда мы создаем свою тему, в файле functions.php мы регистрируем одно или несколько меню.

Если коротко, чтобы зарегистрировать меню в functions.php нужно прописать

 // This theme uses wp_nav_menu() in two locations.

        register_nav_menus(

            array(

                'fancy_lab_main_menu'   => 'Fancy Lab Main Menu',

                'fancy_lab_footer_menu' => 'Fancy Lab Footer Menu',

            )

        );

Регистрировать можно сколько угодно меню.

Но, это будет самое простое меню, и чтобы сделать его, например, выпадающим, нужно добавлять новые классы и использовать стили, правя style.css. Но можно немного упростить себе жизнь.

Самый простой способ добавить полноценное выпадающее меню, адаптивное, которое будет красиво выглядеть на разных устройствах – это использовать bootstrap menu.

Подключить bootstrap

Для начала нужно обязательно подключить библиотеку bootstrap в свою тему — https://getbootstrap.com.

Создадим в корне темы папку под названием inc, в которую поместим все файлы bootstrap –

bootstrap.min.css, bootstrap.min.js

Используем пользовательский класс WordPress nav walker для полной реализации стиля навигации Twitter Bootstrap 4.0+ в пользовательской теме с помощью встроенного менеджера меню WordPress.

Для этого зайдем на github

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Скопируем wp-bootstrap-navwalker себе в папку.

Распакуем архив. Из полученных файлов нам понадобится только файл под названием class-wp-bootstrap-navwalker.php

В папку inc добавим файл — class-wp-bootstrap-navwalker.php

Подключение bootstrap и navwalker

В самом верху functions.php пропишем

// Register Custom Navigation Walker

require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php';

/**

* Enqueue scripts and styles.

*/

function our_theme_scripts(){

//Bootstrap javascript and CSS files

wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '//www.lenakso.top/inc/bootstrap.min.js', array( 'jquery' ), '4.3.1', true );

wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '//www.lenakso.top/inc/bootstrap.min.css', array(), '4.3.1', 'all' );

}

add_action( 'wp_enqueue_scripts', 'our_theme_scripts' );

Все подсказки о том, как подключать и использовать navwalker есть на https://github.com/wp-bootstrap/wp-bootstrap-navwalker, нужно немного пролистать вниз.

Спустимся еще немного вниз и найдем запись о том, как использовать navwalker (usage)

Скопируем следующий код

И вставим его в файл 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="Toggle navigation">
        <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>

Внимание!

‘theme_location’ => ‘primary’, — указываем название своего меню, которое зарегистрировали в functions.php

‘depth’ => 2, — показывает уровень вложенности. Ели поставить 1, то субменю не появится.

Добавление стилей

С помощью style.css можно поменять внешний вид меню. Например, сделать так, чтобы подменю появлялось при наведении на пункт меню (по умолчанию подменю появляется только при нажатии).

.main-menu .dropdown:hover>.dropdown-menu,

.main-menu .dropup:hover>.dropdown-menu  {

display: block;

}

Или поменять иконку мобильного меню

.main-menu .navbar-toggler-icon {

background-image: url('img/your-image.svg');

}

Добавление ссылки на страницу учетной записи пользователя

Добавим на страницу ссылку, при нажатии на которую пользователь может залогиниться/зарегистрироваться или выйти из своего кабинета пользователя.

Для начала обязательно разрешить пользователям создание учётной записи на странице «Моя учётная запись» в настройках woocommerce

Затем на странице пропишем следующий код

<?php if( class_exists( 'WooCommerce' ) ): ?>

<div class="acount col-12">

<div class="navbar-expand">

<ul class="navbar-nav float-left">

<?php if( is_user_logged_in() ) : ?>

<li>

<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) ?>" class="nav-link">My Account</a>

</li>

<li>

<a href="<?php echo esc_url( wp_logout_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) ) ?>" class="nav-link">Logout</a>

</li>

<?php else: ?>

<li>

<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) ?>" class="nav-link">Login / Register</a>

</li>

<?php endif; ?>

</ul>

</div>

<div class="cart text-right">

<a href="<?php echo wc_get_cart_url(); ?>"><span class="cart-icon"></span></a>

<span class="items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>

</div>

</div>

<?php endif; ?>

Теперь зайдем на страницу аккаунта. Вот что должно получиться.