Toen WordPress 3 ons de nieuwe Menus-functionaliteit presenteerde, veranderde het de manier waarop we navigatie-menu's voor altijd bekeken. We waren niet langer gebonden aan het gebruik van de normale paginalijstfuncties of aan het bouwen van onze eigen aangepaste menufuncties om categorie- en pagina-menu's te integreren, evenals externe of hard-linked items binnen een nav-menu. Maar hoe kunnen we deze nieuwe functionaliteit gebruiken? In deze tutorial duiken we diep in alles dat het wp_nav_menu functie kan doen, gebruik de Walker Class om een subbeschrijving toe te voegen en een aantal gerelateerde functies aan te raken.
De parameters
De functie heeft verschillende parameters om mee te werken. Hier zijn de standaardwaarden zoals vermeld in de WordPress.org Codex:
Met behulp van deze parameter kunnen we een themalocatie instellen die vervolgens op de menu-pagina's wordt gebruikt om een menu in dat deel van uw thema te laten werken, zonder dat u handmatig hoeft te bepalen welk menu daar moet verschijnen. Dit is erg handig voor themadistributeurs omdat je conditionals kunt gebruiken om een menu alleen weer te geven als de gebruiker een menu voor die locatie heeft gedefinieerd. De enige andere vereiste is dat u de functie gebruikt register_nav_menu () om die locaties te registreren. Dit gebeurt meestal vanuit uw functiebestanden wanneer u ondersteuning voor menu's instelt.
Laten we beginnen met het bouwen van onze aangepaste menufunctieparameters, ervan uitgaande dat we een themapositie genaamd "primair".
$ params = array ('theme_location' => 'primair');
Menu
Deze parameter wordt gebruikt om handmatig te definiëren welk menu moet worden gebruikt. In ons voorbeeld stellen we alleen een algemene menulocatie in en definiëren we niet een exact te gebruiken locatie, maar als we de functie zouden willen vertellen om een menu met de naam "Primaire navigatie" te gebruiken, zouden onze parameters er als volgt uitzien:
Standaard wordt ons menu ingepakt in een div, maar als je op mij lijkt, heb je dit meestal niet nodig en wil je waarschijnlijk de hoeveelheid verminderen divs en andere tags die worden gebruikt om uw code zo overzichtelijk mogelijk te houden. U kunt deze parameter ook gebruiken om een andere tag te definiëren, zoals een html5 of . Voor ons voorbeeld willen we niet dat een container de standaardcontainerwaarden wijzigt, omdat de Twenty Eleven-themastijlen erop vertrouwen dat het er is.
Containerklasse en container-ID
Zoals je vrijwel kunt raden, worden deze parameters gebruikt om een klasse en een ID in te stellen voor de container. Omdat we dit helemaal weglaten, hoeven we geen waarden te definiëren.
Menuklasse en menu-ID
Deze werken net als de vorige parameters, maar deze keer willen we zeker een ID van "nav"omdat dat de ID is die we in onze stylesheet zullen gebruiken om de navigatiebalk te stylen.
U kunt deze parameter gebruiken om aan te geven of u de resultaten wilt weergeven (echoën) of retourneren voor gebruik in PHP. Dit item is boolean, dus om het terug te zetten, stelt u deze parameter eenvoudig in op 0.
Fallback CB
Dit is een callback-functie waarnaar u kunt terugvallen als er geen menu wordt gevonden. Standaard wordt hiervoor de oude stand-by gebruikt wp_page_menu () en geeft ook dezelfde parameters door aan deze functie.
Voor en na
Deze items worden gebruikt om te definiëren wat voor en na de ankertags kan worden geplaatst (). U kunt deze gebruiken om aan elk item vooraf te gaan met een verticale balk of om de nav-items in een span-tag in te pakken.
Link Before and Link After
Deze werken hetzelfde als de vorige items die we hebben behandeld, behalve dat wat u ook definieert zich binnen de ankertags bevindt. Ons voorbeeld vereist niet dat we deze gebruiken, dus zullen we ze negeren en het standaard lege item laten zijn.
Items Wrap
Standaard worden de items verpakt in een ongeordende lijst met het menu-ID en de menuklasse. Met deze parameter kunt u dat wijzigen als u dat wilt.
Diepte
Deze parameter is erg handig als u twee keer hetzelfde menu wilt gebruiken, maar niet wilt dat onderliggende items worden weergegeven op de locatie die u instelt met de wp_nav_menu () functie. Als u bijvoorbeeld wilt dat de primaire navigatie een vervolgkeuzemenu op het tweede niveau bevat, kunt u dit op de standaardinstelling laten staan. Als u vervolgens dezelfde bovenliggende items in een voettekst-navigatie wilt gebruiken en de onderliggende items wilt weglaten, kunt u deze parameter instellen op een diepte van 1. De standaard "0" betekent dat alle niveaus worden uitgevoerd. Om ons voorbeeld beknopt te houden, gaan we ervan uit dat de primaire navigatie geen onderliggende items bevat.
wandelaar
De parameter wordt gebruikt om een rollatorobject te definiëren dat kan worden gebruikt om te manipuleren hoe de volledige functie werkt en de informatie ervan weergeeft. In het volgende gedeelte bespreken we een goed voorbeeld.
Een beschrijving toevoegen aan de items in het Nav-menu
Voor ons voorbeeld willen we een subbeschrijving toevoegen aan elk hoofdmenu-item. De functionaliteit om de beschrijving zelf toe te voegen is al aanwezig in het WordPress Menu-systeem. Als u dit wilt inschakelen, gaat u naar Menu's en drukt u vervolgens op het tabblad schermopties in de rechterbovenhoek. De optie die je nodig hebt om zeker te zijn, moet worden geklikt, zou zeggen "Beschrijving". Als dit is aangevinkt, ziet een menu-item er nu als volgt uit:
Zodra we onze beschrijvingen hebben ingevuld, moeten we de Walker-klasse maken en deze aan de wp_nav_menu () parameters. We zullen de klas bellen description_navigation dus onze code met volledige parameters zou er als volgt uit moeten zien:
Er gebeurt hier veel. Voor meer informatie over Walker-lessen in het algemeen, wil ik u doorverwijzen naar een andere tutorial: Understanding the Walker Class. Het belangrijkste onderdeel dat u hier moet begrijpen, is dat we de uitvoer van elk koppelingsitem opnieuw opbouwen en de beschrijving toevoegen. Op regel 19 van het bovenstaande fragment kun je zien waar we de artikelbeschrijving vinden als deze bestaat en maak daar de waarde van $ beschrijving ingepakt in een span-tag, zodat we de beschrijvingen afzonderlijk kunnen stylen. Vervolgens voegen we in regel 24-29 waarin we het koppelingsitem weer samenvoegen, de beschrijving toe vlak voor het sluiten van de ankertag, zodat deze deel wordt van de koppeling zelf.
Met het Twenty Eleven-thema zou je nu iets moeten hebben dat er zo uitziet:
Style It Up
Laten we een beetje styling toevoegen om het leesbaarder te maken:
Dit zal de hoogte en opvulling van elke link veranderen, ervoor zorgen dat de beschrijving binnen de span-tag naar een eigen regel gaat en de lettergrootten en -kleuren een beetje aanpassen voor een eindresultaat dat er als volgt uitziet:
Relatie Functies
Niet alleen kunt u gebruiken wp_nav_menu () om uw menu met alle aanpassingen uit te voeren, kunt u een beetje verder gaan met enkele van de bijbehorende functies.
has_nav_menu ()
Deze functie is geweldig om alleen een bepaald menu weer te geven als dat menu is toegewezen aan uw themalocatie. U wilt bijvoorbeeld een topnavigatie voor uw thema maken voor minder navigatie-items die een gebruiker misschien niet in zijn hoofdnavigatie wenst. Dit kunnen zaken zijn als een startlink, 'Adverteer bij ons' of andere lagere oproepen tot actie. Maar als themadistributeur, als je niet weet of dat iets is dat de gebruiker wil gebruiken, gebruik dan gewoon een voorwaarde zoals:
if (has_nav_menu ('top-menu')) wp_nav_menu ('theme_location =' top-menu ');
wp_get_nav_menu_items ()
Deze functie retourneert een reeks items uit een bepaald menu. Dit kan met name handig zijn als u een aangepaste menulijst wilt bouwen zonder een Walker Class te gebruiken. U verliest veel functionaliteit, zoals de huidige klasse van het menu-item, maar het is een geweldige manier om door een reeks menu-items te bladeren voor een eenvoudige oplossing.
Conclusie
Er zijn veel dingen die u kunt doen om uw navigatiemenu's aan te passen wanneer u meer weet over de flexibiliteit die wordt geboden door ingebouwde parameters en om meer controle te hebben met de Walker Class. Moet een andere span-tag toevoegen aan de klasse van 'icoon"voor aangepaste pictogrammen voor elk item? Geen probleem.
Volledige controle hebben over de plaatsing en uitvoer van menu's vergroot uw mogelijkheden als een themaontwikkelaar tot een onmetelijke hoeveelheid mogelijkheden. Wat zijn enkele van de dingen die u die Walker-klasse kunt gebruiken?
Share
Accentsconagua
