Nu när vi vet hur man skapar ett grundläggande WordPress-tema från grunden ska vi titta på hur man skapar en anpassad navigationsmeny till vårt tema. Den här menyn ska ha möjlighet att styras från WordPress Dashboard. Med andra ord ska du kunna gå in i Dashboard och lägga till eller ta bort länkar till alla sidor, inlägg eller kategorier som du vill. I slutet av den här handledningen är det exakt vad vi kommer att ha. Låt oss gräva i och se hur vi uppnår detta mål.
Öppna header.php
Gå vidare och öppna filen header.php från det tema vi har arbetat med. Vårt mål kommer att vara att lägga till en meny som ligger ovanför webbplatsens huvudinnehåll men under webbplatsens namn och tagline-området. För att göra detta kan vi lägga till följande kod nedan:
<!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>Notera att vi använder oss av en särskild funktion som WordPress tillhandahåller wp_nav_menu(). Den här funktionen tar hand om allt benarbete för dig när du bygger en anpassad meny. Du behöver inte manuellt skriva ut all html själv, så detta är ganska hjälpsamt. Nu har vi inte mycket i form av sidor ännu, men om vi besöker vår testwebbplats så ger funktionen redan ut en länk till den exempelsida som finns på vår installation.
Passing Arguments to the wp_nav_menu() function
Likt de flesta funktioner i WordPress kan du skicka valfria argument till funktionen wp_nav_menu(). Här kommer vi att ställa in en array och konfigurera bara ett alternativ. Vi använder en array ifall vi vill passera flera alternativ i framtiden. Så här kan vi lägga till den biten kod:
<!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>Detta alternativ ger oss ett sätt att namnge vissa menyer i vårt tema. Vi kanske vill ha mer än en meny, och det här är metoden för att skilja mellan flera menyer.
Register Menu Location in functions.php
För att kunna använda oss av den meny som vi just har skapat i vår header.php-fil, från WordPress admin dashboard, måste vi registrera menyplatsen i functions.php-filen för temat. Så hur kan vi registrera vår nya meny med WordPress? Vi kan göra detta med funktionen register_nav_menus() som är inbyggd i WordPress. Låt oss registrera vår meny så här:
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Konfigurera vår anpassade meny i WordPress Dashboard
Vår nya meny bör nu vara registrerad hos WordPress core. WordPress är nu medveten om vår meny och dess placering i temat. Vi kan nu gå in i instrumentpanelen, skapa en ny meny och hantera dess placering. Specifikt vill vi få den att visas där vi använde oss av funktionen wp_nav_menu(). Vi går till Appearance->Menus och klickar sedan på ”create a new menu”.
Vi kan döpa den här menyn till vad vi vill. Vi väljer bara Huvudmeny för att hålla det enkelt och klickar sedan på ”Skapa meny”.
I nästa steg kommer vi att länka till alla våra kategorier. Så vi kan välja Categories, Select All, uppdatera Display location till ”Primary Menu” och sedan klicka på ”Save Menu”. Låt oss prova det.
Vid besök på vår webbplats ser vi att vi nu får en länk till varje kategori i den nya menyn som vi har skapat. Det är bara en oordnad lista för tillfället, och den är inte den snyggaste ännu – men den fungerar!
Vad är fördelen med att registrera din anpassade meny?
Jag vet, jag vet. Du tänker att det inte ens är meningsfullt att gå igenom all denna hoopla bara för att få några hyperlänkar till några kategorier att visas på din webbplats. På sätt och vis har du rätt. Varför inte bara bygga några av dessa saker manuellt själv? Visst går det att göra, men när vi bygger upp vår meny som vi gjorde här har vi nu makten över WordPress Dashboard för att kontrollera den kod som vi har inkluderat i vårt tema. Vi kan nu enkelt dra och släppa länkbeställning bland annat direkt från Dashboard. Låt oss ändra ordningsföljden från WordPress, PHP, JavaScript till JavaScript, WordPress och sedan PHP. Mycket enkelt!
Nu när du besöker webbplatsen uppdateras ordningen på länkarna i menyn. Det krävs inget krångel med den underliggande koden med detta tillvägagångssätt.
Style för den anpassade menyn
Den oordnade listan räcker inte till! Vi måste göra saker och ting lite smidigare än så. Låt oss spendera lite tid på att tillämpa lite anpassad CSS för att snygga till menyn lite. Först och främst vill vi förvandla den vertikalt orienterade oordnade listan till en horisontellt orienterad meny. Vi vill också ta bort punktmarkeringarna för varje listelement, lägga till lite padding och marginal samt ta bort understrykningen för länkar. Här är ett försök att skapa den effekten i vår fil style.css.
/* 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;}Det är ganska mycket som händer i CSS-filen ovan. Låt oss gå igenom det. I den första .navigation-menu ul-selektorn tar vi bort all padding och marginal från den oordnade listan. Därefter ser vi till att den oordnade listan rensar floats för listelementens barn. I .navigation-menu ul li selector tar vi bort punktmarkeringarna från listan, flyttar listelementen till vänster och lägger till en liten marginal till höger. I slutet av listan riktar vi in oss på länkarna. Först förvandlar vi dem till element på blocknivå med en padding på 12px vertikalt och 17px horisontellt. Vi lägger till en fin gränseffekt och tar bort understrykningen på länkarna. Låt oss kolla in det i webbläsaren nu.
Snyggt! Menyn ser mycket bättre ut än vad den gjorde från början.
Hur man lägger till en egen färg på hover till menyn
Den grundläggande styling ins på plats. Det kan vara trevligt att ha en liten hover-effekt när man för musen över varje länk. Detta är mycket enkelt att konfigurera med hjälp av följande utdrag:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Det ser ganska bra ut!
Hur man riktar in sig på Active State för ett menyalternativ
En annan sak som vi kanske skulle vilja lägga till är möjligheten att anpassa färgen på en aktiv länk. Detta skiljer sig från den enkla hover-effekten. I det här fallet, när vi besöker en viss länk från menyn, vill vi att WordPress ska vara medveten om att detta nu är den aktiva sidan som visas och uppdatera den visuella representationen för att återspegla den aktiva länken. För att göra detta kan vi använda oss av en speciell klass som är inbyggd i WordPress för att hantera just detta. Detta är klassen current-menu-item. Så här kan vi införliva den i vår anpassade meny.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Om vi besöker vår webbplats nu och testar att besöka de olika länkarna i den anpassade menyn kan vi se att det ser väldigt trevligt ut. Vi har nu ett särskilt utseende för hover-tillståndet och ett annat utseende för det aktiva tillståndet för länkarna i vår meny. Detta är ett bra sätt att se till att besökarna på din webbplats vet var de för tillfället befinner sig genom att hålla den aktiva menyn upplyst så att säga.
Hur man skapar en anpassad meny i WordPress Sammanfattning
I den här handledningen hade vi en bra titt på hur man lägger till en anpassad meny till vårt anpassade tema i WordPress. Vi använde oss av några WordPress-funktioner för att hjälpa oss på traven. Den första vi använde oss av var wp_nav_menu(). Den här funktionen kan automatiskt bygga en oordnad lista och barnelement för att skapa strukturen för en fin meny som du kan tillämpa styling på. Det finns många argument som du kan skicka till den här funktionen, men vi har bara fokuserat på grunderna här. Nästa funktion vi använde oss av var funktionen register_nav_menus(). Med den här funktionen kan vi berätta för WordPress om vår nya meny och koppla in den i WordPress Dashboard. När vår nya meny var registrerad hos WordPress fann vi att det var enkelt att lägga till eller ta bort vad vi vill från den menyn, direkt från WordPress instrumentpanel och utan att behöva redigera någon kod i våra temafiler. Slutligen tog vi lite tid på oss för att förbättra utseendet på vår meny genom att använda lite anpassad CSS-styling.