In de vorige zelfstudie in deze serie zijn we begonnen aan onze aangepaste beheerpagina. 

Uiteindelijk zullen de doelen waar we naartoe werken aantonen hoe we onze eigen aangepaste code en de WordPress API kunnen gebruiken om pagina's te maken die wat flexibeler zijn dan wat natuurlijk beschikbaar is via een van de standaard API's. 

Dit wil niet zeggen dat we de API's die WordPress biedt moeten omzeilen of vermijden. Ik ben er zelfs een fan van om ze zoveel mogelijk te gebruiken. Maar wanneer een project ontstaat waarin u extra functionaliteit moet introduceren of de manier waarop iets presteert moet aanpassen, dan zal de ontwikkeling van deze functionaliteit aan u worden overgelaten.

Ten tweede gebruiken we ook principes zoals het beginsel van de enkele verantwoordelijkheid om aan te tonen hoe we een goed georganiseerde, objectgerichte benadering van de code die we schrijven kunnen beschrijven.

Voordat we verder gaan, laten we echter bekijken wat we tot nu toe hebben behandeld.

Voor de eerste keer ...

Bedenk dat we een werkdefinitie hebben gegeven van het beginsel van één enkele verantwoordelijkheid:

Verzamel de dingen die veranderen om dezelfde redenen. Scheid die dingen die om verschillende redenen veranderen.

En we hebben dat gebruikt om de organisatie van het maken van ons huidige submenu en submenupagina te begeleiden.

We hebben ook gekeken naar de code voor de eerste versie van de plug-in, deze beschikbaar gemaakt voor download en de basis gelegd voor het werk dat we in deze zelfstudie gaan doen.

Als u de vorige zelfstudie niet hebt herzien of de code tenminste niet hebt herzien, raad ik u ten zeerste aan dit te doen; anders kun je je afvragen waarom we bepaalde beslissingen nemen die we nemen of waarom een ​​deel van de code is georganiseerd zoals het is.

Met dat gezegd, laten we doorgaan.

Voor we beginnen

Zoals met veel van mijn tutorials, wil ik er zeker van zijn dat je alles in gebruik hebt voordat we verder gaan. Voor deze zelfstudie hebt u het volgende nodig:

• een lokale ontwikkelingsomgeving
• een kopie van WordPress geïnstalleerd en klaar voor gebruik
• een kopie van onze plug-in van de vorige zelfstudie geïnstalleerd en geactiveerd
• een IDE met de plugin geladen en klaar voor extra bewerking

Als een van de bovenstaande dingen geen zin heeft, bekijk dan de vorige zelfstudie of deze serie voor het opzetten van een lokale ontwikkelomgeving.

Wat de code betreft die zal komen, we zullen er stap voor stap doorheen lopen. Ik zal precies uitleggen wat we aan het doen zijn en zal zowel codecommentaar als commentaar in de tutorial geven om te zorgen dat je begrijpt wat er onderweg allemaal gebeurt.

De beheerpagina maken

Naarmate we verder gaan met de plug-in in dit artikel, is dit wat we gaan doen:

1. Maak de opmaak voor de beheerpagina die de native WordPress-stijlen overneemt.
2. Introduceer een optie waarmee de gebruiker kan communiceren.
3. Maak de optie schoon voordat u deze opslaat.
4. Haal de waarde van de optie op en stel deze gelijk aan de waarde op de pagina.

In deze zelfstudie gaan we ons concentreren op de volgende twee punten. In het volgende artikel zullen we ons concentreren op de punten drie en vier.

Voor degenen die bekend zijn met de instellingen-API, lijkt dit overdreven. Maar zoals je in de rest van deze tutorial en deze serie zult zien, is er een reden waarom we het in kleinere stukjes zoals dit zullen opsplitsen.

Laten we aan de slag gaan met het plan van aanpak.

De pagina markeren

Toen we voor het laatst deze functie hadden verlaten, zag de code er als volgt uit:

Nu zijn we klaar om daadwerkelijk de lay-out van de pagina te maken. Wanneer ik werk aan plug-ins voor clients, noem ik deze 'weergaven'. 
Dit is niet bedoeld om te worden verward met het model-view-controller-paradigma. Maar ik noem ze ook geen sjablonen omdat in WordPress sjablonen worden gebruikt om de inhoud van een pagina aan de voorkant weer te geven. 
Dus het is zo.
Het eerste dat we willen doen is een view-map maken in de beheerdersdirectory van onze plug-in.
Zodra dat is gebeurd, kunnen we dit zo eenvoudig noemen settings.php of iets meer beschrijvend. Het is echt aan jou en de complexiteit van wat je aan het bouwen bent. Omdat dit een eenvoudige plug-in is, blijf ik bij een simpele naam.
Laten we vervolgens beginnen met het maken van de standaardmarkering die het standaard WordPress-wrapperelement biedt, samen met de paginatitel:
 
 
 
 
 
Merk op dat de titel wordt afgeleid van een functie die de waarden gebruikt die zijn doorgegeven aan de add_options_page functie vanaf wanneer we voor het eerst aan de plug-in begonnen te werken. Vervolgens gebruiken we ook de admin_url functie om aan te geven waar we de opties zullen plaatsen (waarover we later zullen praten).
En in beide gevallen gebruiken we de esc_html ontsmettingsfunctie om te zorgen dat er geen kwaadwillende strings op de pagina kunnen worden weergegeven.
Dit zijn twee voorbeelden van, waar mogelijk, met behulp van welke API-functies dan ook beschikbaar zijn voor het beoogde doel. Ervan uitgaande dat alles correct is verlopen, ziet uw pagina er als volgt uit:
Om dit met uw plug-in te verbinden, moeten we de functie van boven bekijken. Dit betekent dat de functie er nu als volgt uitziet:
Makkelijk genoeg, toch? Ervan uitgaande dat alles correct is ingesteld, is dit wat u zou moeten zien:
Nee, het is niet veel om naar te kijken, maar we gaan dat veranderen.
Voeg een optie toe
Op dit moment zijn we klaar om een ​​optie toe te voegen. Voor de doeleinden van deze post gaan we toestaan ​​dat de gebruiker iets invoert in een invoertekstelement. Dit zal ons toelaten een kijkje te nemen naar hoe informatie te zuiveren en uiteindelijk te laten zien aan de voorkant.
Om dit te doen, hebben we een belangrijk stuk informatie nodig. We moeten namelijk het naamkenmerk weten dat we het gaan noemen invoer element. Dit is zodat we het op de juiste manier in de database kunnen opslaan. 
Laten we voor de doeleinden van dit voorbeeld zeggen dat dit bericht wordt gebruikt om onvoorwaardelijk boven aan elke post te worden weergegeven. We zullen in dit artikel niet ter zake komen, maar we zullen dat in het volgende artikel opnieuw bekijken.
In uw settings.php weergave, voeg de volgende code toe.
 
 
 
 
Universeel bericht
 
 
 Welk bericht wilt u boven elk bericht weergeven?? 
  
 
  
 
Als u de pagina op dit punt zou moeten bekijken, zou u precies moeten zien wat u verwacht: een label en een invoervak.
Beveilig de optie
Normaal zou ik hier een screenshot laten zien, maar we zijn nog niet klaar. We moeten nog twee dingen introduceren.
 
Een WordPress nonce
 
De verzendknop
 
Laten we dat nu doen. Als u niet bekend bent met nonce-waarden, raad ik aan dit artikel te lezen. In het kort is dit:
Een nonce is een 'nummer dat eenmaal wordt gebruikt' om URL's en formulieren te beschermen tegen bepaalde soorten misbruik, kwaadwillig of anderszins.
In onze settings.php bestand, laten we het volgende blok code toevoegen:
Uiteindelijk zou de definitieve versie van onze code er als volgt uit moeten zien:
 
 
 
 
Universeel bericht
 
 
 Welk bericht wilt u boven elk bericht weergeven?? 
  
 
   
 
En de uiteindelijke versie van de pagina zou er als volgt uit moeten zien:
Op dit moment zijn we klaar om de opties op te slaan. Om dit te kunnen doen, moeten we een aantal dingen verifiëren:
 
Heeft de gebruiker rechten om opties op te slaan?
 
Wordt er een geldige nonce doorgegeven vanaf het formulier?
 
Verder moeten we:
 
De informatie ontsmetten om ervoor te zorgen dat er geen schadelijke gegevens in de database terechtkomen.
 
We moeten in staat zijn om deze informatie uit de database te halen en in de vorm te vullen.
 
En tot slot moeten we dit aan de voorkant van de website weergeven.
Conclusie
Dus in de volgende twee artikelen gaan we ons richten op precies dat doen.
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
 
Single Responsibility Principle
 
Aangepaste beheerinstellingen 1.0
 
add_options_page
 
 admin_url
 
 esc_html
 
WordPress Nonce Values
 



		
			
	   
	




Code