A Primer on Ajax in het WordPress Dashboard - De stichting leggen

Nog niet zo lang geleden was Ajax een echte rage - het idee om een deel van een pagina bij te werken zonder de hele pagina echt opnieuw te hoeven laden was geweldig, onthoud?

Maar het is een paar jaar geleden en nu is het praktisch de standaard - het is moeilijk om na te denken over je favoriete webapplicatie die een hele pagina herlaadt om een taak te voltooien, is het niet??

Afhankelijk van je achtergrond, zijn er een aantal verschillende manieren om Ajax te implementeren. In deze serie gaan we een heel kort overzicht geven van wat Ajax is, hoe het werkt en hoe het vervolgens correct kan worden gebruikt in het WordPress-beheersdashboard..

Ajax: The Short of It

Ajax is een technologie die doorgaans wordt gezien als een acroniem voor "Asynchronous JavaScript and XML", maar het is echt meer dan dat. Over het algemeen is Ajax wat we doen als we updaten een deel van een pagina (dat wil zeggen, zonder het hele ding te verversen).

Op een hoog niveau ziet het proces er als volgt uit:

Een gebruiker voert een gebeurtenis - zoals een muisklik - uit op een element op een pagina
De ontwikkelaar heeft een functie geschreven die naar die gebeurtenis luistert
Wanneer de gebeurtenis plaatsvindt, verzendt de functie gegevens van de browser terug naar de server
De server voert vervolgens een actie uit en / of verzamelt alle gevraagde gegevens en retourneert deze in een specifieke indeling

Hoewel gegevens vroeger werden geretourneerd in XML, is het nu gebruikelijker om JSON, HTML-fragmenten of zelfs standaardstrings te retourneren.

Daarbovenop implementeerden browsers in het verleden de onderliggende faciliteiten om op Ajax gebaseerde functies een beetje anders uit te voeren, dus het bouwen van Ajax-ingeschakelde applicaties vereiste een aanzienlijke hoeveelheid code om de verschillende browsers aan te kunnen..

Gelukkig hebben bibliotheken zoals jQuery dit proces veel gemakkelijker gemaakt door een niveau van abstractie te bieden dat het geestdodende werk weghaalt bij het afhandelen van inconsistenties tussen verschillende browsers, waardoor we ons volledig kunnen richten op het asynchroon verzenden en ontvangen van gegevens.

Omdat WordPress wordt geleverd met jQuery, hebben we het voordeel dat we in staat zijn om bovenop onze bibliotheek te werken voor ons werk. Maar dat is niet alles - hoewel het mogelijk is om uw eigen systeem voor Ajax-functionaliteit binnen WordPress te rollen, biedt het platform eigenlijk een kader om dit heel gemakkelijk te doen.

Ajax in het WordPress-dashboard

Het framework dat WordPress biedt voor de introductie van Ajax-gebaseerde functionaliteit is eigenlijk een heel eenvoudig proces. Eerst zal ik het definiëren, dan zullen we elke stap in meer detail bekijken.

Maak een element dat wordt gebruikt om het Ajax-verzoek te activeren
Schrijf JavaScript-code om de gebeurtenis af te handelen wanneer de status van het invoerelement verandert (zoals geklikt, getypt, etc.)
Werk aan de serverzijde het verzoek af en bereid een antwoord voor om terug te keren naar de browser
Gebruik opnieuw JavaScript om het antwoord dienovereenkomstig te behandelen

Vier stappen - dat is het. Niet slecht, toch? In de rest van dit artikel zullen we een praktisch voorbeeld bekijken van precies dit doen.

Ajax-melding: een voorbeeldplug-in voor WordPress

In ons voorbeeld gaan we een plug-in schrijven die een melding weergeeft zodra de plug-in is geactiveerd. Dat is het enige doel: eenvoudig laten zien dat het actief is.

Eenvoudig? Zeker. Zinloos? Van een functionaliteitsaspect, absoluut. Maar we zullen een heleboel zaken behandelen die direct kunnen bijdragen aan praktisch werk: we bespreken administratieve kennisgevingen, nonce-waarden, de API van WordPress Ajax, opties en op JavaScript gebaseerde antwoorden.

Plan de plug-in

Laten we, voordat we een code schrijven, plannen hoe de plug-in werkt:

Wanneer de plug-in is geactiveerd, moet deze een optiewaarde creëren om op te slaan of de gebruiker heeft geselecteerd om het bericht te verbergen
Wanneer de plug-in gedeactiveerd is, zou deze de optie volledig uit de database moeten verwijderen
Het meldingsbericht kan een eenvoudig bericht weergeven en moet worden gestileerd met de native WordPress UI
Er moet een element zijn waarop de gebruiker kan klikken om het bericht te verwijderen
Als de gebruiker ervoor kiest om het bericht te verbergen, moet het verbergen zonder de pagina te verversen en moet vanaf dit punt worden verborgen

Makkelijk genoeg, denk ik. Hier is een eenvoudige schets van hoe de gebruikersinterface van de plug-in eruit zal zien:

Op dit moment is het tijd om code te schrijven.

Maak de opties

Hoewel de volledige plug-in aan het einde van het bericht zal worden gekoppeld, zullen we naar de plug-in kijken terwijl we met de ontwikkeling beginnen. Laten we de basisstructuur van de plug-in instellen zodat deze een melding weergeeft wanneer deze is geactiveerd.

Om te bepalen of de gebruiker het notificatiebericht wil weergeven, moeten we een optie maken die de waarde opslaat. Op dezelfde manier moeten we deze waarde verwijderen wanneer de plug-in gedeactiveerd is - het heeft geen zin om oude gegevens achter te laten, precies?

Om dit te doen, registreren we twee haken: een voor activering en een voor deactivering.

Laten we de klasse en de constructor definiëren die acties voor deze twee methoden bevatten:

 class Ajax_Notification function __construct () register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate'));  nieuwe Ajax_Notification ();

Natuurlijk gebeurt er op dit moment niets, omdat we de twee methoden niet hebben gedefinieerd. Laten we dat nu doen:

 function activate () add_option ('hide_ajax_notification', false);  // einde activeer functie deactivate () delete_option ('hide_ajax_notification');  // einde deactiveren

De functies moeten relatief duidelijk zijn, maar hier volgt een korte uitleg van wat we doen:

activeren is het toevoegen van een optie aan de database met de sleutel hide_ajax_notification. Omdat we de melding willen weergeven totdat de gebruiker iets anders zegt, stellen we deze in op false.
deactiveren verwijdert eenvoudig de optie uit de database.

Nu hebben we alleen een bericht nodig om weer te geven.

Maak het kennisgevingsbericht

Laten we een nieuwe haak toevoegen aan de constructor die een actie zal oproepen die daadwerkelijk een notificatiebericht zal weergeven. De bijgewerkte constructor ziet er als volgt uit:

 class Ajax_Notification function __construct () register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate')); add_action ('admin_notices', array (& $ this, 'display_admin_notice'));  nieuwe Ajax_Notification ();

Natuurlijk gebeurt er nog niets - we moeten een methode definiëren display_admin_notice die verantwoordelijk is voor het weergeven van het bericht. Dus laten we dat nu definiëren:

 function display_admin_notice () $ html = ''; $ html. = ''; $ html. = 'De Ajax-meldingsvoorbeeldplug-in is actief. Dit bericht verschijnt totdat u ervoor kiest om het te sluiten. '; $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;

Hierboven maken we een element dat een eenvoudige boodschap weergeeft:

De Ajax-meldingsvoorbeeldplug-in is actief. Dit bericht verschijnt totdat u ervoor kiest om het te sluiten.

Het bericht biedt ook een anker waarmee gebruikers het bericht kunnen negeren. Het belangrijkste ding om op te merken over het anker is dit:

De href kenmerk is leeg javascript :; omdat het bericht nergens echt linkt
Het anker heeft een ID zodat we later gemakkelijk toegang tot de link kunnen krijgen via JavaScript

Jij natuurlijk kon introduceer een href naar het anker voor het geval de gebruiker JavaScript niet heeft ingeschakeld, maar dit artikel gaat over Ajax, dus we gaan ervan uit dat JavaScript is ingeschakeld. Progressive Enhancement is een heel ander onderwerp.

Het tweede ding dat je zal opvallen, is dat ik een oproep heb opgenomen naar wp_create_nonce. Dit is een beveiligingsmaatregel. Wanneer de gebruiker op het anker voor 'sluiten' klikt, kunnen we valideren dat de aanvraag afkomstig is uit het meldingsbericht; anders kunnen we het verzoek negeren.

De methode neemt een enkele waarde op die wordt gebruikt om de nonce te identificeren. In ons geval is dat zo ajax-notification-nonce. We zullen deze waarde opnieuw bekijken zodra we beginnen met de introductie van de Ajax-functionaliteit.

Conclusie

Inmiddels heb je een volledig werkende - zij het statische - plugin. Wanneer u de plug-in activeert, ziet u een bericht dat lijkt op het onderstaande bericht:

In het volgende artikel zullen we Ajax-functionaliteit introduceren en we eindigen met een checklist met dingen die alle op WordPress gebaseerde Ajax-functionaliteit zou moeten hebben, maar in de tussentijd moet u zeker zijn om de volgende bronnen te bekijken:

Ajax-melding 0.1. Een werkende versie van de plug-in, zoals ontwikkeld in dit artikel.
register_activation_hook
deregister_activation_hook
wp_create_nonce

Code