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' »»

  • hej

    Mina widges har låst sej, vad kan ha hänt?

    1. Vad som händer är att jag kan inte dra och släppa?
    2. Ej heller klicka i pilen så jag får fram innehållet för redigering mm?

    Verkar som om hela systemet har låst sej…..

    någon som kan ge mej tips

    mvh
    kent


    • 41. Jonas skriver: |

      Hej, vissa installerade plugins kan ge denna effekten. Testa att inaktivera en efter en och testa om widgets funkar som det ska efter inaktivering.


  • Hej,
    Tack för en bra guide!
    Jag har dock problem med att min meny blir vertikal istället för horisontell. Hur löser jag detta? Är det CSS som spökar?

    Div taggen som omger php-funktionen ser ut såhär:

    Och följande ligger i css-filen:
    #main-nav {
    padding: 0 0 .5em 0;
    overflow: hidden;
    }

    #main-nav ul {
    list-style-type: none;
    }

    #main-nav li.page_item {
    margin-right: 2.2em;
    float: left;
    }

    #main-nav li a {
    font-size: 1.2em;
    line-height: 1.6;
    padding-left: 8px;
    }


  • Hej igen,

    Verkar som att jag lyckades få till en horisontell meny men mitt problem nu istället är att om jag trycker på en av menyerna, exempelvis ”About”, så hamnar den längst till vänster i menyn.

    Detta kan ju iofs vara användbart men skulle åtminstone vilja veta hur jag får de att ligga kvar på ”sin” plats hela tiden. Eventuellt som en bonus också hur jag gör för att den ska ha en färgmarkering för att tydliggöra vilken sida man är på.

    Tack!


  • Jag stör igen,
    Tydligen är menyn fortfarande vertikal i Firefox, fungerar dock i Chrome och IE.


Lämna en kommentar

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