Hur man designar WordPress-navigationsmenyer

Vill du designa dina WordPress-navigeringsmenyer för att ändra deras färg eller utseende? Medan ditt WordPress-tema hanterar utseendet och känslan av navigeringsmenyerna kan du enkelt anpassa det med CSS för att möta dina krav. I den här artikeln kommer vi att visa dig hur du designar en WordPress-navigeringsmeny på din webbplats.

Vi kommer att visa två olika metoder. Den första metoden är för nybörjare eftersom den använder ett plugin och inte kräver någon kodningskunskap. Den andra metoden är för mellanliggande gör-det-själv-användare som föredrar att använda CSS-kod istället för plugins.

Metod 1: Designa en WordPress-navigeringsmeny med hjälp av ett plugin

Ditt WordPress-tema använder CSS för att designa navigeringsmenyn. Många nybörjare är inte bekväma med att redigera temafiler eller skriva CSS-kod själva.

Det är då ett plugin i WordPress-stil kommer till användning. Det sparar dig från att redigera temafiler eller skriva valfri kod.

Det första du bör göra är att installera och aktivera CSS Hero-plugin. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

CSS Hero är ett premium WordPress-plugin som låter dig designa ditt eget WordPress-tema utan att skriva en enda rad kod (ingen HTML eller CSS krävs). Se vår CSS Hero-recension för mer information.

WPBeginner-användare kan använda denna CSS Hero-kupong för att få 34 % rabatt på sitt köp.

Vid aktivering omdirigeras du för att få CSS Hero-licensnyckeln. Följ bara instruktionerna på skärmen så kommer du att omdirigeras till din webbplats med några få klick.

Därefter måste du klicka på CSS Hero-knappen på WordPress admin verktygsfält.

CSS Hero tillhandahåller en WYSIWYG-redigerare (vad du ser är vad du får). Genom att klicka på knappen kommer du åt din webbplats med CSS Hero-verktygsfältet flytande på skärmen.

Du måste klicka på den blå ikonen längst upp för att börja redigera.

Efter att ha klickat på den blå ikonen flyttar du musen över din navigeringsmeny och CSS Hero kommer att markera den genom att visa kanter runt den. När du klickar på den markerade navigeringsmenyn kommer den att visa dig de objekt du kan redigera.

I skärmdumpen ovan visar den oss den övre navigeringsmenyns behållare. Låt oss säga att vi vill ändra bakgrundsfärgen på navigeringsmenyn. I så fall kommer vi att välja toppnavigeringen som påverkar hela vår meny.

CSS Hero kommer nu att visa dig olika egenskaper som du kan redigera som text, bakgrund, kantlinje, marginal, fyllning, etc.

Du kan klicka på vilken egenskap du vill ändra. CSS Hero kommer att visa dig ett enkelt gränssnitt där du kan göra dina ändringar.

I skärmdumpen ovan har vi valt bakgrunden och den visar oss ett trevligt gränssnitt för att välja bakgrundsfärg, gradient, bild och mer.

När du gör ändringar kan du se dem live i temaförhandsgranskningen.

När du är nöjd med ändringarna klickar du på knappen Spara i CSS Hero-verktygsfältet för att spara ändringarna.

Det bästa med att använda den här metoden är att du enkelt kan ångra alla ändringar du gör. CSS Hero har en komplett historik över alla dina ändringar och kan komma och gå mellan dem.

Metod 2: Designa din egen WordPress-navigeringsmeny

Denna metod kräver att du manuellt lägger till anpassad CSS och är avsedd för mellanliggande användare.

WordPress-navigeringsmenyer visas i en oordnad lista (punktlista).

Normalt om du använder standard WordPress-menytaggen kommer den att visa en lista utan tillhörande CSS-klasser.

Din oordnade lista kommer att ha klassnamnet “meny” där varje listobjekt har sin egen CSS-klass.

Detta kan fungera om du bara har en menyplats. De flesta teman har dock flera platser där du kan visa navigeringsmenyer.

Att endast använda standard CSS-klassen kan orsaka konflikter med menyer på andra platser.

Det är därför du måste definiera CSS-klassen och menypositionen. Chansen är stor att ditt WordPress-tema redan gör detta genom att lägga till navigeringsmenyer med kod så här: