Как добавить класс для ul в навигации

Question

Как добавить класс для ul в навигации

12 июн. 2015 г., 16:27:28

Просмотры: 49.8K

Голосов: 5

Я изучаю конвертацию HTML в WordPress и хочу преобразовать класс следующим образом:

<div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="index.html" class="active">Главная</a></li>
        <li class="dropdown"><a href="#">Магазин<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="shop.html">Товары</a></li>
                <li><a href="product-details.html">Детали товара</a></li> 
                <li><a href="checkout.html">Оформление заказа</a></li> 
                <li><a href="cart.html">Корзина</a></li> 
                <li><a href="login.html">Вход</a></li> 
            </ul>
        </li> 
        <li class="dropdown"><a href="#">Блог<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="blog.html">Список блогов</a></li>
                <li><a href="blog-single.html">Отдельный блог</a></li>
            </ul>
        </li> 
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Контакты</a></li>
    </ul>
</div>

Вот что я сделал:

if ( ! function_exists( 'mytheme_setup' ) ) :
    function wpflex_setup() {  
        register_nav_menus( array(
            'primary' => 'Основное меню'
        ) );
    }
endif;

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => '',
    'menu_class'     => 'mainmenu pull-left',
) );

Как добавить класс для тега <ul>?

dkvnk

51

меню темы

Все ответы на вопрос

Комментарии

Не забудьте 'container' => 'ul',

Richard Lindhout

30 авг. 2016 г. 17:12:55

Комментарии

Грязный код, но это был единственный способ заставить его делать то, что мне нужно. Спасибо!

Jimmy Pelton

29 сент. 2021 г. 00:39:54

ChrisL 131 · Answer 1 · 2015-06-12T17:54:46Z

Вы уже сделали всё правильно. Если посмотреть в документации для wp_nav_menu, то видно, что параметр menu_class задаёт класс для элемента UL:

wp_nav_menu( array(
    'theme_location' => 'top-menu', // расположение меню в теме
    'container' => '', // отключаем контейнер
    'menu_class'=> 'mainmenu pull-left *добавьте-свой-класс-здесь*' // класс для ul
 ) );

ChrisL

131

12 июн. 2015 г. 17:54:46

Behzad 466 · Answer 2 · 2015-06-12T20:55:40Z

Это просто - вам нужно добавить параметр items_wrap и добавить или изменить атрибут class:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => false,
    'items_wrap' => '<ul class="nav your_custom_class">%3$s</ul>',
));

Behzad

466

12 июн. 2015 г. 20:55:40

Ted 51 · Answer 3 · 2017-02-25T07:09:10Z

Wordpress создаёт меню страниц по умолчанию, отличное от активных меню — тех, которые вы создаёте и назначаете в админке. Нет прямого способа добавить классы к UL в меню страниц, но есть другие варианты. Попробуйте добавить этот код в ваш файл functions.php:

function add_id_and_classes_to_page_menu( $ulclass ) {
  return preg_replace( '/<ul>/', '<ul id="main-menu" class="nav navbar-nav collapse navbar-collapse">', $ulclass, 1 );
}
add_filter( 'wp_page_menu', 'add_id_and_classes_to_page_menu' );

Учтите, что это заменит все существующие id и классы, поэтому в примере выше я их добавил заново. Также я добавил id="main-menu" для полноты.

J. Shabu 167 · Answer 4 · 2017-04-27T20:59:28Z

Вот ваш исправленный код. Я протестировал его, добавил класс к элементу ul

wp_nav_menu( array( 
    'theme_location' => 'top-menu',
    'container'      => 'ul',
    'menu_class'     => 'mainmenu pull-left',
) );

J. Shabu

167

27 апр. 2017 г. 20:59:28

Alpesh Navadiya 11 · Answer 5 · 2017-05-29T10:38:05Z

       <?php 
         wp_nav_menu( array('menu' => 'Главное меню' ,
        'menu_class' => 'nav navbar-nav',
         'container' => ''));
            ?>

Alpesh Navadiya

11

29 мая 2017 г. 10:38:05