Nu da vi ved, hvordan man opretter et grundlæggende WordPress-tema fra bunden, skal vi se på, hvordan man opretter en brugerdefineret navigationsmenu til vores tema. Denne menu skal have mulighed for at blive styret fra WordPress Dashboardet. Med andre ord skal du være i stand til at gå ind i Dashboardet og tilføje eller fjerne links til alle sider, indlæg eller kategorier, som du kan lide. Ved slutningen af denne tutorial er det præcis, hvad vi vil have. Lad os gå i dybden og se, hvordan vi opnår dette mål.
Åbn header.php
Åbn filen header.php fra det tema, vi har arbejdet med. Vores mål vil være at tilføje en menu, der bor over webstedets hovedindhold, men under webstedets navn og tagline-området. For at gøre dette kan vi tilføje følgende kode nedenfor:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Bemærk, at vi gør brug af en særlig funktion, som WordPress har stillet til rådighed for os, nemlig wp_nav_menu(). Denne funktion tager sig af alt benarbejdet for dig i forbindelse med opbygningen af en brugerdefineret menu. Du behøver ikke selv manuelt at skrive al html’en ud manuelt, så det er ret nyttigt. Nu har vi ikke meget i form af sider endnu, men hvis vi besøger vores testsite, udsender funktionen allerede et link til den eksempelside, der findes på vores installation.
Passing Arguments to the wp_nav_menu() function
Som de fleste funktioner i WordPress, kan du videregive valgfrie argumenter til wp_nav_menu() funktionen. Her vil vi opsætte et array og konfigurere kun én mulighed. Vi bruger et array i tilfælde af, at vi ønsker at videregive flere muligheder i fremtiden. Her er hvordan vi kan tilføje denne bid af kode:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Denne indstilling giver os en måde at navngive visse menuer i vores tema på. Vi ønsker måske at have mere end én menu, og dette er den metode, hvormed du kan skelne mellem flere menuer.
Register Menu Location in functions.php
For at kunne gøre brug af den menu, vi lige har oprettet i vores header.php-fil, fra WordPress-administrationsinstrumentbrættet, skal vi registrere menuens placering i functions.php-filen i temaet. Så hvordan kan vi registrere vores nye menu med WordPress? Det kan vi gøre med funktionen register_nav_menus(), der er indbygget i WordPress. Lad os registrere vores menu på følgende måde:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Konfigurer vores brugerdefinerede menu i WordPress Dashboard
Vores nye menu bør nu være registreret hos WordPress core. WordPress er nu opmærksom på vores menu og dens placering i temaet. Vi kan nu gå ind i dashboardet, oprette en ny menu og administrere placeringen af den. Specifikt ønsker vi at få den til at blive vist der, hvor vi har gjort brug af denne wp_nav_menu() funktion. Vi går til Udseende->Menuer og klikker derefter på ‘opret en ny menu’.
Vi kan navngive denne menu hvad vi vil. Vi vælger bare Hovedmenu for at holde det nemt, og så klikker vi på ‘Opret menu’.
I dette næste trin vil vi linke til alle vores kategorier. Så vi kan vælge Kategorier, Vælg alle, opdatere Visningsplacering til ‘Hovedmenu’, og derefter klikke på ‘Gem menu’. Lad os prøve det af. 
Ved besøg på vores websted kan vi se, at vi nu får et link til hver kategori i den nye menu, vi har oprettet. Det er kun en uordnet liste i øjeblikket, og den er ikke den smukkeste endnu – men den virker!
Hvad er fordelen ved at registrere din brugerdefinerede menu?
Jeg ved det, jeg ved det. Du tænker, at det slet ikke giver mening at gå igennem alt dette bøvl bare for at få et par hyperlinks til nogle kategorier til at blive vist på dit websted. På nogle måder har du ret. Hvorfor ikke bare manuelt bygge nogle af disse ting selv. Selvfølgelig kan det gøres, men når vi bygger vores menu op, som vi gjorde her, har vi nu magten i WordPress Dashboard til at kontrollere den kode, vi har inkluderet i vores tema. Vi kan nu nemt trække og slippe linkbestilling blandt andre ting direkte fra Dashboardet. Lad os ændre rækkefølgen fra WordPress, PHP, JavaScript til JavaScript, WordPress og derefter PHP. Meget nemt!
Nu, når du besøger webstedet, er rækkefølgen af links i menuen opdateret. Det er ikke nødvendigt at rode med den underliggende kode med denne fremgangsmåde.
Stil den brugerdefinerede menu
Den uordnede liste er bare ikke nok! Vi er nødt til at gøre tingene lidt mere smarte end det. Lad os bruge lidt tid på at anvende noget brugerdefineret CSS for at rense den menu lidt op. Først og fremmest vil vi forvandle den lodret orienterede uordnede liste til en vandret orienteret menu. Vi vil også gerne fjerne punktopstillingerne for hvert listeelement, tilføje noget padding og margin samt fjerne understregningen for links. Her er et forsøg på at skabe denne effekt i vores style.css-fil.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Der sker lidt af en masse i ovenstående CSS. Lad os gå det igennem. I den første .navigation-menu ul-selektor fjerner vi al padding og margin fra den uordnede liste. Dernæst sørger vi for, at den uordnede liste rydder floats for listeelementets børn. I .navigation-menu ul li-selektoren fjerner vi bullets fra listen, flyder listens elementer til venstre og tilføjer en lille margin til højre. Til sidst målretter vi linksene. Først forvandler vi dem til blokniveauelementer med en padding på 12px lodret og 17px vandret. Vi tilføjer en flot border-effekt og fjerner understregningen på linksene. Lad os tjekke det ud i browseren nu.
Nice! Den menu ser meget bedre ud, end den gjorde i starten.
Sådan tilføjer du en brugerdefineret farve ved hover til menuen
Den grundlæggende styling ins på plads. Det kunne være rart at have lidt hover-effekt, når man bevæger musen over de enkelte links. Dette er meget nemt at konfigurere ved hjælp af følgende uddrag:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Det ser ret godt ud!
Sådan målretter du den aktive tilstand for et menupunkt
En anden ting, som vi måske gerne vil tilføje, er muligheden for at tilpasse farven på et aktivt link. Dette er anderledes end den simple hover-effekt. I dette tilfælde, når vi besøger et bestemt link fra menuen, ønsker vi, at WordPress skal være opmærksom på, at dette nu er den aktive side, der vises, og at opdatere den visuelle repræsentation, så den afspejler det aktive link. For at gøre dette kan vi gøre brug af en særlig klasse, der er indbygget i WordPress for at løse netop dette problem. Dette er klassen current-menu-item. Her er, hvordan vi kan indarbejde den i vores brugerdefinerede menu.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Hvis vi besøger vores websted nu og afprøver at besøge de forskellige links i den brugerdefinerede menu, kan vi se, at det ser meget flot ud. Vi har nu et særligt udseende for hover-tilstanden og et andet udseende for den aktive tilstand for linksene i vores menu. Dette er en god måde at sikre, at de besøgende på dit websted ved, hvor de i øjeblikket befinder sig, ved at holde den aktive menu oplyst så at sige.
Sådan opretter du en brugerdefineret menu i WordPress Resumé
I denne tutorial har vi haft et godt kig på, hvordan vi tilføjer en brugerdefineret menu til vores brugerdefinerede tema i WordPress. Vi gjorde brug af et par WordPress-funktioner for at hjælpe os videre. Den første, som vi gjorde brug af, var wp_nav_menu(). Denne funktion kan automatisk opbygge en uordnet liste og børneelementer for at skabe strukturen for en flot menu, som du kan anvende styling på. Der er mange argumenter, som du kan sende til denne funktion, men vi har kun fokuseret på det grundlæggende her. Den næste funktion vi gjorde brug af var funktionen register_nav_menus(). Denne funktion gør det muligt for os at fortælle WordPress om vores nye menu og at koble os på den i WordPress Dashboardet. Da vores nye menu først var registreret hos WordPress, fandt vi ud af, at det var nemt at tilføje eller fjerne hvad vi vil fra denne menu, direkte fra WordPress-dashboardet og uden at skulle redigere nogen kode i vores temafiler. Endelig tog vi os lidt tid til at forbedre udseendet af vores menu ved at bruge noget brugerdefineret CSS-styling.