Op dit punt hebben we geleerd waarom de instellingen-API ertoe doet, we hebben alles geleerd over secties, velden en instellingen en we hebben zelfs een Sandbox-thema ingesteld dat we gebruiken om functionaliteit te ontwikkelen terwijl we de API verkennen.
In dit artikel gaan we kijken hoe we kunnen communiceren met het WordPress-menusysteem. Het is belangrijk om op te merken dat dit geen onderdeel is van de Settings API, maar het is zo nauw verwant dat we ons moeten vertrouwd maken met het gebruik ervan.
Aangezien onze thema's en / of plug-ins complexer worden, moeten we alle verschillende manieren kennen waarop we ze in het WordPress-dashboard kunnen opnemen. In dit artikel gaan we de verschillende WordPress-menufuncties bekijken, wanneer ze moeten worden gebruikt, wanneer ze moeten worden vermeden en in welke situaties elke functie zich het best leent.
WordPress biedt vier verschillende manieren om onze eigen menu's op te nemen. Hieronder zullen we elk menu bekijken, de parameters die elk accepteert en codevoorbeelden voor het gebruik ervan in projecten. We willen een duidelijk begrip ontwikkelen van hoe de API werkt, omdat deze een basis kan leggen voor ons toekomstige werk.
Menupagina's verwijzen naar de menu-items die u ziet wanneer u zich voor het eerst aanmeldt bij WordPress. Dat wil zeggen, ze zijn de beschikbare opties in het menu aan de linkerkant die een lijst met submenupagina's kunnen bevatten.
Om uw eigen menupagina in het WordPress Dashboard te introduceren, gebruikt u de functie add_menu_page.
We zullen een praktisch voorbeeld in een moment bekijken, maar laten we eerst de functie bekijken - het accepteert zeven argumenten (vijf vereist, twee optioneel):
Laten we een voorbeeld bekijken. Zoek functions.php in de Sandbox van WordPress Settings en voeg de volgende twee functies toe:
function sandbox_create_menu_page () add_action ('admin_menu', 'sandbox_create_menu_page'); function sandbox_menu_page_display ()
Merk op dat we de admin_menu hook gebruiken om ons menu-item te registreren. Deze functie wordt geactiveerd direct nadat het menu voor basisbeheer is geïnstalleerd, dus je wilt je menu hier registreren zodat WordPress het weergeeft terwijl de rest van de menu's worden weergegeven.
Stel vervolgens het basismenu-item in. In overeenstemming met de artikelen eerder in deze serie, is dit wat we van plan zijn te doen:
Makkelijk genoeg, toch? Laten we doorgaan en ons menu toevoegen. Nogmaals, kopieer en plak deze code niet. Lees het, noteer de opmerkingen en zorg ervoor dat je volledig begrijpt wat we doen:
function sandbox_create_menu_page () add_menu_page ('Sandbox Options', // De titel die moet worden weergegeven op de bijbehorende pagina voor dit menu 'Sandbox', // De tekst die moet worden weergegeven voor dit menu-item 'administrator', // Welk type van gebruikers kunnen dit menu 'sandbox', // De unieke ID - dat wil zeggen, de slug - zien voor dit menu-item 'sandbox_menu_page_display', // De naam van de functie die moet worden aangeroepen bij het renderen van het menu voor deze pagina "); // end sandbox_create_menu_page add_action ('admin_menu', 'sandbox_create_menu_page');
Vernieuw nu uw WordPress beheermenu en u zou een nieuw menu-item moeten zien. Wanneer u erop klikt, ziet u een lege pagina verschijnen.
Het is duidelijk dat dit niet erg functioneel is. Laten we de callback-functie uitstippelen die we eerder hebben gedefinieerd om weer te geven iets op het scherm:
function sandbox_menu_page_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // end sandbox_menu_page_displaysandbox
'; $ html. = '
De definitieve versie van uw code zou er ongeveer zo uit moeten zien:
/ ** * Voegt een nieuw hoofdmenu toe aan de onderkant van het WordPress beheermenu. * / function sandbox_create_menu_page () add_menu_page ('Sandbox Options', // De titel die moet worden weergegeven op de bijbehorende pagina voor dit menu 'Sandbox', // De tekst die moet worden weergegeven voor dit menu-item 'administrator', // Welk type gebruikers kunnen dit menu 'sandbox', // De unieke ID - dat wil zeggen, de slug - zien voor dit menu-item 'sandbox_menu_page_display', // De naam van de functie die moet worden aangeroepen bij het renderen van het menu voor deze pagina ") ; // end sandbox_create_menu_page add_action ('admin_menu', 'sandbox_create_menu_page'); / ** * Berekent de basisweergave van de menupagina voor het thema. * / function sandbox_menu_page_display () // Maak een koptekst in de standaard WordPress ' wrap 'container $ html =''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // end sandbox_menu_page_displaysandbox
'; $ html. = '
Afgezien van hoe u de functie add_menu_page daadwerkelijk kunt gebruiken, is misschien wel de meest subtiele manier om een menu-item in WordPress weer te geven. We zullen dit in de loop van de serie dieper bekijken, maar het is belangrijk om nu op te merken terwijl we beginnen met het verkennen van elk van de verschillende soorten menu's..
Hoewel dit grotendeels onvolledig is, voegen we hier de rest van dit artikel en de rest van de zelfstudie aan toe.
Een opmerking over positionering: Veel ontwikkelaars beschouwen het positie-argument als slechte etiquette omdat het de standaard gebruikerservaring met WordPress vermengt. Als u bovendien een positie definieert en een ander thema, plug-in of functie dezelfde positie gebruikt, kan een van de menu-items worden overschreven.
Submenu's zijn net als menu's met de uitzondering dat ze tot een ander menu behoren - ze hebben een bovenliggend item. Het is dus duidelijk dat u geen submenu kunt maken zonder eerst een menuoptie te maken. Natuurlijk, zoals we in het vorige artikel zagen, kunnen submenu-items worden geïntroduceerd in bestaande menu-items - niet alleen in aangepaste menu-items.
In dit artikel introduceren we een submenupagina in ons eigen aangepaste menu-item. Maar laten we voordat we dat doen eens kijken naar de functie add_submenu_page en de parameters die worden geaccepteerd:
Als u een menu-item aan een van de bestaande menu's wilt toevoegen, raadpleegt u de tabel in het vorige artikel.
Laten we beginnen met het registreren van een submenu voor het bestaande menu hierboven. We willen het volgende doen:
Bekijk de volgende code - we zullen dit direct onder onze oproep toevoegen aan add_menu_page:
add_submenu_page ('sandbox', // Registreer dit submenu met het hierboven gedefinieerde menu 'Sandbox-opties', // De tekst naar het display in de browser wanneer dit menu-item actief is 'Opties', // De tekst voor dit menu-item ' beheerder ', // Welk type gebruikers dit menu kunnen zien' sandbox_options ', // De unieke ID - de slug - voor dit menu-item' sandbox_options_display '// De functie die wordt gebruikt om het menu voor deze pagina naar het scherm te renderen);
Vergeet niet om de callback te definiëren, zelfs als deze leeg is. Dat wil zeggen, vergeet niet om deze functie aan uw bestand toe te voegen (we zullen dit tijdelijk toevoegen):
function sandbox_options_display () // einde sandbox_options_display
Wanneer u uw browser ververst, zou u nu moeten zien twee submenu-items direct onder het menu "Sandbox". Merk op dat WordPress op zichzelf een submenu-item creëert - het is een submenu-item dat overeenkomt met het menu-item en de callback-functie gedefinieerd. De tweede is de nieuwe submenuoptie die we zojuist hebben gedefinieerd, hoewel deze geen inhoud oplevert.
Om dit op te lossen, laten we beginnen met het introduceren van een basispagina. Werk de callback-functie van het submenu bij om er als volgt uit te zien:
function sandbox_options_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // einde sandbox_options_displaySandbox-opties
'; $ html. = '
Ververs je browser opnieuw en je zou een standaard paginatitel moeten zien als je de nieuwe selecteert opties submenu-item.
Hoewel dit niet verplicht is, moet u er rekening mee houden dat u het hoofdmenu-item en het opties menu-item verwijzen naar dezelfde inhoud - gewoon de callback in de functie ad_menu_page updaten naar de sandbox_options_display
functie die we zojuist hebben gedefinieerd.
Als u een WordPress-plug-in ontwikkelt, zijn er een aantal verschillende manieren waarop uw product kan worden gekoppeld aan het platform.
Met name uw plug-in ...
Om het voor ontwikkelaars van plug-ins gemakkelijker te maken om hun opties op te nemen in bestaande WordPress-menu's, biedt de WordPress API de volgende functie: add_plugins_page.
Maar wacht. Als je de bovenstaande voorbeelden hebt gevolgd, heb je waarschijnlijk gemerkt dat er geen onderscheidbaar verschil is tussen add_plugins_page en add_submenu_page. Je hebt gelijk. add_plugins_page biedt dezelfde functionaliteit als de add_submenu_page, maar er zijn twee primaire verschillen:
Hoewel je add_submenu_page zeker kunt gebruiken om hetzelfde doel te bereiken, ben ik altijd een fan van het gebruik van functies die bedoeld zijn voor een specifiek gebruik, zelfs als er een andere API-functie is die hetzelfde doet. Wanneer je dit doet, laat je zien dat je de API gebruikt zoals de ontwikkelaars het bedoeld hebben en je maakt je code een beetje meer samenhangend, omdat je codebase nauwer is afgestemd op hoe het samenwerkt met het kernplatform.
De ontwikkeling van plug-ins valt buiten het bereik van deze specifieke serie, maar het is niet helemaal irrelevant. Hoewel er geen wijzigingen in ons Sandbox-thema worden aangebracht, wil ik wel een eenvoudig voorbeeld geven van hoe deze specifieke functie te gebruiken.
Laten we eerst de argumenten bekijken die add_plugins_page accepteert:
Hier is een eenvoudig voorbeeld dat precies laat zien hoe het te gebruiken. Merk op dat je dit in je functions.php bestand kunt opnemen, maar dat is het niet onderdeel van het Sandbox-thema waar we aan werken en in plaats daarvan in de context van een plug-in moeten worden gebruikt.
Stel eerst de aanroep in op de API-functie - merk op dat dit de admin_menu-hook gebruikt:
function sandbox_example_plugin_menu () add_plugins_page ('Sandbox Plugin', // De titel die moet worden weergegeven in het browservenster voor deze pagina. 'Sandbox Plugin', // De tekst die moet worden weergegeven voor dit menu-item 'beheerder', // Welke type gebruikers kunnen dit menu-item 'sandbox_plugin_options', // De unieke ID - dat wil zeggen, de slug - zien voor dit menu-item 'sandbox_plugin_display' // De naam van de functie die moet worden aangeroepen bij het renderen van de pagina voor dit menu); // end sandbox_example_plugin_menu add_action ('admin_menu', 'sandbox_example_plugin_menu');
Stel vervolgens de functie in die de weergave van de plug-in weergeeft:
function sandbox_plugin_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // einde sandbox_plugin_displaySandbox-plug-inopties
'; $ html. = 'Er zijn momenteel geen opties. Dit is alleen voor demo-doeleinden.
'; $ html. = '
Vernieuw je WordPress Dashboard, plaats de muisaanwijzer op de plugins menu en u zou een nieuw menu-item moeten opmerken. Niet slecht, he?
De definitieve versie van de code zou er als volgt uit moeten zien:
/ ** * Deze functie introduceert een enkele themamenuoptie in het WordPress 'Plug-ins' * -menu. * / function sandbox_example_plugin_menu () add_plugins_page ('Sandbox Plugin', // De titel die moet worden weergegeven in het browservenster voor deze pagina. 'Sandbox Plugin', // De tekst die moet worden weergegeven voor dit menu-item 'beheerder', / / Welk type gebruikers dit menu-item 'sandbox_plugin_options', // De unieke ID - dat wil zeggen, de slug - kan zien voor dit menu-item 'sandbox_plugin_display' // De naam van de functie die moet worden aangeroepen bij het renderen van de pagina voor dit menu) ; // einde sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_plugin_menu'); / ** * Hiermee wordt een eenvoudige pagina weergegeven die moet worden weergegeven voor het hierboven gedefinieerde themamenu. * / function sandbox_plugin_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // einde sandbox_plugin_displaySandbox-plug-inopties
'; $ html. = 'Er zijn momenteel geen opties. Dit is alleen voor demo-doeleinden.
'; $ html. = '
Nogmaals, deze functie maakt geen deel uit van ons Sandbox-thema omdat het meer gericht is op de ontwikkeling van plug-ins; het is echter de moeite waard om te behandelen voor degenen onder u die de Settings API gebruiken in uw ontwikkelingsinspanningen voor plug-ins.
Net als bij plug-ins, biedt WordPress een API-functie voor het introduceren van menu's specifiek voor thema's. Het lijkt erg op de plugin-menufunctie, omdat het nog een andere manier is om een submenu te introduceren in bestaande menu's. Het belangrijkste verschil is dat het submenu wordt toegevoegd aan de Verschijning menu.
Net als bij het voorbeeld van de plug-in eerder in dit artikel zullen we bekijken hoe we deze functie kunnen gebruiken, maar we zullen het niet opnemen in ons Sandbox-thema. Dit is puur bedoeld om aan te tonen hoe u de functie kunt gebruiken voor het geval u ervoor kiest om deze route te volgen in uw persoonlijke werk.
Eerst zullen we de argumenten bekijken die add_theme_page accepteert. U zult merken dat ze net zo zijn als die vereist voor het plugin-menu en zeer vergelijkbaar zijn met de submenu-functies die we eerder hebben geschetst:
add_theme_page accepteert de volgende argumenten:
Net als bij de andere functies, zullen we een aantal voorbeeldfuncties maken die laten zien hoe deze in uw project zijn opgenomen. Merk op dat de aanroep van add_theme_page kan worden toegevoegd aan functions.php en, in tegenstelling tot de aanroep van add_plugin_page, moeten verblijf hier bij het ontwikkelen van uw thema.
Eerst de oproep om het menu-item in te stellen:
function sandbox_example_theme_menu () add_theme_page ('Sandbox Theme', // De titel die moet worden weergegeven in het browservenster voor deze pagina. 'Sandbox Theme', // De tekst die moet worden weergegeven voor dit menu-item 'beheerder', // Welke type gebruikers kunnen dit menu-item 'sandbox_theme_options', // De unieke ID - dat wil zeggen, de slug - zien voor dit menu-item 'sandbox_theme_display' // De naam van de functie die moet worden aangeroepen bij het renderen van de pagina voor dit menu); // einde sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_theme_menu');
Vervolgens stellen we een functie in om de pagina met opties weer te geven:
function sandbox_theme_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // einde sandbox_theme_displaySandbox-thema-opties
'; $ html. = 'Er zijn momenteel geen opties. Dit is alleen voor demo-doeleinden.
'; $ html. = '
Vernieuw nu het WordPress-dashboard, plaats de muisaanwijzer op de Verschijning menu en zou u uw nieuwe menu-item moeten zien. Eenvoudig!
De definitieve versie van de code zou er als volgt uit moeten zien:
/ ** * Deze functie introduceert een enkele themamenuoptie in het menu 'Vormgeving' * van WordPress. * / function sandbox_example_theme_menu () add_theme_page ('Sandbox Theme', // De titel die moet worden weergegeven in het browservenster voor deze pagina. 'Sandbox Theme', // De tekst die moet worden weergegeven voor dit menu-item 'beheerder', / / Welk type gebruikers dit menu-item 'sandbox_theme_options', // De unieke ID - dat wil zeggen, de slug - kan zien voor dit menu-item 'sandbox_theme_display' // De naam van de functie die moet worden aangeroepen bij het renderen van de pagina voor dit menu) ; // einde sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_theme_menu'); / ** * Hiermee wordt een eenvoudige pagina weergegeven die moet worden weergegeven voor het hierboven gedefinieerde themamenu. * / function sandbox_theme_display () // Maak een header in de standaard WordPress 'wrap' container $ html = ''; $ html. = ''; // Stuur de markup naar de browser echo $ html; // einde sandbox_theme_displaySandbox-thema-opties
'; $ html. = 'Er zijn momenteel geen opties. Dit is alleen voor demo-doeleinden.
'; $ html. = '
Voor degenen onder u die geïnteresseerd zijn in meer geavanceerde thema-ontwikkeling, hebt u waarschijnlijk de verschillende manieren overwogen om meerdere optiepagina's voor uw thema te implementeren.
Aan de ene kant kunnen we meerdere submenu's toevoegen aan een hoofdmenu, maar daar is een alternatief: navigatie met tabbladen. Dit leent zich goed wanneer u opties wilt introduceren in de Verschijning menu en voeg nog geen ander menu-item toe aan het WordPress Dashboard. We zullen dit in het volgende artikel verder bespreken.
We hebben een kijkje genomen op elk van de vier belangrijkste manieren om onze eigen optiepagina's in WordPress te introduceren. Hoewel deze functies geen specifiek onderdeel zijn van de instellingen-API, is het belangrijk om te bespreken omdat ze zo nauw samenwerken in samenhang daarmee.
Maar deze functies kennen is slechts de helft. Als ontwikkelaar die verantwoordelijk is voor integratie en het organiseren van instellingen, is het belangrijk om te weten wanneer elk van de verschillende functies in de juiste context moet worden gebruikt.
Hoewel er geen antwoord is op zilver voor het gebruik van elke functie, zijn hier enkele richtlijnen waarmee u rekening moet houden wanneer u aan uw aangepaste functies, plug-ins en / of thema werkt:
Een woord over aangepaste menu's: Hoewel WordPress ons de mogelijkheid biedt om onze eigen hoofdmenu's toe te voegen, toe te voegen aan een bestaand menu en ons in het algemeen de mogelijkheid biedt om te doen wat we willen met de standaardconfiguratie, fronst een deel van de gemeenschap dit. Zij zijn van mening dat aangepaste functionaliteit geen invloed mag hebben op bepaalde kernmenu's. Hoewel het uiteindelijk aan jou ligt, implementeer je werk met onderscheidingsvermogen - de kansen zijn dat maar een paar dingen die je doet belangrijker zijn dan de kernfunctionaliteit van WordPress, dus plaats je werk daar niet boven.
In het volgende artikel gaan we een beetje toepassen van wat we hebben geleerd over menu's en beginnen met het introduceren van optiepagina's voor ons Sandbox-thema.
Naast het toevoegen van menupagina's bekijken we ook de navigatie met tabbladen en hoe we deze kunnen implementeren om te werken in combinatie met onze eigen menupagina's..
Beoordeel in de tussentijd eerdere artikelen in deze serie en vergeet niet om de huidige versie van de WordPress Settings Sandbox op GitHub te bekijken.
In dit artikel hebben we heel wat bronnen behandeld. Hier is een samenvatting van alles wat we hebben gebruikt: