Aangepaste WordPress-beheerpagina's maken, deel 1

In een vorige serie heb ik een uitgebreide handleiding gegeven voor het werken met de WordPress Settings API. Voor degenen die niet bekend zijn met WordPress of die andere tools zoals The Customizer hebben gebruikt om verschillende opties af te handelen, kan het iets zijn dat je niet hebt hoeven gebruiken in je thema- of plugin-ontwikkeling.

Zoals vermeld in de Codex:

De Settings API, toegevoegd in WordPress 2.7, staat toe dat beheerderspagina's met instellingenformulieren semi-automatisch beheerd worden. Hiermee kunt u instellingenpagina's, secties binnen die pagina's en velden binnen de secties definiëren.

Ik denk niet dat het iets is dat dat is verplicht om te leren, maar het is iets dat je moet weten bestaat en weet hoe ermee te werken als je vindt dat je optiepagina's moet invoeren in het WordPress administratie gebied.

Het is een krachtige, hoewel enigszins complexe API die ons veel functionaliteit biedt. Uiteindelijk kunnen we veel werk aan de serverzijde doen en minimaal aan de kant van de klant werken.

Maar hoe zit het met de tijden waarop we werken met een aangepaste oplossing voor klanten en we hebben iets meer flexibiliteit nodig dan de instellingen-API biedt? Stel dat we bijvoorbeeld een plug-in moeten bouwen met een instellingenpagina, maar een flexibelere set opties en aangepaste validatiefunctionaliteit nodig hebben?

In die gevallen is het mogelijk om onze eigen aangepaste WordPress-beheerpagina's te schrijven. In deze serie gaan we kijken hoe precies dat te doen.

Voor we beginnen

Zoals met de meeste tutorials zoals deze, is het belangrijk om ervoor te zorgen dat je alles op orde hebt om mee te kunnen doen, zodat je kunt werken met de broncode die we in de serie behandelen.

Voor deze zelfstudie ga ik ervan uit:

• U hebt een lokale ontwikkelingsomgeving ingesteld in verhouding tot uw besturingssysteem.
• U hebt een exemplaar van WordPress geïnstalleerd en klaar om te worden gebruikt voor het installeren van een plug-in.
• U kent de ontwikkelingspraktijken van WordPress-plug-ins.
• Je werkt comfortabel met PHP en HTML.

Als u niet bekend bent met het opzetten van een lokale ontwikkelomgeving met WordPress, bekijkt u deze serie voor meer informatie over hoe u precies dat kunt doen. 

En als je relatief comfortabel bent met PHP, zelfs als het alleen de taal leest, dan zal ik er alles aan doen om duidelijke instructies en opmerkingen te geven voor elk stukje code dat we delen.

Zodra dit alles op zijn plaats is, zijn we klaar om aan onze plug-in te werken.

Aangepaste WordPress-beheerinstellingen

Aan het einde van deze serie hebben we een plug-in die aan de volgende vereisten voldoet:

• Voegt een nieuw submenu-item toe aan het bestaande WordPress-menusysteem.
• Voegt een nieuwe instellingenpagina toe die overeenkomt met het nieuwe submenu-item.
• Ontsmet en serialiseert opties op de pagina.
• Valideert en retourneert de waarden die zijn opgeslagen en geeft ze dienovereenkomstig weer.

Bovendien zorgen we ervoor dat we dit op de meest modulaire manier benaderen met behulp van de WordPress-coderingsstandaarden en vergelijkbare methoden om het lezen, schrijven en onderhouden van onze plug-in zo eenvoudig mogelijk te maken..

1. De plug-in Bootstrap

Het eerste dat we moeten doen is de opstart-bootstrap maken. Dit omvat het maken van een map waarin de bestanden van de plug-in worden ondergebracht, een basis README, een kopie van de licentie, een bootstrap-bestand dat uiteindelijk wordt gebruikt om de plug-in te starten, en een map die zal worden gebruikt om de klassen te houden die zijn gerelateerd aan de administratie. functionaliteit.

De bestanden kunnen als bijlage bij deze post worden gedownload, maar in de tussentijd kun je hieronder zien hoe mijn map eruit ziet:

Verder is de inhoud van de opstartbootstrap eenvoudig. Bekijk de volgende code voor het enkele PHP-bestand custom-admin-settings.php, en dan zal ik het in meer detail onder het blok bespreken.

Merk op dat er in de bovenstaande code eigenlijk heel weinig code staat. In plaats daarvan zijn er veel opmerkingen. Het hoofdblok met opmerkingen aan de bovenkant van het bestand legt uit wat het bestand doet.
Het gebied onder de @ Wordpress-plugin tag is wat WordPress zal lezen om de plug-ins titel, beschrijving en relatieve links in het plug-ins dashboard van WordPress te genereren.
Vervolgens voorkomen we dat iemand rechtstreeks toegang krijgt tot het bestand. En ten slotte creëren we een aangepaste functie om te worden geactiveerd met de plugins_loaded haak. Deze functie wordt gebruikt om de plug-in te starten.
Op dit punt moet u zich kunnen aanmelden bij WordPress, naar het dashboard van de plug-in gaan en vervolgens zien welke plug-in beschikbaar is om te activeren. Ga je gang en klik Activeren.
Er zal nog niets gebeuren, maar we zullen functionaliteit gaan toevoegen terwijl we deze hele tutorial gebruiken.
2. Het submenu-item maken
Laten we eerst een submenu-item introduceren om te beginnen met werken aan de plug-in. Om dit te doen, moeten we profiteren van de WordPress API-functie add_options_page. Voor deze functie zijn vijf parameters vereist:
 
de tekst die moet worden weergegeven als de titel van de bijbehorende optiespagina
 
de tekst die moet worden weergegeven als de tekst in het submenu voor het menu-item
 
de mogelijkheden die nodig zijn om toegang te krijgen tot dit menu-item
 
de menu slug die wordt gebruikt om dit submenu-item te identificeren
 
een callback naar een functie die verantwoordelijk is voor het renderen van de admin-pagina
 
Merk op dat we lessen zullen gebruiken om onze functionaliteit te organiseren, dus veel van wat we doen zal objectgericht zijn.
Laten we eerst een klasse maken in de opgeroepen beheerdersdirectory class-submenu.php. Aangezien deze klasse verantwoordelijk is voor het introduceren van een nieuw submenu, zullen we het beschrijvend noemen.
De inhoud van de klasse zou er als volgt uit moeten zien:
submenu_page = $ submenu_page;  / ** * Voegt een submenu voor deze plug-in toe aan het menu 'Extra'. * / openbare functie init () add_action ('admin_menu', array ($ this, 'add_options_page'));  / ** * Creëert het item in het submenu en roept het submenu Pagina-object aan om * de feitelijke inhoud van de pagina weer te geven. * / public function add_options_page () add_options_page ('Tuts + Aangepaste beheerpagina', 'Aangepaste beheerpagina', 'manage_options', 'aangepaste beheerpagina', array ($ this-> submenu_page, 'render'));  
Op dit moment doet de plug-in nog steeds niets. We moeten nog steeds de werkelijke creëren Submenu_Page klasse, en dan moeten we de klassen verbinden tot het bootstrap-bestand.
3. De pagina Submenu maken
Laten we beginnen met de Submenu_Page klasse eerst. Maak een ander bestand in de beheerder map en bel het class-submenu-page.php. Voeg vervolgens in het bestand de volgende code toe.
Wanneer deze pagina wordt weergegeven, wordt de tekst gewoon weergegeven: "Dit is de standaardpagina van het submenu." Uiteindelijk zullen we nieuwe opties toevoegen. Maar laten we eerst deze plug-in tot leven brengen door deze in ons bootstrap-bestand te plaatsen.
4. Weergave van het menu en de pagina
Open vervolgens het bestand custom-admin-settings.php dat we eerder in deze zelfstudie hebben gemaakt. Laten we doorgaan en de code schrijven die nodig is om het nieuwe submenu-item en de bijbehorende pagina te introduceren.
Let op: voor de submenu-klasse is een instantie van de Submenu_Page klasse wordt doorgegeven aan de constructor, en dan moeten we de methode init in de Submenu-klasse aanroepen om het hele ding in beweging te zetten.
In code ziet dit er als volgt uit:
in het(); 
Op dit punt zou u in staat moeten zijn om uw installatie van WordPress te vernieuwen, de plug-in te activeren (als deze nog niet is geactiveerd) en vervolgens uw nieuwe pagina weer te geven in het administratiegebied..
In het volgende artikel zullen we bekijken hoe we de daadwerkelijke instellingen in het scherm kunnen introduceren. Daarnaast zullen we een aantal best practices bekijken in termen van het werken met onze sjabloon en onze sjabloonparts, en dan zullen we zien hoe ze worden verbonden met de API's die verantwoordelijk zijn voor het niet alleen opslaan van hen, maar ook hoe we zullen saneren en valideren hen.
Maar voordat we zover gaan, wil ik het hebben over het lesontwerp dat we in deze zelfstudie hebben gezien. Over het algemeen wil ik praten over waarom we een klasse hebben voor de submenu en de Submenu_Page en hoe het zich verhoudt tot het bootstrap-bestand.
Een woord over klassenverantwoordelijkheid
Voor degenen onder u die bekend zijn met het beginsel van één verantwoordelijkheid, is deze sectie mogelijk niet interessant voor u. Maar als iemand een opfriscursus nodig heeft of meer wil horen, lees dan verder.
Verzamel de dingen die veranderen om dezelfde redenen. Scheid die dingen die om verschillende redenen veranderen.
Er is hier veel meer aan, maar als je naar elk van onze klassen zou kijken (tenminste de twee die we tot nu toe hebben), dan is het duidelijk dat de redenen die onze klassen kunnen veranderen, als volgt zijn:
 
De inhoud van het submenu kan veranderen. Alles van de paginatitel tot het menu slug en alles daartussenin.
 
 De manier waarop de pagina de inhoud weergeeft, kan (en zal veranderen). In het bijzonder doet het nu niets anders dan een tekenreeks herhalen. Binnenkort zal het een bepaald bestand bevatten. Hierna moet het mogelijk meerdere bestanden bevatten.
 
De bovenstaande twee redenen zijn twee zeer verschillende redenen waarom klassen kunnen veranderen, dus als je ze bij elkaar houdt in dezelfde klas, zou dit het bovenstaande principe schenden.
Uiteindelijk breng ik dit ter sprake, niet alleen om inzicht te krijgen in grotere software-engineeringprincipes die in WordPress kunnen worden toegepast, maar ook om je voor te bereiden op enkele van de redenen waarom we bepaalde dingen die meestal grote bestanden zijn, aan het verbreken zijn. in de context van plug-ins.
Het leuke van leren principes is dat ze kunnen worden toegepast in meerdere projecten en niet alleen in afzonderlijke projecten. Je leert ze, je oefent ermee en je wordt beter in het ontwikkelen van oplossingen voor andere mensen. 
De leercurve kan steil zijn, maar zodra u die bergopwaartse klim begint, wordt het eenvoudiger en gemakkelijker om de principes in uw dagelijkse werkzaamheden op te nemen. Vervolgens wordt het werk dat u aan anderen levert, veel gemakkelijker te onderhouden in de loop van de tijd.
Conclusie
Vergeet niet dat je de plug-in in zijn huidige staat kunt downloaden via dit bericht. Naarmate we doorgaan met de serie, zal ik de nieuwste versie beschikbaar maken voor elk bericht, zodat je de code in elke tutorial kunt volgen, ermee kunt sleutelen en vragen kunt voorbereiden die je in de reacties misschien wilt stellen.
Als een kanttekening, als u op zoek bent naar andere hulpprogramma's om u te helpen uw groeiende verzameling hulpprogramma's voor WordPress uit te bouwen of voor code om te studeren en meer vertrouwd te raken met WordPress, vergeet dan niet te zien wat we beschikbaar hebben in WordPress. Envato Market.
Onthoud dat je al mijn cursussen en tutorials op mijn profielpagina kunt vinden, en je kunt me volgen op mijn blog en / of Twitter op @tommcfarlin, waar ik het heb over verschillende softwareontwikkelingspraktijken en hoe we ze in WordPress kunnen gebruiken..
Tot slot, aarzel niet om vragen of opmerkingen achter te laten in de feed. Ik doe mijn best om deel te nemen en elke vraag of kritiek die u biedt te beantwoorden in verband met dit project.
Middelen
 
De complete handleiding voor de WordPress Settings API
 
De instellingen-API
 
plugins_loaded
 
add_options_page
 
Single Responsibility Principle
 



		
			
	   
	




Code