Så skapar du riktiga menyer i WordPress 3.0 med wp_nav_menu
Meny_Sortera

Här kommer funktionen vi alla har väntat på, och den kompletta guiden för hur man använder sig av den. Jag pratar självklart om funktionen wp_nav_menu som gör det möjligt att redigera dina menyer direkt från administrationspanelen. Du kan enkelt lägga till, ta bort, sortera, gruppera, döpa om och inte minst blanda friskt mellan sidor, kategorier, och helt egen gjorda länkar till precis vad som helst. Och guiden? Den hittar ni här på WordPressGuru.

Registrera funktionaliteten i ditt tema

Relativt nytt för WordPress är att man måste aktivera nya funktioner i sin functions.php fil. Detta är som tur är väldigt lätt, och liknar i det här fallet en registrering av widgets. Funktionen vi ska använda heter register_nav_menus() och som parameter tar den en lista med nyckel och namn till de menyer du vill ska existera i ditt tema.

I den här guiden visar ju hur man gör två menyer, en topp meny, som vi vill kunna använda en drop down funktion på, och en meny att ha i sidfoten som ska kunna innehålla en drös med alla möjliga länkar till hela sidan. Så vi börjar med att registrera dessa två menyer genom att klistra in följande kod i functions.php:

1
2
3
4
5
6
7
8
/**
 * Två menyer, med nyckelnamnen 'main' och 'footer',
 * och visningsnamnen 'Huvudmeny' och 'Sidfotsmeny'
 **/
register_nav_menus( array(
        'main' => 'Huvudmeny',
        'footer' => 'Sidfotsmeny',
) );

Write it, cut it, paste it, save it, load it, check it, quick – rewrite it

Gå in i administraionpanelen och kika in under Utseende. Poff, så har det dykt upp ett nytt menyval där som heter Menyer. Grymt, navigera dig dit!

Du kommer nu att hitta en helt ny panel med en massa roligt att mixtra runt med, men först måste du skapa din första meny, som kommer att tjäna som en kanvas att placera länkarna på. Mitt på sidan skriver du in ett valfritt namn, och klickar sidan på Skapa Meny.

Fantastiskt! Du har nu lyckats skapa din första meny, men den innehåller inte några länkar än, och den visas ingenstans, så det måste vi genast göra någonting åt.

På vänster sida hittar du Temaposition. Där hittar du även de namn vi skrev in i functions.php i föregående stycke. Börja med att placera rätt meny, under rätt tema position, min meny som jag döpte till ”Huvudmeny” vill jag ska vara på temapositionen ”Huvudmeny” och så vidare. Glöm inte att spara!

Fortsätt sedan med att kryssa i lite sidor och kategorier, och varför inte hitta på några anpassade (egna) länkar också när du ändå håller på? Klicka sedan på Lägg till i meny för att se dina val dyka upp på menyytan i mitten av sidan.

Sist har du också möjligheten att gruppera dina menyval i annorlunda ordning, sätta ett nytt parent->child förhållande eller ta bort och redigera menyerna. Allt detta sker i mitten av skärmen med hjälp av DragOchSläpp teknik. Det kan vara lite trixigt att få menyvalen att hamna på rätt nivå ibland, men efter några försök brukar det alltid fungera.

På Huvudmenyn, försök skapa lite menyer i flera nivåer, så att vi kan gömma dessa för att sedan ta fram som en drop down meny. På Sidfotsmenyn skapa bara länkar i en nivå, då vi ändå kommer att begränsa visningen till toppnivån.

Glöm inte att spara

Placera dina menyer i temat

Okej, du har nu aktiverat funktionen wp_nav_menu, du har skapat dina menyer och positionerat dem på rätt ställe på administrations sidan, men de dyker fortfarande inte upp någonstans, och du ser dem fortfarande inte. Det är för att du inte har sagt till i ditt tema var någonstans dessa menyer ska skrivas ut.

Öppna därför filen header.php och leta upp en plats högt upp på sidan där du tycker att din meny ska få existera, förslagsvis strax nedanför loggan till din hemsida. Där klistrar du sedan in följande rader:

1
2
3
<?php
    wp_nav_menu( array( 'theme_location' => 'main' ) );
?>

Och det är allt som behövs. Theme_location talar om vilken meny som ska skrivas ut, och i det här fallet vill du ha huvudmenyn som vi döpte till main så tidigt som i det första stycket av den här guiden i functions.php

Öppna sedan footer.php, leta upp ett snyggt ställe att placera din sidfotsmeny på, förslagsvis precis innan en </div>-tag, och klistra in följande:

1
2
3
4
<?php
    wp_nav_menu( array( 'theme_location' => 'footer',
                        'depth'          => '1' ) );
?>

Det som är intressant här är att vi har lagt till depth och satt det till värdet 1, vilket gör att vi bara visar toppnivå länkar på den här menyn. Theme_location sätter vi till footer då detta var namnet angivet i functions.php.

And thats it folks, om du uppdaterar din sida så har du dina menyer som du precis har skapat placerade på dem ställen du placerade dem på. Nu gäller det bara att snygga till dem lite. För en guide på hur man skapar Drop Down menyer av huvudmenyn läs min guide: Bygg en Drop Down meny för sidor i WordPress men byt ut menyn som beskrivs där till den som du har här.

Godtagbara parametrar till wp_nav_menu()

Du har sett att man kan ändra temapositionen och nivådjupet på menyerna som ska visas med några enkla parametrar. Vad mer kan man ändra frågar ni? Jag har listan:

menu
Om du vill specificera en exakt meny, vid namn, som ska dyka upp, så kan du göra det med menu, parametern accepterar id, slug eller namn.

container
Elementet som ringar in hela menyn är som standard en div, det kan du ändra med den här parametern.
Default: div

container_class
Elementet som ringar in hela menyn kan få en klass som du kan specificera här.
Default: menu-{menu slug}-container

container_id
Samma som ovan, men id:t i det här fallet. Och inget standard värde.

menu_class
Ul elementet som är själva menyn har vanligt vis klassen menu, men du kan ändra det här.
Default: menu

menu_id
Samma som ovan men id:t. Standard är menyns slug med en ökande siffra efter.
Default: menu slug, incremented

echo
Huruvida menyn ska skrivas ut direkt eller returneras till en variabel att leka friskt med.
Default: true

fallback_cb
Om menyn du specificerar, eller meny positionen du har angett inte har en meny skapad åt sig, så kan du här specificera en funktion som ska kallas istället. Perfekt om du gör temat åt kunder eller för nedladdning. Eller för bakåtkompatibilitet för den delen. Som standard använder listar den alla sidor.
Default: wp_page_menu

before
Skriver ut en text före varje länktext (i länken)

after
Skriver ut en text efter varje länktext (i länken)

link_before
Skriver ut en text före varje länk (innan <a>)

link_after
Skriver ut en text efter varje länk (efter </a>)

depth
Talar om hur måna nivåer som ska få visas maximalt. 2 betyder alltså första och andra nivån, 0 betyder alla nivåer
Default: 0

walker
Avancerat! Detta är till för att göra en egen vandringsfunktion som ska användas när menyn ska skrivas ut.

theme_location
Placeringen i temat som ska användas. Namnet på positionen måste överensstämma med namnet som användes i register_nav_menu() för att användaren ska kunna välja positionen i adminpanelen.

Styla dina menyer

När menyn sedan skrivs ut loopas dina meny val genom och skrivs ut på följande sätt, så att du kan styla dem i style.css på rätt sätt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="menu">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-1" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/om/">About</a>
            <ul class="sub-menu">
	        <li id="menu-item-2" class="menu-item menu-item-type-post_type">
                    <a href="http://www.wordpressguru.se/om/och_om_igen/">Om igen</a>
	        </li>
	        <li id="menu-item-3" class="menu-item menu-item-type-post_type">
	            <a href="http://www.wordpressguru.se/om/lank/">Länk igen</a>
	        </li>
            </ul>
        </li>
        <li id="menu-item-4" class="menu-item menu-item-type-post_type">
            <a href="http://www.wordpressguru.se/fraga_gurun">Fråga Gurun</a>
        </li>
    </ul>
</div>

Avslutning

Det var allt för den här gången. Nu borde ni kunna skapa riktigt snygga navigationsmenyer för, och uppdatera alla era gamla. Den här funktionen går nästan inte att misslyckas med, men om ni ändå skulle få problem, lämna en kommentar, så ska jag göra mitt bästa för att hjälpa er.

Glöm inte heller bort att det krävs minst version 3.0 av WordPress för att kunna använda detta, så har du inte uppdaterat än, gör det nu!


44 kommentarer till 'Så skapar du riktiga menyer i WordPress 3.0 med wp_nav_menu' »»

  • 1. Lotta skriver: |

    Gillar dina guider!!

    Ska vid tillfälle updatera till 3.0 å webben men kör det lokalt med wampserver för att leka lite, så detta ska testas!

    /nilema på wp-forumet


    • Tack så mycket Lotta. Jag tycker du gör helt rätt i att uppdatera. Glöm inte att göra en backup på din databas först bara så att du inte råkar bli av med någonting, om allting skulle skita sig.


  • 3. muki skriver: |

    funkar inte för mej

    när jag klistrar in koden i functions.php så visas koden över header och när jag har klistrat in koden i header.php (meny koden) så visas inte meny

    använder http://www.refueled.net/blank-wordpress-themes/ 3 kolumn tema


  • 4. muki skriver: |

    nu har de hänt lite saker.
    functions.php koden visas inte över header men när jag skapar meny och vill spara den i ”Huvudmeny” så trycker jag på spara men när jag laddar om meny sida så blir den inte sparad och meny visas inte på bloggen


    • Jag antar förstås att du använder dig av rätt ”spara”-knapp. Det finns en sparaknapp som är placerad inuti ”Temaposition”, det är just denna som du måste använda ifall du vill spara positionen.

      Om du drar in sidor till din meny, och klickar på spara på själva menyn, sparas sidorna då?


  • 6. Maria skriver: |

    Hej!

    Har inga problem med att skriva ut och skapa nya menyer, däremot skulle jag vilja ha en horisontell huvudmeny och när man klickar på en ‘item’ i den så visas tillhörande submeny. Som det är fn så visas alla meny ‘items’ i en lång rad utan att särskilja vad som är huvudmeny eller submeny. Css’erna funkar ju fint men hur gömmer man submenyn tills den är aktiv och hur får man huvudmenyn på rad 1 och submenyn på rad 2? :)

    Tack för tips!
    //Maria

    Ex. En sådan här meny är det vi söker: http://www.dn.se/ekonomi/


    • Som standard hamnar under menyer i en ”lista i en lista”, om du kollar källkoden för din genererade sida så borde den alltså se ut ungefär så här:

      <div class="menu">
          <ul>
              <li>
                  <a href="#">Huvudlänk</a>
                  <ul>
                      <li>
                          <a href="#">Undersida</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">En till huvudsida</a>
              </li>
          </ul>
      </div>

      Bekräfta först att så är fallet, så kan vi ta resten sen.
      (Lämna gärna länken till din hemsida, så är det lättare för mig att hjälpa till att felsöka)


  • Grym sida, kul att se en bra sida om 3.0 på svenska! Tack för det.

    Undrar hur jag ska lägga in delimiters emellan mina pages i menyn? Finns det någon lösning för detta i wp? parametern after och link_after erbjuder ju bara möjligheten att lägga in en sträng, inte en bild. Annars blir det javascript, men vet av erfarenhet att det ibland kan bli problem i wp. All input tas tacksamt emot!

    //C


    • Jo jag kan känt av samma problem med WordPress själv. Det är svårt att sätta specifika ikoner på sidor och kategorier när man vill generera fram dem utan att bygga något avancerat. Det är till och med svårt att lägga till ett streck mellan sidor utan att det dessutom kommer att dyka upp sist eller först i uppräkningen också.

      Min första tanke skulle vara att undersöka ifall ett plugin redan finns med den funktionaliteten, annars är det lättaste nog att skapa ett javascript i med fördel jQuery.

      Om du är kunnig i php så borde du även kunna använda dig av walker parametern, specificera din egen walker och lägga till en bild framför alla sidor på så vis.

      Berätta gärna om du hittar på någon bra lösning eller fortsätt bolla med mig om du har några tankar.


  • 10. Joakim skriver: |

    Hej,
    Tack för en bra guide!

    Jag har dock ett problem med att sub-/drop down-menyerna inte fungerar. Undermenyerna syns hela tiden, dvs inte som drop down. Du ser hur det blir här: http://www.joakimsterno.se

    Jag använder manifest temat. http://jimbarraud.com/manifest/


  • 11. Joakim skriver: |

    För att förtydliga lite.
    Mitt test med Lund och Stockholm i menyn ska alltså vara undermenyer till OM. Både Lund och Stockholm ska vara på samma nivå (nivå 2).

    Foto och kontakt är på första-nivån och inte på en tredje nivån i menyn. Avsikten är alltså att dessa två länkar ska vara placerade efter Om och inte underst.


    • Jag kan inte se någon Stockholm eller Lund på den där sidan alls. Antar att du har testat vidare och tagit bort dem igen.

      Använder du (1) någon av de gamla funktionerna för att generera menyn eller använder du (2) den nya wp-nav-funktionen?

      Om du (1) så var noga med att visa alla nivåer hierarkiskt. Du kan med val ställa in att visa menyn platt vilket skulle kunna skapa vad du beskriver ovan. Men standard inställningarna ska vara att visa allt hierarkiskt så det är troligtvis inte det…

      Om (2) var noga med att placera menyvalen i rätt nivåer i administrations menyn för menyer. Det räcker inte längre att tala om att sidan är en undersida till en annan, utan du måste även placera den så i menyn, om det är så du vill ha det.

      Ett sista förslag på feltestning är att kolla över css koden. Det är möjligt att du inte har absolutpositionerat undermenyn, vilket skulle kunna göra att den dyker upp bredvid sin parent.

      Lycka till.


  • hej
    behöver lite hjälp
    nu har jag lagt in 2 menyer. en under header och en över header. den som är under funkar bra men den som är över har själv valt lika sidor den ska välja. jag försöker ändra men bara ”custom pages” är där. kan inte lägga in hem knapp tex


    • Låter som att du har stavat fel när du talar om vilken meny som ska visas där. Det kommer resultera i att funktionen inte hittar din meny och då visar den bara alla sidor normalt som standard.

      Så kolla noga att namnet du angett i functions.php verkligen är samma som det i header.php


  • 17. Johanna skriver: |

    Är det bara jag som har haft problem med att menyn låser sig de senaste tvp veckorna eller något sånt? Jag kan inte längre flytta ordningen genom att dra-och-släppa. Jag har testat i både Firefox och Explorer.


    • <!-- Det här inlägget har försvunnit på grund av en databas krasch, om du är intresserad av vad som stod i kommentaren, vänligen kontakta mig så ska jag försöka återskapa kommentaren -->


  • Hej
    Kan man göra undermenyer som man sedan kan placera på/koppla till vissa sidor. Säg att jag har en meny som heter Recept och under den ligger Matbröd och Godsaker. Om jag klickar på Matbröd ska en sida öppna och till den (och alla sidor med matbrödsrecept) ska en meny med matbröd vara kopplad. Motsvarande om jag väljer Godsaker ska den menyn dyka upp. Jag håller på att testa och jag har så många recept i framförallt kategorin Matbröd så de får ej plats på lågupplöst skärm om de ligger som child till tex Matbröd.
    Se http://www.baksida.se/v2/


    • Hej Hans.
      Nu har jag funderat en stund på ditt relativt vanliga, men irriterande jobbiga problem.

      Tyvärr finns det inget bra sätt att skriva ut delar av en genererad meny, vilket skulle vara bäst i det här fallet, istället finns det näst bästa, nämligen wp_list_pages (eller wp_list_categorys ifall matbröd är en kategori).

      Detta funktioner kan specificeras med en ”child_of” vilket gör att endast barnen till en viss sida/kategori visas. Du kan således placera funktionen att skrivas ut i sidopanelen och specificera ”child_of” som page_id, vilket kommer att skriva ut barnen till sidan du är på.

      Den här sidan visar många bra exempel på kodsnuttar du kan använda: http://codex.wordpress.org/Function_Reference/wp_list_pages

      Lycka till


  • 21. Ann skriver: |

    Hej! Jag har tidigare skapat en drop down-meny efter din instruktion och det funkade mycket bra. Nu vill jag använda denna menylayout på wp_nav_menu. Jag förstår inte hur jag ska göra dock. Du skricer så här ”Bygg en Drop Down meny för sidor i WordPress men byt ut menyn som beskrivs där till den som du har här.” Har provat allt men får inte till det. Det låter så enkelt att bara ”byta ut”, men hur?


    • Hehe, det är verkligen så enkelt som det låter faktiskt. Jag antar att du har gått koden som står skriven här, och laggt till raderna i functions.php?

      Jag hoppas fortsättningsvis alltså också att du har gått in i administrationspanelen till meny menyn och skapat en ny Meny? Och sett att du kan spara (och dessutom gjort det) din nya meny på menypositionen som du specificerat i functions.php enligt guiden ovan? Om du gjort allt detta. Så ska det inte vara svårare än att ta koden

      wp_page_menu( $args );

      mot

      wp_nav_menu( array('menu' => 'Min meny' ));

      .

      Lycka till


      • 23. Ann skriver: |

        Tack för svar! Har följt dina manualer till punkt och pricka. Superbra instruktioner, men jag är nybörjare på php så om jag ska göra något ytterligare kör jag mest fast. Har som sagt gjort det du skriver (och en massa annat) men får det inte att fungera. Har kort om tid på mig att fixa så jag får nöja mig med en gammal meny tills vidare och göra ett nytt försök vid senare tillfälle.

        Däremot lyckades jag skriva ut undermenyer med hjälp av ditt svar på ett annat inlägg här ovan. Det är jag lite stolt över. :-)


        • Hm… Tråkigt att du inte får till det. Det ska inte behöva vara mer förändring än det jag har skrivit ovan. Så länge du får det att fungera tills vidare i alla fall, så antar jag att man ska vara glad.

          Lycka till.


  • 25. Karim skriver: |

    Mycket intressant!
    Jag vill veta var i navigation jag befinner mig. Är det möjligt?

    Jag har en struktur som:
    kat1->sida1, sida2, sida3…
    kat2->sida4, sida5
    osv..

    Om jag navigerar ned till sida3, hur vet jag att jag befinner mig under kat1?


    • Det finns lite klasser som sätts på li-taggarna beroende på hur de hänger ihop med sidan man är på.

      De är tex:

      current-post-ancestor
      current-post-parent
      current-menu-parent
      current-menu-item

      Det finns olika sådana här klasser beroende på ifall meny itemet är en sida, kategori eller statisk länk.

      Visa källkoden för sidan och kolla din meny, så kommer du att se vilka klasser som är satta.

      Lycka till


  • 27. Klara skriver: |

    Underbart inlägg! Som jag kämpat för att få det att fungera innan jag hittade det här! Tack!!

    Jag sitter nu med en sida för kunds räkning och har ett litet bekymmer. Kunden vill kunna lägga till fler menu-items allt eftersom och med layouten så ska menyn visas som kolumner. Därför har jag gjort tre menyer där varje meny är en kolumn. Dock behövs ju inte de ”extra” kolumnerna och därmed två menyer som är ”gömda” tills vidare. Nu verkar det bara inte som om man kan ta bort den menyn och låta den vara tom utan det dyker upp en lista, oformatterad som inte går att få bort?

    När jag kollar källkoden heter den rätt och slätt ”menu” och ingen utav mina riktiga menyer heter så? Vad kan jag ha gjort för fel?


    • Om menyn du menyn med tema-positionen som du har specificerat inte existerar i temat så kommer menyn att visa en ”fallback” meny. Per default visar den menyn man får om man använder ”wp_get_page_menu” men du skulle kunna ändra argumentet för fallback funktionen till en egen gjord funktion om inte returnerar någonting, eller i alla fall en tom sträng. Borde fungera.


  • 29. Klara skriver: |

    Tack för ett så snabbt svar!

    Det vore jättefint med en hint om hur jag ska lägga in det, jag är rätt så ny på det här med php (o wordpress) så det är med lite skräckblandad jag gett mig in i det här..

    Såhär ser det ut i functions.php nu

    function register_my_menus() {
    register_nav_menus(array(
    ‘works’ => __( ‘works’ ),
    ‘works_extra’ => __( ‘works_extra’ ),
    ‘commissions’ => __( ‘commissions’ ),
    ‘commissions_extra’ => __( ‘commissions_extra’ ),
    ‘info’ => __( ‘information’ ),
    ));
    }

    Hur lägger jag in fallback_cb=false? Kan man göra det för bara de två extra-menyerna?

    Är det här det rätta formatet?
    <?php wp_nav_menu( array( ‘fallback_cb’ => ‘false’ ) ); ?>

    Återigen, tack!


    • Skapa först en funktion i function.php:

      function no_return_function(){
          return "";
      }
      

      Sen lägger du till raden om fallback functionen bland listan på saker när du skapar menyn sen:

      <?php
          wp_nav_menu( array( 'theme_location' => 'main',
                              'fallback_cb' => 'no_return_function' ) );
      ?>
      


  • 31. Klara skriver: |

    Hm.. jag är inte helt säker på att jag förstår det rätt nu.

    Jag la in funktionen i functions.php och det andra i header.php, efter mina menyer och får ändå fallback-menyerna på sidan..

    <?php
    wp_nav_menu( array( ‘theme_location’ => ‘main’,
    ‘fallback_cb’ => ‘no_return_function’ ) );’
    ?>

    Jag bytte ‘main’ mot ‘works_extra’ och gjorde en till för ‘commissions_extra’ samt tog bort det sista ‘ efter ; eftersom det verkade vara ett typo. Får det inte att fungera… :S


  • 32. Klara skriver: |

    Jag försökte igen och missade i min iver ett par detaljer, nu fungerar det!
    Du är fenomenal!

    Tack så jättejättemycket!


  • 34. Klara skriver: |

    Det här kanske inte är helt relaterat, men hur får man fram så att man på den aktiva sidan kan se inte bara sidans namn utan även namnet på den över i hierarkin?


    • din globala variable ”$post” har informationen om dess parent (enligt page heirarki) kopplad i sig. Du kan alltså skriva:

      <?php echo get_the_title($post->post_parent); ?>
      

      så borde det fungera. Detta är dock som sagt sidans riktiga parent enligt ”Pages” och inte den som råkar vara ovanför den enligt menyn. Om du ska kolla menyn, så blir det väldigt avancerat.


  • 36. Klara skriver: |

    Åh, precis vad jag letade efter! Det räckte med att jag ställde in en parent åt sidan, vilket ändå var bäst eftersom den andra ”kolumnen” inte har en rubrik i menyn!

    Tack igen!


  • 38. Klara skriver: |

    Jag får problem när jag ska lägga mitt tema online.

    Parse error: syntax error, unexpected ‘:’ in /customers/klarabara.se/klarabara.se/httpd.www/wordpress/wp-content/themes/blankslate/functions.php on line 1

    Ominstallerade allt på grund av annat jox, la till temat blank_slate, såg att det fungerade. Bytte till min CSS-fil och det fungerade. La in följande kod i functions och får då det här felet igen.. vad är det jag gör fel?


    function no_return_function(){
    return "";
    }
    function register_my_menus() {
    register_nav_menus(array(
    'works' => 'works',
    'works_extra' => 'works_extra',
    'film' => 'film',
    'commissions' => 'commissions',
    'commissions_extra' => 'commissions_extra',
    'info' => 'information',
    ) );
    }
    add_action( 'init', 'register_my_menus' );

    Oändligt tacksam för hjälp!


  • 39. Klara skriver: |

    Jag har löst problemet, det verkade vara själva uppladdningen av filen som stökade. Tack ändå!


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>