Fügen Sie eine benutzerdefinierte Klasse in WordPress-Menüelement mit Bedingungsanweisungen hinzu

In den meisten Fällen können Sie beim Gestalten von WordPress-Navigationsmenüs einfach CSS-Klassen aus dem WordPress-Verwaltungsbereich hinzufügen. Vor kurzem, als wir an einem Projekt arbeiteten, befanden wir uns in einer schwierigen Situation. Wir wollten nur auf einzelnen Postseiten eine benutzerdefinierte Klasse zu einem bestimmten Menüelement hinzufügen. Nachdem wir uns eine Weile umgesehen hatten, konnten wir keine Lösung finden. Unser letzter Ausweg war auf Twitter zu fragen. Otto (@ Otto42) antwortete, dass es möglich sei, Filter zu verwenden, aber es gibt keine Dokumentation für den Filter.

Nachdem wir uns eine Weile im Kern umgesehen hatten, haben wir die Lösung gefunden. Was Sie tun müssen, ist den folgenden Code in Ihre Datei "functions.php" einzufügen:

 // Eine Klasse im Navigationsmenüelement filtern add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); Funktion special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'aktuelles Menüelement';  $ -Klassen zurückgeben;  

Der obige Code prüft einfach, ob es sich um eine einzelne Beitragsseite handelt, und der Titel des Menüelements lautet Blog. Wenn das Kriterium erfüllt ist, wird eine Klasse mit dem Namen "Aktuelles Menü" hinzugefügt. Wir mussten eine benutzerdefinierte Klasse hinzufügen, damit sie mit diesem Entwurf funktioniert, an dem wir arbeiten.

Wenn Sie es noch nicht sagen können, sollten Sie den Blog-Eintrag im Menü hervorheben, wenn sich der Benutzer in einem einzigen Beitrag befand. So konnten sie sehen, dass die einzelnen Beiträge Teil des Blogs sind. Das macht normalerweise keinen Sinn, aber in dem Design, an dem wir arbeiten, hat es Sinn gemacht.

Wenn Sie verzweifelt nach diesem Code gesucht haben, hoffen wir, dass dieser Artikel geholfen hat. Sie können auch nach anderen $ item-Variablen suchen. Einige Beispiele sind: $ item-> ID, $ item-> title, $ item-> xfn

Schnelle Bearbeitung: Nachdem dieser Artikel auf Twitter veröffentlicht wurde, wies ein Benutzer @dbrabyn darauf hin, dass wir dies mit CSS-Body-Klassen problemlos hätten erreichen können. Zum Beispiel:

.single #navigation .leftmenublog div display: inline-block! important;

Im Grunde haben wir ein zusätzliches div hinzugefügt, um ein Pfeilsymbol in unserem Menü anzuzeigen. Dieser Pfeil wird nur angezeigt, wenn die Klasse entweder über dem Mauszeiger bewegt oder ausgewählt wurde. Andernfalls wurde Folgendes festgelegt: none; Durch die Verwendung der Body-Klasse haben wir das div-Element nur für die bestimmte Menüklasse angezeigt.