Share
Welkom bij het tweede deel van de serie. In het eerste artikel hebben we de coderingsstandaarden van WordPress uitgelegd, hoe u namespaces-botsingen, opmerkingen in de code en enkele basistips voor beveiliging kunt voorkomen.
Vandaag gaan we wat dieper en schrijven we wat meer code en leren we enkele technieken om de prestaties en veiligheid van onze plug-ins te verbeteren. De onderwerpen die we behandelen zijn als volgt:
Pak je code-editor en maak je klaar om te spelen met WordPress!
Het eerste waar je rekening mee moet houden, is dat WordPress twee prachtige functies heeft (wp_enqueue_script en wp_enqueue_style) om u uw scripts en stijlen te laten opnemen. Voeg ze daarom niet handmatig toe in de koptekst of gebruik wp_head actie haak.
Als u de WordPress-methoden gebruikt, kunnen caching en minificerende plug-ins uw scripts opnemen in hun functies. U kunt ze gemakkelijk in footer of header plaatsen, u kunt afhankelijke scripts toevoegen en ook alle scripts gebruiken. trucs worden hieronder uitgelegd, samen met andere functies.
Niet correct:
Accentsconagua
add_action ('wp_head', 'my_custom_scripts'); function my_custom_scripts () echo ''; Correct:
add_action ('wp_enqueue_scripts', 'my_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); Ik zal u geen volledige handleiding geven over hoe u wp_enqueue_xxxx moet gebruiken omdat er veel van beschikbaar zijn (en de Codex is een geweldige bron!) En ik probeer eenvoudig aan te geven hoe u scripts in uw thema's of plug-ins moet toevoegen.
Wat je moet doen altijd in gedachten houden is om de lichtste footprint mogelijk te verlaten. Dit betekent dat je geen bestanden moet opnemen waar ze niet horen te zijn.
Je zou denken "het is maar een bestand, het heeft geen invloed op de website" en met die mindset is het alsof je een papier in de grond gooit in het park, want het is maar een stuk papier, maar zo werken de dingen niet: als alle ontwikkelaars laten hun scripts overal achter, de uiteindelijke gebruiker eindigt met een volledig opgeblazen site en dat willen we niet.
Nu we dat hebben besproken, laten we enkele tips zien over hoe u uw scripts alleen kunt opnemen als dat nodig is.
// ALLEEN VOORIN EINDE add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // ALLEEN BACKEND add_action ('admin_enqueue_scripts', 'my_back_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); Maar wacht! Laten we een stap verder gaan en alleen scripts opnemen op de pagina's die u echt nodig hebt. Een goede methode is om ze eerst te registreren en vervolgens in te checken op de benodigde pagina's
// ALLEEN VOORIN EINDE add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); if (is_page ('mijn pagina')) wp_enqueue_script ('script-handler'); // Wees creatief om alleen bestanden op te nemen als dat nodig is // if (is_single ()) // if (is_home ()) // if ('cpt-name' == get_post_type ()) // ALLEEN BACKENDEND add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); function my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // Om het alleen op te nemen bij het bewerken van een bericht als ('edit.php' == $ hook) wp_enqueue_script ('script-handler'); // Als u een optiepagina als deze hebt toegevoegd // $ plugin_screen_id = add_options_page (...) // kunt u $ screen = get_current_screen () doen; if ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ('script-handler'); / * Een andere manier om scherm id * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts') te gebruiken;);// ALLEEN VOORIN EINDE add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // als u een script nodig heeft dat moet worden opgenomen voor een shortcode // Voeg het niet overal toe // In plaats daarvan kunt u het alleen opnemen wanneer het nodig is global $ post; if (is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ('script-handler'); Hoewel de andere codefragmenten van toepassing zijn op beide, scripts en stijlen, werken de volgende alleen met wp_enqueue_style (tenminste voor nu).
// ALLEEN VOORIN EINDE add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); function my_front_customs_styles () wp_register_style ('my-plug-in-css', plugins_url ('my-plugin / css / plugin.css')); // Laten we deze CSS alleen opnemen voor oude (en waardeloze) browsers wp_enqueue_style ('my-plugin-css'); globale $ wp_styles; $ wp_styles-> add_data ('my-plug-in-css', 'conditional', 'lte IE 9'); Je kunt nog meer voorbeelden in de Codex zien. Een ander uitstekend voorbeeld dat u kunt gebruiken om al uw plug-ins te starten, is de WordPress Plugin-boilerscherm. Bekijk de code om te zien hoe scripts en stijlen worden opgenomen. De Wpfavs-plug-in (gebaseerd op WordPress Plugin Boilerplate) is een goed voorbeeld voor het maken van een plug-in voor de backend van Wordpress.
Voor dit onderwerp deel ik enkele slechte gewoonten die ik veel heb gezien bij het doen van Ajax in WordPress en ze konden worden onderverdeeld in de volgende zinnen:
wp_localize_scriptIk weet dat jQuery Ajax een fluitje van een cent maakt en we kunnen gewoon een bestand maken met de naam ajax.php, omvattenwp-load.php erop en doen ons Ajax daar. Maar dat is niet de "WordPress-manier" - het is niet toekomstbestendig. Bovendien is het minder veilig en mis je veel WordPress-functionaliteit.
De juiste manier is om de wp_ajax_my_action en wp_ajax_nopriv_my_action actie haken. Het belangrijkste verschil tussen beide is dat de eerste wordt gebruikt voor aangemelde gebruikers en de tweede wordt gebruikt voor niet-geregistreerde gebruikers.
Merk op dat "my_action" moet worden gewijzigd voor uw actienaam. We zullen zien hoe dat in een moment werkt.
Laten we dit allemaal in een eenvoudig voorbeeld bekijken met een beetje code en verbeeldingskracht. Laten we ons voorstellen dat we 5 berichten willen weergeven wanneer een gebruiker (al dan niet ingelogd) op een knop klikt. We gaan deze actie een naam geven cool_ajax_example, dus laten we beginnen met het toevoegen van de Ajax-callbackfuncties die de gegevens retourneren.
U kunt deze code opnemen in uw functions.php of in je plug-in.
// Eerst voegen we de acties hooks add_action toe ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); function cool_ajax_example_callback () ...Zoals je kunt zien, gebruiken beide hooks dezelfde callback-functie die de gegevens retourneert. Merk ook op dat onze actienaam aan het einde van de haaknaam staat wp_ajax_cool_ajax_example
Het is zeer belangrijkom de actienaam gelijk overal te schrijven of dit zal helemaal niet werken.
Voordat we verdergaan met de callback-functie, gaan we naar de jQuery die nodig is voor de Ajax-oproep. Het jQuery-script wordt geactiveerd wanneer we op een eenvoudige HTML-knop drukken en we moeten dat verzoek verzenden naar de admin-ajax.php bestand dat het het script is dat alle AJAX-aanvragen in Wordpress afhandelt. Ook moeten we een nonce toevoegen zoals we al zeiden dat we het willen beveiligen, dus hier komt de actie tot stand wp_localize_script functie.
Als u uw scripts op de juiste manier hebt opgenomen zoals uitgelegd aan het begin van dit artikel, heeft u de naam van een scripthandler (in onze voorbeelden hierboven 'script-handler'), dus laten we deze gebruiken om onze PHP-waarden door te geven aan ons javascript-bestand. U kunt dit stukje code direct na de wp_enqueue_function gebruikt om het JavaScript te omvatten.
wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts')));Zoals je kunt zien wp_localize_script is een vrij eenvoudige manier om elke PHP-variabele door te geven aan onze JavaScript-bestanden en het zal geldige xhtml afdrukken vanwege de -tags. De bovenstaande code wordt afgedrukt in de header wanneer het JavaScript-bestand met script-handler zoals de naam is geladen en ziet het er ongeveer als volgt uit:
Nu is het tijd om ons javascript-bestand te maken, laten we het noemen my.js en het zal er ongeveer zo uitzien:
(functie ($) $ (functie () $ ('# knop'). klik (functie (e) e.preventDefault (); $ .ajax (url: myVarName.ajax_url, data: action: ' cool_ajax_example ', nonce: myVarName.nonce, success: function (response) $ (' # response-container '). html (response);, type: "POST",););); ) (jQuery);Let op hoe we de nonce gebruiken en ajax_url waar we mee zijn geslaagd wp_localize_script. Controleer ook of we een POST-waarde met de naam 'actie' doorgeven die overeenkomt met de actie naam die we in de wp_ajax haken.
Nu is het tijd om onze callback-functie af te ronden. Het eerste wat we moeten doen, is controleren of de nonce klopt en dan kunnen we wat posts retourneren.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Het eerste dat we doen is de nonce controleren en het script doden als het fout is als (! Wp_verify_nonce ($ nonce, 'return_posts')) overlijdt ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publiceren', 'posts_per_page' => 5,); // De query $ the_query = new WP_Query ($ args); // De lus if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); echo ''. get_the_title (). '
'; echo ''; else echo 'Berichten niet gevonden'; / * Oorspronkelijke berichtgegevens herstellen * / wp_reset_postdata (); // vergeet dit niet // We doen een eenvoudige oproep, we willen niet dat er nog iets anders sterft (); Als het geval dat u iets complexer moet zijn, zoals het verwijderen van een bericht, moet u altijd naar toestemmingen van de gebruiker kijken, zoals ik vermeldde bij het bedelen van dit onderwerp. Als u bijvoorbeeld wilt dat alleen beheerders bepaalde acties uitvoeren die u in uw script kunt doen, dan is dat zo:
if (current_user_can ('beheerder')) wp_delete_post ($ postid, $ force_delete); Met alle bovenstaande tips ben je nu een meester in WordPress Ajax en kun je elke gewenste actie uitvoeren. Probeer met het bovenstaande te spelen en pas het aan uw behoeften aan. Ik persoonlijk vind het leuk om te gebruiken json datatype en dat doe ik echo json_encode () in plaats van eenvoudige echo's op mijn scripts te doen, maar dat is een andere zaak.
Het doel van deze sectie is niet om u te leren hoe filters en acties werken, er zijn uitstekende tutorials rond dat onderwerp die dit tot in detail uitleggen. Wat ik hier ga uitleggen, is waarom u filters en acties aan uw plug-ins moet toevoegen en u enkele voorbeelden moet geven voor een gemakkelijk begrip.
Maar laten we eerst een inleiding geven tot deze concepten:
Controleer de Plugin API voor meer informatie over actiehaken en filters.
Het is simpel: omdat het je plug-in beter maakt. Op die manier kunnen ontwikkelaars en normale gebruikers samen uw plug-in uitbreiden, aanpassen of verbeteren tot voorbij het oorspronkelijke doel zonder de kern ervan te beïnvloeden.
Neem bijvoorbeeld een eCommerce-plugin. Door de haken en filters kun je nieuwe plug-ins maken die eraan vasthaken, zoals nieuwe betalingsgateways, verzendfuncties en nog veel meer.
Word niet gek door overal acties en filters toe te voegen. In het begin zul je dit een beetje moeilijk of irritant vinden, dus probeer te denken alsof je een andere ontwikkelaar bent die naar een nieuwe plug-in kijkt en je jezelf afvraagt: "Heb ik hier een actiehaak nodig?". Ook zal een groot percentage actie en filters op aanvraag worden toegevoegd zodra u een ondersteuningsaanvraag ontvangt (ja, u krijgt ze altijd!) Of feedback van uw gebruikers..
Zoals alles in het leven, als dit eenmaal een gewoonte is, zul je veel duidelijk zien waar je ze moet opnemen.
Een paar aanbevelingen voor waar filters zijn opgenomen:
Laten we de callback-functie gebruiken die in dit artikel wordt gebruikt om een voorbeeld van de bovenstaande aanbevelingen te bekijken. Om filterbare variabelen in deze case te maken die we gebruiken apply_filters ()
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Het eerste dat we doen is de nonce controleren en het script doden als het verkeerd is als (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publiceren', 'posts_per_page' => 5,); // De query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // De lus if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); echo ''. get_the_title (). '
'; echo ''; else echo 'Berichten niet gevonden'; / * Oorspronkelijke berichtgegevens herstellen * / wp_reset_postdata (); // vergeet dit niet // We doen een eenvoudige oproep, we willen niet dat er nog iets anders sterft (); Zoals je kunt zien heb ik een filter toegevoegd aan de $ args variabele die net eerder zal lopen WP_Query voert de query uit. Met een eenvoudig filter kan elke gebruiker bijvoorbeeld wijzigen hoeveel berichten worden geretourneerd.
functie wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; $ args teruggeven; add_filter ('cool_ajax_query', 'wpt_alter_coolajax_query');U kunt filters in verschillende scenario's gebruiken, gebruik gewoon uw fantasie. Bijvoorbeeld op mijn plug-in WordPress sociale uitnodigingen laat ik gebruikers de pop-up stylesheet wijzigen met een filter voor het geval ze een heel andere stijl gebruiken.
Of bij deze gelegenheid wanneer de plug-in e-mails verstuurt, geef ik de mogelijkheid om het bericht "Van e-mail" te wijzigen wp_mail () gaat gebruiken.
functie get_from_email () if (isset ($ this -> _ user_data)) return apply_filters ('wsi_from_email', $ this -> _ user_data-> user_email); return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')); Als het op acties aankomt, verandert dit een beetje. U wilt actiehaken toevoegen in de volgende scenario's (niet beperkt tot):
Om deze haakbare gebieden te maken gebruiken we de do_action () functie. Laten we ze toepassen in ons voorbeeld.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Het eerste dat we doen is de nonce controleren en het script doden als het fout is als (! Wp_verify_nonce ($ nonce, 'return_posts')) overlijdt ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publiceren', 'posts_per_page' => 5,); // De query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // De lus if ($ the_query-> have_posts ()) // we lopen de haak voordat de lus is procuced do_action ('cool_ajax_before_loop', get_the_ID ()); echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); // we lopen de haak voordat de titel wordt afgedrukt do_action ('cool_ajax_before_title', get_the_ID ()); echo ''. get_the_title (). '
'; // we lopen de haak nadat de titel is afgedrukt do_action ('cool_ajax_after_title', get_the_ID ()); echo ''; // we lopen de haak nadat de lus do_action is processed ('cool_ajax_after_loop', get_the_ID ()); else echo 'Berichten niet gevonden'; / * Oorspronkelijke berichtgegevens herstellen * / wp_reset_postdata (); // vergeet dit niet // We doen een eenvoudige oproep, we willen niet dat er nog iets anders sterft (); Zoals je kunt zien, geef ik een argument door aan de haken met get_the_ID () . Elke functie die in onze actiehaak haakt, kan dat argument gebruiken. Laten we enkele voorbeelden bekijken:
/ ** * Toon bericht featured afbeelding voor titel * / functie wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'thumbnail'); add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Toon postcategorieën na titel * / functie wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id); add_action ('cool_ajax_after_title', 'wpt_show_post_cats');Ook kunt u gebruiken do_action () haakt om andere acties uit te voeren in plaats van nieuwe markeringen toe te voegen zoals het bovenstaande voorbeeld. In WordPress Social Invitations bijvoorbeeld, heb ik een actieknop die elke keer dat een bericht wordt verzonden wordt geactiveerd. Dan gebruiken myCRED plugin Ik kan de actie van punten geven aan de gebruiker die zojuist het bericht heeft verzonden.
Zoals u kunt zien, is het toevoegen van hooks en filters niet alleen voordelig voor uw plug-in, maar ook voor andere ontwikkelaars en gebruikers. Dus waarom niet beginnen met het toevoegen van enkele filters en acties in de buurt?
Vandaag hebben we geleerd om scripts en stijlen toe te voegen, hoe Ajax de WordPress-weg roept en enkele basistips voor filter en acties. We hebben al veel informatie om een leuke plug-in te ontwikkelen en ik kan nu zeggen dat deze series bijna zijn afgelopen.
In het aankomende en laatste artikel ga ik het hebben over internationalisering, debugging en documentatie om zaken af te ronden over wat ik denk dat de belangrijkste dingen zijn om te overwegen bij het ontwikkelen van een plug-in.
