Active en hover states zijn essentieel voor navigatie onderdelen. Voor het mouseover effect kunnen we de :hover pseudo class gebruiken en een active state definiëren we over het algemeen door middel van een zelfgekozen class.
WordPress voegt standaard een class toe aan een active menu item zoals current_page_item, current_page_parent, current_page_ancestor of current-menu-item. Bij het gebruik van custom post types gebeurt dit nog niet zoals je dat zou verwachten.
Met behulp van de nav_menu_css_class filter, kunnen we dit probleem gelukkig eenvoudig oplossen. Doormiddel van onderstaande functie kunnen we zelf bepalen bij welke post-type welk menu item actief moet zijn:
function nav_menu_fix_custom_post_type( $classes ) {
if ( get_post_type() == 'project' ) {
if ( in_array( 'menu-item-4', $classes ) ) $classes[] = 'current_page_parent';
}
if ( get_post_type() == 'event' ) {
if ( in_array( 'menu-item-11', $classes ) ) $classes[] = 'current_page_parent';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'nav_menu_fix_custom_post_type' );
Ik verwacht overigens dat dit probleem in één van de volgende WordPress updates opgelost zal zijn. Laat het voor nu echter geen excuus zijn om geen active states te gebruiken. Ik kom het nu nog te vaak tegen.
4 reacties
Bij sommige simpele websites vind ik het juist altijd irritant als er zoveel classes worden toegevoegd. Vervuiling van de broncode. :)
Hoe je het wend of keert, je hebt die classes toch echt nodig om een active state te stijlen.
De extra classes zoals menu-item, menu-item-type-post, menu-item-object-category etc. zijn wellicht wel wat te veel van het goede. Ook al bieden ze je wel veel vrijheid en kunnen in bepaalde gevallen erg handig zijn.
Ik vind overigens class namen als left-float, right-block etc. broncode vervuiling ;) Niet bepaald ‘semantisch’…
Hoe je het wend of keert, je hebt die classes toch echt nodig om een active state te stijlen.
De extra classes zoals menu-item, menu-item-type-post, menu-item-object-category etc. zijn wellicht wel wat te veel van het goede. Ook al bieden ze je wel veel vrijheid en kunnen in bepaalde gevallen erg handig zijn.
Ik vind overigens class namen als left-float, right-block etc. broncode vervuiling ;) Niet bepaald ‘semantisch’…
Je hebt natuurlijk wel inderdaad een aantal basis classes nodig om iets te kunnen stylen. Maar zoals je inderdaad al aangeeft heb je ze met een basis menu niet persé allemaal nodig.
PS: misschien een goede tip om bij het reactieformulier een checkbox erbij te zetten waar ik me kan abonneren. Nu zag ik toevallig je antwoord. :)
‘subscribe to comments reloaded’ vind ik fijn werken.