Menyn är din webbplats skelett. En besökare skannar den på några sekunder: om det är otydligt var man ska klicka lämnar de. Den grundläggande WordPress-byggaren under "Utseende → Menyer" sätter ihop navigering på en minut, men resultatet ser ut som en ren textsträng. Inga ikoner, inget klistrat beteende vid skrollning, ingen riktig mobilversion.

Problemet är djupare än det verkar: standardfunktionaliteten räcker de första dagarna efter lansering, men snart behöver du saker som helt enkelt inte finns i kärnan. Ikoner för menyalternativ, en inloggningsknapp direkt i navigeringen, en shortcode för att infoga en meny i inläggstexten, en smart mobilpanel: allt detta kräver antingen kod eller ett tillägg.

Den här artikeln täcker båda tillvägagångssätten: lätta justeringar via functions.php och style.css plus de bästa aktivt underhållna tilläggen för avancerade menyer. Materialet fungerar med klassiska teman, blockteman och i kombination med vilket populärt ramverk som helst.

💡 Snabb översikt:

• Installera tillägget Menu Icons och lägg till ikoner på menyalternativ på fem minuter utan kod
• Infoga wp_loginout-funktionen i functions.php, så dyker en inloggningsknapp upp direkt i navigeringen
• Registrera en meny-shortcode och visa en färdig meny var som helst på webbplatsen
• Gör menyn klistrad vid skrollning med tre rader CSS eller ett av tre tillägg
• Välj en avancerad byggare från tre alternativ: UberMenu, Max Mega Menu eller QuadMenu
• Sätt upp mobilnavigering med WP Mobile Menu eller Mobi med ett pekvänligt gränssnitt

1. Ikoner för menyalternativ via Menu Icons

Ett snabbt sätt att liva upp navigeringen: lägg till ikoner bredvid avdelningsnamn. Ögat "fångar" en ikon före text, och efter ett par besök fastnar ikonen bättre i minnet än någon etikett.

Det kostnadsfria tillägget Menu Icons från ThemeIsle-teamet hanterar den här uppgiften, med över 400 000 aktiva installationer på WordPress.org och betyget 4,4. Ingen kod krävs.

Steg:

• Installera tillägget via "Tillägg → Lägg till nytt" och sök efter "Menu Icons"
• Aktivera och gå till "Utseende → Menyer"
• Fäll ut valfritt objekt, så visas ett ikonvalsblock
• Välj en ikon från Dashicons (inbyggt i WordPress), Font Awesome eller ladda upp en egen
• Justera position och storlek, spara sedan

Under huven lägger tillägget till en CSS-klass med ikonen till <li>-elementet: en ren lösning utan temakonflikter. Det stöder Dashicons, Font Awesome, Elusive Icons och Genericons. Fungerar med alla menyer som registrerats via standardfunktionen wp_nav_menu.

🔗 Menu Icons på WordPress.org

2. Inloggnings- och utloggningsknapp direkt i menyn

Om din webbplats har registrering behöver användare snabb åtkomst utan att leta efter sidan /wp-login.php. En "Logga in"- eller "Logga ut"-länk ligger direkt i huvudmenyn och ändras automatiskt baserat på status.

Detta löses med en funktion i functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Kodsnutten hakar i wp_nav_menu_items och lägger till ett <li> med länken i slutet av valfri meny. Funktionen wp_loginout() upptäcker status på egen hand: om användaren är utloggad visas "Logga in"; om autentiserad visas "Logga ut" med en omdirigering till samma sida.

Efter att du sparat filen, ladda om webbplatsen och verifiera båda tillstånden. Om du behöver omdirigera användaren till en specifik sida efter inloggning, ersätt det första argumentet i wp_loginout() från 'index.php' till den önskade URL:en.

3. Shortcode för att visa en meny var som helst

WordPress låter dig tilldela en meny till sidhuvudet, sidfoten eller sidopanelsytan, precis där temat har avsatt utrymme. Men vad händer om du behöver en meny inuti ett inlägg, på en landningssida eller i en textwidget?

Svaret är att registrera en egen shortcode:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Lägg till koden i functions.php, spara, och skriv var som helst på webbplatsen:

[menu name="main-menu"]

Ta namnet från "Utseende → Menyer", där det visas ovanför listan med objekt. Shortcoden anropar standardfunktionen wp_nav_menu() med undertryckt utdata ('echo' => false) och returnerar den färdiga HTML-koden.

På så sätt kan du ha gemensam navigering i sidfoten, extra navigering i sidopanelen på ett specifikt inlägg och sätta ihop en separat meny för en landningssida helt utan temabindning.

4. Sökfält i navigeringsfältet

Standardwidgeten för WordPress-sökning ligger i sidopanelen. Men om det inte finns någon sidopanel eller om den flyttas till botten på mobilen, kommer besökarna helt enkelt inte att hitta sökningen. Låt oss flytta den direkt in i menyn.

Grundversion med samma filterteknik för wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

Funktionen get_search_form(false) returnerar sökformulärets HTML utan att skriva ut det på skärmen. Fältet kommer att fästas vid det sista menyalternativet; du kommer troligen att behöva positionering. Lägg till en CSS-klass till <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

Och i ditt temas style.css anger du marginalerna:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Tre rader PHP och ett par rader CSS. Resultat: sökfältet är alltid synligt oavsett skärmstorlek.

5. Klistrig meny vid scroll

En klistrig meny innebär att navigationsfältet fastnar högst upp på skärmen och följer med nedåt när användaren scrollar. Det är praktiskt på landningssidor, långa artiklar och i butiker: man slipper scrolla tillbaka för att navigera till en annan sektion.

Metod 1: CSS (gratis, inga tillägg)

Hitta huvudmenyns selektor i ditt tema, vanligtvis .nav-menu, .genesis-nav-menu eller .main-navigation. Lägg till i style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

Den avgörande raden är position: fixed. Den tar bort blocket ur flödet och fixerar det relativt webbläsarfönstret. top: 0; right: 0; left: 0 sträcker ut menyn till full bredd. Lägg till övre utfyllnad på innehållet så att menyn inte täcker sidhuvudet.

CSS-metoden har en nackdel: efter fixeringen lämnar menyn flödet och innehållet "hoppar" upp. Detta löses genom att lägga till padding-top på bodyn motsvarande menyns höjd.

Metod 2: tillägg (finare kontroll, ingen kod)

Om du helst inte vill röra temafilerna finns här tre beprövade verktyg.

myStickymenu är ett gratis tillägg med över 200 000 aktiva installationer på WordPress.org och betyget 4,6. Det kopplar till ditt temas navigations-CSS-klass; ange den bara i inställningarna. Det är responsivt: på mobil inaktiveras den klistriga effekten automatiskt. Det finns ett fält för anpassade CSS-stilar och ett läge "klistra med fördröjning" baserat på scroll-pixlar.

Sticky Menu (or Anything!) On Scroll är ett annat gratisalternativ som kan "klistra" vilket element som helst via CSS-selektor: inte bara en meny, utan även en logotyp, hela sidhuvudet eller en knapp. Det kräver grundläggande förståelse för HTML och CSS för att hitta rätt selektor, men ger full frihet.

UberMenu Sticky Extension är ett tillägg till tillägget UberMenu för $8. Om UberMenu redan är installerat lägger tillägget till klistrigt läge med en enda knapp. På mobil inaktiveras det automatiskt för att undvika att täcka skärmen.

6. Ta bort menyalternativ från WordPress admin

När du lämnar över en sajt till en kund eller ger åtkomst till skribenter är standardadminpanelen för "rik": 10+ sektioner, varav många användaren inte behöver och en del till och med är farliga. Tillägg och temainställningar bör bara vara åtkomliga för administratörer.

Koden nedan tar bort alla toppnivåsektioner för alla användare utom administratörer:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Kodsnutten placeras i functions.php. Kontrollen !current_user_can('manage_options') exkluderar administratörer; de ser allt. Andra roller får en nedbantad lista baserat på vad du behåller.

Ta bara bort de remove_menu_page-rader du behöver. För en redaktör kan du till exempel behålla "Inlägg", "Media" och "Sidor" medan du tar bort allt annat. Viktigt att notera: funktionen döljer objekt från menyn men blockerar inte direkt åtkomst via URL. För fullständig sidspärr, konfigurera behörigheter i användarrollen.

7. Avancerade tillägg för menyskapande

När standardredigeraren inte räcker till behöver du megameny med bilder, flikar, formulär och dynamiska element. Här är tre aktivt underhållna tillägg för olika uppgifter och budgetar.

7.1 UberMenu: den mest funktionsrika byggaren

En marknadsveteran med över 43 000 försäljningar på CodeCanyon. Skapar responsiva megameny med touch-stöd. Du kan placera bilder, video, kartor och ett färdigt kontaktformulär i undermenyer. Över 50 stilinställningar med live-förhandsvisning, automatisk generering av undermenyer från innehåll och flikar under objekt. Integreras med WooCommerce: kan dynamiskt hämta produktkategorier.

Pris: från $26. 🔗 UberMenu på CodeCanyon

7.2 Max Mega Menu: den kostnadsfria ledaren

Det populäraste kostnadsfria megamenytillägget på WordPress.org: över 400 000 aktiva installationer och 4,8 i betyg. Bygger megameny via drag och släpp i den vanliga skärmen "Utseende → Menyer" utan separat gränssnitt. Stöder kolumnrutnät, widgetar i undermenyer, ikoner och off-canvas-läge för mobil. Frontend-skriptet väger under 2 KB gzippat, så det påverkar inte sajtens hastighet.

• Fördelar: integrerat i det inbyggda gränssnittet för WordPress-menyer, minimal skriptvikt, widgetar i undermenyer, gratisversionen täcker 90% av användningsfallen
• Nackdelar: vissa avancerade stilar och flikmenyer endast i Pro ($29/år)
• Pris: Gratis / Pro från $29/år
• Nedladdning: 🔗 Max Mega Menu på WordPress.org

7.3 QuadMenu: flikar, karuseller och full anpassning

QuadMenu omvandlar standardmenyn till en megameny med flikar och karuseller, och erbjuder fler funktioner än Max Mega Menu men med en något högre inlärningströskel. Stöder vertikal och horisontell layout, integration med Elementor och Beaver Builder, Google Fonts och över 2 000 Font Awesome-ikoner. Mörkt och ljust tema direkt ur kartongen, responsiv mobilversion med off-canvas-panel.

• Fördelar: flikar och karuseller inuti menyn, djup integration med sidbyggare, utvecklarvänligt (hooks och filter)
• Nackdelar: mer komplex initial installation än Max Mega Menu, vissa funktioner endast i betalversionen
• Pris: Gratis / Premium från $15/år
• Nedladdning: 🔗 QuadMenu på WordPress.org

8. Mobila menyer för smartphones och surfplattor

Mobil trafik gick om desktop för länge sedan. Om menyn blir en oläslig röra på en telefon lämnar besökarna. Ett responsivt tema skalar om desktopmenyn för smala skärmar, men strukturen förblir densamma: fem eller sex objekt i rad blir en lång vertikal lista. Ett specialiserat tillägg ger en hamburgerknapp, svep och touch-optimering.

8.1 WP Mobile Menu: snabb off-canvas för vilken sajt som helst

De mest populära gratispluggen för mobilmeny på WordPress.org: 80 000+ aktiva installationer och betyget 4,7. Lägger till en off-canvas-panel som glider ut när hamburgarknappen trycks. Stöder tre nivåer av undermenyer, sökning inuti mobilmenyn, ikoner och färganpassning. Beteendet för olika skärmupplösningar konfigureras separat.

• Fördelar: minimal installation (fungerar direkt efter aktivering), adaptiv (visas bara på mobil), krockar inte med teman
• Nackdelar: vissa avancerade stilar och WooCommerce-integration i Pro ($19/år)
• Pris: Gratis / Pro från $19/år
• Nedladdning: 🔗 WP Mobile Menu på WordPress.org

8.2 Mobi: dra-och-släpp-byggare för mobilmenyer

En intuitiv dra-och-släpp-byggare för menyer. Menyn kan placeras högst upp eller längst ned på skärmen. Innehåller 700+ inbyggda ikoner, valfritt antal sociala medier-ikoner på panelen och Google Fonts för styling. Du kan styra menyns synlighet för gäster och inloggade användare separat. Väl lämpad för sajter där mobilmenyn ska se ut som ett fristående gränssnitt snarare än en förminskad kopia av skrivbordsversionen.

Pris: från $16. 🔗 Mobi på CodeCanyon

⁉️🤔 Vanliga frågor

Kan jag skapa en meny helt utan plugins, bara med kod?

Ja, alla tekniker som beskrivs (ikoner, sticky-effekt, shortcode, inloggningsknapp) kan implementeras via functions.php och style.css utan att installera tredjepartsverktyg. Plugins sparar helt enkelt tid och ger ett grafiskt gränssnitt för den som föredrar att inte röra kod. Om du är bekväm med PHP och CSS krävs inga plugins. Men när du behöver megamenyer eller en off-canvas-panel med animationer sparar ett färdigt plugin timmar av manuell kodning.

Vilket plugin ska jag välja för en WooCommerce-butik?

För en butik är en megameny med produktkategorier, bilder och filter avgörande. UberMenu presterar bäst här: det hämtar dynamiskt WooCommerce-kategorier och bygger undermenyer i farten. Ett gratisalternativ är Max Mega Menu med widgets inuti undermenyerna: kategoribilder hämtas via standardwidgeten för WooCommerce, och sökning får en egen rad.

Vad ska jag göra om sajten slutar ladda efter att jag lagt till kod i functions.php?

Återställ originalfilen via FTP eller ditt webbhotells filhanterare. Gör en säkerhetskopia före alla ändringar i functions.php. Ett alternativt säkert tillvägagångssätt är pluginet Code Snippets: det låter dig lägga till PHP-snuttar via admin och inaktiverar automatiskt kod vid fatala fel, så att sajten återgår till fungerande skick.

Behöver jag uppdatera menyn efter att ha bytt WordPress-tema?

Menyer är knutna till en visningsyta (plats) som temat registrerar. När du byter tema ändras dessa ytor, och du måste tilldela menyn på nytt under "Utseende → Menyer" på fliken "Hantera platser". Själva objekten, deras ordning och nivåindelning bevaras; bara platsbindningen försvinner.

Hur kontrollerar jag att mobilmenyn fungerar på alla enheter?

Öppna sajten i responsivt designläge i Chrome DevTools (F12 → enhetsikonen) och gå igenom sex brytpunkter: 320px, 375px, 414px, 768px, 1024px, 1280px. Kontrollera hamburgarknappen (ska ligga ovanpå innehållet, inte täckas över), animationens svarshastighet och att alla menyalternativ syns utan horisontell scrollning. Populära plugins som WP Mobile Menu låter dig ställa in brytpunkten manuellt, så att du kan ange olika trigger-bredder för just ditt tema.

Vad du ska använda för din uppgift: den slutliga sammanställningen

Kort sagt: töm först WordPress inbyggda funktioner och lätta CSS-justeringar, lägg sedan till plugins. Detta håller stacken minimal, sajten snabb och navigeringen precis vad läsarna behöver.

• Enkel blogg eller visitkortssajt: börja med Menu Icons (gratis) och sticky-meny med tre rader CSS. Det räcker för att navigeringen ska sluta se ofärdig ut.
• Sajt med registrering: lägg till en inloggningsknapp via wp_loginout(). Användarna slutar leta efter inloggningssidan.
• Landningssida eller lång artikel: shortcoden [menu] placerar navigeringsblock var som helst i sidans brödtext.
• E-handelsbutik eller innehållsportal: här behöver du en megameny. Välj UberMenu om budgeten tillåter och du behöver maximala funktioner, eller Max Mega Menu för typiska uppgifter (gratis och utan hastighetsförlust).
• Mobil publik dominerar: WP Mobile Menu täcker 9 av 10 scenarier: installeras på en minut och ger direkt en off-canvas-panel med sökning. Om du behöver ett mer fristående mobilgränssnitt, kolla in Mobi.

Gör det till en regel: ett plugin per uppgift. Installera inte en megameny bara för ett par ikoner, och skriv inte kod för en off-canvas-panel när ett plugin gör det på en minut. Balansen mellan sajtens hastighet och navigeringens bekvämlighet är precis det som håller kvar läsarna på sidan.