Ibland hittar du ett fantastiskt tema och inser att det skulle vara bra om det hade en extra navigeringsmeny med viktiga eller ofta använda länkar för att öka användbarheten på din WordPress-webbplats.
Med bara lite kodning kan du snabbt skapa grunden för din nya meny, som du sedan kan styla för att matcha ditt tema.
Om du hellre vill slippa krångla med kod finns det många plugins som kan göra det tunga jobbet åt dig, och som även erbjuder stylingalternativ.
Oavsett vilket alternativ du väljer kommer guiden nedan att hjälpa dig att få det att hända.
Grundläggande hushållning
För att skapa en ny meny måste du redigera dina temafiler. Innan du gör ändringar i någon av dina kärnfiler är det bäst att säkerhetskopiera hela din webbplats om något går fel på vägen. Du kommer att kunna återställa din webbplats snabbt och det kommer att vara som om ingenting någonsin hade hänt.
Du kan manuellt säkerhetskopiera din webbplats via FTP eller med hjälp av ett plugin, till exempel vårt eget Snapshot. Se bara till att spara en kopia av både din databas och dina filer på en annan plats än din webbplats för att minimera risken att du förlorar din säkerhetskopia.
Konstruera ett Child Theme
För att skapa nya menyer med kod måste du göra ändringar som skulle gå förlorade när du uppdaterar ditt tema. Att skapa ett underbarnstema tar hand om detta problem.
Du kan hitta de detaljer du behöver för att skapa ett underbarnstema genom att kolla in ett par av våra andra inlägg Så här skapar du ett WordPress underbarnstema och Så här skapar du automatiskt underbarnsteman i WordPress.
Du kan också välja att skapa ett helt nytt eget tema eller prova det på en lokal eller testwebbplats.
Du kan kolla in dessa inlägg för mer information om hur du skapar en lokal installation av WordPress:
- Hur man utvecklar WordPress lokalt med MAMP
- Hur man installerar XAMPP och WordPress lokalt på PC/Windows
- Hur man installerar WordPress lokalt på 5 minuter med DesktopServer
- Den snabba och enkla guiden för att migrera en lokal WordPress-installation till en levande webbplats
- Hur man flyttar WordPress för lokal utveckling med XAMPP
När du har ställt in ett av dessa alternativ, är du fri att börja skapa dina extra navigeringsmenyer. Men om du bestämmer dig för att använda ett plugin eller ett ramverk för teman behöver du inte skapa ett barntema.
Skapa nya menyer
För att lägga till ett valbart alternativ för menyplacering i din administratörspanel under Utseende > Menyer måste du göra det som kallas ”registrera en meny”. Allt du behöver göra är att lägga till en kodbit i filen functions.php som finns i wp-content > themes > your-theme.
I cPanel klickar du på ikonen Filhanteraren i avsnittet Filer på startsidan. Om du inte tidigare har ställt in filhanteraren så att den laddar till webbplatsens dokumentrot, navigerar du dit nu.
Det finns en functions.php-fil i mappen /wp-includes/, men det är inte den du behöver redigera. Se till att du hittar filen functions.php som finns i det tema du använder. Annars får du fel när du försöker lägga till den kod som finns senare.
Lokalisera din functions.php-fil och klicka på den en gång följt av att klicka på knappen Redigera högst upp på sidan.
Om en popup-fönster öppnas klickar du helt enkelt på knappen Redigera längst ned till höger. Du kanske inte ser någon om du tidigare har inaktiverat den.
Rulla till botten av filen. Om du bara vill lägga till en meny lägger du till följande kod på en ny rad:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
I det här exemplet är New Menu det namn som kommer att visas på menysidan på din administratörspanel för att göra den begriplig för mänskliga ögon. Namnet new-menu är vad WordPress kommer att förstå för att exekvera din kod korrekt.
Du kan kalla din meny vad du vill, men se till att endast det människoläsbara namnet innehåller mellanslag och stora bokstäver.
Om du vill lägga till flera menyer på din webbplats lägger du till den här koden på en ny rad i stället:
Du kan lägga till så många nya menyer som du vill med den här metoden. Samma regler gäller när du namnger dem.
Spara de ändringar du gjort i filen. Nu återstår bara att lägga till den nya menyn på din webbplats.
Att lägga till menyplatser till ditt tema
Det är nu du måste bestämma var du vill placera din meny. Om du vill att menyn ska visas högst upp på sidan måste du redigera filen header.php. Du kan också placera den i sidfoten, vilket innebär att du redigerar filen footer.php.
Du kan till och med visa en meny på en sida genom att redigera dess mallfil eller till en sidebar, vilket innebär att du redigerar dess fil sidebar.php.
Du kan placera din nya meny var du vill. Här är den minsta mängd kod som du behöver lägga till på någon av dessa platser:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Ersätt new-menu med det WordPress-läsbara namn du valt. Du vill förmodligen styla din meny med CSS så att den går utöver den grundläggande funktionaliteten och även ser bra ut. För att göra detta måste du skapa en klass och lägga till den i ditt tema med följande kod.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Just precis som tidigare, ersätt new-menu med det namn du valde. I det här exemplet namngav jag klassen som jag skapade new_menu_class. Du kan ändra detta, men se bara till att uppdatera den här koden för att återspegla justeringen.
Klicka på knappen Spara och gå över till Appearance > Menus i din instrumentpanel. Du kommer att märka att dina nya menyer kommer att listas under Temalägen i avsnittet Menyinställningar.
Du kommer nu att kunna se dina nya menyplatser listade. När du lägger till en meny kan du välja en eller alla platser.
Om du vill ha länkar som visas på dina nygjorda menyplatser klickar du på skapa en ny meny högst upp på sidan.
Om du inte redan har en meny kan du ange ett namn för din meny i fältet på sidan och sedan klicka på skapa meny. Om du redan har en meny som skapats tidigare kan du klicka på länken skapa en ny meny längst upp på sidan.
När du har skapat en ny meny kan du också hantera platserna där de visas under fliken ”Hantera platser”.
Styling, insticksprogram och responsiva menyer
Din nya meny är nu redo att stylas med CSS. Den kodning som krävs är specifik för det tema du använder så jag kommer inte att gå in på det i det här inlägget, men vi har ett annat inlägg som du kan kolla in för det som heter How to Create an Awesome Responsive Menu for Your WordPress Theme (Hur man skapar en fantastisk responsiv meny för ditt WordPress-tema). Det visar också hur du skapar responsiva menyer som är mobilanpassade.
Om du vill ha ett enklare alternativ finns det många plugins som skapar responsiva menyer baserade på ditt temas stilar. En av de bästa som jag har hittat är Responsive Menu.
Några anmärkningsvärda menyer som du också kan finna användbara är ShiftNav, WP Responsive Menu och Max Mega Menu.
Resurser för att gå vidare
Du har nu den solida grund du behöver för att skapa ytterligare menyer för ditt tema och resurser som hjälper dig att gå vidare. Oavsett om du kodar den själv, använder ett plugin eller ett ramverk för temat har du nu en ny meny på din WordPress-webbplats.
Om du stöter på problem kan du fråga våra supporthjältar. De kan ge dig expertråd och support för att lösa nästan alla problem. Du kan öppna ett ärende i vårt supportforum så kommer vi strax för att hjälpa dig.
För mer information om hur du stylar ditt nya tema finns det många resurser du kan kolla in och du kan hitta dem alla i vårt inlägg A Mega Guide to Learning and Referencing CSS for WordPress:
Du kan också kolla in några av våra andra inlägg 10 enkla tips för att lära dig CSS för WordPress, 25 experttips för renare CSS-kodning för WordPress, 25 proffstips för att förbättra ditt CSS-arbetsflöde och 5 kostnadsfria CSS-plugins för live-redigering av din WordPress-webbplats för mer information om hur du kodar lite CSS för ditt tema.
Taggar:
- menyer
- navigering