WP-Tipp: Menü-Highlighting bei Custom Post Types
Hallo liebe Leser,
mein Name ist Christopher Schick und ich bin als Web-Entwickler bei neosmart tätig. Meine Schwerpunktgebiete sind PHP- und WordPress-Entwicklung. In den letzten Jahren ist WordPress zu einem großartigen Blog/CMS herangewachsen und wir setzen es sehr gern für die unterschiedlichsten Projekte ein.
Obwohl WordPress von Version zu Version besser wird, muss man als Entwickler schon ab und zu in die Trickkiste greifen um bestimmte Aufgaben zu lösen. Einige dieser WP-Tipps und Tricks werde ich euch ab sofort im Blog zum Besten geben.
Mein erster Post behandelt eines der Probleme die man hat, wenn man mit Custom Post Types (CPT) arbeitet und diese auf seiner Seite ausgeben möchte. Die Seite auf der man seine CPT ausgibt, wird noch von der WordPress CSS richtig als current_page_parent angezeigt. Doch was passiert wenn wir uns einen unserer CPT genauer betrachten. Genau, aus unerklärlichen Gründen wird in der Single-Ansicht eines unserer Posts der Blog markiert, was natürlich sehr unschön und verwirrend ist. Mit folgendem Code-Snippet kann man dieses Problem lösen:
function neo_change_current_page_parent($menu){
global $post;
if (get_post_type($post) == 'you-custom-post-type'){
// Löscht alle current_page_parent Klassen
$menu = str_replace('current_page_parent', '', $menu);
// Gibt die Klasse der Seite die Ihr haben möchtet
$menu = str_replace('menu-item-1662', 'menu-item-1662 current_page_parent', $menu);
}
return $menu;
}
add_filter('wp_nav_menu', 'neo_change_current_page_parent', 0);
Unser Code-Snippet beginnt mit einer Abfrage ob es sich bei dem Post den wir uns gereade betrachten um einen Custom Post Type handelt. Wenn dem so ist, löscht er aus unserer Navigation alle “current_page_parent” CSS Klassen und fügt sie dem Menüpunkt unserer Wahl hinzu (wie hier in dem Beispiel dem menu-item-1662).
Alles was ihr nun machen müsst, ist dieses Codesnippet in eure functions.php von eurem Theme kopieren und die Daten anpassen.
Für die erste Navigationsebene muss es anstelle von “current_page_parent” -> “current_page_item” heißen.
Hallo Christopher,
danke für deine schnelle Antwort. Nun bin ich nicht gerade ein PHP-Könner (eher nur Manipulator
). Wenn ich an der Stelle:
// Gibt die Klasse der Seite die Ihr haben möchtet
$menu = str_replace(‘menu-item-1662′, ‘menu-item-1662 current_page_parent’, $menu);
}
menu-item-1662 gegen nur menu-item austausche, welches ja in der Standardklasse vorhanden ist, wird doch in jedem Menüpunkt current_page_item gesetzt. Somit werden bei Aufruf von you-custom-post-type alle Menüpunkte als aktiv gekennzeichnet, bei entsprechender CSS-Zuweisung.
Kannst du mir evtl. ein kurzes Beispiel geben, wie ich eine eindeutige Zuordnung von current_page_Item erlange?
Gruß
Sebastian
Hallo,
super Snippet. Genau was ich gesucht habe. Nur bei mir wird statt die Klasse menu-item-1662 current_page_parent eine Id mit menu-item-1662 current_page_parent erzeugt.
Hast du eine Idee, woran das liegt?
Gruß
Sebastian
Hallo Sebastian,
das liegt daran das WordPress eine Klasse sowie eine gleichnahmige ID für das Menü verwendet. Durch die str_replace Methodik, wird nur der erste gleiche gefundene String verändert, in dem Fall wird nur die ID gefunden und ersetzt, da WordPress die ID im Markup voraus schiebt.
Du hast jedoch die Möglichkeit, die Funktion abzuänddern mit einer eindeutigeren Stringsuche, z.B. ‘menu-item’ das in der HTML ID nicht vorkommt.
Gruß,
Christopher
Herzlichen Dank für diesen Tipp.
Roman