WordPress voor Web App-ontwikkeling gebeurtenissen, acties en filters

In deze hele reeks hebben we bekeken hoe WordPress kan worden gebruikt voor het bouwen van webtoepassingen.

Tot nu toe hebben we vastgesteld dat WordPress een fundament is - in plaats van een raamwerk - en we hebben een beetje gesproken over hoe we moeten voorkomen dat we WordPress proberen te verbergen in een ander type ontwerppatroon dan dat van het native type.

Daartoe hebben we vastgesteld dat WordPress een door gebeurtenissen aangestuurd ontwerppatroon gebruikt en dat dit het beste wordt weergegeven met zijn systeem van acties en filters.

Hoewel het algemene doel van deze serie is om een ​​overzicht te geven van hoe WordPress kan worden gebruikt voor de ontwikkeling van webtoepassingen, vind ik het belangrijk om een ​​paar praktische voorbeelden te bekijken van hoe krachtig het haaksysteem werkelijk is om te begrijpen hoe veel wij - als ontwikkelaars - kunnen WordPress aanpassen aan onze behoeften.

Dus in dit artikel gaan we een kijkje nemen naar een code die enkele veelvoorkomende acties representeert die kunnen worden bereikt met behulp van WordPress-hooks, evenals enkele enigszins niet-standaardfunctionaliteit.

Uiteindelijk, tegen het einde van het artikel, zou je een duidelijk begrip moeten hebben waarom het gebruik van de gebeurtenisgestuurde aard van WordPress essentieel is bij het bouwen van applicaties, en waarom we niet moeten proberen WordPress en de onderliggende patronen te maken in iets dat ze zijn niet.


Haken: acties en filters

In het vorige artikel gaven we twee definities - één specifiek voor acties en één specifiek voor haken:

Acties zijn gebeurtenissen in de levenscyclus van de WordPress-pagina wanneer bepaalde dingen zijn opgetreden: bepaalde bronnen zijn geladen, bepaalde voorzieningen zijn beschikbaar en, afhankelijk van hoe vroeg de actie plaatsvond, moeten sommige dingen nog worden geladen.

Filters zijn functies waarmee WordPress gegevens doorgeeft tijdens bepaalde momenten in de levenscyclus van de pagina. Ze zijn primair verantwoordelijk voor het onderscheppen, beheren en retourneren van gegevens voordat ze worden doorgegeven aan de browser of om gegevens van de browser naar de database op te slaan.

Dit is belangrijk voor het begrijpen van de twee typen WordPress-evenementen omdat er tijden zullen zijn waarin u een proces wilt vooruitlopen, een proces wilt opvolgen of informatie wilt manipuleren voordat u het naar het scherm brengt.

Het kennen van het verschil in acties en filters is essentieel bij het bouwen van applicaties, plug-ins en thema's in WordPress.

Daarom gaan we de discussie voortzetten waarom WordPress kan worden gebruikt voor webtoepassingen en een praktische blik werpen op verschillende acties en filters om ervoor te zorgen dat we allemaal begrijpen hoe het gebeurtenissysteem werkt, het soort dingen dat we ermee kunnen doen en hopelijk creativiteit laten vloeien over hoe deze kunnen worden gebruikt om een ​​meer op maat gemaakte ervaring te creëren.

Gemeenschappelijke acties

Eerst zullen we een aantal acties bekijken die elk in complexiteit toenemen ten opzichte van de vorige, om te laten zien hoe krachtig acties kunnen worden.

1. Een JavaScript-bestand aan de kop toevoegen

Deze actie is zo gewoon dat het waarschijnlijk zelfs door de meest gemiddelde ontwikkelaars wordt gebruikt. Toch blijft het punt: dit is een voorbeeld van een klassieke WordPress-actie die wordt gebruikt in bijna elk type thema dat er is.

Kortom, het maakt gebruik van de wp_enqueue_scripts haak. Dit wordt geactiveerd tijdens het laden van de pagina en stelt u in staat om WordPress te vertellen welke bronbestanden het moet bevatten evenals waar het zou het moeten omvatten (zoals in, in de kop of in het voettekst).

function example_add_theme_scripts () wp_enqueue_script ('re-example-script', get_stylesheet_directory_uri (). '/js/example.js', array ('jquery'), '1.0.0', FALSE);  add_action ('wp_enqueue_scripts', 're_add_theme_scripts');

Dit is gemakkelijk genoeg om te begrijpen, goed?

Pak het script in de thema's example.js bestand uit de JavaScript-map, zorg ervoor dat het is gemarkeerd als afhankelijk van het feit of jQuery het eerst wordt geladen, merk op dat het versie 1.0.0 van het script is, en dat doen we niet wil het in het voettekst laden.

2. Pas de Lees verder Link

Out-of-the-box, WordPress biedt de mogelijkheid om een ​​'Lees meer ...' of een 'Continue Reading ...' link toe te voegen, die wordt bereikt door het gebruik van de tag in de berichteditor.

Je kunt het stijlen met native stijlen, maar laten we zeggen dat je extra code wilt toevoegen zodat het beter bij je thema past, eenvoudiger te integreren is met een responsief ontwerp of iets dergelijks.

U kunt dan de volgende actie gebruiken:

functie example_add_more_link_class ($ link, $ text) $ html = '
'; $ html. = '
'. $ link. '
'; $ html. = '
'; return $ html; add_action ('the_content_more_link', 'example_add_more_link_class', 10, 2);

Merk op dat we aansluiten the_content_more_link die het anker en de tekst van het anker accepteert voor de meer link.

Binnen de functie wikkelen we dan de eigenlijke link binnen zijn eigen div container zodat we meer controle hebben over het stylen van de link.

3. Haal de naam van een persoon op via Ajax

In dit specifieke voorbeeld wordt ervan uitgegaan dat u Ajax in uw project gebruikt en dat u al de juiste faciliteiten hebt ingesteld om ervoor te zorgen dat u asynchrone verzoeken kunt doen.

Hierbij wordt er ook van uitgegaan dat de gegevens die van de clientzijde naar de server worden verzonden, de ID zijn van een gebruiker voor wie u zijn of haar naam wilt retourneren..

function example_get_user_name () $ user = null; if (isset ($ _GET ['user_id']) && 0 < strlen( trim( $_GET['user_id'] ) ) )  $user = get_user_by( 'id', $_GET['user_id'] ); if ( FALSE == $user )  echo $user->Voornaam;  else echo '-1';  // einde als sterven;  // einde re_get_employee_by_name add_action ('wp_ajax_example_get_user_name', 'example_get_user_name'); add_action ('wp_ajax_nopriv_example_get_user_name', 'example_get_user_name');

Dus in het bovenstaande voorbeeld controleren we eerst om te controleren of het gebruikersnaam is ingesteld in de $ _GET verzamelen en zo ja, dan probeert het de gebruiker uit die ID te halen.

Als de gebruiker bestaat, wordt de eerste naam van de gebruiker teruggestuurd naar de client; anders zal het een echo geven-1'. Dit geeft ons de flexibiliteit om op de juiste manier te reageren op de client-kant.

Algemene filters

Net zoals we deden met de bovengenoemde acties, zullen we een aantal filters bekijken die elk iets complexer worden, zodat we enkele dingen kunnen zien die we kunnen doen met filters die ons in staat stellen grotere flexibiliteit in onze WordPress-projecten.

1. Inhoud toevoegen aan één bericht

Hoewel de titel van deze specifieke actie duidelijk genoeg moet zijn, laten we zeggen dat u een zin onder aan elke post op uw blog wilt toevoegen, maar u enkel en alleen wil het op enkele berichten doen.

Dit kan worden bereikt met de volgende code:

function example_append_post_content ($ content) if (is_single ()) $ html = '
'; $ html. = 'Deze inhoud verschijnt aan het einde van een bericht.'; $ html. = '
'; $ inhoud. = $ html; retourneer $ inhoud; add_filter ('the_content', 'example_append_post_content');

Dit is gemakkelijk genoeg om te begrijpen, goed?

de inhoud filter geeft de daadwerkelijke inhoud van het bericht door aan de gekoppelde functie. Vanaf dat moment kunnen we de gegevens manipuleren op een manier die we geschikt achten.

In ons geval controleren we eerst of het een enkele pagina is. Als dat zo is, voegen we een toe post-suffix container met een enkele zin, voeg deze toe aan de inhoud en stuur deze vervolgens terug.

Als het geen enkele post is, wordt de inhoud zoals gewoonlijk geretourneerd.

2. Gebruikers doorsturen na het inloggen

Een ander type filter waarvan u mogelijk wilt profiteren is gebruikers omleiden nadat ze zich bij de toepassing hebben aangemeld.

Als ze bijvoorbeeld een beheerder zijn, moeten ze mogelijk worden doorverwezen naar het postdashboard; anders moeten ze worden omgeleid naar de startpagina van de site.

Om dit te bereiken, kunnen we profiteren van de login_doorstuurfilter:

function example_login_redirect ($ redirect_to, $ request, $ user) return (isset ($ user-> roles) && is_array ($ user-> roles) && in_array ('administrator', $ user-> roles))? home_url ('/ wp-admin /'): home_url ();  // end soi_login_redirect add_filter ('login_redirect', 'example_login_redirect', 10, 3);

In de bovenstaande code hebben we een aangepast filter in de login_redirect haak die het volgende uitvoert:

  • Als de gebruiker een beheerder is, stuurt u deze door naar het dashboard
  • Anders leidt u ze naar de HOME_URL van de site.

Makkelijk genoeg.

Hoewel het een relatief eenvoudig voorbeeld is, zou het je aan het denken moeten zetten over meer van de geavanceerde dingen die je kunt doen op basis van de rollen en / of mogelijkheden van de gebruiker.

Bijvoorbeeld, in plaats van ze alleen door te sturen naar bepaalde aspecten van de applicatie, zou je in staat zijn om ze verschillende stukjes informatie te laten zien op basis van bijvoorbeeld hun rollen..

3. E-mails aanpassen

Dit specifieke voorbeeld is iets gecompliceerder omdat het add_filter oproepen komen binnen de context van een andere functie die een beller van een andere partij heeft.

We sturen in het bijzonder een e-mail, maar we willen er zeker van zijn dat we het inhoudstype, de inhoud en de naam hebben aangepast vóór het verzenden van de inhoud.

Om dit te doen, moeten we eerst een functie definiëren:

functie example_exmail_user ($ input) // Code verwijderd uit beknoptheid. // Stel dat $ message wordt gedefinieerd als de inhoud van de email add_filter ('wp_mail_content_type', create_function (", 'return" text / html ";')); add_filter ('wp_mail_from', 'example_mail_from'); add_filter ('wp_mail_from_name ',' example_mail_from_name '); if (wp_mail ($ input [' email-address '],' Your Account is created! ', $ message)) // Redirect back home wp_redirect (home_url ()); else  // Geef een pagina op waarop een fout moet worden opgegeven exit; function example_mail_from ($ email) retourneer '[email protected]'; function example_mail_from_name ($ name) return 'Example Web App';

Hierna moeten we functies definiëren die zijn aangesloten op het filter die hierboven zijn opgegeven. Namelijk…

  • wp_mail_content_type
  • wp_mail_from
  • wp_mail_from_name

Zoals u kunt zien, kunnen filters relatief snel gecompliceerd raken, maar dat zijn ze wel krachtig en als je begrijpt wat je aan het doen bent, en hoe alle stukjes bij elkaar passen, om zo te zeggen, dan kun je echt geweldige dingen doen.


Gewoon krassen op het oppervlak

Zoals met de meeste tutorials en voorbeelden op deze site, krabben we slechts de oppervlakte van wat kan worden gedaan met behulp van het WordPress-haaksysteem.

Natuurlijk zijn deze voorbeelden precies dat - voorbeelden van hoe krachtige acties en filters kunnen zijn als het gaat om het aanpassen van de WordPress-ervaring.

Hoewel dit specifieke artikel en de voorbeeldcode bedoeld zijn als een praktisch voorbeeld van sommige dingen die u kunt doen, zijn ze niet bedoeld als de definitieve gids voor het werken met haken.

In plaats daarvan zijn ze bedoeld om te laten zien hoe we kunnen profiteren van wat beschikbaar is in de WordPress API bij het bouwen van een webtoepassing.


Volgende…

In het volgende artikel gaan we meteen vanuit de doos naar verschillende faciliteiten van WordPress kijken. We zullen zien hoe ze nuttig zijn bij het bouwen van webapplicaties, hoe ze te gebruiken voor ons specifieke werk en hoe ze nuttig kunnen zijn bij het bouwen van webapplicaties..

Daarna zullen we bekijken hoeveel van deze functies goed werken binnen de context van een webtoepassing en hoe we haken kunnen gebruiken om het gedrag dat ze bieden verder aan te passen..