Een aangepast WordPress-berichtensysteem maken, deel 1

Eerder dit jaar hebben we een reeks zelfstudies doorlopen met betrekking tot het maken van aangepaste beheerpagina's in WordPress. Hoewel deze serie niet noodzakelijkerwijs een vereiste is voor het materiaal dat we gaan behandelen, zou het geen kwaad om het opnieuw te bekijken. 

Out of the box biedt WordPress veel functionaliteit via de vele API's. Als u bijvoorbeeld wilt werken aan het introduceren van beheerpagina's via net gericht op de opties die aan de gebruiker worden gepresenteerd, kunt u dat doen met de Settings API.

Er zijn ook veel voordelen bij het kiezen van deze specifieke API. Sommige hiervan omvatten:

  • ontsmetting en validatie
  • aangepaste menu-items
  • gemak van introductie van beheerpagina's
  • werken met verschillende soorten ingangen
  • geautomatiseerde berichtgeving bij succes of mislukking
  • en veel meer

Maar net zoals we hebben gekeken naar het maken van aangepaste beheerpagina's, is het ook mogelijk om een ​​systeem te implementeren waarmee we onze eigen aangepaste berichten, hun type en wanneer en waar ze op de beheerpagina kunnen weergeven, instellen. 

Dus om door te gaan met hetzelfde thema als de bovengenoemde serie, gaan we kijken hoe we ons eigen aangepaste berichtensysteem kunnen maken voor beheerpagina's. Om dit te doen, zullen we een plug-in maken om de concepten te demonstreren, we zullen aangepaste hooks registreren met WordPress, en we zullen zien hoe we ze kunnen implementeren, evenals.

Zoals ik al zei, is de vorige zelfstudie niet noodzakelijk een vereiste voor deze serie, maar als je iets nieuws hebt, neem dan alsjeblieft de tijd om de serie eerst te beoordelen omdat het een beetje een basis voor de richting zal zijn. waarin we naar toe gaan.

Met dat gezegd, laten we aan de slag gaan.

Wat je nodig hebt voor deze serie

Als je een van mijn eerdere tutorials hebt gelezen, weet je dat ik het leuk vind om elke tutorial (of reeks, zelfs) met twee dingen te beginnen:

  1. Geef een lijst met de software die u nodig heeft om aan de slag te gaan.
  2. Geef een stappenplan van waar we naar toe gaan, zodat u kunt beslissen of u door wilt gaan met de serie.

Laten we dat nu doen.

Uw ontwikkelomgeving

Over het algemeen is dit wat je nodig hebt om aan de slag te gaan met het project dat we gaan bouwen.

  • PHP 5.6.25
  • MySQL 5.6.28
  • Apache (of Nginx als je daar gerust mee bent)
  • WordPress 4.6.1
  • Je favoriete editor of IDE

Als je nieuwsgierig bent naar hoe dit allemaal bij elkaar past, raad ik aan deze serie te lezen.

Over het algemeen beveel ik één stuk software niet aan in termen van één beter dan anderen, omdat er zoveel opties zijn, maar als je helemaal niets van dit alles weet, raad ik je de gratis versie van MAMP aan. Het is compatibel met macOS en Windows, dus het zou compatibel moeten zijn met veel van je setups. Het is gemakkelijk te gebruiken, gemakkelijk aan de slag te gaan en biedt alles wat u nodig hebt bij de installatie.

Onze routekaart

Met dat gezegd, hier is de voorlopige uitsplitsing van deze serie:

  1. In deze tutorial leggen we de basis voor het absolute minimum van onze plug-in en wat we nodig hebben om te beginnen.
  2. In het tweede stuk gaan we de plugin een beetje verder nemen door een heel eenvoudige WordPress-beheerpagina toe te voegen. We bellen ook naar de aangepaste haak die we gaan gebruiken, en dat gaan we aan de serverkant verbinden. We beginnen ook met de basis voor onze instellingen Messenger.
  3. In de volgende zelfstudie beginnen we met het implementeren van onze instellingen Messenger door ondersteuning voor fouten en succesberichten toe te voegen en enkele punten over beveiliging te bespreken.
  4. We eindigen door alles samen te binden, het in actie te zien en de laatste plug-in openbaar beschikbaar te maken voor u om te downloaden.

Merk op dat elke tutorial downloadbare bronbestanden zal bevatten; ze hoeven echter niet noodzakelijk volledige bronbestanden te zijn, omdat ze geen documentatie of andere opmerkingen bevatten. Daar gaat de tutorial immers allemaal over.

Maar de uiteindelijke versie die wordt verstrekt, bevat precies dat.

Start de plug-in

Op dit moment weten we dat we de volgende dingen nodig hebben voor onze plug-in:

  • een basis administratiepagina
  • een menu-item om ons naar de beheerpagina te brengen
  • een bootstrap-bestand om de plug-in te starten

Dus laten we al deze stukken bij elkaar zoeken en functioneel maken.

1. Het menu-item

Het eerste dat we willen doen, is de functionaliteit introduceren die een submenu-item aan de opties menu in het beheermenu van WordPress.

Hiervoor hebben we twee klassen en één bestand nodig: een klasse die het submenu zal weergeven, een klasse die de submenupagina zal weergeven, en een bestand dat de inhoud van de pagina zal weergeven..

Voordat ik dit doe, raad ik de volgende mapstructuur aan:

Dit betekent dat de beheerder map heeft een keer bekeken subdirectory. De beheerder map zal hebben class-submenu.php en class-submenu-page.php. We zullen het hebben over de beheerpagina in de volgende sectie.

Laten we eerst naar elk van die individuele bestanden kijken.

class-submenu.php

Deze klasse is verantwoordelijk voor het toevoegen van het menu-item aan de optiespagina:

submenu_page = $ submenu_page;  openbare functie init () add_action ('admin_menu', array ($ this, 'add_options_page'));  openbare functie add_options_page () add_options_page ('Tuts + Custom Messages', 'Tuts + Custom Message Example', 'manage_options', 'tutsplus-custom-messages', array ($ this-> submenu_page, 'render'));  

Als u de API-aanroep in de Codex hebt gelezen, ziet u dat hierdoor een menu-item in de codex wordt geïntroduceerd Hulpmiddelen menu dat toegankelijk is via "Tuts + Custom Messages" en dat een titel zal bevatten die we binnenkort zullen zien.

Merk ook op dat er een is in het methode. Deze functie registreert de add_options_page met WordPress's ADMIN_MENU haak zodat het correct is geregistreerd (en wordt weergegeven) tijdens de levenscyclus van de WordPress-pagina.

Ten tweede is dit menu toegankelijk via iedereen met de manage_options mogelijkheid, en het zal de rendermethode op de submenu_page dat hoort erbij.

Het probleem? Er is geen submenupagina. Laten we die klas nu maken.

class-submenu-page.php

De code voor deze klasse is hieronder:

De Submenu_Page klas is duidelijk eenvoudig. Het enige is het weergeven van de settings.php pagina, die we in een oogwenk beoordelen.

Merk op dat niet alle submenupagina's zo eenvoudig zijn; de complexiteit van onze plug-in moet echter nog komen. We zullen dat in een volgende post zien.

2. De administratiepagina

Net als de Submenu_Page was eenvoudig, net als de instellingenpagina. Als u bekend bent met de standaardmarkeringen, zou het eenvoudig moeten zijn om precies te begrijpen wat er aan de hand is:

We gaan geen opties op deze pagina weergeven. In plaats daarvan gaan we deze pagina gebruiken om te demonstreren hoe we onze aangepaste messenger kunnen gebruiken.

Kortom, dit toont eenvoudig een bericht in WordPress dat we deze pagina niet zullen gebruiken voor iets anders dan het weergeven van aangepaste berichten.

Na dat alles is wat we gaan doen.

3. Het tot leven brengen

Op dit moment zijn we klaar om het bootstrap-bestand in te stellen om de plug-in in gang te zetten. Dit is het standaard bootstrap-bestand:

in het();  

Let op de opmerking boven de foreach lus. Hoewel we autoloading in een eerdere serie hebben behandeld, wil ik niet veronderstellen dat iemand alle series heeft gelezen die naar deze specifieke serie leiden. 

Zodra dit op zijn plaats is, zou u zich moeten kunnen aanmelden bij uw WordPress-account, de plug-in kunnen activeren en het volgende scherm kunnen zien:

Als dit niet het geval is, controleert u nogmaals of alle broncode overeenkomt met de broncode die aan dit bericht is gekoppeld en controleert u of alles correct is. 

Zo niet, voer dan de nodige correcties uit en probeer het opnieuw. Als je een paar pogingen nodig hebt, zweet je het niet. Programmeren kan soms een beetje een frustrerende taak zijn, vooral als je net begint.

Conclusie

Als je het grootste deel van mijn werk tot nu toe hebt gevolgd, kan dit heel vertrouwd lijken. Zo niet, dan ben ik blij dat je aan boord bent. Terwijl je op de tweede tutorial wacht, raad ik aan om wat van het andere materiaal dat ik heb gepubliceerd te bekijken om een ​​idee te krijgen van wat ik graag bedek en mijn benadering om deze concepten te onderwijzen..

Ik ben ook altijd blij om vragen te beantwoorden via de reacties, en je kunt ook gerust mijn blog bekijken en me volgen op Twitter. Ik praat meestal ook over softwareontwikkeling binnen WordPress en tangentiële onderwerpen.

Tot de volgende zelfstudie, onderzoek de code, download de bestanden en zie hoe deze op uw lokale computer wordt uitgevoerd. In het volgende deel gaan we precies verder waar we gebleven waren.

Middelen

  • Aangepaste beheerpagina's maken met WordPress
  • De WordPress Settings API
  • Aan de slag met WordPress
  • MAMP
  • add_options_page