Comment ajouter une classe ul sur nav

Question

Comment ajouter une classe ul sur nav

4

41879 2015-06-12

J'ai appris à convertir du HTMLen WordPresset je souhaiteeffectuer une conversionen classe comme ceci:

 <div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="index.html" class="active">Home</a></li>
        <li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="shop.html">Products</a></li>
                <li><a href="product-details.html">Product Details</a></li> 
                <li><a href="checkout.html">Checkout</a></li> 
                <li><a href="cart.html">Cart</a></li> 
                <li><a href="login.html">Login</a></li> 
            </ul>
        </li> 
        <li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="blog.html">Blog List</a></li>
                <li><a href="blog-single.html">Blog Single</a></li>
            </ul>
        </li> 
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Contact</a></li>
    </ul>
</div>

Voici ce quej'aifait:

 if ( ! function_exists( 'mytheme_setup' ) ) :
    function wpflex_setup() {  
        register_nav_menus( array(
            'primary' => 'Primary Menu'
        ) );
    }
endif;

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

Comment ajouter une classepour ul?

I've been learning to convert HTML to WordPress and want to convert on to class like this:

<div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="index.html" class="active">Home</a></li>
        <li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="shop.html">Products</a></li>
                <li><a href="product-details.html">Product Details</a></li> 
                <li><a href="checkout.html">Checkout</a></li> 
                <li><a href="cart.html">Cart</a></li> 
                <li><a href="login.html">Login</a></li> 
            </ul>
        </li> 
        <li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="blog.html">Blog List</a></li>
                <li><a href="blog-single.html">Blog Single</a></li>
            </ul>
        </li> 
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Contact</a></li>
    </ul>
</div>

This what I've done:

if ( ! function_exists( 'mytheme_setup' ) ) :
    function wpflex_setup() {  
        register_nav_menus( array(
            'primary' => 'Primary Menu'
        ) );
    }
endif;

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

How to add class for ul?

5 réponses

votes

ChrisL · Answer 1 · 2015-06-12

4

2015-06-12

Vous l'avez déjàfait de labonnemanière.Si vous regardez dans la documentation de wp_nav_menu ,vous verrez quemenu_classestlabonne optionpour la classe UL:

 wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => '',
    'menu_class'=> 'mainmenu pull-left *add-your-class-here*'
 ) );

You already did it the right way. If you take a look in the Documentation for wp_nav_menu, you'll see that menu_class is the right option for the UL's class:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => '',
    'menu_class'=> 'mainmenu pull-left *add-your-class-here*'
 ) );

N'oubliezpas 'container'=> 'ul',

Don't forget 'container' => 'ul',
- 4
- 2016-08-30
- Richard Lindhout

Behzad · Answer 2 · 2015-06-12

4

2015-06-12

C'est simple,il vous suffit d'ajouter leparamètre items_wrapet d'ajouter ou demodifier la classe attr:

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

It's simple just you need to add items_wrap parameter and add or edit class attr:

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

J. Shabu · Answer 3 · 2017-04-27

1

2017-04-27

Voici votre codefixe.Je l'aitesté ajouter une classe à ul

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

Here is your fixed code. I have tested it add class to ul

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

Alpesh Navadiya · Answer 4 · 2017-05-29

1

2017-05-29

        <?php 
         wp_nav_menu( array('menu' => 'Main Menu' ,
        'menu_class' => 'nav navbar-nav',
         'container' => ''));
            ?>

       <?php 
         wp_nav_menu( array('menu' => 'Main Menu' ,
        'menu_class' => 'nav navbar-nav',
         'container' => ''));
            ?>

Ted · Answer 5 · 2017-02-25

0

2017-02-25

Wordpress crée lemenu depagepar défaut différent desmenus actifs - ceux que vous créezet attribuez dans lebackend.Iln'existe aucunmoyen direct d'ajouter des classes à l'UL dans lesmenus depage,maisilexiste d'autresmoyens.Essayez d'ajouter ceci à votrefunctions.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' );

Gardez à l'esprit que cela remplaceratous lesidentifiantset classesexistants,doncje les ai rajoutés dans l'exemple ci-dessus.J'ai également ajouté unid="main-menu"pourterminer.

Wordpress creates the default page menu different from the active menus -- those which you create and assign in the backend. There is no direct way to add classes to the UL in page menus, but there are other ways. Try adding this to your 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' );

Keep in mind this will replace any existing id and classes, thus I re-added them in the above example. I also added an id="main-menu" for completion.