Înțelegerea codurilor scurte WordPress

Dacă ați folosit WordPress de mult timp, probabil că ați folosit deja câteva shortcodes.

Shortcode-urile sunt mici fragmente utile care vă permit să introduceți un fel de funcționalitate specială în conținutul dvs., care altfel nu ar fi posibilă. De exemplu: o mulțime de pluginuri pentru galerie de imagini și glisoare vă oferă un cod scurt pe care îl puteți introduce pur și simplu în conținut oriunde doriți, pentru ca imaginile potrivite să apară acolo. Shortcode-urile arată de obicei cam așa:

[example shortcode]

Cu alte cuvinte: codurile scurte fac ca ceva special să se întâmple oriunde sunt plasate în text.
Dar nu sunteți limitat la coduri scurte predefinite; puteți defini coduri scurte personalizate pentru a face tot ce doriți! Ele pot fi simple, complexe sau orice altceva.

În această serie, vom începe cu un cod scurt simplu și vom merge până la câteva exemple mai complicate (și chiar mai utile!).

Notă: aici vom lucra în principal cu PHP, în special în fișierul functions.php al temei. Dacă nu utilizați o temă secundară (sau o temă personalizată/de pornire pe care o puteți edita fără teama ca actualizările să suprascrie modificările dvs.), veți dori să creați o temă secundară înainte de a începe.

De asemenea, rețineți: nu aveți nevoie de cunoștințe PHP pentru a parcurge această postare, dar cunoașterea măcar a elementelor de bază vă va ajuta. Codul implicat aici este destul de simplu și am încercat să facem cât mai ușor posibil de copiat și personalizat. Vom explica fiecare parte a codului pe măsură ce mergem, dar dacă sunteți complet nou la tema WordPress PHP, fiți conștienți de faptul că un pic de cod prost în fișierul functions.php poate distruge site-ul.

Un exemplu simplu de cod scurt util

Să presupunem că vrem un shortcode care injectează o secțiune specială de informații despre autor într-o postare, ca acesta:

În loc să creăm și să stilăm caseta, imaginea și textul în editorul vizual WordPress, vom crea doar un shortcode pentru a scoate tot acel lucru cu un simplu fragment!

(Notă secundară: WordPress are modalități mai bune de a lucra cu profilurile de autor, dar rămânem cu acest exemplu, deoarece demonstrează cât de ușor este să folosești coduri scurte pentru a pune anumite blocuri de conținut pe o pagină.)

Pasul 1: Adăugați codul scurt în fișierul functions.php al temei dvs

Veți folosi funcția add_shortcode pentru a da un nume codului scurt și a spune WordPress ce ar trebui să facă de fiecare dată când este folosit codul scurt. Adăugați această linie în fișierul functions.php al temei dvs.:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

Nu contează cu adevărat unde în functions.php , dar pentru a evita conflictele, vă recomandăm să îl puneți la sfârșit. (Dacă fișierul se termină cu o etichetă de închidere ?>, totuși, ar trebui să apară chiar înainte, nu după.)

Înainte de a merge mai departe, haideți să spargem puțin acea linie, astfel încât să înțelegem ce se întâmplă de fapt aici. Cele două fragmente de text, sau „argumente”, din paranteze nu sunt speciale, într-adevăr; sunt doar nume. Să trecem peste ce înseamnă fiecare:

1. Primul argument: în acest caz, author_bio – spune WordPress numele real al codului tău scurt. Acesta va fi textul pe care utilizatorii îl pot introduce, între paranteze, pentru a utiliza codul scurt. Deci, cu acest cod așa cum este scris, [author_bio] va fi codul nostru scurt pentru a declanșa caseta noastră de biografii ale autorului.
   Acest text ar putea fi orice, dar cel mai bine este întotdeauna să încerci să fii unic. În acest fel, nu veți risca ca numele dvs. de cod scurt să intre în conflict cu al altcuiva din alt plugin sau temă instalat.
2. Al doilea argument: în acest caz, create_author_bio – îndreaptă WordPress către funcția PHP reală pe care ar trebui să o execute ori de câte ori este utilizat acest shortcode. Vom crea acea funcție în pasul următor; pentru moment, doar anunțăm WordPress cum va fi numele lui. (Acest nume ar trebui să fie, de asemenea, unic, pentru a evita conflictele.)

Deci, dacă vă ajută, vă puteți gândi la cod astfel:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

Dacă sunteți interesat de mai multe detalii, consultați intrarea add_shortcode Codex.

Pasul 2: Creați funcția pentru a gestiona codul scurt

Acum trebuie să realizăm funcția pe care tocmai am numit-o!

Deoarece tocmai i-am spus WordPress la ultimul pas că numele funcției noastre este create_author_bio, codul nostru ar trebui să arate acum astfel, odată ce am adăugat noua funcție:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

Este posibil să observați că această funcție nu face nimic încă; tot ce este în interiorul ei este un comentariu. Ne vom ocupa de asta în pasul următor. Deocamdată, vrem doar să subliniem că există într-adevăr doar două piese aici: înregistrarea codului scurt și funcția care se întâmplă ori de câte ori este utilizat. WordPress PHP poate părea intimidant, dar este chiar atât de simplu!

Notă secundară: nu contează dacă funcția create_author_bio vine după funcția add_shortcode sau înaintea acesteia. Ordinea nu este importantă în acest caz.

Pasul 3: Faceți ca funcția să facă ceva

Acum nu mai rămâne decât să ne facem ca funcția să facă ceea ce ne dorim!

O funcție ca aceasta ar putea face orice, dar indiferent de ce, ar trebui să returneze în cele din urmă o singură valoare (cum ar fi un șir de text sau un număr). Această valoare ar putea fi de orice lungime sau complexitate, dar orice returnează funcția este ceea ce va apărea oriunde este folosit codul nostru scurt.

Pentru scopurile noastre, acesta va fi doar niște HTML simplu. Iată marcajul pentru a adăuga imaginea și biografia autorului nostru într-un element <aside> cu o clasă personalizată (dar nu puneți asta nicăieri încă; ne uităm la ea doar ca o previzualizare pentru moment):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

În cele din urmă, vom folosi acea clasă autor-bio-box pe prima linie pentru a stila biografia cu CSS. (Vom folosi o clasă în loc de un ID, doar în cazul în care doriți să adăugați mai mult de un cod scurt de autor pentru conținutul scris de mai mulți autori.) Dar amintiți-vă, acesta ar putea fi orice dorim să punem în pagină!

Acum, tot ce trebuie să facem este ca funcția codului nostru scurt să returneze HTML-ul de mai sus!

Deoarece fișierul functions.php ar trebui să conțină doar... ei bine, funcții PHP (și, de asemenea, pentru ordine), am eliminat rupturile de linie și spațiile dintre acele elemente HTML pe care tocmai le-am uitat și le-am introdus într-un șir (în interiorul ghilimelelor simple) . Dar din punct de vedere funcțional, este încă același fragment HTML pe care tocmai l-am văzut mai sus și așa ar trebui să arate codul nostru PHP final:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

Am terminat cu PHP! Odată ce am salvat fișierul functions.php cu codul final de mai sus, orice autor poate introduce pur și simplu [author_bio] în orice pagină sau postare, iar HTML-ul de mai sus va apărea în locul shortcode-ului!

În plus, lucrul cu adevărat tare este: dacă vrem să ne actualizăm biografia, nu va trebui să edităm fiecare loc în care apare! În schimb, tot ce trebuie să facem este să edităm codul din fișierul nostru functions.php , iar acesta va fi actualizat peste tot dintr-o dată. Îngrijit, nu?

Cu toate acestea, pentru a profita la maximum de acest lucru, probabil că vom dori să adăugăm un stil special la cutia bio.

Pasul 4: Adăugați niște CSS

Shortcode-ul nu este grozav fără un stil, așa că haideți să-l adăugăm! Poate fi necesar să ajustați puțin unele dintre valori, în funcție de fonturile propriului site (cel din imaginea de mai sus este Fanwood Text) și de ce reguli CSS sunt deja în vigoare. Sau poate doriți doar să încercați ceva diferit!

Acest CSS ar putea fi copiat în fișierul style.css al temei (copil) sau dacă rulați WordPress 4.7 sau o versiune superioară (ceea ce ar trebui să fiți!), puteți pur și simplu să lipiți acest CSS în caseta „CSS suplimentar” din Personalizare ecran:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

Acum lucrurile ar trebui să arate mult mai bine. Dar simțiți-vă liber să vă jucați cu CSS pentru a face caseta de autor a dvs. și pentru a o face să se simtă ca acasă pe site-ul dvs.!

Recomandat: faceți funcția „Pluggable”

Acest lucru nu este specific codurilor scurte și nu este strict necesar pentru ca codul să funcționeze, dar este cea mai bună practică și este un moment bun pentru a-l menționa.

În primul rând, câteva detalii despre cum funcționează PHP :

Vă amintiți cum am ajuns să ne denumim funcția create_author_bio ? Ei bine, nu este nimic special la numele create_author_bio; am fi putut denumi la fel de ușor funcția noastră orice am vrut (deși cel mai bine este dacă numele funcției vă oferă cel puțin un indiciu despre ceea ce face, motiv pentru care am ales create_author_bio ).

Dar iată chestia: dacă două funcții PHP sunt numite același lucru, rezultatul va fi o eroare fatală care va împiedica încărcarea site-ului, deoarece PHP nu va avea idee care funcție este cea potrivită. PHP nu ghicește, așa că pur și simplu se oprește.

Și nu doar codul nostru trebuie să ne îngrijorăm; un site WordPress poate folosi cod de la zeci sau poate chiar sute de dezvoltatori diferiți, în funcție de pluginurile și temele instalate. Dacă același nume de funcție este folosit de două ori, totul se defectează!

Este rău și, evident, vrem să ne asigurăm că nu se va întâmpla niciodată.

Putem face asta făcând funcția noastră „conectabilă”; cu alte cuvinte, spunându-i lui WordPress să nu ne creeze funcția dacă există deja o altă funcție cu același nume. Este elegant simplu; pur și simplu includem codul nostru existent în această declarație condiționată ușoară:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

Această expresie condițională se verifică doar pentru a fi sigur că o funcție numită create_author_bio nu există deja. Tot codul nostru PHP pe care l-am folosit până acum poate fi mutat în interiorul acestei declarații, între acoladele { } .

Totuși, cel mai bine este să numiți funcțiile cât mai unic posibil! Făcând conectarea funcției noastre, evită doar o eroare fatală. Deci, dacă ar exista un conflict de denumire, codul nostru scurt tot nu ar funcționa, dar cel puțin site-ul ar fi încă activ și nimic altceva nu ar fi stricat.

Concluzie

Asta este! Sper că ți-a plăcut să creezi un shortcode personalizat al autorului! Dacă ați urmărit, tot ce trebuie să faceți este să introduceți [author_bio] oriunde într-o pagină sau postare și codul dvs. va apărea!

Acest cod scurt poate fi adaptat cu ușurință pentru a scoate orice pe o pagină. Un gif, un bloc personalizat de HTML și/sau JavaScript, o imagine sau un videoclip... orice doriți!

Cu toate acestea, deși acest exemplu este util dacă trebuie doar să afișați o singură valoare statică pe pagină undeva, nu este foarte flexibil. Va returna întotdeauna exact același lucru de fiecare dată și adesea avem nevoie de coduri scurte pentru a fi mai adaptabile decât atât.

Vești bune: am acoperit doar elementele de bază ale codurilor scurte și sunt capabile de mult, mult mai mult!