Când am început să lucrăm cu WordPress, adăugarea de JavaScript și CSS părea suficient de simplă. Pur și simplu introduceați codul direct în tema sau plugin-ul dvs. și mergeați mai departe.
Dar de-a lungul anilor, noi (și mulți dintre cititorii noștri) am învățat pe calea cea grea că această scurtătură poate crea probleme serioase. De la scripturi care intră în conflict între ele, până la site-uri întregi care se strică după o actualizare, am văzut totul.
Vestea bună este că WordPress are de fapt o modalitate corectă de a încărca scripturile și stilurile tale – și odată ce o cunoști, te vei scuti de multe bătăi de cap pe viitor.
În acest ghid, vă vom arăta cum să adăugați corect JavaScript și CSS în WordPress. Indiferent dacă creați o temă personalizată sau primul dvs. plugin, acești pași vă vor ajuta să o faceți în mod sigur și fiabil.
Greșeală comună la adăugarea scripturilor și foilor de stil în WordPress
Mulți dezvoltatori noi de pluginuri WordPress și teme fac greșeala de a adăuga direct scripturile sau CSS-ul inline în pluginurile și temele lor.
Unii folosesc greșit funcția wp_head pentru a încărca scripturile și foile de stil.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Deși codul de mai sus poate părea mai ușor, este modul greșit de a adăuga scripturi în WordPress și duce la mai multe conflicte în viitor.
De exemplu, dacă încărcați jQuery manual și un alt plugin încarcă jQuery prin metoda corectă, atunci jQuery va fi încărcat de două ori. Dacă este încărcat pe fiecare pagină, acest lucru va afecta negativ viteza și performanța WordPress.
Este, de asemenea, posibil ca cele două să fie versiuni diferite, ceea ce poate cauza, de asemenea, conflicte.
Acestea fiind spuse, să aruncăm o privire la modul corect de a adăuga scripturi și fișiere de stil.
De ce să înșiruim scripturi și stiluri în WordPress?
WordPress are o comunitate puternică de dezvoltatori. Mii de oameni din întreaga lume dezvoltă teme și plugin-uri pentru WordPress.
Pentru a ne asigura că totul funcționează corect și că nimeni nu interferează cu munca altcuiva, WordPress are un sistem de înșiruire (enqueuing). Acest sistem oferă o modalitate programabilă de încărcare a foilor de stil JavaScript și CSS.
Prin utilizarea funcțiilor wp_enqueue_script și wp_enqueue_style, îi spui WordPress-ului când să încarce un fișier, unde să-l încarce și care sunt dependențele sale.
Acest sistem permite, de asemenea, dezvoltatorilor să utilizeze bibliotecile JavaScript încorporate care vin împreună cu WordPress, în loc să încarce același script terț de mai multe ori. Acest lucru reduce timpul de încărcare a paginii și ajută la evitarea conflictelor cu alte pluginuri și teme.
Cum să înregistrați corect scripturile în WordPress?
Încărcarea scripturilor în mod corespunzător în WordPress este foarte ușoară. Mai jos este un exemplu de cod pe care l-ați putea lipi în fișierul plugin-ului dvs., în fișierul functions.php al temei dvs. sau într-un plugin de fragmente de cod pentru a încărca scripturile în mod corespunzător în WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Explicație:
Am început prin a ne înregistra scriptul prin funcția wp_register_script(). Această funcție acceptă 5 parametri:
- $handle – Handle este numele unic al scriptului tău. Al nostru se numește „my_amazing_script”
- $src – src este locația scriptului dvs. Folosim funcția plugins_url pentru a obține URL-ul corect al folderului nostru de pluginuri. Odată ce WordPress găsește acest lucru, atunci va căuta fișierul nostru amazing_script.js în acel folder.
- $deps – deps este pentru dependență. Deoarece scriptul nostru folosește jQuery, am adăugat jQuery în zona de dependență. WordPress va încărca automat jQuery dacă nu este deja încărcat pe site.
- $ver – Acesta este numărul versiunii scriptului nostru. Acest parametru nu este obligatoriu.
- $in_footer – Dorim să încărcăm scriptul în footer, așa că am setat valoarea la true. Dacă doriți să încărcați scriptul în header, atunci îl veți face false.
După ce am furnizat toți parametrii în wp_register_script, putem apela pur și simplu scriptul în wp_enqueue_script(), ceea ce face ca totul să se întâmple.
Ultimul pas este să folosești hook-ul de acțiune wp_enqueue_scripts pentru a încărca efectiv scriptul. Deoarece acesta este un cod exemplu, l-am adăugat chiar sub tot restul. hook de acțiune
Dacă ați adăuga acest lucru la tema sau pluginul dvs., atunci puteți plasa acest hook de acțiune acolo unde scriptul este de fapt necesar. Acest lucru vă permite să reduceți amprenta de memorie a pluginului dvs.
Acum unii s-ar putea întreba de ce facem pasul suplimentar de a înregistra mai întâi scriptul și apoi de a-l enqueui? Ei bine, acest lucru permite altor proprietari de site-uri să deregisterize scriptul dvs. fără a modifica codul de bază al plugin-ului dvs.
Înregistrarea corectă a stilurilor în WordPress
La fel ca scripturile, puteți, de asemenea, să vă înregistrați foile de stil. Uitați-vă la exemplul de mai jos:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
În loc să folosim wp_enqueue_script, acum folosim wp_enqueue_style pentru a adăuga foaia noastră de stil.
Observați că am folosit hook-ul de acțiune wp_enqueue_scripts atât pentru stiluri, cât și pentru scripturi. În ciuda numelui, această funcție funcționează pentru ambele.
În exemplele de mai sus, am folosit funcția plugins_url pentru a indica locația scriptului sau stilului pe care doream să-l înrolăm.
Totuși, dacă folosiți funcția enqueue scripts în tema dvs., atunci pur și simplu folosiți get_template_directory_uri() în schimb. Dacă lucrați cu o temă copil, atunci folosiți get_stylesheet_directory_uri().
Mai jos este un exemplu de cod:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Sperăm că acest articol v-a ajutat să învățați cum să adăugați corect JavaScript și stiluri în WordPress. De asemenea, ați putea dori să studiați codul sursă al celor mai bune pluginuri WordPress pentru exemple de cod din viața reală, sau să consultați ghidul nostru despre cum să adăugați cu ușurință JavaScript în paginile sau postările WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Mrteesurez
Acest articol este puțin tehnic, dar îmi place, deoarece mă ocup de dezvoltarea WordPress, m-a făcut să învăț mai multe despre utilizarea PHP și adăugarea de foi de stil și scripturi într-un mod corect. Cele mai bune practici sunt prezentate în acest articol, astfel încât să nu existe conflicte între coduri în viitor.
Schroedingers Katze
Salutări, mulțumesc pentru distribuire! Explicație excelentă.
Suport WPBeginner
You’re welcome
Admin
Jean-Michel
Salut,
Am urmat ce este spus aici, dar acum am o pagină albă goală pe site-ul meu. Cineva îmi poate da un indiciu?
Mulțumesc
Suport WPBeginner
Se pare că fie ați copiat codul incorect, fie a avut o problemă cu ceva de pe site-ul dvs. Puteți elimina codul folosind: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Dacă l-ați adăugat manual, altfel ați putea folosi:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Acest articol mi-a fost de mare ajutor. Mulțumesc.
Mark
Articol tipic care te lasă și mai confuz după decât înainte…
Zaved Hossain
Acest lucru este frumos, deși practica mea obișnuită este să adaug wp_enqueue_script/style într-o singură linie fără înregistrare. Programatorii trebuie să fie atenți la parametri, poate o mică explicație a acestora ar fi utilă. De exemplu, diferitele versiuni de jquery (scriptul tău jquery poate necesita o versiune diferită de cea a wordpress-ului) și unde să o adaugi (antet sau subsol, care este determinat de parametrul true/false). Scriptul jquery trebuie adăugat în antet (de unde și un 'false' trebuie să fie trecut ca valoare a parametrului), altfel s-ar putea să nu funcționeze.
Hansjörg Leichsenring
Există adesea multe fișiere style.css.
Cum pot asigura ordinea corectă de încărcare cu enque și mă asigur că css-ul temei copil este încărcat ultimul?
Salute din Germania
Hansjörg
Carlos Araya
Cum pot trece un parametru gol la register_script? Vreau să mă asigur că scriptul este încărcat în partea de jos a paginii, dar nu găsesc informații dacă acesta este comportamentul implicit sau nu.
Kerry Beeher
Bonjour,
Mulțumesc pentru resursa ta excelentă. Merci !!!
Sunt puțin începător și abia îmi încep călătoria pentru a învăța PHP și cum WordPress folosește wp_enqueue_script și wp_register_script pentru a adăuga JavaScript și CSS.
Folosesc acest plugin gratuit numit Easy Code Manager pentru a vă ajuta să parcurgeți exemplele dvs.:
cu toate acestea, nu sunt sigur dacă acesta este pluginul corect de utilizat.
Am citit înainte că nu este cea mai bună idee să modifici codul în functions.php, așa că mă întreb dacă este în regulă să fac asta?
Nu se va schimba la o actualizare de temă?
Scuze pentru întrebare, încă învăț WordPress.
Mulțumesc,
Kerry
Vaibhav Bansal
Vreau să adaug o reclamă Amazon
Am încercat să o adaug în widgetul text, dar apare goală.
Mai jos este codul-
Acesta este site-ul meu-
Mă ajută. Cum adaug js pe site-ul meu?
Suport WPBeginner
Salut Vaibhav,
Vă rugăm să consultați lista noastră de pluginuri de gestionare a reclamelor pentru WordPress. Puteți folosi aceste pluginuri pentru a afișa reclame pe site-ul dvs. WordPress fără a edita fișierele temei.
Admin
pradyumna
am inserat un javascript folosind acest plugin, dar acum trebuie să îl elimin, am încercat să dezinstalez și să dezactivez pluginul, dar javascriptul încă se execută
Vijay.Rajpal
Bună ziua Domnule,
Folosesc tema esteem și aș dori să adaug funcționalități javascript pe site-ul meu, cum ar fi lightbox. Am creat o temă copil și codul este următorul. în functions.php.
și primesc o eroare:-Eroare de analiză: eroare de sintaxă, '{' neașteptat în E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php pe linia 18
Vă rog să mă ajutați, folosesc Sublime ca editor de text.
Vă rog să mă ajutați!!!!!
Suport WPBeginner
Există un { neașteptat în cod. Accesați linia 18 a fișierului functions și studiați cu atenție codul. Este posibil să fi omis un mic detaliu, cum ar fi un ; lipsă.
Admin
Pramod
salut…..
Adaug fișierul .js în directorul js al wordpress și îi dau referința în funcation.php
însă nu funcționează
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Mulțumesc mult! Am încercat să adaug un fișier .js personalizat, dar aceasta este prima explicație care menționează că register_script era necesar.
colkav
Hei, tutorial grozav. Am o problemă la adăugarea unui javascript legat de Google Analytics, așa cum este descris aici:
Am pus scriptul în folderul ‘js’ al temei copil (după ce am eliminat mai întâi html-ul din cod).
Când încarc pagina, primesc constant eroarea:
ReferenceError: Can’t find variable: ga
(anonymous function)myscript.js:6
…și mi-a venit brusc ideea că poate trebuie să adaug „analytics.js” ca dependență!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Există vreun plugin pentru același lucru... sunt începător și nu pot lucra cu coduri... Vă rog să mă ajutați, domnule.
xavi
Bună.
Mulțumesc pentru acest tutorial uimitor! Dar când spui „unde să încarci scriptul”, poți defini doar antetul sau subsolul (pe toate paginile web)? Poți defini o pagină specifică pentru a-l încărca? Am nevoie doar de el pe una. Mulțumesc anticipat și continuați să lucrați! Salutări.
technofranchise
Vreau să folosesc JavaScript sau JQuery pe site-ul meu WordPress. Aveți idei?
Skye Barcus
Sunt un începător total la js, dar știu html. Vreau să pun asta pe o pagină wordpress:
Practic, este un widget pentru a te alătura unei ședințe GoToMeeting. Acesta funcționează dacă îl plasezi pur și simplu în corpul unei pagini HTML, dar în Wordpress, este suprimat.
Îmi puteți oferi o versiune "pentru începători" despre cum să fac acest lucru să funcționeze?
Tyler Longren
În ceea ce privește încărcarea stilurilor, pe linia 6, wp_register_script, cred că ar trebui să fie wp_register_style.
Suport WPBeginner
Tyler, no this will work too.
Admin
Pedro de Carvalho
de ce ai ales să folosești _script în schimb?
Pali Madra
Aș dori, de asemenea, să știu de ce se folosește _script și nu _style? Există vreun beneficiu sau ambele vor funcționa, deci oricare poate fi folosit?
Dejan
Îmi place foarte mult site-ul dvs., este plin de sfaturi utile, totuși se pare că nu faceți corect "înregistrarea" CSS, chiar dacă titlul dvs. spune asta :=) Modul corect ar fi:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Continuați munca bună… Noroc!
Adrian Zumbrunnen
Mulțumesc pentru efortul depus. Mi se pare greșit să folosesc wp_enque_script pentru încărcarea fișierelor de stil. WordPress ar putea, în cele din urmă, să genereze script în loc de sintaxa stylesheet pentru aceasta.
Încărcați chiar așa?
Suport WPBeginner
Acest tutorial arată cum să încarci fișiere JavaScript și foi de stil pentru temele sau plugin-urile tale în WordPress. Dacă prin Embed te refereai la modul în care afișăm codul în articole, atunci folosim plugin-ul Syntax Highlighter pentru asta.
Admin
oiveros
salut, sunt cam nou în crearea de teme pentru wordpress și citind despre acest subiect, voiam să te întreb ceva legat de asta. Dacă vreau să actualizez link-ul bibliotecii jquery, cum fac sau unde găsesc link-ul? Am încercat să o fac, dar nu îl găsesc. Mulțumesc anticipat pentru ajutorul tău.
Suport WPBeginner
Dacă prin actualizarea link-ului bibliotecii jquery, te referi la adăugarea jquery din biblioteca Google. WordPress vine cu jquery inclus și pentru a-l încărca în tema ta folosește această linie în tema ta:
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
okey, deci dacă vreau să am cea mai recentă versiune de jquery, folosesc doar acea linie?, pentru că cineva mi-a spus să folosesc un plugin doar pentru asta, dar voiam să învăț cum să o fac fără un plugin
oliveros
Vă mulțumesc pentru răspuns, am găsit postarea legată de acea problemă aici pe site-ul dvs.
Mark
Mulțumesc mult pentru acest tutorial.
Elliott Richmond
Utilul Syed, mulțumesc.
Am avut recent o problemă la încărcarea unui fișier css folosind _underscore ca framework, deși foaia de stil se numea mycustomstyles.css tema apela mycustomstyles.css?ver=xx și tema nu încărca fișierul din cauza numelui fișierului prin adăugarea lui ?ver=xx la sfârșitul numelui.
Are asta legătură cu $ver implicit?