web-dev-qa-db-ja.com

Navにulクラスを追加する方法

私はHTMLをWordPressに変換することを学び、次のようにクラスに変換したいと思います。

<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>

これは私がやったこと：

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',
) );

ulのクラスを追加する方法？

menusthemes
3
dkvnk

あなたはすでに正しいやり方をしました。 wp_nav_menu のドキュメントを見れば、menu_classがULのクラスにとって正しいオプションであることがわかります。

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

items_wrapパラメータを追加し、クラスattrを追加または編集する必要があるだけです。

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => false,
    'items_wrap' => '<ul class="nav your_custom_class">%3$s</ul>',
));
4
Behzad
       <?php 
         wp_nav_menu( array('menu' => 'Main Menu' ,
        'menu_class' => 'nav navbar-nav',
         'container' => ''));
            ?>
1
Alpesh Navadiya

これがあなたの固定コードです。私はそれがulにクラスを追加することをテストしました

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

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"も追加しました。

0
Ted