1NT3RN3T

Professionelle amatørhjemmesider

Søg

Daily Archives: 22. februar 2012

Tilpas menuer i WordPress med wp_nav_menu

Menusystemet på Herlev Gymnasium og HFs hjemmeside var tidligere et plugin, jeg havde skrevet før WordPress kom med deres menusystem i form af wp_nav_menu. Jeg tænkte at det var på tide at skifte til WordPress’ eget system fordi det både er hurtigere og langt nemmere at tilpasse end mit eget.

Mit eget menusystem havde dog en masse finetunet tilpasning, som ikke umiddelbart var nemt at få med over i menusystemet i WordPress. Fx skulle alle indlæg fremstå i menuen som om den aktive side er Nyheder og alle billedgallerier (som åbner på deres egen side), skulle se ud som om siden Billedgalleri var den aktive side.

Løsningen blev at jeg tilføjede denne kode til min functions.php fil i temaet.

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
global $post;

//Sørger for at alle billedgallerier har Billedgalleriet som aktiv side i menuen
if( $post->post_parent == "2" && ($item->object_id == "2" || $item->title == "Skolens liv") ){
array_push($classes, 'current-menu-item');
}

//Sørger for at alle nyhederne har Nyheder som aktiv side i menuen
if( $post->post_type == "post" && ($item->object_id == "151" || $item->title == "Skolens liv") ){
array_push($classes, 'current-menu-item');
}

//Sørger for at alle de øverste menupunkter får class top
if($item->post_parent == "0"){
array_push($classes, 'top');
}

//Sørger for at markere det øverste menu-valg
if(get_the_title($post->post_parent) == $item->title){
array_push($classes, 'current-menu-item');
}

return $classes;

}

Filter bliver gennemløbet for alle menupunkter i menuen. Så er det bare at tjekke egenskaberne for den side som brugeren er på (ved hjælp at $post) og holde det op mod menupunktets egenskaber (ved hjælp af $item). En meget elegant løsning, når jeg selv skal sige det :)

Menupunkter med forskellige farver

Herlev Gymnasium og HFs hjemmeside gav jeg CSS koden en overhaling. I den forbindelse slog det mig, at CSS koden til menuen i toppen ikke var lavet helt hensigtsmæssigt.

Problemet var, at de fem forskellige farver var knyttet til hver af de fem menupunkters id – men i virkeligheden skulle de være knyttet til menupunktets placering. Hvis jeg byttede om på rækkefølgen, så Undervisning kom før Information, så skulle Undervisning og Information også bytte farve.

Løsningen blev at knytte det til placeringen ved hjælp af CSS3 koden nth-child(X), hvor X angiver hvilket nummer i rækkefølgen der er tale om. Dermed kom CSS koden til at se ud nogenlunde som den nedenstående:

#dropline li:nth-child(1) a {background-color:rgb(92,46,144);width:111px;}
#dropline li:nth-child(2) a {background-color:rgb(127,181,57);width:119px;}
#dropline li:nth-child(3) a {background-color: rgb(228,149,26);width:98px;}
#dropline li:nth-child(4) a {background-color: rgb(9,109,184);width:137px;}
#dropline li:nth-child(5) a {background-color: rgb(27,27,27);width:78px;}

Eneste problem der nu var tilbage, var at menuen ikke længere havde farver i IE7 og IE8… :(

Det kunne Lisa fra CCS-Snippets heldigvis klare! Hun forklarer hvordan man med li+li kan give menupunkter forskellige farver i ældre browsere. Dermed kom den nye kode til at se således ud:

#dropline li a {background-color:rgb(92,46,144);width:111px;}
#dropline li+li a {background-color:rgb(127,181,57);width:119px;}
#dropline li+li+li a {background-color: rgb(228,149,26);width:98px;}
#dropline li+li+li+li a {background-color: rgb(9,109,184);width:137px;}
#dropline li+li+li+li+li a {background-color: rgb(27,27,27);width:78px;}

Hvis jeg nu finder på at bytte om på nogle menupunkter, så forbliver farverækkefølgen den samme.