Voeg een aangepaste klasse toe in WordPress Menu-item met behulp van voorwaardelijke verklaringen

In de meeste gevallen kunt u bij het stijlen van WordPress-navigatiemenu's eenvoudig CSS-klassen toevoegen vanuit het WordPress-beheerderspaneel. Onlangs tijdens het werken aan een project, bevonden we ons in een lastige situatie. We wilden alleen een aangepaste klasse toevoegen aan een specifiek menu-item op enkele berichtpagina's. Na een tijdje rondkijken, konden we geen oplossing vinden. Ons laatste redmiddel was om te vragen op Twitter. Otto (@ Otto42) antwoordde door te zeggen dat het mogelijk is door filters te gebruiken, maar er zijn geen documentatie voor het filter.

Nadat we een tijdje in de kern hadden gekeken, kwamen we tot de oplossing. Wat je moet doen is de volgende code in je functions.php-bestand plakken:

 // Een klasse filteren in het navigatiemenu Item add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2); functie special_nav_class ($ classes, $ item) if (is_single () && $ item-> title == 'Blog') $ classes [] = 'current-menu-item';  retourneer $ klassen;  

De bovenstaande code controleert eenvoudig of het een enkele berichtpagina is en de titel van het menu-item Blog. Als de criteria overeenkomen, dan is het een klasse toevoegen "Huidige-menu-item". We moesten een aangepaste klasse toevoegen om deze te laten werken met dit ontwerp waaraan we werken.

Als je dat nog niet kunt zeggen, was wat we eigenlijk wilden doen het blog-item gemarkeerd in het menu houden wanneer de gebruiker één post had. Hierdoor konden ze zien dat de afzonderlijke berichten deel uitmaken van het blog. Dit is normaal gesproken niet logisch, maar in het ontwerp waar we aan werken, was het wel logisch.

Als u wanhopig op zoek was naar deze code, hopen we dat dit artikel heeft geholpen. U kunt ook andere $ -artikelvariabelen controleren. Enkele voorbeelden zijn: $ item-> ID, $ item-> title, $ item-> xfn

Snel bewerken: nadat dit artikel op Twitter was geplaatst, wees een van onze gebruikers @dbrabyn erop dat we dit eenvoudig hadden kunnen bereiken met CSS Body-klassen. Bijvoorbeeld:

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

In principe is wat we deden een extra div toegevoegd om een ​​pijlpictogram in ons menu weer te geven. Deze pijl wordt alleen weergegeven als de klasse is overgeheveld of geselecteerd. Anders was het ingesteld om weer te geven: geen; Door de body class te gebruiken, hebben we het div-element zojuist alleen voor de specifieke menuklasse weergegeven.