web-dev-qa-db-ja.com

1つのwp_nav_menu（）に（css）クラスを追加するにはどうすればいいですか？

編集する

このQは現在1.000ビューをはるかに超えているため、元の質問を削除しました。これは、多くの人にとって重要です。 注：私は元のQにだけ削除しました。

タスク

（管理UI）[表示]> [メニュー]で追加した特定のナビゲーションメニュー内のすべてのナビゲーションメニュー項目にCSSクラスを追加します。

関数

function wpse4388_navmenu_classes( $items, $menu, $args )
{
    // prevent crashing the appearance > menu admin UI
    if ( is_admin() )
        return;

    # >>>> start editing

        // Nav menu name you entered in the admin-UI > Appearance > Menus (Add menu).
        $target['name'] = 'Topnav';

        // A targeted menu item that needs a special class - add the item number here
        $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "filter_nav_menu_{nav menu name}"
    // the nav menu name looses all empty spaces and is set to lower
    // if you want to use the filter, hook your child theme function into 'after_setup_theme'
    $target = apply_filters( 'filter_nav_menu_'.strtolower( str_replace( " ", "", $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Add the class for each menu item
        $item->classes = 'classes for all items';

        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' only for a single item';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse4388_navmenu_classes', 10, 3 );

役に立ちましたか？投票することを忘れないでください！ :)

theme-developmentmenuscss
2
kaiser

私はHorttcoreに似たようなことを言うことから始めましょう。

与えられたメニューに異なるコンテナ要素を単純に提供できない理由はありますか。それは、独自にスタイルを設定するのに十分な固有性を提供する必要があります。

ただし、メニューの位置に基づいてメニュー引数を条件付きにするには、次のようにします。

function my_wp_nav_menu_args( $args = '' ) {
    if( $args['theme_location'] == 'your-specific-location' )
        $args = array_merge( array(
            'container_class' => 'example',
            'menu_class' => 'example2'
        ), $args );
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

上記のコードはwp_nav_menuのコーデックスページで与えられた例に基づいています、そして多くのことをするために容易に拡張することができます。
http://codex.wordpress.org/Function_Reference/wp_nav_menu

それが役立つことを願っています..

3
t31os

私は非常によく似た問題を抱えていました。特定のwp_nav_menu()をターゲットにして、aリンクをクラスに置き換える必要がありました。これがOPに関する私の解決策です。

function theme_add_menuclass( $classes, $args ) {
    if ( $args->theme_location == 'your-menu-location' ) {
        return preg_replace( '/<li /i', '<li class="your-class"', $classes );
    }
    return $classes;
}
add_filter( 'wp_nav_menu_items', 'theme_add_menuclass', 10, 2 );

これを使用して、ナビゲーションメニューの任意の部分を置き換えることができます。お役に立てれば。

1
Timothy Brand

あなたが間違っていたのかもしれませんが、なぜあなたはあなたのテーマにクラスを追加しないのですか？メニューを呼び出すときにクラスを指定してください。

<?php wp_nav_menu( array( 'theme_location' => 'Top Nav', 'menu_class' => 'span-3' ) ); ?>
1
Horttcore

CSSクラスをメニュー項目に追加するには、[外観]> [メニュー]> [画面オプション]（画面の右上）に移動して、を確認します。 CSSクラスがチェックされています。これにより、各メニュー項目にCSSクラスを追加することができます。複数のクラス名の場合は、各項目をスペースで区切ります。

my-class-one my-class-two
0
quratulain qadir