Wie fügt man body_class () aktuelle, übergeordnete und übergeordnete Menüelement-IDs hinzu?

(wurde gerade empfohlen, dies hier vom Stack-Überlauf zu posten …)

Ich beginne gerade mit WordPress (Überspringen von Joomla) – mit ein bisschen Schwierigkeit, angefangen zu haben.

Eine Sache, die ich versuche, ist ein benutzerdefiniertes Plugin, das es dem Benutzer ermöglicht, basierend auf dem aktiven Menüelement benutzerdefinierte Hintergründe zu der Site hinzuzufügen.

Also, was ich versuche, ist die aktive Menü-ID (wie ‘menu-item-xx’, die zu den Nav-li’s hinzugefügt wird) und die aktive Eltern-Menü-ID, so dass ich diese zu den body-classn hinzufügen kann.

Ist das etwas, was ich von allem bekommen kann, was in WordPress eingebaut ist, oder ist das etwas, für das ich eine Gewohnheit machen muss?

Alle Hinweise sehr willkommen …

AKTUALISIEREN

Ich habe das jetzt mit einer benutzerdefinierten function getriggers, die Sie unten finden können

Solutions Collecting From Web of "Wie fügt man body_class () aktuelle, übergeordnete und übergeordnete Menüelement-IDs hinzu?"

Aus meinem Kommentar früher: Benutze die body_class() -function in deiner header.php Datei oder wo auch immer dein Body-Tag ist, zB > > . Dadurch erhalten Sie eine Ausgabe mit einer Reihe von classn für den Körper, die Sie dann in Ihrem CSS verwenden können. Beispiel: . Sie können auch den body_class Filter verwenden, um weitere classn hinzuzufügen. Wenn Sie zum Beispiel den Slug hinzufügen möchten, würden Sie global $post und dann $post->post_name .

Ich habe versucht, die Seite slug zu bekommen, aber es scheint in wp_head leer zu sein, aber Sie können die Seiten-ID bekommen und sie wie folgt der Body-class zuweisen:

 add_action('wp_head', 'bodyclassReplacer'); function bodyclassReplacer() { global $wp_query; $thePostID = $wp_query->post->ID; echo str_replace('', '', ''); } 

.
Nachdem Sie eine class bekommen haben, können Sie einen Hintergrund mit CSS wie folgt zuweisen:

 body.page6 { background:url("images/background6.png") no-repeat; } 

.
ps. es hat Spaß gemacht, die Lösung zu finden 🙂 – hoffe das hilft,
Prost, Sagive

. Wie für Dynamic Menu Highlighting – hier ist ein Code, der das tun würde:

 add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 ); function additional_active_item_classes($classes = array(), $menu_item = false){ if(in_array('current-menu-item', $menu_item->classes)){ $classes[] = 'active'; } return $classes; } 

Ok, ich habe mir eine function ausgedacht, um das zu erreichen. Ich bin am Anfang meiner Reise mit WordPress, daher bin ich mir nicht sicher über die Qualität oder Effizienz dieses Codes. Aber hier ist es: –

 function get_active_menu_item_ids( $classes ) { //set up defaults for menu retrieval $dosmenudefaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '
    %3$s
', 'depth' => 0, 'walker' => '', 'theme_location' => '' ); $dosargs = wp_parse_args( $dosargs, $dosmenudefaults ); $dosargs = apply_filters( 'wp_nav_menu_args', $dosargs ); $dosargs = (object) $dosargs; // Get the nav menu based on the requested menu $dosmenu = wp_get_nav_menu_object( $dosargs->menu ); // Get the nav menu based on the theme_location if ( ! $dosmenu && $dosargs->theme_location && ( $doslocations = get_nav_menu_locations() ) && isset( $doslocations[ $dosargs->theme_location ] ) ) $dosmenu = wp_get_nav_menu_object( $doslocations[ $dosargs->theme_location ] ); // Get the first menu that has items if we still can't find a menu if ( ! $dosmenu && !$dosargs->theme_location ) { $dosmenus = wp_get_nav_menus(); foreach ( $dosmenus as $dosmenu_maybe ) { if ( $dosmenu_items = wp_get_nav_menu_items($dosmenu_maybe->term_id) ) { $dosmenu = $dosmenu_maybe; break; } } } // If the menu exists, get its items. if ( $dosmenu && ! is_wp_error($dosmenu) && !isset($dosmenu_items) ) $dosmenu_items = wp_get_nav_menu_items( $dosmenu->term_id ); $dosmenu = $dosmenu_items; // Get the $menu_item variables _wp_menu_item_classes_by_context( $dosmenu ); //create empty parents array $dosparents = array(); //Iterate through the menu items and get the active item and its parent items foreach ($dosmenu as $dosmenuitem) { if ($dosmenuitem->current == '1') { $dosactivemenuids['current']= $dosmenuitem->ID; } if (($dosmenuitem->current_item_parent == '1')||($dosmenuitem->current_item_ancestor == '1')) { $dosparents[$dosmenuitem->menu_order] = $dosmenuitem->ID; } if(is_array($dosparents)) { krsort($dosparents); foreach ($dosparents as $key =>$value) { $dosactivemenuids['parents'][$key]= $value; } } } //return $dosactivemenuids; if (is_array($dosactivemenuids['parents'])) { foreach ( $dosactivemenuids['parents'] as $key=>$value) { $classes[] = 'menu-item-'.$value; } } if ($dosactivemenuids['current'] != '') { $classes[] = 'menu-item-'.$dosactivemenuids['current']; } return $classes; }

Sie fügen das zu Ihren Templates ‘functions.php’ hinzu und fügen auch irgendwo nach der function einen Filter hinzu, um es aufzurufen: –

 add_filter( 'body_class', 'get_active_menu_item_ids'); 

Was das tut?

Dadurch werden die aktiven Menü-IDs abgerufen und den übergeordneten classn in aufsteigender Reihenfolge hinzugefügt

Warum sollte ich das brauchen?

Ausgehend von einem CMS-Hintergrund bin ich daran gewöhnt, dass Seiten durch das Menü definiert werden. Mit dieser function wird die aktive Menüelement-ID und / oder die übergeordnete Element-ID zu den Body-classn hinzugefügt, sodass Sie seitenweise Stile basierend auf dem aktiven Menüelement hinzufügen können. Zum Beispiel können Sie eine Menüstruktur wie folgt haben:

-> Menü-Punkt-1

-> Menü-Punkt-2

-> -> Menü-Punkt-3

Verwenden dieser function Wenn Sie die Seite ‘menu-item-3’ anzeigen, werden die classn ‘menu-item-2’ und ‘menu-item-3’ dem Body-Tag in dieser Reihenfolge hinzugefügt. Das bedeutet, dass Sie eine css-Regel haben können, die auf body.menu-item-3 abzielt und in body.menu-item-2 auf die Regel für übergeordnete Elemente und schließlich auf body zurückgreift, wenn für beide keine Stile vorhanden sind. Ich benutze dies zum Beispiel, um eine Standard-Hintergrundfarbe für die ganze Seite (Körper) eine Hintergrundfarbe für die ganze Seite zu haben, wenn Menü-Element-2 aktiv ist (body.menu-item-2) und a unterschiedliche Hintergrundfarbe für die Seite, wenn Menü-Punkt-3 aktiv ist (body.menu-item-3).

Hoffe das hilft jemandem;)

Ok, mein letzter Schuss war vor einer Weile, und ich war ein bisschen wie ein Neuling – ich sehe mir das jetzt an und es ist peinlich! Ich habe WordPress dann wirklich nicht bekommen!

Das ist was du brauchst …

 function ics_get_active_menu_item_ids(){ $menus = wp_get_nav_menus(); $menu_menu_items = array(); $current_menu_items = array(); $current_menu_items['parents'] = array(); $current_menu_items['ancestors'] = array(); foreach($menus as $menu) { $menu_menu_items[] = wp_get_nav_menu_items($menu->term_id); } foreach ($menu_menu_items as $menu_items) { foreach($menu_items as $menu_item) { if ($menu_item->current == 1) { $current_menu_items['current'] = $menu_item->ID; } if ($menu_item->current_item_parent == 1) { $current_menu_items['parents'][] = $menu_item->ID; } if ($menu_item->current_item_ancestor == 1) { $current_menu_items['ancestors'][] = $menu_item->ID; } } } $current_menu_items['parents'] = array_values(array_unique($current_menu_items['parents'])); $current_menu_items['ancestors'] = array_values(array_unique($current_menu_items['ancestors'])); return $current_menu_items; } 

gibt die aktuelle Item-ID zusammen mit den Eltern und Vorfahren zurück;)