Hur man lägger till en knapp i din WordPress-sidhuvudmeny

Att lägga till en knapp i huvudnavigeringsmenyn gör att ditt webbplatsens uppmaning till handling kan sticka ut, vilket driver mer trafik till dina viktigaste sidor. Det är också ett enkelt sätt att lägga till samma knapp på varje sida och inlägg.

Vi har sett hur WPForms, ett av våra partnerföretag, lade till en "Skaffa WPForms"-knapp direkt i WordPress-huvudet. Denna enkla tillägg har hjälpt till att öka konverteringar och försäljning.

Genom att placera knappen på en mycket synlig plats gjorde WPForms det lättare för besökare att agera, vilket resulterade i bättre engagemang och fler leads.

I den här artikeln visar vi hur du enkelt lägger till en knapp i din WordPress-huvudmeny.

Varför lägga till en knapp i WordPress-huvudmenyn?

WordPress navigeringsmenyer är vanligtvis enkla textlänkar, där allt ser likadant ut och inget riktigt sticker ut.

Vissa länkar är dock viktigare än andra. Du kanske till exempel vill lägga till en länk till ett onlinebeställningsformulär eller registreringssidan för din WordPress-medlemskapswebbplats.

Som standard ser dessa viktiga länkar ut precis som resten av huvudmenyn.

Du kan göra dessa länkar mer iögonfallande genom att förvandla dem till knappar. Detta kan ge dig fler klick och konverteringar.

Som standard kan du lägga till knappar i WordPress-inlägg och sidor med hjälp av Knappblocket, men du kan inte lägga till dem i navigeringsmenyer.

Med det sagt, låt oss se hur du kan lägga till en knapp i din WordPress-huvudmeny.

Lägga till en knapp i din WordPress-huvudmeny

För att börja måste du lägga till länken som du vill omvandla till en knapp.

Gå helt enkelt till sidan Utseende » Menyer i din WordPress-instrumentpanel och lägg till länken i din navigeringsmeny. För detaljerade instruktioner, se vår guide om hur man lägger till en navigeringsmeny i WordPress.

Därefter måste du klicka på knappen Skärmalternativ högst upp på skärmen.

Detta kommer att visa en panel med massor av nya alternativ. Markera helt enkelt rutan bredvid 'CSS-klasser'.

Klicka nu för att expandera menyalternativet som du vill omvandla till en knapp.

Du kommer att märka ett nytt alternativ för CSS-klass där du kan skriva in ett klassnamn. Du kan kalla CSS-klassen vad du vill, men i den här guiden kommer vi att använda menu-button.

Efter att ha skrivit in ett namn, klicka på knappen ‘Spara meny’ för att lagra dina ändringar.

Nu har du lagt till en anpassad CSS-klass till menyalternativet. Du kan ändra hur det ser ut med hjälp av anpassad CSS-kod. Du kan antingen lägga till denna kod via den inbyggda WordPress-anpassaren eller genom att använda ett plugin för kodavsnitt.

Lägg till en knapp i din WordPress-sidhuvudmeny med WPCode (rekommenderas)

Det bästa sättet att lägga till anpassad kod i WordPress är att använda WPCode. Det är det bästa pluginet för kodavsnitt som låter dig lägga till anpassad CSS, PHP, HTML och mer.

Eftersom du inte redigerar temafiler direkt kan du undvika många vanliga WordPress-fel. Du kan också uppdatera ditt tema eller byta till ett helt annat tema utan att förlora din anpassade kod.

Om du vill ta bort knappen när som helst kan du stänga av den med ett enda klick.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När pluginet är aktiverat, besök sidan Kodutdrag » + Lägg till utdrag från WordPress-instrumentpanelen.

Här ser du alla färdiga WPCode-kodavsnitt som du kan lägga till på din webbplats. Dessa inkluderar ett kodavsnitt som låter dig inaktivera kommentarer helt, ladda upp filtyper som WordPress vanligtvis inte stöder, inaktivera bilagesidor, och mycket mer.

Håll nu muspekaren över alternativet 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen '+ Lägg till anpassat utdrag' när den visas.

Därefter måste du välja 'CSS-utdrag' som kodtyp från listan med alternativ som visas på skärmen.

På följande skärm måste du skriva in en titel för kodavsnittet.

Namnet är bara för din referens, så du kan använda vad du vill.

När det är gjort är du redo att klistra in ett CSS-kodavsnitt i rutan 'Kodförhandsgranskning':

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

När du lägger till kodavsnittet ovan, se till att du ersätter menu-button med namnet på din CSS-klass.

Ovanstående kodutdrag skapar en orange knapp med en skuggeffekt, som du kan se i följande bild.

Känn dig fri att experimentera med CSS-utdraget för att se vilka olika effekter du kan skapa. Du kan till exempel ändra bakgrundsfärgen, länktextens färg, lägga till en kantlinje och mer.

Om du vill använda en annan färg måste du känna till färgens hexkod. Om du är osäker på vilka koder du ska använda kan du använda en resurs som Color Hex.

När du är nöjd med koden, klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv', och klicka sedan på knappen 'Spara kodavsnitt'.

Nu, om du besöker din WordPress-webbplats, kommer du att se den nya sidhuvudmenyknappen i aktion.

Lägg till en knapp i din WordPress-sidhuvudmeny med hjälp av anpassaren

Om du inte vill använda ett plugin kan du lägga till kod med den inbyggda anpassaren.

Gå helt enkelt till Utseende » Anpassa, så ser du en förhandsgranskning av din webbplats till höger, plus en mängd temainställningar i kolumnen till vänster.

För att börja, klicka på alternativet 'Ytterligare CSS'.

Du kommer nu att se en ruta där du kan lägga till anpassad CSS-kod.

Återigen kan du använda kodavsnittet ovan som utgångspunkt.

När du är nöjd med hur knappen ser ut, klicka på ‘Publicera’ för att göra dina ändringar live.

Videohandledning

Om du är mer av en visuell inlärare, kolla in vår videoguide om hur du lägger till en knapp i din WordPress-sidhuvudmeny:

Bonus: Lägg till en klick-för-att-ringa-knapp i WordPress-huvudet

Om du har en webbplats för småföretag, kanske du också vill lägga till en klick-för-att-ringa-knapp i din navigeringsmeny. Detta gör det enklare för besökare att kontakta dig och kan till och med förbättra dina sökrankningar genom att göra din webbplats mer SEO-vänlig.

För att lägga till den här knappen, besök sidan Utseende » Menyer från WordPress-instrumentpanelen och expandera fliken 'Anpassade länkar' till höger.

Här lägger du till ditt VOIP-telefonnummer i URL:en och lägger till en etikett för det. Klicka sedan på knappen 'Lägg till i meny'.

När klick-för-att-ringa-knappen har lagts till i din lista över navigeringslänkar, glöm inte att klicka på knappen 'Spara meny' för att lagra dina inställningar.

För detaljerade instruktioner kan du gilla att se vår handledning om hur man lägger till en klick-för-att-ringa-knapp i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en knapp i din WordPress-huvudmeny. Du kan också gå igenom vår guide om hur man skapar en klibbig flytande navigeringsmeny i WordPress och vår handledning om hur man lägger till villkorlig logik till menyer i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.