Adăugarea JavaScript la paginile sau postările dvs. WordPress poate îmbunătăți funcționalitatea și implicarea utilizatorilor. Cu toate acestea, WordPress nu vă permite să inserați JavaScript direct în conținutul dvs. în mod implicit.
Înțelegem că această limitare poate fi frustrantă, mai ales dacă doriți să vă personalizați site-ul cu funcții interactive sau scripturi de urmărire.
Din fericire, există modalități simple de a adăuga JavaScript pe site-ul dvs. WordPress. Puteți aplica acest lucru paginilor sau postărilor specifice sau chiar pe întregul site. Mai mult, puteți utiliza un plugin de fragmente de cod, cum ar fi WPCode, așa cum facem noi la WPBeginner, pentru a facilita totul.
În acest articol, vă vom prezenta două metode simple pentru a implementa JavaScript în paginile sau postările dvs. WordPress.
Ce este JavaScript?
JavaScript este un limbaj de programare care rulează în browserul utilizatorului, nu pe serverul tău. Această programare pe partea clientului permite dezvoltatorilor să facă o mulțime de lucruri interesante fără a încetini site-ul tău.
Dacă doriți să încorporați un player video, adăugați calculatoare sau un alt serviciu terț, atunci vi se va cere adesea să copiați și să lipiți un fragment de cod JavaScript pe site-ul dvs. WordPress.
Un fragment tipic de cod JavaScript poate arăta astfel:
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
Dar, dacă adăugați un fragment de cod JavaScript într-o postare sau pagină, WordPress îl va șterge când încercați să îl salvați.
Având în vedere acest lucru, vă vom arăta cum să adăugați cu ușurință JavaScript pe paginile sau postările WordPress fără a vă strica site-ul. Puteți utiliza linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați.
- Metoda 1. Adăugați JavaScript oriunde pe site-ul dvs. WordPress folosind WPCode (Recomandat)
- Metoda 2. Adăugarea manuală a codului JavaScript în WordPress folosind cod (Avansat)
- Sfat bonus: Mai multe ghiduri pentru fragmente de cod personalizate
Să începem!
Metoda 1. Adăugați JavaScript oriunde pe site-ul dvs. WordPress folosind WPCode (Recomandat)
Uneori, un plugin sau un instrument vă va cere să copiați și să lipiți un fragment de cod JavaScript pe site-ul dvs. web pentru a funcționa corect.
De obicei, aceste scripturi vor fi plasate în secțiunea antet sau subsol a blogului dvs. WordPress, astfel încât codul să fie încărcat la fiecare vizualizare a paginii.
De exemplu, atunci când instalați Google Analytics, codul trebuie să ruleze pe fiecare pagină a site-ului dvs. web pentru a vă putea urmări vizitatorii.
Puteți adăuga manual codul în fișierele dvs. header.php sau footer.php, dar aceste modificări vor fi suprascrise atunci când actualizați sau schimbați tema.
De aceea recomandăm utilizarea WPCode pentru a adăuga JavaScript oriunde pe întregul site WordPress.
WPCode este cel mai puternic plugin de fragmente de cod disponibil pentru WordPress. Vă permite să adăugați cu ușurință cod personalizat în orice zonă a site-ului dvs. și, cel mai important, este gratuit.
Mai întâi, trebuie să instalezi și să activezi pluginul gratuit WPCode. Pentru mai multe detalii, consultă ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.
Odată activat, trebuie să accesați Fragmente de cod » Anteturi și subsoluri.
Aici veți vedea trei câmpuri separate etichetate „Antet”, „Corp” și „Subsol”.
Acum puteți adăuga codul JavaScript în una dintre aceste casete și apoi pur și simplu faceți clic pe butonul „Salvare”. WPCode va încărca automat codul adăugat pe fiecare pagină a site-ului dvs. web.
Puteți adăuga, de asemenea, fragmente de cod în orice alt loc de pe site-ul dvs., cum ar fi în interiorul postărilor sau paginilor.
Pentru a face acest lucru, accesează Code Snippets » + Add Snippet și apoi dă clic pe ‘Create Your Own.’
Apoi, selectați „Fragment JavaScript” ca tip de cod din lista de opțiuni care apar pe ecran.
Veți vedea acum o pagină „Creează fragment personalizat” unde puteți adăuga un titlu pentru codul dvs. Acesta poate fi orice pentru a vă ajuta să vă amintiți la ce folosește codul.
După aceea, lipiți codul în caseta „Previzualizare cod”.
Apoi, vei dori să derulezi până găsești secțiunea ‘Insertion’.
Acum, tot ce trebuie să faceți este să selectați o „Locație” pentru cod din meniul derulant. Găsiți „Pagină, Postare, Tip de postare personalizat” și alegeți unde doriți să apară codul în pagină sau postare.
Dacă alegeți ca WPCode să insereze fragmentul înainte sau după un paragraf, veți putea alege înaintea sau după ce paragraf specific din postare va apărea.
De exemplu, dacă introduceți 1 în câmpul „Introduceți numărul”, fragmentul de cod va apărea înainte sau după primul paragraf. Folosiți 2 pentru al doilea paragraf și așa mai departe.
După aceea, trebuie doar să faceți clic pe comutatorul din partea de sus a ecranului pentru a trece la „Activ” și apoi să faceți clic pe butonul „Salvare fragment” de lângă el.
Atât este necesar pentru a face ca fragmentul de cod să fie live pe site!
Metoda 2. Adăugarea manuală a codului JavaScript în WordPress folosind cod (Avansat)
Notă: Următoarele metode sunt pentru începători și proprietari de site-uri web. Dacă învățați dezvoltarea de teme sau plugin-uri WordPress, atunci trebuie să adăugați corect JavaScript și foi de stil la proiectele dvs.
Cu această metodă, trebuie să adăugați cod în fișierele WordPress. Dacă nu ați mai făcut acest lucru înainte, atunci veți dori să consultați ghidul nostru despre cum să copiați și să lipiți cod în WordPress.
Mai întâi, vă vom arăta cum să adăugați cod în antetul site-ului dvs. WordPress. Trebuie să copiați următorul cod și să îl adăugați în fișierul dvs. functions.php.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Adăugarea JavaScript la o postare WordPress specifică folosind cod
Dacă doriți să adăugați JavaScript doar la o singură postare WordPress, va trebui să adăugați logică condițională la cod.
Să aruncăm mai întâi o privire la următorul fragment de cod:
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Codul de mai sus va rula JavaScript doar dacă ID-ul postării corespunde cu ’5’. Asigurați-vă că înlocuiți ’5’ cu propriul ID de postare.
Pentru a găsi ID-ul postării, pur și simplu deschideți postarea pe care doriți să ruleze JavaScript. Apoi, în URL-ul paginii, veți găsi ID-ul postării.
Adăugarea JavaScript pe o pagină WordPress specifică folosind cod
Dacă dorești să adaugi JavaScript doar pe o singură pagină WordPress, va trebui să adaugi logică condițională la cod, la fel ca mai sus.
Uitați-vă la următorul exemplu:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Codul de mai sus va rula JavaScript doar dacă ID-ul paginii este ’10’. Asigurați-vă că înlocuiți ’10’ cu propriul ID de pagină.
Puteți găsi ID-ul paginii folosind aceeași metodă ca mai sus. Pur și simplu deschideți pagina pe care doriți să ruleze JavaScript și notați ID-ul paginii din URL.
Adăugarea JavaScript la o postare sau pagină WordPress specifică folosind codul din subsol
Dacă doriți ca JavaScript să ruleze în subsolul site-ului dvs. în loc de antet, puteți adăuga următorul fragment de cod pe site-ul dvs.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
Acest fragment de cod se conectează la wp_footer în loc de wp_head. Puteți adăuga, de asemenea, etichete condiționale pentru a adăuga JavaScript la postări și pagini specifice, cum ar fi exemplele de mai sus.
Sfat bonus: Mai multe ghiduri pentru fragmente de cod personalizate
Acum că ați învățat cum să adăugați cu ușurință JavaScript la paginile sau postările WordPress, să vedem câteva fragmente de cod personalizate pentru a extinde funcționalitatea site-ului dvs. și mai mult!
Adăugarea unui acordeon FAQ jQuery în WordPress
jQuery, o bibliotecă JavaScript utilă, adaugă funcționalități interactive site-ului dvs.
Utilizarea unui acordeon FAQ jQuery în WordPress ajută la organizarea conținutului. Acesta afișează întrebări și răspunsuri într-un format pliabil, facilitând vizitatorilor găsirea informațiilor fără a derula prin text lung.
Dar asta nu e tot.
Un acordeon FAQ poate crește clasamentul în motoarele de căutare prin structurarea conținutului într-un mod pe care motoarele de căutare îl apreciază. La WPBeginner, am considerat, de asemenea, acordeoanele FAQ jQuery utile pentru abordarea întrebărilor comune, atragerea mai multor vizitatori și îmbunătățirea SEO.
Pentru mai multe informații, poți consulta articolul nostru despre cum să adaugi un acordeon FAQ jQuery în WordPress.
Încorporarea codului iFrame în WordPress
Un iFrame, sau cadru inline, îți permite să încorporezi videoclipuri sau alt conținut pe site-ul tău fără a găzdui fișierele tu însuți. Acest lucru economisește lățime de bandă și spațiu de stocare, făcându-l o alegere mai bună decât încărcarea directă a videoclipurilor pe WordPress, lucru pe care nu ar trebui să-l faci niciodată în primul rând.
Utilizarea unui iFrame poate, de asemenea, să sporească viteza și performanța site-ului dvs., deoarece preia conținut dintr-o sursă externă.
Pentru a afla mai multe, puteți consulta ghidul nostru despre cum să încorporați ușor codul iFrame în WordPress.
Crearea unui flux RSS separat pentru fiecare tip de postare personalizată în WordPress
WordPress vă permite să creați tipuri de postări personalizate adaptate nevoilor dvs. specifice de conținut, cum ar fi recenzii de filme, produse sau mărturii. Această funcționalitate vă ajută să vă organizați mai bine site-ul și îmbunătățește experiența utilizatorului.
Rețineți că puteți configura fluxuri RSS pentru fiecare tip de postare personalizat, oferind vizitatorilor fluxuri specializate care permit un angajament mai personalizat cu conținutul dvs.
Dacă doriți mai multe informații, puteți citi ghidul nostru despre cum să creați un flux RSS separat pentru fiecare tip de postare personalizat în WordPress.
Pentru mai multe idei de fragmente personalizate, nu ezitați să consultați selecțiile experților noastre cu cele mai utile fragmente de cod WordPress pentru începători.
Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință JavaScript pe paginile sau postările WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați corect JavaScript-uri și stiluri în WordPress și selecțiile noastre de experți de trucuri extrem de utile pentru fișierul de funcții 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.
Mesht
Cu prima metodă (Wpcode), pot adăuga un script doar la o singură pagină?
Suport WPBeginner
You can use the first method to add it to multiple pages not just one
Admin
Dennis Muthomi
Administrez multe site-uri ale clienților, iar WPCode a fost instrumentul meu de bază. Este extrem de fiabil atunci când trebuie să adaug scripturi de urmărire sau funcționalități personalizate pe site-urile clienților.
Un lucru pe care trebuie să-l fac întotdeauna când adaug cod este să fac o copie de rezervă a site-ului înainte de a folosi WPCode. Testez totul mai întâi pe un mediu de staging. Credeți-mă, m-a scăpat de atâtea bătăi de cap! Mai ales când scripturile intră în conflict cu funcționalitățile temei.
Și partea cea mai bună este că, dacă ceva nu merge bine, poți pur și simplu să dezactivezi fragmentul de cod problematic. Atât de simplu!
Jiří Vaněk
WPCode mi-a salvat întregul site web în acest fel, pe care îl finalizasem deja, dar în cele din urmă am descoperit că meniul funcționează foarte prost pe dispozitivele mobile. Am găsit o soluție sub forma JavaScript, dar nu știam unde sau cum să o inserez pe site. Acest lucru mi-a economisit toată munca și a rezolvat problema închiderii meniului pe dispozitivele mobile.
Suport WPBeginner
Mă bucur să aud că pluginul a fost util!
Admin
aripă
mă întreb de ce nu folosiți cea mai simplă metodă, pur și simplu folosiți blocul „HTML personalizat” al WordPress pentru a insera cod Javascript într-o postare sau pagină. Am încercat și am testat. Nicio problemă. metodă foarte, foarte, foarte simplă.
Suport WPBeginner
Ar depinde de codul specific, metodele pe care le arătăm în acest ghid sunt pentru a adăuga codul în secțiunea head, deoarece majoritatea JavaScript-urilor doresc să fie rulate în secțiunea head.
Admin
Rejane
Am o temă copil activă și am folosit plugin-ul „Insert Headers and Footer” pentru a adăuga un cod JavaScript pentru un serviciu de marketing prin e-mail. A funcționat! Dar, din păcate, a trebuit să-mi anulez contul la acest serviciu și acum aș dori să elimin codul JavaScript. Cum fac acest lucru când folosesc o temă copil? Există o modalitate ușoară sau un alt plugin pentru asta?
Suport WPBeginner
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Admin
Paul Liles
Nu pot găsi meniul cu trei puncte nicăieri? Am nevoie de ajutor.
Suport WPBeginner
Ar trebui să fie în partea de sus a paginii de editare. dacă folosiți editorul clasic, atunci va fi sub Opțiuni ecran.
Admin
Eleni
Nu am opțiunea Câmpuri personalizate în fila Opțiuni ecran. Folosesc un site web auto-găzduit și am instalat și activat pluginul Code Embed
Suport WPBeginner
Dacă utilizați editorul de blocuri, setarea s-a mutat sub zona de preferințe.
Admin
Ashley
Acest site este UIMITOR!!! Aceasta este a treia postare la rând unde am lovit jackpotul obținând ceea ce aveam nevoie și am făcut-o în cel mai ușor mod posibil. Mulțumesc!!
Suport WPBeginner
Glad our guides were helpful
Admin
Frate
Salutare, WPbeginners! A doua metodă a funcționat perfect. Am avut totuși o întrebare. Dacă aș dori să adaug un alt cod js pentru un alt scop, cum ar trebui să înceapă codul. Pentru că orice adaug după cod este gri. Sunt pierdut aici. Vreau să fac același lucru, dar pentru o altă pagină. Orice idei vor fi apreciate.
Suport WPBeginner
Ar depinde în mare măsură de codul pe care îl folosiți, dar ați dori să vă asigurați că codul este înainte de tag-ul
/scriptAdmin
Jonathan
Mulțumesc. Acest articol a fost extrem de util. Am ales opțiunea functions.php. A funcționat bine.
Suport WPBeginner
Glad our guide was helpful
Admin
Elise
A funcționat. Mulțumesc mult!
Suport WPBeginner
You’re welcome
Admin
Martin
Întrebare despre Metoda 3:
După introducerea valorii și apăsarea butonului „adăugați câmp personalizat”, cum fac codul să apară pe frontend-ul site-ului meu?
Ar trebui să inserez „{{CODEmyjscode}}” folosind un widget de shortcode sau editorul de text de pe pagină?
Suport WPBeginner
pentru moment ați dori să utilizați editorul de text sau de cod.
Admin
Bret Bernhoft
Când am început să lucrez cu WordPress, JavaScript mi se părea o imposibilitate. Dar, trecând rapid la ziua de azi, scriu limbajul în fiecare zi; adesea în asociere cu WordPress.
Aș dori să-mi fi fost mai clar cât de ușor ar fi fost să scriu JavaScript, când am început această călătorie. Vă mulțumesc pentru instrumente și sfaturi. Va trebui să încerc asta.
Suport WPBeginner
Glad we could share some easy methods for adding JavaScript to your site!
Admin
ibrahim
A funcționat și m-a ajutat mult. Mulțumesc!
Suport WPBeginner
You’re welcome
Admin
Kat
Am încercat să adaug JS personalizat în postarea mea, dar nu se întâmplă nimic. Am urmat exact instrucțiunile tale pentru Metoda 3, dar când previzualizez pagina, este doar un spațiu gol unde ar trebui să fie JS. Ai idee de ce?
Suport WPBeginner
Ar trebui să consultați secțiunea FAQ a plugin-ului pentru cele mai frecvente motive ale acestei probleme și cum să o rezolvați.
Admin
Samuel
Cum funcționează acest lucru cu noul sistem de blocuri WordPress?
Încerc să încorporez asta într-o pagină, dar în previzualizare apare doar ca {{code1}}
Suport WPBeginner
Ar depinde de metoda pe care o utilizați pe site-ul dvs. pentru plugin, au o actualizare în secțiunea lor FAQ despre cum să o utilizați în prezent.
Admin
Akash
Mulțumesc pentru aceste informații. Postare cu adevărat uimitoare și utilă.
Suport WPBeginner
You’re welcome, glad our article was helpful
Admin
Alex
Hei, ghid grozav! Problema este că nu am „Câmpuri personalizate” sub opțiunile ecranului... Aveți idee de ce?
Suport WPBeginner
Site-ul dvs. este pe WordPress.com?
Admin
James
Salut. Am angajat un programator pentru a crea un instrument, pe care l-a realizat în Javascript. Am folosit Weebly, dar Weebly a devenit nepăsător la solicitările de ajutor, la care sute de bloguri mărturisesc. Așadar, caut alternative la Weebly. Ar putea Wordpress să gestioneze un instrument Javascript de 2 MB?
Mulțumesc,
Suport WPBeginner
Găzduirea dvs. ar determina dacă un astfel de instrument ar putea fi utilizat, nu platforma site-ului dvs. web și, în funcție de modul în care a fost configurat instrumentul, ar determina dacă puteți transfera instrumentul.
Admin
Matt
Ce se întâmplă dacă trebuie să adaug scriptul doar pe o singură pagină, dar în head, nu în body? Încerc să adaug un pixel de conversie Google doar pe pagina de mulțumire pentru trimiterea formularului.
Suport WPBeginner
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Admin
quy
funcționează ca prin magie. Mulțumesc mult
Suport WPBeginner
You’re welcome, glad our article could help
Admin
Manjeet Chhillar
Mulțumesc pentru acest post foarte util.
Întrebarea mea este: Cum pot implementa „Metoda 2” pe mai multe postări. Trebuie să adaug ID-ul postării fiecărei postări individuale separate prin virgulă?
Suport WPBeginner
da, ar trebui să plasați virgulele în afara ghilimelelor simple și să începeți un nou set de ghilimele pentru această metodă
Admin
Deborah
Vă mulțumim pentru că ați împărtășit cele trei metode pe care utilizatorii WordPress le pot folosi pentru a adăuga JavaScript în postări sau pagini. Din ceea ce am citit pe pagina pluginului Insert Headers and Footers din depozit, pluginul nu folosește metoda enqueue pentru a adăuga scripturile. Care este metoda recomandată pentru a adăuga scripturi în WordPress.
Am înțeles eu greșit? Sau Insert Headers and Footers folosește enqueue pentru a adăuga scripturi? Dacă nu folosește enqueue, știți când va fi actualizat pluginul pentru a folosi enqueue?
Suport WPBeginner
Pluginul nu adaugă în prezent scripturi la cele adăugate, deoarece nu tot ce este adăugat cu pluginul nostru ar putea dori să fie adăugat. Dacă ați dori să adăugați codul adăugat, ați dori să folosiți o altă metodă.
Admin
Dave G
Frumos, mulțumesc pentru asta. Se întâmplă ca ID-ul exact al postării pe care trebuia să rulez JavaScript să fie numărul 16. „`if (is_single (’16’)) { “`
Ești din viitor?
Suport WPBeginner
Not yet at least
Admin
Golu Arjun
Mulțumesc pentru acest post. Este foarte util. Este posibil să personalizați
Suport WPBeginner
You’re welcome
Admin
Thomas
Trebuie să adaug un script la toate postările de pe blogul meu. Am plugin-ul pentru fiecare postare individuală. Problema este că sunt mii de postări și trebuie să adăugăm scriptul la toate. Aveți sugestii? Vă mulțumesc anticipat.
Suport WPBeginner
Opțiunea Insert Headers and footers va plasa un cod pe fiecare postare și pagină pentru dvs. dacă acestea folosesc același cod.
Admin
Thomas
Vă mulțumesc pentru răspunsul rapid.
Dorim ca scriptul să ruleze doar pe Postări. Nu dorim ca acesta să ruleze pe toate paginile.
Suport WPBeginner
Dacă ați avea un widget care este adăugat doar la postări, ați putea încerca să adăugați codul într-un widget.
Ann
Am încercat să folosesc scripturile Headers and Footers și jQuery pur și simplu nu pare să funcționeze corect.
Suport WPBeginner
Ar depinde de codul specific pe care îl adăugați pe site pentru posibilele motive pentru care nu funcționează. S-ar putea să doriți să vă asigurați cu cine ați obținut codul că codul în sine funcționează.
Admin
Andrew Golay
Vă rugăm să reparați pluginul Headers / Footer sau să schimbați acest articol, mulțumesc.
Suport WPBeginner
Plugin-ul nostru funcționează în prezent din testare, dar cu siguranță vom mai arunca o privire asupra lui.
Admin
lynn
Mulțumesc!! A fost foarte util.
Suport WPBeginner
Glad it was helpful
Admin
Remco
Mulțumesc pentru acest post grozav!
Este posibil să implementați date structurate pe paginile Woocommerce cu această metodă (JSON-LD)?
Suport WPBeginner
Probabil că ați putea, dar dacă aveți un plugin SEO pe care îl utilizați în prezent, ar trebui să verificați cu acel plugin pentru a vedea dacă plugin-ul face deja acest lucru.
Admin
graham
O prezentare bine realizată a opțiunilor mai cunoscute pentru ceea ce devine o nevoie comună. Cu toate acestea, mulți utilizatori WordPress nu sunt (și nu doresc să fie) programatori. Pentru ei, JavaScript sub orice formă este prea înfricoșător; de aceea folosesc WordPress cu promisiunea sa de „fără programare necesară”.
Există o altă posibilitate; să folosești scripturi personalizate în loc de JavaScript și să le încorporezi direct în pagină. Le poți pune în orice componentă, deși eu prefer .
Tot ce aveți nevoie apoi este ceva care poate compila și rula scriptul. Este greu de găsit pluginuri care pot face acest lucru; propriile mele căutări nu au descoperit încă niciunul. Cu toate acestea, ca programator JavaScript, am reușit să scriu unul și să-l pun în bibliotecă sub numele EasyCoder. Scripturile seamănă cu engleza, au aproximativ aceeași complexitate ca SQL și pot face majoritatea lucrurilor necesare în mod obișnuit pentru a gestiona conținutul și interactivitatea unei pagini web. EasyCoder este, de asemenea, complet extensibil, astfel încât alți programatori pot adăuga module singuri.