it-swarm.com.de

Kleinere CSS-Änderungen basierend auf dem Topmenü - wie?

Ich möchte kleinere CSS-Änderungen vornehmen, die auf der Auswahl des obersten (Stamm-) Menüs basieren.

Wie gehe ich in WP richtig damit um?

// edit // Es ist eine Website (Seiten), kein Blog, und im Grunde sollten die Farben einiger Links und einiger Bilder von dem gewählten Top-Menüpunkt abhängen.

Beispiel Seitenstruktur:

 * Start 
 * Produkte 
 * Produktkategorie 
 * Ein Produkt 
 * Dienstleistungen 
 * Liste der Dienstleistungen 
 * Verschachtelt 
 * Kontakt 
 * Hauptbüro 
 * Liste der Mitarbeiter 
 * Ausland 
 * Eine weitere Liste 

Die oberste Ebene befindet sich in einem Topmenü, eine Ebene und Ebene 2 und 3 im verschachtelten linken Menü. Je nach ausgewähltem Hauptmenüelement ändern sich nun kleinere farbige Elemente im Seitenmenü.

// Bearbeitung beenden //

grüße,/t

1
user4569

Meine Antwort fügt dem <body> -Element über den body_class-Filter eine Klasse hinzu. Dies ist wahrscheinlich die einfachste Möglichkeit, ein Element auf der Seite zu formatieren. Die hinzugefügten Klassen sind wpse14430_products, wpse14430_services oder wpse14430_contact (basierend auf den Slugs der oberen Seiten in Ihrem Beispiel).

Verwenden von wp_nav_menu()

Wenn Sie wp_nav_menu() verwenden, um das Menü anzuzeigen, erstellt WordPress eine Baumstruktur der Menüelemente. Wir können diese Informationen verwenden, um die oberste Seite des aktuellen Elements abzurufen. Einziges Problem: Wir brauchen es im <body> Tag, also bevor das Menü gerendert wird. Die Lösung besteht darin, das Menü in einer Variablen zu speichern, die wir später selbst wiedergeben.

Am Beispiel des Themas Twenty Ten verschiebe ich den Aufruf von wp_nav_menu() in den ersten Block <?php:

$wpse14430_menu = wp_nav_menu( array(
    'container_class' => 'menu-header',
    'theme_location' => 'primary',
    'echo' => false,
) );

Und wo wir es früher genannt haben, geben wir jetzt unsere gespeicherte Ausgabe wieder:

echo $wpse14430_menu;

wp_nav_menu() hat einen interessanten Filter, der genannt wird, nachdem die Menüelemente bestellt wurden und ihre Klassen haben . Die Klassen enthalten bereits Vorfahreninformationen. Wir schließen uns diesem Filter an und finden das erste Element, das das aktuelle Element oder ein Vorfahr davon ist:

add_filter( 'wp_nav_menu_objects', 'wpse14430_wp_nav_menu_objects' );
function wpse14430_wp_nav_menu_objects( $sorted_menu_items )
{
    // The items are in menu order, so the first match is the top item
    foreach ( $sorted_menu_items as $menu_item ) {
        if ( $menu_item->current || $menu_item->current_item_ancestor ) {
            $GLOBALS['wpse14430_top_page'] = get_post( $menu_item->object_id );
            break;
        }
    }
    return $sorted_menu_items;
}

Jetzt haben wir die oberste Seite und müssen diese nur noch zur Body-Klasse hinzufügen:

add_filter( 'body_class', 'wpse14430_body_class_menu' );
function wpse14430_body_class_menu( $body_class )
{
    if ( isset( $GLOBALS['wpse14430_top_page'] ) ) {
        $body_class[] = 'wpse14430_' . $GLOBALS['wpse14430_top_page']->post_name;
    }
    return $body_class;
}

Seiten als Menüstruktur verwenden

Wenn Sie wp_nav_menu() nicht verwenden, sondern die direkte Reihenfolge der Seiten verwenden, können Sie auch nach Vorfahren suchen. Denken Sie daran, dass das obige System für Sie funktioniert, wenn Sie mit dem neuen Menüsystem kein Menü definieren und dennoch die Seitenliste über wp_nav_menu() (die Fallback-Funktion) anzeigen.

add_filter( 'body_class', 'wpse14430_body_class_pages' );
function wpse14430_body_class_pages( $body_class )
{
    if ( is_page() ) {
        $null = null;
        $top_page = get_post( $null );
        $ancestors = get_post_ancestors( $top_page );
        if ( $ancestors ) {
            $top_page = get_post( array_pop( $ancestors ) );
        }
        $body_class[] = 'wpse14430_' . $top_page->post_name;
    }
    return $body_class;
}
7
Jan Fabry

Wenn Sie das Menü mit wp_list_pages/categories oder dem eingebauten Menu Builder ausgeben, erhält jeder Seiten- oder Kategorielink eine Klasse, die Sie formatieren können. Dies bedeutet, dass die aktuelle Seite oder Katze, auf der sich ein Benutzer befindet, eine Klasse hat, die Sie so formatieren können, dass sie "aktiv" aussieht.

Übergeordnete Seitenlinks werden angezeigt:

current_page_item oder current-menu-item (wenn die oberste Ebene aktiv ist) current_page_ancestor oder current-menu-ancestor (wenn das erste Kind aktiv ist)

Kategorien-Links werden angezeigt:

aktuelle Katze (wenn die oberste Ebene aktiv ist) Aktuelle Katze - Eltern (wenn das erste Kind aktiv ist)

Es gibt andere Klassen, die WP je nach Tiefe automatisch in das Li-Tag von Menüelementen einfügen.

Ich gehe davon aus, dass Sie genau das wollten, und hoffe, dass es Ihnen hilft.

0
Mark