Menyen er skjelettet på nettstedet ditt. En besøkende skanner den på sekunder: hvis det er uklart hvor man skal klikke, forlater de siden. Den grunnleggende WordPress-byggeren under «Utseende → Menyer» setter sammen navigasjon på et minutt, men resultatet ser ut som en enkel tekststreng. Ingen ikoner, ingen klebrig oppførsel ved rulling, ingen skikkelig mobilversjon.

Problemet stikker dypere enn det ser ut til: standardfunksjonaliteten holder de første dagene etter lansering, men snart trenger du ting som rett og slett ikke finnes i kjernen. Ikoner for menyelementer, en innloggingsknapp rett i navigasjonen, en shortcode for å sette inn en meny i brødteksten, et smart mobilpanel: alt dette krever enten kode eller en plugin.

Denne artikkelen dekker begge tilnærminger: lette tilpasninger via functions.php og style.css pluss de beste aktivt vedlikeholdte pluginene for avanserte menyer. Stoffet fungerer med klassiske temaer, blokktemaer og i kombinasjon med ethvert populært rammeverk.

💡 Rask oversikt:

• Installer Menu Icons-pluginen og legg til ikoner på menyelementer på fem minutter uten kode
• Sett inn wp_loginout-funksjonen i functions.php, så dukker en innloggingsknapp opp rett i navigasjonen
• Registrer en meny-shortcode og vis en ferdig meny hvor som helst på nettstedet
• Gjør menyen klebrig ved rulling med tre linjer CSS eller én av tre pluginer
• Velg en avansert bygger fra tre alternativer: UberMenu, Max Mega Menu eller QuadMenu
• Sett opp mobilnavigasjon med WP Mobile Menu eller Mobi med et berøringsvennlig grensesnitt

1. Menyelementikoner via Menu Icons

En rask måte å live opp navigasjonen på: legg til ikoner ved siden av seksjonsnavn. Øyet «fanger» et ikon før tekst, og etter et par besøk fester ikonet seg i hukommelsen bedre enn noen etikett.

Den gratis Menu Icons-pluginen fra ThemeIsle-teamet håndterer denne oppgaven, med over 400 000 aktive installasjoner på WordPress.org og en vurdering på 4,4. Ingen kode kreves.

Trinn:

• Installer pluginen via «Plugins → Legg til ny» og søk etter «Menu Icons»
• Aktiver og gå til «Utseende → Menyer»
• Utvid et hvilket som helst element, så dukker en ikonvelgerblokk opp
• Velg et ikon fra Dashicons (innebygd i WordPress), Font Awesome, eller last opp ditt eget
• Juster plassering og størrelse, og lagre

Under panseret legger pluginen til en CSS-klasse med ikonet til <li>-elementet: en ren løsning uten temakonflikter. Den støtter Dashicons, Font Awesome, Elusive Icons og Genericons. Fungerer med enhver meny registrert via standard wp_nav_menu.

🔗 Menu Icons på WordPress.org

2. Innlogging- og utloggingsknapp rett i menyen

Hvis nettstedet ditt har registrering, trenger brukere rask tilgang uten å måtte lete etter /wp-login.php-siden. En «Logg inn»- eller «Logg ut»-lenke ligger rett i hovedmenyen og endres automatisk basert på status.

Dette løses med én funksjon 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);

Kodebiten hekter seg på wp_nav_menu_items og legger til en <li> med lenken på slutten av enhver meny. Funksjonen wp_loginout() oppdager status selv: hvis brukeren er logget ut, viser den «Logg inn»; hvis autentisert, «Logg ut» med en omdirigering til samme side.

Etter å ha lagret filen, last nettstedet på nytt og bekreft begge tilstander. Hvis du trenger å omdirigere brukeren til en bestemt side etter innlogging, erstatt det første argumentet til wp_loginout() fra 'index.php' med ønsket URL.

3. Shortcode for å vise en meny hvor som helst

WordPress lar deg tilordne en meny til topptekst-, bunntekst- eller sidelinjeområdet, akkurat der temaet har avsatt plass. Men hva om du trenger en meny inne i et innlegg, på en landingsside eller i en tekstwidget?

Svaret er å registrere din 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');

Legg til koden i functions.php, lagre, og skriv hvor som helst på nettstedet:

[menu name="main-menu"]

Ta navnet fra «Utseende → Menyer», der det vises over listen over elementer. Shortcoden kaller standard wp_nav_menu() med undertrykt utdata ('echo' => false) og returnerer den ferdige HTML-markeringen.

På denne måten kan du beholde felles navigasjon i bunnteksten, ekstra navigasjon i sidelinjen på et bestemt innlegg, og sette sammen en egen meny for en landingsside uten noen temabinding i det hele tatt.

4. Søkefelt i navigasjonslinjen

Standard søkewidget i WordPress bor i sidelinjen. Men hvis det ikke er noen sidelinje eller den flyttes til bunnen på mobil, vil besøkende rett og slett ikke finne søket. La oss flytte det rett inn i menyen.

Grunnversjon med samme wp_nav_menu_items-filterteknikk:

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
}

Funksjonen get_search_form(false) returnerer søkeskjemaets HTML uten å skrive det ut til skjermen. Feltet vil feste seg til det siste menyelementet; du vil sannsynligvis trenge posisjonering. Legg til en CSS-klasse til <li>:

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

Og i temaets style.css angir du margene:

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

Tre linjer med PHP og et par linjer med CSS. Resultat: søkefeltet er alltid synlig uansett oppløsning.

5. Fastlåst meny ved rulling

En fastlåst meny er når navigasjonsfeltet limer seg fast i toppen av skjermen og følger med nedover siden mens brukeren ruller. Det er praktisk på landingssider, lange artikler og i nettbutikker: du slipper å rulle tilbake for å navigere til en annen seksjon.

Metode 1: CSS (gratis, ingen utvidelser)

Finn hovedmenyens selektor i temaet ditt, vanligvis .nav-menu, .genesis-nav-menu eller .main-navigation. Legg til 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
}

Nøkkellinjen er position: fixed. Den fjerner blokken fra flyten og fikserer den i forhold til nettleservinduet. top: 0; right: 0; left: 0 strekker menyen til full bredde. Legg til topp-padding på innholdet slik at menyen ikke dekker toppteksten.

CSS-metoden har én ulempe: etter fiksering forlater menyen flyten og innholdet «hopper» opp. Dette løses ved å legge til padding-top på body-elementet tilsvarende menyens høyde.

Metode 2: utvidelser (finere kontroll, ingen kode)

Hvis du helst ikke vil røre temafiler, er her tre utprøvde verktøy.

myStickymenu er en gratis utvidelse med over 200 000 aktive installasjoner på WordPress.org og en vurdering på 4,6. Den kobler seg til temaets navigasjons-CSS-klasse; bare spesifiser den i innstillingene. Den er responsiv: på mobil deaktiveres den fastlåste effekten automatisk. Det finnes et felt for egendefinerte CSS-stiler og en «fest med forsinkelse»-modus basert på antall piksler rullet.

Sticky Menu (or Anything!) On Scroll er et annet gratisalternativ som kan «feste» ethvert element via CSS-selektor: ikke bare en meny, men også en logo, hele toppteksten eller en knapp. Den krever grunnleggende forståelse av HTML og CSS for å finne riktig selektor, men gir full frihet.

UberMenu Sticky Extension er et tillegg til UberMenu-utvidelsen til $8. Hvis UberMenu allerede er installert, legger tillegget til fastlåst modus med én bryter. På mobil deaktiveres den automatisk for å unngå å dekke skjermen.

6. Fjerne menyelementer fra WordPress-administrasjonen

Når du overleverer et nettsted til en kunde eller gir tilgang til forfattere, er standardadministrasjonen for «rik»: 10+ seksjoner, mange av dem trenger ikke brukeren, og noen er til og med farlige. Utvidelser og temainnstillinger bør forbli tilgjengelige kun for administratorer.

Koden nedenfor fjerner alle toppnivåseksjoner for alle brukere unntatt administratorer:

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
}

Kodebiten legges i functions.php. Sjekken !current_user_can('manage_options') ekskluderer administratorer; de ser alt. Andre roller får en trimmet liste basert på hva du lar stå igjen.

Fjern bare de remove_menu_page-linjene du trenger. For en redaktør kan du for eksempel la «Innlegg», «Media» og «Sider» stå igjen mens du fjerner alt annet. Viktig merknad: funksjonen skjuler elementer fra menyen, men blokkerer ikke direkte URL-tilgang. For fullstendig sidelåsing, konfigurer kapabiliteter i brukerrollen.

7. Avanserte utvidelser for menybygging

Når standardredigereren ikke strekker til, trenger du megameny med bilder, faner, skjemaer og dynamiske elementer. Her er tre aktivt vedlikeholdte utvidelser for ulike oppgaver og budsjetter.

7.1 UberMenu: den mest funksjonsrike byggeren

En markedsveteran med over 43 000 salg på CodeCanyon. Lager responsive megameny med berøringsstøtte. Du kan plassere bilder, video, kart og et ferdig kontaktskjema i undermenyene. Over 50 stilinnstillinger med forhåndsvisning, automatisk generering av undermeny fra innhold og faner under elementer. Integreres med WooCommerce: kan hente produktkategorier dynamisk.

Pris: fra $26. 🔗 UberMenu på CodeCanyon

7.2 Max Mega Menu: gratisvinneren

Den mest populære gratis megameny-utvidelsen på WordPress.org: over 400 000 aktive installasjoner og en vurdering på 4,8. Bygger megameny via dra-og-slipp i det vanlige «Utseende → Menyer»-skjermbildet uten et separat grensesnitt. Støtter kolonner, widgeter i undermeny, ikoner og off-canvas-modus for mobil. Frontend-skriptet veier under 2 KB komprimert, så det påvirker ikke nettstedets hastighet.

• Fordeler: integrert i det opprinnelige WordPress-meny-grensesnittet, minimal skriptvekt, widgeter i undermeny, gratisversjonen dekker 90% av bruksområdene
• Ulemper: noen avanserte stiler og fanemenyer kun i Pro ($29/år)
• Pris: Gratis / Pro fra $29/år
• Nedlasting: 🔗 Max Mega Menu på WordPress.org

7.3 QuadMenu: faner, karuseller og full tilpasning

QuadMenu forvandler standardmenyen til en megameny med faner og karuseller, og tilbyr flere funksjoner enn Max Mega Menu, men med en litt brattere læringskurve. Støtter vertikal og horisontal layout, integrasjon med Elementor og Beaver Builder, Google Fonts og over 2 000 Font Awesome-ikoner. Mørkt og lyst tema rett ut av esken, responsiv mobilversjon med off-canvas-panel.

• Fordeler: faner og karuseller i menyen, dyp integrasjon med sidebyggere, utviklervennlig (hooks og filtre)
• Ulemper: mer kompleks førstegangsoppsett enn Max Mega Menu, enkelte funksjoner kun i betalversjonen
• Pris: Gratis / Premium fra $15/år
• Nedlasting: 🔗 QuadMenu på WordPress.org

8. Mobilmeny for smarttelefoner og nettbrett

Mobiltrafikken passerte desktop for lenge siden. Hvis menyen blir et uleselig rot på en telefon, forsvinner de besøkende. Et responsivt tema skalerer desktopmenyen for smale skjermer, men strukturen forblir den samme: fem eller seks elementer på rad blir en lang vertikal liste. En spesialisert utvidelse gir en hamburgerknapp, sveiping og berøringsoptimalisering.

8.1 WP Mobile Menu: rask off-canvas for ethvert nettsted

Det mest populære gratis mobilmeny-tillegget på WordPress.org: 80 000+ aktive installasjoner og en vurdering på 4,7. Legger til et off-canvas-panel som glir ut når hamburgerknappen trykkes. Støtter tre nivåer med undermenyer, søk inne i mobilmenyen, ikoner og fargetilpasning. Atferd for ulike skjermoppløsninger konfigureres separat.

• Fordeler: minimalt med oppsett (fungerer umiddelbart etter aktivering), adaptivt (vises bare på mobil), kommer ikke i konflikt med temaer
• Ulemper: enkelte avanserte stiler og WooCommerce-integrasjon i Pro ($19/år)
• Pris: Gratis / Pro fra $19/år
• Nedlasting: 🔗 WP Mobile Menu på WordPress.org

8.2 Mobi: dra-og-slipp-bygger for mobilmeny

En intuitiv dra-og-slipp-menybygger. Menyen kan plasseres øverst eller nederst på skjermen. Inkluderer 700+ innebygde ikoner, et ubegrenset antall sosiale medier-ikoner i panelet og Google Fonts for styling. Du kan styre menyens synlighet for gjester og innloggede brukere separat. Godt egnet for nettsteder der mobilmenyen bør se ut som et selvstendig grensesnitt snarere enn en forminsket kopi av desktopversjonen.

Pris: fra $16. 🔗 Mobi på CodeCanyon

⁉️🤔 Ofte stilte spørsmål

Kan jeg lage en meny helt uten tillegg, bare med kode?

Ja, alle teknikkene som er beskrevet (ikoner, klebrig effekt, shortcode, innloggingsknapp) kan implementeres via functions.php og style.css uten å installere tredjepartsverktøy. Tillegg sparer rett og slett tid og gir et grafisk grensesnitt for dem som foretrekker å ikke røre kode. Hvis du er komfortabel med PHP og CSS, er ikke tillegg påkrevd. Men når du trenger megamenyer eller et off-canvas-panel med animasjoner, sparer et ferdig tillegg timevis med manuell koding.

Hvilket tillegg bør jeg velge for en WooCommerce-butikk?

For en butikk er en megameny med produktkategorier, bilder og filtre avgjørende. UberMenu yter best her: det henter dynamisk inn WooCommerce-kategorier og bygger undermenyer i farten. Et gratis alternativ er Max Mega Menu med widgeter i undermenyene: kategoribilder hentes via standard WooCommerce-widget, og søk får en egen rad.

Hva bør jeg gjøre hvis nettstedet slutter å laste etter at jeg har lagt til kode i functions.php?

Gjenopprett originalfilen via FTP eller vertskapets filbehandler. Før du gjør endringer i functions.php, ta en sikkerhetskopi. En alternativ sikker tilnærming er tillegget Code Snippets: det lar deg legge til PHP-snutter via administrasjonspanelet og deaktiverer automatisk kode ved fatal feil, slik at nettstedet returneres til normal drift.

Må jeg oppdatere menyen etter å ha byttet WordPress-tema?

Menyer er knyttet til et visningsområde (lokasjon) som temaet registrerer. Når du bytter tema, endres disse områdene, og du må tilordne menyen på nytt under «Utseende → Menyer» i fanen «Administrer lokasjoner». Selve elementene, rekkefølgen og nøstingen deres beholdes; det er bare lokasjonsbindingen som går tapt.

Hvordan bekrefter jeg at mobilmenyen fungerer på alle enheter?

Åpne nettstedet i responsiv design-modus i Chrome DevTools (F12 → enhetsikon) og gå gjennom seks brytningspunkter: 320px, 375px, 414px, 768px, 1024px, 1280px. Sjekk hamburgerknappen (bør ligge over innhold, ikke være dekket), animasjonens responshastighet og synligheten til alle menyelementer uten horisontal rulling. Populære tillegg som WP Mobile Menu lar deg angi brytningspunktet manuelt, slik at du kan spesifisere ulike utløserbredder for ditt spesifikke tema.

Hva du bør bruke til oppgaven din: den endelige oversikten

Kort sagt: utnytt først WordPress' innebygde funksjoner og lette CSS-justeringer, legg deretter til tillegg. Dette holder stakken minimal, nettstedet raskt og navigasjonen akkurat slik leserne trenger.

• Enkel blogg eller visittkortside: start med Menu Icons (gratis) og klebrig meny med tre linjer CSS. Det er nok til at navigasjonen slutter å se uferdig ut.
• Nettsted med registrering: legg til en innloggingsknapp via wp_loginout(). Brukerne slutter å lete etter innloggingssiden.
• Landingsside eller lang artikkel: [menu]-shortcoden plasserer navigasjonsblokker hvor som helst i sidens brødtekst.
• Nettbutikk eller innholdsportal: du trenger en megameny her. Gå for UberMenu hvis budsjettet tillater det og du trenger maksimalt med funksjoner, eller Max Mega Menu for typiske oppgaver (gratis og uten hastighetstap).
• Mobilpublikum dominerer: WP Mobile Menu dekker 9 av 10 scenarioer: installeres på et minutt og gir umiddelbart et off-canvas-panel med søk. Hvis du trenger et mer selvstendig mobilgrensesnitt, sjekk ut Mobi.

Gjør det til en regel: ett tillegg per oppgave. Ikke installer en megameny bare for et par ikoner, og ikke skriv kode for et off-canvas-panel når et tillegg gjør det på et minutt. Balansen mellom nettstedets hastighet og navigasjonens bekvemmelighet er akkurat det som holder leserne på siden.