Cea mai eficientă metodă pentru adăugarea de scripturi inline în WordPress

Publicat: 2022-06-16

Scripturile inline sunt două cuvinte simple care provoacă fiori pe coloana vertebrală a dezvoltatorilor. Scripturile inline sunt o modalitate ușoară de a adăuga JavaScript (JS), CSS și HTML în textul postării dvs. WordPress. Deși pot fi utilizate în multe scopuri, o utilizare generală este de a face modificări din mers când publicați un nou articol WordPress. Unii ar putea argumenta că nu este necesar, dar acest lucru vă va asigura că site-ul dvs. funcționează fără probleme și eficient.

Un lucru pe care majoritatea utilizatorilor WordPress îl trec cu vederea este completarea scripturilor pe site-urile lor. Indiferent dacă doriți să implementați un text inline pe o singură pagină sau pe întregul site web, există o mulțime de modalități de a realiza acest lucru cu WordPress. Adăugarea de scripturi inline pe site-ul dvs. WordPress poate fi la fel de simplă odată ce înțelegeți metodele potrivite pentru a face acest lucru corect. Această postare de blog va discuta cele mai eficiente modalități de a adăuga cu ușurință scripturi inline în WordPress. Continuați să citiți pentru a afla mai multe.

Adăugarea prin Wp_print_scripts

Dacă doriți să adăugați texte WordPress inline, atunci funcția WordPress wp_print_scripts sau/și admin_print_scripts este răspunsul dvs. WordPress wp_print_scripts poate afișa etichete de text în capul unui document, ceea ce se face de obicei atunci când includ fișiere JS sau CSS. Această funcție WordPress vă va permite să vă faceți site-ul mai interactiv sau să adăugați noi funcționalități. Ca și în cazul oricărei funcții WordPress, există câteva reguli simple de urmat înainte de a o utiliza pe site-ul dvs. web.

Această funcție stabilește trei variabile pe baza opțiunilor pluginului WordPress și le emite pe front-end (secțiunea head) folosind cârligul admin_print_scripts. Pentru a adăuga caractere inline în zona de administrare, puteți, de asemenea, să înlocuiți wp_print_scripts cu funcția admin_print_scripts și să o numiți pe zi.

Când WordPress este instalat pentru prima dată, acesta vine cu multe texte care sunt adăugate automat pe site. Acest lucru poate duce la o creștere a timpului de încărcare și a utilizării CPU pe serverul dvs. O modalitate de a combate acest lucru este utilizarea funcției wp_print_scripts, astfel încât să încărcați textele doar atunci când sunt necesare sau dorite. Acestea fiind spuse, haideți să aruncăm o privire rapidă la câteva avantaje și dezavantaje ale utilizării funcției wp_print_script pentru a adăuga caractere inline în postarea dvs. WordPress:

Pro:

Este întotdeauna simplu să adăugați orice text inline la „secțiunea de cap” a paginilor WordPress;
Codul pe care îl adăugați nu va avea nicio restricție, ceea ce înseamnă că puteți adăuga variabile JS, funcții, metode, condiționale sau orice doriți să adăugați pe site-ul dvs.

Contra:

Nu există o modalitate specifică de a asocia codul adăugat cu scripturile înregistrate;
În cele mai multe cazuri, codul de ieșire pentru diverși factori ar putea să nu fie o modalitate reală și consecventă de a controla locația codului de ieșire. Cu toate acestea, puteți utiliza oricând parametrul <priority> de sub <add_action> pentru a controla locația codului adăugat.

Utilizați funcția wp_add_inline_script().

Recent, WordPress a lansat o nouă funcție aplicată pentru a adăuga JavaScript inline la postările WordPress. Cu toate acestea, această nouă integrare este compatibilă, începând cu versiunea 4.5 WordPress și este o modalitate mai proeminentă de a adăuga texte inline în comparație cu alte opțiuni disponibile. Definim funcția wp_add_inline_script() și vă așteptați ca aceasta să facă treaba impecabil. Chiar și cel mai experimentat dezvoltator WordPress de acolo poate confirma acest fapt.

Funcția wp_add_inline_script() este o modalitate de a adăuga caractere inline pe site-ul dvs. fără a edita niciun cod pe pagina WordPress. Acest lucru vă permite să faceți modificări în timp real fără a avea nevoie de acces FTP sau de a utiliza un plugin. Această funcție este, de asemenea, una dintre integrările esențiale pe care le puteți utiliza pentru a vă personaliza site-ul WordPress. Procedura vă permite să adăugați texte inline în codul site-ului dvs. web, ceea ce înseamnă că acestea vor fi adăugate direct în etichetele HTML de pe pagina dvs. web. Acest lucru admite mult mai multă personalizare decât utilizarea fișierelor JS externe sau a link-urilor către alte site-uri web.

Pro:

Funcția wp_add_inline_script() este o modalitate valoroasă de a adăuga caractere inline pe blogul dvs. WordPress;
Poate fi o modalitate ușoară și convenabilă pentru dezvoltatori de a adăuga cod JS fără a schimba tema WordPress sau fișierele plugin sau edita fișierul șablon header.php;
Acest lucru poate fi util pentru adăugarea de scripturi precum codul Google Analytics. Vă scutește de editarea fișierului header.php de fiecare dată când există o actualizare cu funcțiile sau setările Google Analytics.

Contra:

Singurul dezavantaj al funcției wp_add_inline_script() este că este disponibilă numai începând cu versiunea WordPress 4.5.

Utilizați funcția wp_localize_script().

Funcția wp_localize_script() este un utilitar WordPress util pentru a adăuga caractere inline în paginile individuale de pe site-ul dvs. WordPress. Este perfect dacă aveți nevoie de funcționalitate rapidă și temporară pe site-urile dvs., cum ar fi un eveniment sau o promovare. Această funcție acceptă un număr variabil de argumente și emite o listă de șiruri JS adăugate la capul documentului. Acest lucru poate fi util dacă, de exemplu, utilizați jQuery și doriți codul scriptului numai pe anumite pagini.

Wp_localize_script() pune în coadă fișierul dvs. JS și îi oferă un ID/mâner de „shapeSpace_script”, care definește o matrice asociativă care conține variabilele dvs. În cele din urmă, aceste variabile JS sunt transmise la wp_localize_script() pentru a fi incluse în linie cu shapeSpace_script înregistrat. Ca rezultat, vă permite să aplicați orice variabile JS, cum ar fi shapeSpace.varl, printre altele. Această funcție este dedicată localizării variabilelor JS pentru utilizare cu traducerea limbii și internaționalizarea. Cu toate acestea, majoritatea dezvoltatorilor WordPress îl folosesc ca o modalitate obișnuită de a adăuga caractere inline pe site-urile lor.

Pro:

Wp_localize_script() permite asocierea „read:require” cu scriptul dvs. înregistrat existent. Aceasta înseamnă că oferă o modalitate excelentă și consecventă de a controla locația relativă a textului personalizat al site-ului dvs. web.

Contra:

Singurul dezavantaj este că puteți adăuga doar variabile JS ( var = „valoare” ). Deci, este imposibil să adăugați alte scripturi inline, cum ar fi funcții, condiționale, ecuații, printre altele, folosind wp_localize_script().

Utilizați Fallback

După cum am menționat mai devreme, metode specifice, cum ar fi wp_add_inline_script() sunt disponibile numai începând cu versiunea WordPress 4.5 sau mai mare. Cu toate acestea, punând totul cap la cap, puteți crea o metodă sigură de a adăuga caractere în linie la fișierele dvs. WordPress, indiferent de versiunea WordPress pe care o utilizați. Cel mai eficient mod de a face acest lucru este prin intermediul a trei funcții din secțiunea head (front-end) post plugin.

Primul lucru esențial de făcut este să puneți în coadă fișierul dvs. JS și să apelați următoarea funcție pentru a adăuga linii inline prin funcția wp_add_inline_script(). A treia funcție este de rezervă la orice versiune mai veche decât versiunea 4.5. Acest lucru va funcționa fără îndoială pe WordPress 4.5 și orice versiune distinctă. Aici se întâmplă adevărata magie. Puteți continua cu metoda alternativă care vă va duce la bun sfârșit treaba pe varianta WordPress la alegere, revenind la 2.1 sau orice altceva.

Pro:

Puteți avea mai multe fișiere JS pe site-ul dvs. web fără a adăuga solicitări HTTP suplimentare pentru a le încărca simultan. Aceasta înseamnă că veți putea reduce timpul de încărcare pentru vizitatorii site-ului dvs.
Dacă un script eșuează, alte scripturi din aceeași funcționalitate de rezervă vor funcționa în continuare, deoarece sunt încărcate asincron din fire diferite, din cauza dependenței lor unul de celălalt.

Contra:

Când scriptul eșuează, utilizatorul va vedea un spațiu gol în loc de cod în câteva cazuri. Acest lucru poate părea că nu este o afacere atât de mare, dar este un lucru esențial de remarcat ca dezvoltator WordPress.

O recapitulare despre adăugarea unui script inline în WordPress

Limitarea tehnicilor alternative disponibile la dispoziție face ca funcția wp_add_inline_script() să fie metoda superioară pentru adăugarea caracterelor inline WordPress. Aceasta este considerată cea mai eficientă soluție în zilele noastre și, contrar credinței populare, această funcție poate fi utilizată pe orice versiune de WordPress dacă utilizați tehnica de rezervă. Pentru informațiile dvs., mai jos este o recapitulare rapidă a celor mai eficiente modalități de a adăuga scripturi inline în miezul WordPress:

wp_add_inline_script() vă permite să adăugați orice cod JS la orice script înregistrat;
wp_print_scripts sau admin_print_scripts vă permite să instalați orice cod în secțiunea front-end sau header;

wp_localize_script() vă permite, de asemenea, să adăugați variabile JS la orice script înregistrat;
Fallback vă permite să modelați o tehnică completă care funcționează exact cu orice versiune de WordPress.

Notă: Dacă doriți să adăugați stil/CSS inline în loc de JavaScript, WordPress vă oferă un set de funcții „adăugați stil” care seamănă cu cele folosite pentru adăugarea de scripturi. De exemplu, consultați wp_print_styles și wp_add_inline_styles.

Concluzie

Scripturile inline sunt o modalitate rapidă și ușoară de a adăuga funcționalități site-ului dvs. WordPress. Scriind scriptul în JavaScript, puteți crea un script inline care face tot ce doriți să facă pe pagină fără a necesita pluginuri sau coduri suplimentare. Acest tutorial prezintă cele mai eficiente metode de a adăuga scripturi inline în WordPress.

Sunteți un editor WordPress cu ceva experiență în adăugarea de scripturi pe site-uri WP? Ce metodă ați recomanda unui dezvoltator începător care dorește să facă treaba rapid? Vă rugăm să nu ezitați să utilizați secțiunea de comentarii pentru a vă împărtăși opinia și pentru a pune întrebări tulburătoare.

Biografia autorului:

Arthur este un specialist în marketing digital și un blogger de afaceri. El dezvoltă startup-uri interesante prin diverse rețele de socializare și împărtășește experiența sa cu clienții pentru a-și promova mai bine afacerea. În timpul său liber, Arthur studiază japoneză și scrie articole despre tendințele de transformare digitală.