Doriți să aflați cum să încărcați JavaScript pe WordPress?

Toate WordPress temă este de obicei compus din fișiere PHP, HTML, CSS și JavaScript. JavaScript este un limbaj de programare popular printre dezvoltatori. WordPress temă. Este un limbaj care face o pagină HTML interactivă și vă poate permite, de asemenea, să interacționați cu serverul.

A ști cum să-l folosești pe site-ul tău va fi un avantaj imens.

Pentru a utiliza efectiv JavaScript, trebuie să știi cum să îl încarci pe site-ul tău.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Cum se încarcă scripturi JavaScript pe WordPress

Să facem un pas înapoi și să aruncăm o primă privire asupra modului în care WordPress încarcă scripturi și stiluri. Ați aflat că atunci când creați fișierele JavaScript, le puteți adăuga la pagina dvs. în secțiunea antet sau la subsol.

Descoperiți și tutorialul nostru despre Cum să comprimați fișierele CSS, HTML și Javascript

WordPress face exact același lucru, dar nu puteți pur și simplu să plasați aceste etichete de script în fișierul antet sau subsolul dvs. WordPress temă. WordPress folosește un mecanism inteligent de încărcare numit „ enqueueing ".

Acest mecanism este necesar pentru a da sens dependențelor. Dacă scrieți jQuery cod pentru tema dvs. WordPress, atunci jQuery însuși trebuie încărcat mai întâi.

Scrieți cod care se bazează pe un plugin jQuery. În acest caz, jQuery trebuie mai întâi încărcat, apoi pluginul jQuery, apoi codul.

Cum să „încuviințezi” scripturi (Adaugă la coadă)

Puteți pune în coadă scripturile în folderul dvs. cu teme WordPress sau în folderul dvs WordPress plug-in. Iată codul complet pentru a include un script care se bazează pe jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('scriptul meu ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', adevărat);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

În primul rând, o funcție trebuie să fie „ coroiat Pe WordPress (Utilizând WordPress Hooks). Primul argument al funcției add_action () spune WordPress unde ar trebui plasate aceste scripturi:

• Pe spațiul public
• Pe tabloul de bord

Dacă utilizați " wp_enqueue_scripts Acestea vor fi încărcate în spațiul public, dacă utilizați „ admin_enqueue_scripts Acestea vor fi încărcate pe tabloul de bord.

În funcția « ADD_ACTION Puteți utiliza " wp_enqueue_script Pentru a adăuga scripturile de care aveți nevoie. Funcția are un parametru necesar și patru parametri opționali:

• Primul parametru este numele scriptului dvs. Puteți alege ce doriți, dar asigurați-vă că folosiți un nume unic.
• Al doilea parametru ar trebui să conțină locația fișierului pe tema WordPress sau WordPress plug-in.
• Al treilea parametru conține o serie de dependențe. În exemplul de mai sus am spus că jQuery este o dependență. Toate dependențele sunt încărcate înainte de scriptul în cauză.
• Al patrulea parametru este un număr de versiune
• Al cincilea și ultimul parametru indică dacă doriți să încărcați scriptul pe antet sau subsol. Folosiți „true” pentru a încărca la subsol sau „false” pentru a încărca scriptul în antet (nu puteți, de asemenea, să nu completați acest parametru).

dependinte

WordPress oferă o copie a jQuery, motiv pentru care îl puteți adăuga ca dependență fără nici o problemă. Există un număr mare de alte scripturi și plugin-uri jQuery pe care le oferă WordPress. Dacă codul dvs. depinde de una dintre ele, nu trebuie să utilizați una dintre copiile dvs., ci doar să o adăugați ca dependență. aici este lista de scripturi oferite de WordPress.

Dacă includeți mai multe scripturi care sunt independente unul de celălalt, le puteți adăuga ca dependențe exact în același mod. Aruncați o privire la exemplul de mai jos:

my_theme_scripts of function () {

 wp_enqueue_script ("scriptul meu de bază", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', adevărat);

 wp_enqueue_script ("extensia-script-meu", get_template_directory_uri (). '/js/my-script-extension.js', array ("baza-scriptului-meu '),' 1.0.0 ', adevărat);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Deoarece primul script depinde de jQuery, atunci următorul script depinde și de acesta. Deci nu trebuie să adăugați jQuery ca o dependență pentru ambele. Acest lucru face gestionarea dependenței mai ușoară.

Încărcarea condiționată

Uneori veți dori să utilizați scriptul pe fiecare pagină, dar de multe ori veți dori să încărcați un script pe o anumită pagină. Acest lucru este valabil mai ales atunci când vă gândiți să adăugați scripturi la tabloul de bord. Un exemplu bun este utilizarea codurilor scurte. Codurile scurte permit utilizatorilor să creeze afișaje avansate pe editorul de text vizual folosind câteva trucuri simple.

my_theme_scripts of function () {

 wp_register_script ('scriptul meu', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', adevărat);

 wp_enqueue_script („scriptul meu”);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Am salvat scriptul astfel încât WordPress să afle despre script, dar folosim „ Puneți în coadă “. În acest fel, scriptul este adăugat la pagină numai dacă este utilizat codul scurt pe această pagină.

O altă metodă de încărcare a scripturilor cu condiții este utilizarea funcțiilor condiționale. Dacă doriți să încărcați un script pe toate paginile de arhivă ale categoriei, puteți utiliza funcția is_category ().

De exemplu, puteți crea un carusel de imagini pe care utilizatorii îl pot adăuga articolului astfel: [carusel ids = '42,124,123,331,90, XNUMX ′]. Un carusel va fi creat pe pagina articolului folosind imaginile desemnate de ID-urile lor.

Pentru a face acest lucru, trebuie să creați un fișier " carousel.js Ceea ce se bazează pe jQuery. Iată un cod pentru a ajunge acolo (Nu creează un carusel, dar vă permite să vedeți cum se întâmplă procesul de încărcare):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('caruselul meu', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', adevărat);

}

add_shortcode ('carusel', 'my_carousel');

funcția my_carousel ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, „carusel”);

 wp_enqueue_script („caruselul meu”);

 // Cod pentru afișarea caruselului aici

}

Eliminarea și înlocuirea scripturilor

Acesta este de departe un scenariu comun, dar uneori poate fi necesar să eliminați sau să înlocuiți un script. Am căzut în situații în care un script adăugat de un plugin (dar nu este folosit de temă) a cauzat probleme de compatibilitate. „Retragerea” a fost cea mai bună opțiune, deoarece eroarea a dispărut complet.

De asemenea, puteți înlocui jQuery cu o versiune mai nouă dacă testați ceva pentru a vă asigura că va fi compatibil cu versiunile mai noi.

În aceste situații funcțiile wp_deregister_script () "Și" wp_dequeue_script () Sunt utile. Iată cum puteți edita codul deja adăugat pe WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('scriptul meu', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', adevărat);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Gânduri finale

Această metodă de încărcare pe WordPress este excelentă, deoarece vă permite să adăugați scripturile într-un mod modular. Acest lucru vă va permite să vă asigurați că dependențele sunt adăugate într-un mod modular.

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. Premium Pack SEO

Pachetul Premium SEO este un WordPress plug-in care vă optimizează SEO și comprimă CSS pentru a îmbunătăți viteza de încărcare a site-ului dvs.

Pluginul vă permite, de asemenea, să gestionați designul site-ului dvs. web în câteva clicuri. Funcționalitățile sale sunt, printre altele: compresie CSS și JS, integrare de sitemap video și fragmente, formatarea fișierelor HTML și XML, redirecționarea paginilor 404 și 301, partajarea pe rețelele sociale, furnizarea „Etichetă ALT, aspect foarte personalizabil

Descarca | Demo | web hosting

2. Woocommerce Timpul de livrare pentru transport

Woocommerce Delivery Time Picker for Shipping este o extensie WooCommerce care permite clienților să aleagă data și ora livrării pe pagina de plată. 

Clienții vor putea selecta termenul de livrare al pachetului acasă. Timpul de livrare va fi vizibil pentru administratorii site-ului web și va fi, de asemenea, trimis prin e-mail administratorilor site-ului sau magazinului online.

Descarca | Demo | web hosting

3. Meniul eroilor

Acest plugin vă permite să creați propriul meniu WordPress personalizat în câțiva pași destul de simpli. În special, vă permite să creați cu ușurință și intuitiv un meniu WordPress elegant și profesional. 

De la cel mai complex mega meniu plin de funcții, până la cel mai simplu meniu cu meniul derulant, pluginul WordPress HeroMenu configurați orice tip de meniu și activați-l în câteva minute.

În ceea ce privește caracteristicile pe care le oferă, printre altele: funcționare perfectă pe PC, tabletă și smartphone, de la CSS personalizate pentru a adăuga propriile stiluri în meniu, un constructor de megamenu, mai multe browsere acceptate: Chrome, Firefox, Safari, Opera, IE9 și multe altele.

Descarca | Demo | web hosting

Resurse recomandate

Consultați alte resurse recomandate care vă vor ajuta să rezolvați alte erori comune WordPress. 

• Cum se rezolvă erorile de redirecționare pe WordPress
• Cum de a crea un aspect personalizat cu Elementor
• Cum de a crea un WordPress intranet pentru organizația dumneavoastră
• Cum de a crea o pagină de conectare de pe WordPress

Concluzie

Aici este ! Gata pentru acest tutorial, sper că v-a ajutat să înțelegeți cum să încărcați JavaScript pe WordPress. Nu ezitați să îl împărtășiți prietenilor dvs. de pe rețelele sociale preferat. 

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dar între timp, spuneți-ne despre dumneavoastră comentarii și sugestii în secțiunea dedicată.

...