Att skapa menyer i WordPress kan vara rätt krångligt, och det finns ett antal sätt att skapa en, jag tänkte gå igenom ett par av mina favoriter. Vi börjar med att registrera menyer för olika platser, för du har väl tänkt på att man kan ha flera menyer i vissa teman? Så detta ska in i functions.php:!

 

wp_nav_menu

När du har lagt till koden på din functions.php, kommer du att märka att du kan hantera menypositioner. Du kan nu hitta dina nya menyer under:

http://din_sida/wp­-admin/nav-­menus.php

I funktionen wp_nav_menu som har 15 parametrar totalt att välja mellan, och här ser vi standard värdena för dom:

 

Och dessa har alla en betydelse så klart:

  • $theme_location – Menyn som du vill visa (som registrerades i functions.php).
  • $menu – Kalla en meny med id, namn eller slug.
  • $container – Vad du vill omgärda ul elementet med, som t.ex. div eller nav.
  • $container_class – Klassen som läggs på $container.
  • $container_id – ID som läggs på $container.
  • $menu_class – Klassen som läggs på ul elementet i menyn.
  • $menu_id – The id to be applied to the ul element of the menu.
  • $echo – Om man ska echo menyn eller return det.
  • $fallback_cb – Om ingen meny finns, vilken fallback funktion som ska användas.
  • $before – Text innan ankar länken.
  • $after – Text efter ankar länken.
  • $link_before – Text innan länk-texten.
  • $link_after – Text efter länk-texten.
  • $depth – Hur många nivåer av meny hierarkin som ska visas.
  • $walker – Anpassad objekt.

Som tur är behöver man inte skriva in alla. För att ange vilken meny man anropar ska du använda $theme_location parametern, som syftar på det namn du registrerat i functions.php.

Till exempel, om vi använder exemplet från början (i functions.php), kan du nu lägga till följande kod till dina mallar för att visa huvudnavigering (header-menu):

 

Som du ser har jag bara en parameter i funktionen, men vi kan enkelt lägga till flera, och jag tänkte att vi lägger till nav som ett omgärdande element och en klass main-menu till den:

 

Klasserna ”current_page_item” & ”current-menu-item”

WordPress skapar automatisk ett antal klasser för navigationen, och om du kollar på källkoden för menyn vi precis skapade så hittar du liknande HTML-kod:

 

Som du ser blir det en massa klasser men två viktigaste är; ”current_page_item” och ”current-menu-item”, för med hjälp av dom kan vi styla menyknappen som är aktiv (sidan man är på), och ”menu-item-home” är specik för hemsidan.”menu-item” är en generell klass som kommer att skapas för varje <li> element, i alla menyer och resten är unika i installationen. Här är en lista på  standard klasser som WordPress skapar:

Man kan enkelt lägga till en egen klass för en enskild länk, genom att klicka på ”Panelinställningar” högst upp på sidan Menyer, då kommer en rullgardinsmeny att sänkas ner. Därifrån hittar du ett alternativ för att visa ”CSS Klasser” under rubriken ”Visa avancerade menyalternativ”:

Bild på "Panelinställningar" på sidan "Menyer"
”Panelinställningar” på sidan ”Menyer”

Nu kan du lägga till en klass under menyinställningar:

Bild på Admin Panelen » Menyer » CSS Klass
Admin Panelen » Menyer » CSS Klass
Menyer i WordPress

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: