Mai multe sfaturi pentru cele mai bune practici în dezvoltarea WordPress

Bine ați venit în a doua parte a seriei. În primul articol, am explicat standardele de codificare WordPress, modul de evitare a coliziunilor în grupurile de nume, comentariile din cod și câteva sfaturi de securitate de bază.

Astăzi, vom merge mai adânc și vom scrie mai multe coduri și vom învăța câteva tehnici de îmbunătățire a performanței și a securității pluginurilor noastre. Subiectele pe care le vom acoperi sunt următoarele:

  1. Cum și când ar trebui să includ scripturile / stilurile mele
  2. Cum să efectuați în mod corespunzător apelurile Ajax
  3. Filtre și acțiuni pentru a oferi libertate utilizatorilor dvs.

Luați editorul de cod și pregătiți-vă să jucați cu WordPress!

Cum și când trebuie să includ scripturile mele?

Primul lucru pe care trebuie să-l țineți cont este că WordPress are două funcții minunate (wp_enqueue_script și wp_enqueue_style) pentru a vă permite să includeți scenariile și stilurile dvs. În acest scop, vă rugăm să nu le adăugați manual în antet sau folosind wp_head cârlig de acțiune. 

Dacă utilizați metodele WordPress, plug-in-urile de caching și de minificare vor putea include script-urile în funcțiile lor, veți putea alege să le plasați foarte ușor în subsolul sau antetul, veți putea adăuga scripturi dependente și, de asemenea, să utilizați toate trucuri explicate mai jos împreună cu alte caracteristici. 

Incorect:

add_action ('wp_head', 'my_custom_scripts'); funcția my_custom_scripts () echo '„; 

Corect:

add_action ('wp_enqueue_scripts', 'my_customs_scripts'); funcția my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri ()) ./js/my.js ', array (' jquery '),' 1.0.0 '; 

Nu vă voi da un tutorial complet cu privire la modul de utilizare a wp_enqueue_xxxx, deoarece există multe dintre ele disponibile (și Codexul este o resursă excelentă!) Și încerc să subliniez pur și simplu cum ar trebui să adăugați scripturi în temele sau pluginurile.

Ce ai nevoie mereu în minte înseamnă a lăsa cea mai ușoară amprentă posibilă. Aceasta înseamnă că nu trebuie să includeți fișiere unde nu ar trebui să fie. 

S-ar putea sa te gandesti "este doar un fisier, nu va afecta site-ul" si cu mentalitatea asta e ca si cum ai arunca o hartie in pamant in parc pentru ca este doar o singura bucata de hartie, dar asta nu functioneaza: Daca toți dezvoltatorii își lasă scripturile peste tot, utilizatorul final se va termina cu un site complet umflat și nu vrem asta.

Acum că am acoperit acest aspect, să vedem câteva sfaturi despre cum să includeți scenariile dvs. numai atunci când este necesar.

1. Nu includeți niciodată fișierele Front End în backend și vice versa

// NUMĂRUL FRÂNTULUI NUMAI add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); funcția my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri ()) ./js/my.js ', array (' jquery '),' 1.0.0 ';  / / BACKEND ONLY add_action ('admin_enqueue_scripts', 'my_back_customs_scripts'); funcția my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri ()) ./js/my.js ', array (' jquery '),' 1.0.0 '; 

Dar asteapta! Să mergem cu un pas mai departe și să includem doar scripturi în paginile de care aveți nevoie. O metodă bună este să le înregistrați mai întâi și apoi să introduceți în paginile necesare

2. Includeți numai fișierele pe paginile necesare

// NUMĂRUL FRÂNTULUI NUMAI add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); funcția my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri ()) ./js/my.js ', array (' jquery '),' 1.0.0 '; dacă (is_page ('my-page')) wp_enqueue_script ('script-handler');  // Fi fi creativ pentru a include fișiere numai atunci când este necesar // if (is_single ()) // if (is_home ()) // if ('cpt-name' == get_post_type ()) // BACKENDEND ONLY add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); funcția my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri ()) '/js/my.js', array ('jquery'), '1.0.0'; // Să o includeți numai atunci când editați un post dacă ('edit.php' == $ hook) wp_enqueue_script ('script-handler');  // Dacă ați adăugat o pagină de opțiuni ca aceasta // $ plugin_screen_id = add_options_page (...) // puteți face $ screen = get_current_screen (); dacă ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ("script-handler");  / * O altă modalitate de a utiliza id de ecran * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts');

3. Includeți scripturile de utilizat cu coduri scurte?

// NUMĂRUL FRÂNTULUI NUMAI add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); funcția my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri ()) ./js/my.js ', array (' jquery '),' 1.0.0 '; // dacă aveți nevoie de un script care să fie inclus pentru un scurtcod // Nu îl adăugați peste tot // În loc să-l includeți doar atunci când este necesar $ post global; dacă is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ("script-handler"); 

4. Includeți stiluri cu condiționări

În timp ce celelalte fragmente de cod se aplică atât scripturilor, cât și stilurilor, cu care lucrați numai cu wp_enqueue_style (cel putin pentru moment).

// END END ONLY add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); funcția my_front_customs_styles () wp_register_style ('my-plugin-css', plugins_url ('my-plugin / css / plugin.css')); // Să includeți acest css numai pentru browserele vechi (și crappy) wp_enqueue_style ('my-plugin-css'); global $ wp_styles; $ wp_styles-> add_data ('my-plugin-css', 'conditional', 'lte IE 9'); 

Puteți vedea mai multe exemple în Codul. Un alt exemplu excelent pe care îl puteți utiliza pentru a porni toate pluginurile dvs. este Boilerplate Plugin WordPress. Uitați-vă la cod pentru a vedea cum sunt incluse scripturile și stilurile. Pluginul Wpfavs (bazat pe WordPress Plugin Boilerplate) este un bun exemplu pentru crearea unui plugin pentru backend-ul Wordpress.

2. Cum să efectuați corect apelurile Ajax

Pentru acest subiect voi împărtăși câteva obiceiuri proaste pe care le-am văzut foarte mult atunci când am făcut Ajax în WordPress și s-ar putea împărți în următoarele propoziții:

  • Apelurile Ajax nu ar trebui să se facă direct la un dosar
  • Apelurile Ajax ar trebui să utilizeze o valoare nonce
  • Verificați permisiunile utilizatorilor, dacă este necesar
  • Variabilele JavaScript ar trebui să fie incluse cu wp_localize_script

Știu că jQuery îl face pe Ajax să numească o bucată de tort și putem crea doar un fișier numit ajax.php, includewp-load.php pe el și să ne ajute Ajax acolo. Dar aceasta nu este "modul WordPress" - nu este o dovadă în viitor. Chiar mai mult, este mai puțin sigur și veți pierde o mulțime de funcționalități WordPress.

Modul corect este de a utiliza wp_ajax_my_action și wp_ajax_nopriv_my_action cârlige de acțiune. Principala diferență dintre cele două este că prima este utilizată pentru utilizatorii înregistrați, iar cea de-a doua este utilizată pentru utilizatorii care nu sunt logați.

Rețineți că "my_action" trebuie modificat pentru numele acțiunii. Vom vedea cum funcționează într-un moment.

Să vedem toate acestea într-un exemplu simplu, cu un pic de cod și imaginație. Să ne imaginăm că dorim să afișăm 5 postări atunci când un utilizator (logat sau nu) face clic pe un buton. Vom numi această acțiune ca fiind cool_ajax_example, astfel încât să începem să adăugăm funcțiile de apel invers Ajax care vor returna datele.

Puteți include acest cod pe dvs. functions.php sau în interiorul pluginului.

// Mai întâi adăugăm acțiunile cârligelor add_action ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); funcția cool_ajax_example_callback () ...

După cum puteți vedea ambele cârlige, utilizați aceeași funcție de retur care va returna datele. De asemenea, observați că numele acțiunii noastre se află la sfârșitul numelui cârligului wp_ajax_cool_ajax_example

Este foarte importantpentru a scrie numele de acțiune chiar peste tot sau acest lucru nu va funcționa deloc.

Înainte de a continua cu funcția de apel invers, să trecem la jQuery necesar pentru apelul Ajax. Scriptul jQuery se va declanșa când apăsăm un simplu buton HTML și trebuie să trimitem acea solicitare către admin-ajax.php fișier care este script-ul care se ocupă de toate solicitările AJAX în Wordpress. De asemenea, trebuie să adăugăm un nonce așa cum am spus deja că vrem să îl asigurăm, astfel că vine aici la acțiune wp_localize_script funcţie.

Dacă ați inclus scripturile dvs. în modul corect așa cum este explicat la începutul acestui articol, aveți un nume de script script (în exemplele de mai sus script-handler), deci hai să-l folosim pentru a trece valorile noastre PHP în fișierul nostru javascript. Puteți include acest bit de cod imediat după wp_enqueue_function folosit pentru a include JavaScript.

wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts'));

După cum puteți vedea wp_localize_script este o modalitate destul de ușoară de a transmite orice variabilă PHP fișierelor noastre JavaScript și va imprima valabil xhtml din cauza  Etichete. Codul de mai sus va fi tipărit în antet atunci când fișierul JavaScript este script-handler ca nume este încărcat și va arata ceva de genul:

Acum este momentul să creați fișierul nostru javascript, să-l sunăm my.js si va arata cam ca:

(funcția ($) $ (funcția () $ ('# button'). (răspunsul) $ ('# response-container'). html (răspuns);, tastați: "POST",);; ) (jQuery);

Rețineți modul în care folosim nonce și ajax_url cu care am trecut wp_localize_script. De asemenea, verificați dacă trecem o valoare POST numită "acțiune" care se potrivește cu numele acțiunii pe care am folosit-o în wp_ajax cârlige. 

Acum este timpul să terminăm funcția de apel invers. Primul lucru pe care trebuie să-l facem este să verificăm dacă nonce are dreptate și apoi să putem returna unele posturi.

funcția cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Primul lucru pe care îl facem este să verificăm nonce și să omorâm scriptul dacă este greșit dacă (! Np_verify_nonce ($ nonce, 'return_posts')) mor ("Wrong nonce!"); $ args = array ('post_type' => 'post', 'post_status' => 'publica', 'posts_per_page' => 5,); // Query $ the_query = noua valoare WP_Query ($ args); // Buclă dacă ($ the_query-> have_posts ()) echo '
„; în timp ce ($ the_query-> have_posts ()) $ the_query-> the_post (); echo "

". get_the_title (). '

„; echo '
„; altceva echo 'Mesajele nu au fost găsite'; / * Restaurarea datelor originale postale * / wp_reset_postdata (); // nu uita asta // Facem un apel simplu, nu vrem altceva sa fugim mor ();

În cazul în care aveți nevoie de ceva mai complex, cum ar fi ștergerea unei postări, verificați întotdeauna permisiunile utilizatorilor, așa cum am menționat la cerșitul acestui subiect. De exemplu, dacă doriți doar administratorilor să facă anumite acțiuni, puteți face în scenariul dvs. ceva de genul:

dacă (actual_user_can ("administrator")) wp_delete_post ($ postid, $ force_delete); 

Cu toate sfaturile de mai sus, sunteți acum un maestru în WordPress Ajax și puteți efectua orice acțiune doriți. Încercați să jucați cu cele de mai sus și să le adaptați la nevoile dvs. Îmi place personal să folosesc JSON datatype și eu echo json_encode () în loc să fac ecouri simple pe scripturile mele, dar asta eo altă problemă.

3. Filtre și acțiuni

Scopul acestei secțiuni nu va fi să vă învăț cum funcționează filtrele și acțiunile, există tutoriale excelente în jurul acelui subiect care o explică foarte detaliat. Ceea ce vă voi explica aici este motivul pentru care ar trebui să adăugați filtre și acțiuni pe pluginurile dvs. și să vă arătăm câteva exemple de înțelegere ușoară.

Dar mai întâi să facem o introducere la aceste concepte:

  • Hooks: Un cârlig de acțiune este adăugat la un anumit punct al plugin-ului dvs., de obicei în jurul unor acțiuni importante (Ex: înainte de conținut, după conținut). Orice utilizator poate apoi "să-l" cupleze cu funcții pentru ca codul să fie executat în acel moment. Atunci când un cârlig de acțiune rulează, toate funcțiile care sunt conectate sau "cuplate", vor funcționa la fel.
  • Filtre: Un cârlig de filtrare este, de asemenea, plasat în plugin-ul dvs. pentru alte funcții care se leagă. În acest caz, filtrele permit ca datele să fie manipulate sau modificate înainte de a fi utilizate. Deci, de obicei, plasați-o cu variabilele pe care doriți să le permiteți utilizatorilor să manipuleze.

Verifică Plugin API pentru mai multe informații despre cârligele și filtrele de acțiune.

De ce ar trebui să-mi fac pluginul extensibil?

Este simplu simplu: pentru că vă face pluginul mai bun. În acest fel, dezvoltatorii și utilizatorii normali împreună vor putea să extindă, să își adapteze sau să-și îmbunătățească plugin-ul dincolo de scopul inițial fără a afecta nucleul acestuia. 

Luați, de exemplu, un plugin de eCommerce. Din cauza cârligelor și a filtrelor, puteți crea noi pluginuri care se cuplează în el, cum ar fi, de exemplu, noile gateway-uri de plată, funcții de transport și multe altele.

Sună frumos, dar unde trebuie să-i adaug pe pluginul meu?

Nu vă faceți nebun să adăugați acțiuni și filtre peste tot. La început veți găsi acest lucru un pic dificil sau enervant, așa că încercați să gândiți ca și cum ați fi un alt dezvoltator care vă uită la un nou plugin și vă întrebați: "Am nevoie de aici un cârlig de acțiune?". De asemenea, un procent mare de acțiuni și filtre vor fi adăugate la cerere odată ce începeți să obțineți cererea de sprijin (da, le obțineți întotdeauna!) Sau feedback de la utilizatorii dvs..

Ca tot ce in viata, odata ce acesta devine un obicei, veti vedea foarte clar unde sa le includeti.

Câteva recomandări pentru a include filtrele:

  • Când sunt configurate matricele, este o opțiune bună să adăugați un filtru pentru a le permite utilizatorilor să le modifice.
  • Atunci când obiectele de date sunt configurate același lucru se întâmplă. Poate doriți să lăsați utilizatorii să modifice obiectul înainte de a fi utilizat
  • Când se configurează șiruri de date, puteți adăuga filtre pentru a le permite utilizatorilor să le schimbe.

Să folosim funcția de apel invers utilizat pentru acest articol pentru a vedea un exemplu de recomandări de mai sus. Pentru a crea variabile filtrabile pe acest caz pe care îl folosim apply_filters ()

funcția cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Primul lucru pe care îl facem este să verificăm nonce și să omorâm scenariul dacă este greșit dacă ! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!');  $ args = array ('post_type' => 'post', 'post_status' => 'publicare', 'posts_per_page' => 5,); // Query $ the_query = noua valoare WP_Query (apply_filters ('cool_ajax_query', $ args)); // Buclă dacă ($ the_query-> have_posts ()) echo '
„; în timp ce ($ the_query-> have_posts ()) $ the_query-> the_post (); echo "

". get_the_title (). '

„; echo '
„; altceva echo 'Mesajele nu au fost găsite'; / * Restaurarea datelor originale postale * / wp_reset_postdata (); // nu uita asta // Facem un apel simplu, nu vrem altceva sa fugim mor ();

După cum puteți vedea, am adăugat un filtru la $ args care va fi difuzata chiar inainte WP_Query execută interogarea. Cu un filtru simplu orice utilizator poate schimba, de exemplu, câte mesaje sunt returnate.

funcția wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; întoarcere $ args;  add_filter ("cool_ajax_query", "wpt_alter_coolajax_query");

Puteți utiliza filtrele în diferite scenarii, pur și simplu utilizați-vă imaginația. De exemplu, în plugin-ul meu WordPress Social Invitatii am lăsat utilizatorilor să schimbe foaia de stiri pop-up cu un filtru în cazul în care modul în care un stil cu totul diferit.

Sau cu ocazia când plugin-ul trimite e-mailuri îți dau posibilitatea de a schimba mesajul "De la e-mail" wp_mail () va folosi.

funcția get_from_email () if (isset ($ this -> _ user_data)) returnați apply_filters ('wsi_from_email', $ this -> _ user_data-> user_email);  return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')); 

Când vine vorba de acțiuni, acest lucru se schimbă puțin. Doriți să adăugați cârlige de acțiune în următoarele scenarii (nu se limitează la acestea):

  • înainte de executarea sarcinii,
  • după executarea sarcinilor,
  • în timpul sarcinii sunt executate pentru a extinde, de exemplu, marcarea.

Pentru a crea aceste zone atractive, folosim do_action () funcţie. Să le aplicăm în exemplul nostru.

funcția cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Primul lucru pe care îl facem este să verificăm nonce și să omorâm scriptul dacă este greșit dacă (! Np_verify_nonce ($ nonce, 'return_posts')) mor ("Wrong nonce!"); $ args = array ('post_type' => 'post', 'post_status' => 'publica', 'posts_per_page' => 5,); // Query $ the_query = noua valoare WP_Query (apply_filters ('cool_ajax_query', $ args)); // Buclele dacă ($ the_query-> have_posts ()) // executăm cârligul înainte să se proceseze bucla do_action ('cool_ajax_before_loop', get_the_ID ()); echo "
„; în timp ce ($ the_query-> have_posts ()) $ the_query-> the_post (); // rulați cârligul înainte ca titlul să fie imprimat do_action ('cool_ajax_before_title', get_the_ID ()); echo "

". get_the_title (). '

„; // rula cârligul după ce titlul este tipărit do_action ('cool_ajax_after_title', get_the_ID ()); echo '
„; // executam cârligul după ce buclei sunt procesate do_action ('cool_ajax_after_loop', get_the_ID ()); altceva echo 'Mesajele nu au fost găsite'; / * Restaurarea datelor originale postale * / wp_reset_postdata (); // nu uita asta // Facem un apel simplu, nu vrem altceva sa fugim mor ();

După cum puteți vedea că trec un argument cu cârligele get_the_ID () . Orice funcție care se află în cârligul nostru de acțiune va putea să utilizeze acel argument. Să vedem câteva exemple:

/ ** * Afișează imaginea postată înainte de titlu * / funcția wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'thumbnail');  add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Afișează categoriile post după titlu * / funcția wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id);  add_action ("cool_ajax_after_title", "wpt_show_post_cats");

De asemenea, puteți folosi do_action () cârlige pentru a rula alte acțiuni în loc de a adăuga un nou markup ca exemplul de mai sus. De exemplu, în invitații sociale WordPress am un cârlig de acțiune care se declanșează de fiecare dată când este trimis un mesaj. Apoi, folosind myCRED plug-in pot activa acțiunea de a da puncte utilizatorului care tocmai a trimis mesajul.

După cum puteți vedea adăugând cârligele și filtrele, nu veți beneficia doar de pluginul dvs., ci și de alți dezvoltatori și utilizatori. Deci, de ce nu începeți adăugarea unor filtre și acțiuni în jurul valorii?

Concluzie

Astăzi am învățat cum să includeți scenarii și stiluri, cum să procedați Ajax apelând modul WordPress și câteva sfaturi de bază pentru filtre și acțiuni. Avem deja o mulțime de informații pentru a dezvolta un plugin frumos și pot spune acum că aceste serii sunt aproape de final.

 În articolul viitoare și finală, voi vorbi despre internaționalizare, depanare și documentație pentru a încheia lucrurile pe ceea ce cred că sunt cele mai importante lucruri pe care trebuie să le luați în considerare în timp ce dezvoltați un plugin.

Cod