Valorificați puterea cârligelor WordPress: acțiuni și filtre explicate

Publicat: 2022-07-22

La fel ca orice CMS, WordPress nu va satisface întotdeauna toate nevoile dvs. imediat din cutie. Deoarece este open-source, l-ați putea pirata pentru a se conforma nevoilor dvs. de afaceri, dar, în schimb, puteți utiliza cârligele WordPress pentru a vă atinge obiectivele. Construirea cu cârlige este o strategie câștigătoare care îi eliberează pe dezvoltatorii WordPress să creeze aproape orice funcție de site imaginabilă.

WordPress Hooks: acțiuni și filtre

Cârligele WordPress nu sunt doar instrumente puternice de personalizare, ci sunt modul în care componentele WordPress interacționează între ele. Funcțiile conectate gestionează multe dintre sarcinile de rutină pe care le considerăm parte integrantă a WordPress, cum ar fi adăugarea de stiluri sau scripturi la o pagină sau înconjurarea textului de subsol cu ​​elemente HTML. O căutare a bazei de coduri WordPress Core dezvăluie mii de cârlige în peste 700 de locații. Temele și pluginurile WordPress conțin și mai multe cârlige.

Înainte de a trece la cârlige și de a explora diferența dintre cârligele de acțiune și cârligele de filtrare, să înțelegem unde se potrivesc în arhitectura WordPress.

Infrastructura WordPress

Elementele modulare ale WordPress se integrează cu ușurință unele cu altele, astfel încât să putem amesteca, potrivi și combina cu ușurință:

  1. WordPress Core: Acestea sunt fișierele necesare pentru ca WordPress să funcționeze. WordPress Core oferă arhitectură generalizată, tabloul de bord WP Admin, interogări de baze de date, securitate și multe altele. WordPress Core este scris în PHP și folosește o bază de date MySQL.
  2. Tema (sau tema părinte): o temă definește aspectul de bază și designul unui site web. Alimentată cu fișiere PHP, HTML, JavaScript și CSS, o temă funcționează citind baza de date MySQL WordPress pentru a genera codul HTML care se redă într-un browser. Cârligele dintr-o temă pot adăuga foi de stil, scripturi, fonturi sau tipuri de postări personalizate, de exemplu.
  3. Tema pentru copii: creăm noi înșine temele pentru copii pentru a regla aspectul și designul de bază pe care le oferă temele părinte. Temele copil pot defini foi de stil și scripturi pentru a modifica caracteristicile moștenite sau pentru a adăuga sau elimina tipuri de postări. Instrucțiunile temei pentru copil le înlocuiesc întotdeauna pe cele ale temei părinte.
  4. Plugin(e): Pentru a extinde funcționalitatea back-end a WordPress, putem alege dintre mii de pluginuri terțe. Hook-urile dintr-un plugin ar putea, de exemplu, să ne notifice prin e-mail când este publicată o postare sau să ascundă comentariile trimise de utilizatori care conțin limbaj interzis.
  5. Plugin(e) personalizat(e): Când un plugin terță parte nu satisface pe deplin nevoile de afaceri, îl putem turbocomprima prin scrierea unui plugin personalizat în PHP. Sau putem scrie un nou plugin de la zero. În ambele cazuri, am adăuga cârlige(e) pentru a extinde funcționalitatea existentă.

Piramida care arată, de la bază până în sus, cinci niveluri: (1) WordPress Core, (2) Tema, (3) Tema Child, (4) Pluginuri, (5) Pluginuri personalizate.
Ierarhia infrastructurii WordPress

Având în vedere că avem acces la sursa tuturor celor cinci straturi, de ce sunt necesare cârlige în WordPress?

Cod de siguranță

Pentru a ține pasul cu tehnologiile în evoluție, colaboratorii la WordPress Core, temele părinte și pluginurile lansează frecvent actualizări pentru a atenua vulnerabilitățile de securitate, a remedia erori, a rezolva incompatibilitățile sau pentru a oferi funcții noi. După cum știe orice consultant cu experiență în situații de urgență, eșecul de a menține actualizate componentele WordPress poate compromite sau chiar dezactiva un site.

Dacă modificăm direct copiile locale ale componentelor WordPress din amonte, întâmpinăm o problemă: actualizările suprascriu personalizările noastre. Cum putem ocoli acest lucru atunci când personalizăm WordPress? Prin cârlige, în tema copilului și plugin-uri personalizate.

Codificare în tema Copilului nostru

O temă pentru copii este un spațiu sigur în care putem personaliza aspectul temei instalate. Orice cod adăugat aici va suprascrie codul comparabil din părinte, fără riscul de a fi suprascris de o actualizare.

Când o temă copil este activată, aceasta se conectează la un părinte dezactivat, moștenind și afișând caracteristicile părintelui, rămânând neimpactat de actualizările părintelui. Pentru a nu cădea pradă tentației de a modifica o temă, cele mai bune practici sugerează ca o temă copil să fie activată ca parte a configurației noastre.

Scrierea pluginurilor personalizate

Când un plugin este activat, fișierul său functions.php se execută cu fiecare apel pe server. WordPress, la rândul său, încarcă și sortează cârlige din toate pluginurile active în funcție de prioritatea lor și le execută secvenţial. Pentru a extinde funcționalitatea unui plugin terță parte, putem scrie propriul nostru plugin personalizat WordPress.

Unde să plasăm cârligele noastre în WordPress

Poartă Exemplu Unde?
Tema copil PHP Plugin personalizat PHP
Pentru a modifica structura unei pagini web Adăugarea unei foi de stil personalizate pentru a schimba culorile și fonturile elementelor site-ului web
Pentru a modifica funcționalitatea unui alt plugin (adică, creați un plugin pentru a îmbunătăți funcționalitatea unui plugin terță parte) Adăugarea unui subtitlu (de exemplu, „Știri”) la tipurile de postări personalizate
Pentru a adăuga o nouă funcție care depășește WordPress Core Modificarea fluxului de lucru care are loc atunci când o postare este vizitată pentru a include actualizarea unui contor în baza de date

Pre-dive Prep: Definiții

Pentru a evita confundarea termenilor, vom rămâne la această terminologie:

  • Un cârlig este un punct favorabil în WordPress în care funcțiile sunt înregistrate pentru a rula. Ne putem conecta funcțiile la unul dintre numeroasele cârlige din WordPress și componentele sale sau ne putem crea propriile noastre.
    • Un cârlig de acțiune rulează acțiuni.
    • Un cârlig de filtru rulează filtrele.
  • O funcție conectată este o funcție de apel invers PHP personalizată pe care am „conectat-o” într-o locație de hook WordPress. Ce tip de utilizat depinde dacă cârligul este menit să permită modificări în afara funcției, de exemplu, adăugarea directă la ieșirea paginii web, modificarea unei baze de date sau trimiterea unui e-mail. Acestea sunt cunoscute ca efecte secundare .
    • Un filtru (sau o funcție de filtru ) ar trebui să evite efectele secundare lucrând doar asupra, apoi returnând o copie modificată a datelor transmise acestuia.
    • O acțiune (sau o funcție de acțiune ), în schimb, este menită să provoace efecte secundare. Nu are valoare de returnare.

Diagrama care arată funcțiile asociate cu cârlige compatibile. Cârligele de filtrare au funcții de filtrare atașate la ele, iar cârligele de acțiune au funcții de acțiune atașate.
Hook-urile WordPress pot avea mai multe funcții de apel invers, dar toate funcțiile de apel invers trebuie să se potrivească cu tipul de hook cu care sunt înregistrate.

Având în vedere aceste diferențe, putem începe explorarea cârligelor.

Abstracție și cod curat

Când o acțiune sau un filtru este încorporat într-un cârlig, după cum este necesar, îndeplinim obiectivele de a scrie o singură funcție per sarcină și de a evita duplicarea codului în cadrul unui proiect. De exemplu, să presupunem că vrem să adăugăm aceeași foaie de stil la trei șabloane de pagină (arhivă, o singură pagină și postare personalizată) în tema noastră. În loc să suprascriem fiecare șablon din părinte, apoi să recreăm fiecare în tema noastră copil, apoi să adăugăm foi de stil la secțiunile de cap individuale, putem scrie cod într-o singură funcție și îl atașăm cu cârligul wp_head .

Nomenclatură gânditoare

Evitați în mod proactiv conflictele denumind o temă copil sau cârlige de plugin personalizate în mod unic. A avea cârlige cu același nume într-un singur site este o rețetă pentru comportamentul neintenționat al codului. Cele mai bune practici prescriu să începem numele cârligului nostru cu un prefix unic, scurt (de exemplu, inițialele autorului, al proiectului sau ale companiei), urmat de un nume descriptiv al cârligului. De exemplu, folosind modelul „inițialele proiectului plus numele cârligului”, pentru proiectul Tahir's Fabulous Plugin, am putea denumi hook-urile noastre tfp-upload-document sau tfp-create-post-news .

Dezvoltare și depanare simultană

Un singur cârlig poate declanșa mai multe acțiuni sau filtru. De exemplu, am putea scrie o pagină web care conține mai multe scripturi, toate care utilizează cârligul de acțiune wp_head pentru a imprima HTML (de exemplu, o secțiune <style> sau <script> ) în secțiunea <head> de pe partea frontală a paginii.

Astfel, mai mulți dezvoltatori de pluginuri pot avansa mai multe obiective în paralel pe un singur plugin sau pot împărți pluginul în mai multe plugin-uri individuale, mai simple. Dacă o caracteristică nu funcționează corect, putem investiga și depana în mod direct funcția atașată fără a fi nevoie să căutăm întregul proiect.

Acțiuni

O acțiune rulează cod atunci când are loc un eveniment în WordPress. Acțiunile pot efectua operațiuni precum:

  • Crearea datelor.
  • Citirea datelor.
  • Modificarea datelor.
  • Ștergerea datelor.
  • Înregistrarea permisiunilor utilizatorilor autentificați.
  • Urmărirea locațiilor și stocarea lor în baza de date.

Exemple de evenimente în care pot fi declanșate acțiuni includ:

  • init , după ce WordPress se încarcă, dar înainte de trimiterea antetelor sale către fluxul de ieșire.
  • save_post , când o postare a fost salvată.
  • wp_create_nav_menu , imediat după ce un meniu de navigare este creat cu succes.

O acțiune poate interacționa cu un API pentru a transmite date (de exemplu, un link către o postare pe rețelele sociale), dar nu va returna date către cârligul de apelare.

Să presupunem că am dori să automatizăm partajarea tuturor postărilor noi de pe site-ul nostru prin intermediul rețelelor sociale. Începeți prin a căuta prin documentația WordPress un cârlig care poate fi declanșat ori de câte ori este publicată o postare.

Nu există comenzi rapide pentru a ne găsi cârligul: am învăța prin experiență sau am analiza cu atenție acțiunile enumerate pentru a găsi candidați probabili. Am putea lua în considerare save_post un candidat, dar îl excludem rapid, deoarece s-ar declanșa de mai multe ori în timpul unei singure sesiuni de editare. O alegere mai bună este transition_post_status , care se declanșează numai atunci când starea unei postări este schimbată (de exemplu, de la draft la publish , de la publish la coș de trash ).

Vom merge cu transition_post_status , dar ne vom rafina și acțiunea pentru a rula numai atunci când starea postării noastre trece la publish . În plus, urmând documentația oficială și API-urile diferitelor platforme de social media, putem integra și publica conținutul postării noastre, împreună cu o imagine prezentată:

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

Acum că știm cum să folosim cârlige de acțiune, există unul care este deosebit de util, mai ales când vine vorba de CSS.

Desemnarea priorităților cu wp_enqueue_scripts

Să presupunem că vrem să adăugăm ultima foaie de stil a temei noastre copil, după ce toate celelalte s-au încărcat, pentru a ne asigura că orice clase cu același nume care provin din altă parte sunt înlocuite de clasele temei noastre copil.

WordPress încarcă foile de stil într-o ordine implicită:

  1. Tema parentală
  2. Tema copilului
  3. Orice pluginuri

În acest construct:

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

…valoarea priority a acțiunii adăugate determină ordinea de execuție a acesteia:

  • Valoarea implicită de priority pentru wp_enqueue_scripts (sau orice acțiune) este „10”.
  • O funcție rulează mai devreme dacă îi resetăm priority la un număr mai mic.
  • O funcție rulează mai târziu dacă îi resetăm priority la un număr mai mare.

Pentru a încărca ultima foaie de stil a temei noastre copil, utilizați wp_enqueue_scripts , o acțiune care este folosită în mod obișnuit de temele și pluginurile WordPress. Trebuie doar să schimbăm prioritatea acțiunii temei noastre copil wp_enqueue_scripts la un număr mai mare decât valoarea implicită de „10”, să spunem „99”:

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );



În general, folosim acțiuni atunci când nu căutăm valori de returnare. Pentru a returna datele la cârligul de apelare, trebuie să ne uităm la filtre.

Filtre

Un filtru ne permite să modificăm datele înainte ca acestea să fie procesate pentru afișare într-un browser. În acest scop, un filtru acceptă variabile, modifică valoarea (valorile) transmise și returnează date pentru procesare ulterioară.

WordPress verifică și execută toate filtrele înregistrate înainte de a pregăti conținut pentru browsere. În acest fel, putem manipula datele înainte de a le trimite către browser sau baza de date, după caz.

Unul dintre clienții mei personalizează produsele pe care le vinde imprimându-le cu imagini pe care clienții le oferă. Acest client folosește pluginul WooCommerce pentru a gestiona comerțul electronic. WooCommerce nu acceptă această funcționalitate imediată. Prin urmare, am adăugat două biți de cod la functions.php clientului meu.php:

  1. woocommerce_checkout_cart_item_quantity , listat în documentația WooCommerce, este un cârlig de filtrare care permite clienților să adauge elemente externe la cărucioarele lor, înainte de finalizarea plății.
  2. my_customer_image_data_in_cart este un filtru pe care îl vom scrie noi înșine și îl vom folosi pentru a declanșa woocommerce_checkout_cart_item_quantity ori de câte ori WooCommerce pregătește un coș pentru afișare.

Folosind următorul șablon, putem adăuga filtrul nostru și modifica comportamentul implicit al coșului:

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

Adăugăm filtre în același mod în care adăugăm acțiuni. Filtrele funcționează în mod similar cu acțiunile, inclusiv cu modul în care sunt procesate prioritățile. Diferența majoră dintre filtre și acțiuni este că o acțiune nu va returna date către hook-ul de apelare, ci un filtru va returna.

Cârlige de acțiune personalizate și cârlige de filtrare

Scrierea cârligelor de acțiune personalizate nu extinde Wordpress Core, ci doar creează noi puncte de declanșare în propriul nostru cod.

Crearea de cârlige de acțiune personalizate

Adăugarea unui cârlig personalizat în tema sau pluginul nostru permite altor dezvoltatori să extindă funcționalitatea fără a modifica baza noastră de cod. Pentru a adăuga un cârlig personalizat, utilizați aceeași tehnică pe care o folosește baza de cod WordPress Core: La punctul de declanșare dorit, numim pur și simplu do_action cu numele noului nostru cârlig, adăugând opțional câte argumente ar putea fi utile apelurile noastre:

 do_action( 'myorg_hello_action', $arg1, $arg2 );

Acest cod pur și simplu rulează orice funcții de apel invers care au fost conectate la cârligul nostru personalizat. Rețineți că spațiul de nume este global, așa cum s-a sugerat anterior, ar fi o idee bună să prefațăm numele noastre personalizate de cârlig cu o formă scurtă a numelui organizației noastre (și, eventual, a proiectului nostru), de unde aici myorg_ .

Acum că am definit myorg_hello_action , este disponibil pentru dezvoltatori să se conecteze exact în același mod pe care l-am acoperit mai devreme pentru hook-urile încorporate: Definiți o funcție, apoi apelați add_action() .

Cu excepția cazului în care dorim să folosim un cârlig nou pur intern – este o modalitate utilă de a ne structura codul, până la urmă – va trebui să comunicăm disponibilitatea acestuia în aval, altor membri ai echipei noastre sau utilizatorilor externi ai pluginului nostru, printr-o documentație clară. .

Crearea de cârlige de filtrare personalizate

Modelul WordPress pentru cârlige de filtre personalizate este același cu cel al cârligelor de acțiune, cu excepția faptului că numim apply_filters() în loc de do_action() .

Să trecem printr-un exemplu mai concret de data aceasta. Să presupunem că pluginul nostru creează un meniu din bara laterală, care constă în mod normal din patru elemente. Vom adăuga un cârlig de filtru personalizat, astfel încât noi (și dezvoltatorii din aval) să putem modifica acea listă de articole în altă parte:

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

Asta este — cârligul nostru personalizat de filtrare myorg_sidebar_menu este acum gata de utilizare într-un plugin care poate fi încărcat mai târziu sau în altă parte în acesta. Acest lucru permite oricui care scrie cod în aval să personalizeze bara noastră laterală.

Noi sau alți dezvoltatori vom urma același model atunci când folosim un cârlig WordPress încorporat. Cu alte cuvinte, vom începe prin a defini câteva funcții de apel invers care returnează o versiune modificată a datelor care le sunt transmise:

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

Ca și în cazul exemplelor noastre anterioare, acum suntem gata să conectam funcțiile noastre de apel invers de filtru la cârligul nostru personalizat:

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

Cu asta, am conectat cele două exemple de funcții de apel invers la cârligul nostru de filtru personalizat. Ambele modifică acum conținutul original al $the_sidebar_menu . Deoarece am acordat o valoare de priority mai mare pentru add_donate_item , acesta rulează mai târziu, după ce se execută lowercase_sidebar_menu .

Trei panouri care descriu rezultatele funcțiilor de filtrare descrise în această secțiune. Panoul 1 arată bara laterală așa cum ar fi dacă nu s-ar fi conectat apel invers în filtru. Panoul 2 arată bara laterală așa cum ar fi dacă returnarea de apel lowcase_sidebar_menu conectată în filtru, cu toate cele patru nume de elemente în minuscule. Panoul 3 arată bara laterală așa cum ar fi dacă retragerea de apel donate_button ar fi conectată și în filtru --- aceleași elemente cu litere mici ca în Panoul 2 plus un al cincilea element, „Donează”, lăsat în majuscule.

Dezvoltatorii din aval sunt întotdeauna liberi să conecteze mai multe funcții de apel invers la myorg_sidebar_menu . Pe măsură ce fac, ei pot folosi parametrul de priority pentru a-și face hook-urile să ruleze înainte, după sau între cele două exemple de funcții de apel invers.

Cerul este limita cu acțiuni și filtre

Cu acțiuni, filtre și cârlige, funcționalitatea WordPress poate crește cu pasi. Putem dezvolta funcții personalizate pentru site-ul nostru, lăsând propriile noastre contribuții la fel de extensibile ca și WordPress. Hooks ne permit să aderăm la siguranță și la cele mai bune practici în timp ce ducem site-ul nostru WordPress la nivelul următor.

Blogul Toptal Engineering își exprimă recunoștința lui Fahad Murtaza pentru expertiza sa, testarea beta și revizuirea tehnică a acestui articol.