@NiYSO

Как задать для «li» и «a» из меню WordPress свои классы?

Я прикручиваю меню с Bootstrap в WordPress. Я задал классы для "ul", но не знаю как задать свои классы для "li" и "a"

<!-- НАВИГАЦИОННОЕ МЕНЮ СТРАНИЦЫ-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-orange">
            <a class="navbar-brand" href="#"><img src="img/nav-brand.png" alt="" class="nav-logo-brand"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar1">
				<?php wp_nav_menu( array(
                    'theme_location'  => '',
                    'menu'            => '',
                    'container'       => 'ul',
                    'container_class' => 'navbar-nav mr-auto',
                    'container_id'    => '',
                    'menu_class'      => 'navbar-nav mr-auto',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'wp_page_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => '<ul id = "%1$s" class = "%2$s">%3$s</ul>',
                    'depth'           => 0,
                    'walker'          => '',
                ) ); ?>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">ГЛАВНАЯ<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">АССОЦИАЦИЯ</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                            <a class="dropdown-item" href="#">О Ассоциации</a>
                            <a class="dropdown-item" href="#">Президент ассоциации</a>
                            <a class="dropdown-item" href="#">Руководящий состав</a>
                            <a class="dropdown-item" href="#">Устав ассоциации</a>
                            <a class="dropdown-item" href="#">Реквизиты</a>
                            <a class="dropdown-item" href="#">Контакты</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Гимн Ассоциации</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">МЕРОПРИЯТИЯ</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ОКРУГА</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                            <a class="dropdown-item" href="#">Центральный ФО</a>
                            <a class="dropdown-item" href="#">Северо-Западный ФО</a>
                            <a class="dropdown-item" href="#">Южный ФО</a>
                            <a class="dropdown-item" href="#">Северо-Кавказский ФО</a>
                            <a class="dropdown-item" href="#">Приволжский ФО</a>
                            <a class="dropdown-item" href="#">Уральский ФО</a>
                            <a class="dropdown-item" href="#">Сибирский ФО</a>
                            <a class="dropdown-item" href="#">Дальневосточний ФО</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">НАУЧНЫЕ ИЗДАНИЯ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ОБРАТНАЯ СВЯЗЬ</a>
                    </li>

                </ul>
            </div>
        </nav>
  • Вопрос задан
  • 233 просмотра
Решения вопроса 3
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Нужно написать свой Walker для меню, подробнее советую посмотреть здесь или здесь.

В целом, статьи исчерпывающие. Там описано, как настроить их полностью + переписать под свои нужды.
Ответ написан
Комментировать
vova87
@vova87
Разработка сайтов на wordpress
Если не использовать Walker, можно добавить классы через jQuery.
Что то вроде такого:
jQuery(document).ready(function($){
$( ".navbar-nav a" ).addClass("nav-link");
});
Ответ написан
Комментировать
@NiYSO Автор вопроса
Почитайте, тут подробно расписано https://madeas.ru/navbar-bootstrap-4-wordpress/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы