it-swarm.com.de

Wie füge ich (css) Klassen nur einem wp_nav_menu () hinzu?

Bearbeiten

Ich habe die ursprüngliche Frage entfernt, da dieser Q jetzt weit über 1.000 Aufrufe hat - was bedeutet, dass es für viele Menschen wichtig ist -, Ihnen etwas zu zeigen, das a) ohne einen benutzerdefinierten Walker & b) funktioniert, ist einfach. Hinweis: Ich habe nur zum ursprünglichen Q entfernt, weil es ziemlich unspektakulär war.

Die Aufgabe

Hinzufügen von CSS-Klassen zu allen Elementen des Navigationsmenüs in einem bestimmten Navigationsmenü, das über (Administrator-Benutzeroberfläche) Darstellung> Menü hinzugefügt wurde.

Die Funktion

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

War es hilfreich Vergiss nicht abzustimmen! :)

2
kaiser

Ich werde anfangen, indem ich etwas Ähnliches wie Horttcore sage.

Gibt es einen Grund, warum Sie nicht einfach ein anderes Containerelement für das angegebene Menü bereitstellen können, sollte es ausreichend spezifisch sein, um es eindeutig zu gestalten.

Sie können jedoch so etwas tun, um Menüargumente basierend auf der Position des Menüs zu konditionieren.

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

Der obige Code basiert auf dem Beispiel, das auf der Codex-Seite für wp_nav_menu angegeben ist, und kann leicht erweitert werden, um eine beliebige Anzahl von Dingen auszuführen.
http://codex.wordpress.org/Function_Reference/wp_nav_menu

Hoffentlich hilft das..

3
t31os

Ich hatte ein sehr ähnliches Problem. Ich musste auf eine bestimmte wp_nav_menu() zielen und die a-Links durch eine Klasse ersetzen. Hier ist meine Lösung in Bezug auf das 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 );

Sie können dies verwenden, um ein beliebiges Teil in Ihren Navigationsmenüs zu ersetzen. Hoffe das hilft.

1
Timothy Brand

Vielleicht habe ich mich geirrt, aber warum fügst du die Klasse nicht in dein Thema ein? Geben Sie die Klasse an, wenn Sie das Menü aufrufen.

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

Um eine CSS-Klasse zu einem Menüelement hinzuzufügen, gehen Sie zu Darstellung> Menü> Bildschirmoptionen (oben rechts auf dem Bildschirm) und stellen Sie sicher, dassCSS-Klassenaktiviert ist. Auf diese Weise können Sie jedem Menüelement CSS-Klassen hinzufügen. Trennen Sie bei mehreren Klassennamen die einzelnen Elemente durch ein Leerzeichen, z.

my-class-one my-class-two
0