Anatomie van een WordPress plug-in

WordPress staat bekend om zijn verbazingwekkende verzameling gratis plug-ins. Er is er een voor bijna elke behoefte
u kunt denken aan, van het maken van een back-up van uw WordPress-installatie tot het vragen van een kopje koffie
of tegen spam.

Maar er zijn tijden dat geen van de beschikbare plug-ins de truc lijkt te doen waar je naar op zoek bent. Om u te helpen op momenten zoals
dat, deze tutorial zal je begeleiden bij elke stap van het bouwen van een eenvoudige, widgetized WordPress plug-in met instellingen.


Het schrijven van je eigen plugin is geen rocket science voorbehouden aan de meest slimme programmeurs. Al wat je nodig hebt
is een basiskennis van
de PHP-programmeertaal en enige informatie over hoe WordPress verwacht dat uw plug-in zich zal gedragen. Deze tutorial zal u voorzien van de laatste.

Het doel

Voordat ik aan de slag ga, laat ik het concept van de plug-in introduceren en wat we ermee proberen te bereiken.

"Coming Next" wordt een widgetplug-in die een bepaald aantal blogposts bestudeert die voor de toekomst zijn gepland en geeft ze weer in de zijbalk van de blog (of waar dan ook)
de eigenaar van de blog beslist om de widget te plaatsen). De widget kan worden aangepast, zodat de gebruiker kan beslissen hoeveel berichten hij wil weergeven,
als een samenvatting van de post moet worden getoond, en wat de datumindeling zou moeten zijn. Het uiterlijk van de widget moet eenvoudig aanpasbaar zijn via CSS.

Hier is een snelle tekening van hoe de widget eruit zou kunnen zien in actie:


Laten we beginnen!

Stap 1: de plug-insjabloon

Plug-ins in WordPress zijn PHP-bestanden die in de wp-content / plugins map onder de installatiedirectory van WordPress.

Voor eenvoudige plug-ins die netjes in één bestand passen, zoals het bestand dat we vandaag maken, volstaat het om één PHP-bestand te maken en het te uploaden naar de
plugin-map. Het is echter een goede gewoonte om altijd een afzonderlijke map voor elke plug-in te maken en op die manier de blog-eigenaren te helpen hun plug-ins te behouden
georganiseerd. Dit maakt het ook eenvoudiger om je plug-in uit te breiden als je er ooit nieuwe bestanden aan moet toevoegen.

Laten we een map maken voor de "Komende Volgende" plug-in:


Aangemaakte map: / wp-content / plugins / coming-next

In deze nieuwe map maken we vervolgens het belangrijkste PHP-bestand van de plug-in. Laten we het noemen coming-next.php.

Bij het zoeken naar plug-ins, doorloopt WordPress elk bestand in de plugin-directory op zoek naar opmerkingen die de bestanden identificeren als plug-ins. Dat
commentaargedeelte vertelt basisinformatie over de plug-in en moet op zijn minst de naam van de plug-in bevatten.

Dit is hoe het commentaarblok voor onze "Komende Volgende" plug-in eruit zal zien:

 

Sla het bestand op en ga naar de pagina Plug-ins in uw WordPress-beheergebied. De plug-in, met alle informatie toegevoegd in de reactie,
is al zichtbaar in de de pluginlijst:


Dit is hoe de plug-in in de plugin-lijst verschijnt

Je kunt de plug-in al activeren, maar omdat we nog geen code hebben ingevoerd, gebeurt er niets. We hebben wat functionaliteit nodig.

Stap 2: Functionaliteit toevoegen

In de eenvoudigste vorm is een WordPress-plug-in niets meer dan een of meer functies die in een plug-insbestand worden geplaatst.

Alle functies die in plug-ins zijn gemaakt, zijn zichtbaar voor zowel het huidige thema als andere actieve plug-ins, dus het is mogelijk om

gebruik het plug-insysteem om het platform uit te breiden met nieuwe functies en bel ze gewoon rechtstreeks vanuit uw thema.

Laten we dat eerst doen en de functie creëren als de kern van de "Komende Volgende" plug-in, list_upcoming_posts ().

Er is een waarschuwingsbericht geplaatst voordat we beginnen: omdat alle functies die in plugin-bestanden zijn toegevoegd, zichtbaar zijn in uw hele systeem
WordPress installatie, je moet heel voorzichtig zijn bij het benoemen van hen. Als er twee functies met dezelfde naam zijn
in twee (of meer) verschillende plug-ins zullen ze conflicteren en dingen kunnen gewoon niet werken.

Voor grotere plug-ins is het een goed idee om een ​​objectgeoriënteerd programmeren uit te voeren en klassen te maken om delen in te kapselen
van de functionaliteit. Dat geeft u meer vrijheid bij het benoemen van uw functies en variabelen. In kleinere plug-ins zoals
deze, je moet alleen voorzichtig zijn en proberen beschrijvende functie-namen te gebruiken die je denkt dat niemand anders gebruikt.

 function list_upcoming_posts ($ num_posts = 1, $ show_excerpt = false, $ text_format = "Komende op [date]") $ posts = get_posts ("numberposts =". $ num_posts. "& order = ASC & post_status = toekomst"); echo "
    "; global $ post; $ old_post = $ post; foreach ($ posts as $ post): setup_postdata ($ post); $ my_date = the_date (", ",", FALSE); $ coming_up_text = str_replace ("[date]", $ my_date, $ text_format); ?>
  • ";

Deze functie gebruikt de get_posts () WordPress
functie om zo veel toekomstige berichten op te halen als gespecificeerd in de $ NUM_POSTS parameter of alle toekomstige berichten
als $ NUM_POSTS is groter dan het werkelijke aantal dat beschikbaar is.

Vervolgens wordt een lijst weergegeven met de titels van de berichten, hun geplande datums en het uittreksel van de post als $ show_excerpt is ingesteld op waar.

Merk op dat we de globale moeten gebruiken $ bericht variabele om de postgegevens in te stellen (zie regel 10) voor functieaanroepen zoals
zoals de titel() werken. Nu, voor het geval de blogsjabloon toegang nodig heeft tot het huidige bericht na het renderen van de plug-in,
we moeten de originele post terugzetten zodra we klaar zijn (zie regels 7 en 26-27). Anders zou de rest van de inhoud worden weergegeven met de laatste
bericht dat is ingesteld met setup_postdata ().

Gefeliciteerd! U hebt zojuist uw eerste WordPress-plug-in geschreven en kunt deze testen door deze oproep ergens in uw blogsjabloon toe te voegen:

 

Maak een bericht met de titel 'Terug naar de toekomst' en stel in dat dit op 1 januari 2020 op je blog wordt weergegeven. Dit zou je moeten zien:


De plug-in in actie. Zonder CSS-styling tot nu toe.

Stap 3: De widget maken

Voor sommige plug-ins is alleen al het hebben van een functie die u vanuit uw thema kunt bellen voldoende. Maar voor deze plug-in, denk ik dat ik de gebruiker laat
pas de uitvoer aan via zijn WordPress admin-pagina zal een mooie laatste hand leggen. En het WordPress widget-systeem is de perfecte manier om dit te doen
bereiken dat niveau van gebruiksvriendelijkheid.

In het geval u nog niet bekend bent met het concept van WordPress Widgets,
hier is wat de documentatie van WordPress over hen zegt:

Met WordPress Widgets kunt u eenvoudig ontwerpelementen, gadgets, inhoud, afbeeldingen en meer toevoegen aan uw WordPress zijbalk om te personaliseren
je blog zonder HTML, PHP of een andere code te kennen. Veel WordPress-plug-ins worden nu geleverd met een Widget-versie om een ​​eenvoudige toevoeging aan de zijbalk toe te staan.

Als uw thema widgets ondersteunt, gaat u naar het tabblad Widgets in de sectie Ontwerp van uw WordPress-beheergebied en wijst u widgets toe aan de verschillende
posities die de thema-ontwerper voor hen heeft gecreëerd:


Het instellingenscherm "Widgets"

Om ervoor te zorgen dat onze "Komende Volgende" -plug-in werkt als een widget, moeten we eerst een functie maken voor het renderen van de widget. Omdat we het kunnen hergebruiken
list_upcoming_posts () functie die we eerder hebben gecreëerd, zal deze taak vrij eenvoudig zijn.

Hier is de code voor de widget in de eenvoudigste vorm:

 functie widget_coming_next ($ args) extract ($ args, EXTR_SKIP); echo $ before_widget; list_upcoming_posts (); echo $ after_widget; 

Het enige wat de functie doet, is dat het de HTML-markeringen extraheert die de thema-ontwerper eerder heeft weergegeven ($ before_widget) en
na ($ after_widget) elke widget en geeft deze vervolgens weer in de lijst met aankomende berichten.

De extract() functie is standaard PHP.
Het neemt de velden van de gegeven array ($ args) en maakt er lokale variabelen van. Een andere manier om
hetzelfde doen zou zijn om de array direct te verwijzen met "before_widget" en "after_widget" als array indices.

Nu weet de widget zichzelf te renderen. Maar voordat het kan worden toegevoegd aan een blog, moeten we WordPress nog steeds vertellen om het aan de lijst toe te voegen
van widgets op de beheerpagina. Dit wordt gedaan door een initialisatiefunctie te maken die de sidebar-widget registreert en toevoegt
een plug-in om deze functie na alle WordPress aan te roepen
plug-ins zijn in het geheugen geladen.

 function widget_coming_next_init () wp_register_sidebar_widget (COMING_NEXT_WIDGET_ID, __ ('Coming Next'), 'widget_coming_next');  // Widget naar WordPress add_action registreren ("plugins_loaded", "widget_coming_next_init");

De initialisatie-functie roept wp_register_sidebar_widget ()
om de widget te registreren bij WordPress. De functie heeft drie parameters nodig: een unieke ID voor de widget, een naam die op de widgets moet worden gebruikt
pagina in het beheerdersgedeelte en de naam van de functie die de widget rendert.

Om dingen gemakkelijker te maken, als we de unieke identifier ooit moeten veranderen, heb ik er een constante voor gecreëerd. Op deze manier, wanneer we overal dezelfde constante gebruiken,
we hoeven het alleen maar op één plek bij te werken. Voeg deze constante definitie toe aan het begin van het widgetbestand, direct na het reactieblok dat de plug-in identificeert:

 define (COMING_NEXT_WIDGET_ID, "widget_coming_next");

Als u nu naar de pagina 'Widgets' gaat, ziet u de nieuwe widget daar wachten om te worden toegevoegd aan de blog. En wanneer u toevoegt
de widget naar een widgetpositie, je ziet de aankomende berichten verschijnen precies waar je ze plaatst!


De widget "Komende volgende" is nu toegevoegd aan de lijst met widgets.

Stap 4: Widgetinstellingen

Tot slot, om de plug-in te voltooien, zullen we een instellingenmenu maken om de widgetvoorkeuren bij te werken. Het instellingenvak zal allemaal hetzelfde bevatten
parameters die de list_upcoming_posts () functie neemt als paramters. Als die functie al is gedaan en
het weet hoe de parameters moeten worden behandeld, alles wat er nog over is, is het instellingenmenu bouwen en opslaan en de instellingen ophalen.

Net als bij het renderen van de widget, zullen we een functie creëren die het instellingenmenu weergeeft en de instellingen opslaat
in de permanente opslag en vertel WordPress over de functie zodat deze weet om deze te laten zien bij het toevoegen of bewerken van de widget.

Hier is de code voor het opslaan en ophalen van de instellingen:

 function widget_coming_next_control () $ options = get_option (COMING_NEXT_WIDGET_ID); if (! is_array ($ options)) $ options = array ();  $ widget_data = $ _POST [COMING_NEXT_WIDGET_ID]; if ($ widget_data ['submit']) $ options ['num_posts'] = $ widget_data ['num_posts']; $ options ['coming_up_text'] = $ widget_data ['coming_up_text']; $ options ['show_excerpt'] = $ widget_data ['show_excerpt']; update_option (COMING_NEXT_WIDGET_ID, $ opties);  // Render-formulier $ num_posts = $ options ['num_posts']; $ coming_up_text = $ options ['coming_up_text']; $ show_excerpt = $ options ['show_excerpt']; // Het HTML-formulier zal hier naartoe gaan

Het hart van deze functie zijn deze twee oproepen naar de WordPress API:
get_option () op regel 2 en
update_option () op regel 13.
update_option () kan worden gebruikt om een ​​variabele in de WordPress-database op te slaan als een sleutel / waarde-paar en get_option naar
Lees het.

In het bovenstaande codefragment ziet u dat bijvoorbeeld op regel 13, update_option () wordt gebruikt om de $ options array met de
sleutel COMING_NEXT_WIDGET_ID.

Om dingen overzichtelijker te maken, in plaats van elke variabele op te slaan als een afzonderlijk sleutel / waarde-paar, plaatsen we ze in een
array ($ options) die in een keer kan worden opgeslagen.
Deze array bevat dan alle gegevens met betrekking tot deze widget. De array wordt aan het begin van de functie geladen, zodat de gegevens beschikbaar zijn
voor het weergeven van het instellingenformulier en de bestaande instellingen kunnen worden gebruikt als standaardinstellingen en zullen niet verloren gaan wanneer het formulier wordt verzonden.

De widget_coming_next_control () De functie wordt zowel opgeroepen als het instellingenformulier voor het eerst wordt getoond en wanneer de gebruiker op de knop "Wijzigingen opslaan" drukt
om de instellingen op te slaan. Om te bepalen of het formulier is ingediend of niet, gebruiken we een verborgen veld
riep COMING_NEXT_WIDGET_ID [verstuur]. Als het verborgen veld is opgeslagen, lezen we in de parameters van de
vorm en sla ze op (regel 8-14). En in beide gevallen, of gegevens nu worden opgeslagen of niet, wordt het formulier weergegeven.

Formaten gesproken, dat kerndeel ontbreekt nog steeds. Kopieer het onderstaande formulier en zet het aan het einde van de functie die we zojuist hebben gemaakt
(direct na regel 21, vóór de slotsteun):

 ?> 

Als u zorgvuldig naar het formulier kijkt, ziet u dat er geen tags voor het openen of beëindigen van formulieren zijn. Dit komt omdat alle actieve widgets zijn
in dezelfde vorm zetten, weergegeven door WordPress, en worden opgeslagen met één druk op "Wijzigingen opslaan". Dit is handig wanneer u besluit te schrijven
een widget die vele malen kan worden toegevoegd, zoals de WordPress-tekstwidget (wanneer u dat doet, moet u op de hoogte zijn van meerdere widgets
en al hun verschillende toestanden tegelijkertijd). Maar voorlopig betekent dit alleen dat je voorzichtig moet zijn met hoe je de velden in je deel van het formulier een naam geeft.

In deze plug-in heb ik besloten om de. Te gebruiken COMING_NEXT_WIDGET_ID constant als een identifier om te definiëren welke van de velden bij deze widget hoort.
De ... gebruiken WIDGET_ID [field_id] notatie in de naam parameters van onze invoer tags maakt dingen
leuk voor ons als ze in een array worden geparseerd field_id als de array-index.

Na het maken van de instellingenschermfunctie, moeten we WordPress nog steeds vertellen om het te gebruiken. Dit gebeurt met de volgende haak.
Voeg het toe aan de widget_coming_next_init () functie die we eerder hebben gecreëerd:

 wp_register_widget_control (COMING_NEXT_WIDGET_ID, __ ('Coming Next'), 'widget_coming_next_control');

Wanneer u nu de widget toevoegt of bewerkt, ziet u dat er nieuwe opties zijn verschenen:


De widget heeft nu instellingen

Last but not least zullen we ervoor zorgen dat de rendering van de widget de instellingen gebruikt die zijn gedefinieerd in het instellingenvak. Het is echt heel simpel: alles wat we moeten doen
do is om de instellingen te lezen met behulp van de get_option () functie. Vervang de eerder gemaakte widget-renderfunctie met
deze nieuwe versie:

 functie widget_coming_next ($ args) extract ($ args, EXTR_SKIP); $ options = get_option (COMING_NEXT_WIDGET_ID); // Zoek de volgende geplande post $ num_posts = $ options ["num_posts"]; $ show_excerpt = $ options ["show_excerpt"]; $ coming_up_text = $ options ["coming_up_text"]; echo $ before_widget; list_upcoming_posts ($ num_posts, $ show_excerpt, $ coming_up_text); echo $ after_widget; 

Dat is het. U hebt nu een WordPress-widget met instellingen gemaakt!
De uitvoer ziet er nog steeds nogal saai uit, maar met een klein beetje CSS komt het tot leven en past het perfect in je blogthema.


De Komende Volgende widget live in actie