WordPress Javascript: un ghid pentru începători

Dacă întrebați un milion de dezvoltatori web ce este JavaScript, veți primi înapoi un milion de răspunsuri diferite. Aproape tot ce este interactiv pe web se face folosind JavaScript.

Fiind un sistem modern de gestionare a conținutului (CMS), WordPress și multe dintre pluginurile sale se bazează parțial pe JavaScript pentru a face treaba. Contrar a ceea ce poate suna, JavaScript nu are nicio legătură cu limbajul de programare Java. Se numește așa doar în scopuri de marketing.

Să ne scufundăm în tot ce trebuie să știți pentru a valorifica puterea combinată a JavaScript și WordPress.

Ce este JavaScript?

Cu mult timp în urmă, Internetul se baza exclusiv pe HTML și CSS. Această combinație permite un stil foarte simplu de conținut. Cu toate acestea, s-a putut face foarte puțin pentru a dinamiza conținutul, iar crearea de aplicații web a fost exclusă.

Deoarece serverele erau mult mai scumpe de întreținut, dezvoltatorii au decis să scrie JavaScript pentru a opera pe computerul client. Scris într-o manieră similară cu alte limbaje funcționale de programare, JavaScript poate prelua date în funcții, le poate prelucra și produce date.

Browserele web au un motor JavaScript care știe să execute codul JavaScript. De exemplu, motorul JavaScript din Chrome este v8, în timp ce motorul JavaScript FireFox este SpiderMonkey. Din acest motiv, Javascript se bazează pe browsere pentru a „înțelege” cum să interpreteze, să gestioneze și să manipuleze afișarea datelor.

Aspectele tehnice ale JavaScript

Vrei să afli mai multe despre tehnologia din spatele JavaScript? Există câțiva diferențiatori importanți de știut pentru cei care au experiență în alte tipuri de dezvoltare. În primul rând, JavaScript este agnostic de tip ca PHP. Asta înseamnă că variabilele sale nu au un tip definit și orice variabilă dată poate fi atribuită aproape oricărui tip de valoare.

Majoritatea limbajelor moderne sunt „orientate spre obiecte”, ceea ce înseamnă că se bazează pe „clase” reutilizabile care reprezintă un obiect literal. Cea mai apropiată de care JavaScript se apropie de aceasta este prin „prototipuri”. Aceste structuri de date pot fi reutilizate și pot conține anumite valori, dar funcționalitatea și utilizabilitatea lor sunt mult mai limitate decât limbajele construite în jurul conceptului orientat pe obiecte, cum ar fi Java.

Ce face JavaScript?

Datorită sprijinului comunitar imens și a investițiilor de la companii mari precum Facebook și chiar Netflix, JavaScript poate face mult mai mult decât să funcționeze în browserele web. JavaScript poate face ceva la fel de simplu ca și apucarea anului curent pentru a fi afișat lângă simbolul drepturilor de autor pe un site web și lucrări mai complexe, cum ar fi efectuarea majorității procesării pentru un editor de imagini online.

Pe scurt, JavaScript face aproape tot ce vrea dezvoltatorul să facă pe computerul clientului. JavaScript se cache local pe computerul client atunci când clientul vizitează un site care îl folosește.

În timp ce datele sensibile trebuie tratate pe server, multe aplicații bazate pe web utilizează în mare măsură JavaScript pentru a profita de puterea de procesare a mașinii client. Acum, că suntem în era „cadrelor” nesfârșite care fac mult mai rapid dezvoltarea diferitelor tipuri de conținut, posibilitățile sunt infinite.

JavaScript este sigur?

La fel ca majoritatea protocoalelor și limbajelor mai vechi, JavaScript nu a fost inițial construit având în vedere securitatea. Acesta este un lucru perfect rezonabil de întrebat, având în vedere cât de răspândite au devenit atacurile cibernetice.

Există extensii de browser precum „NoScript” care blochează pur și simplu executarea tuturor codurilor JavaScript. Atâta timp cât respectați regula generală a web-ului și nu vizitați site-uri de încredere, este bine să permiteți executarea JavaScript-ului.

Deoarece este un limbaj de programare, desigur, utilizatorii rău intenționați îl pot abuza pentru a vă ataca computerul. Browserele moderne vor detecta automat majoritatea acestor atacuri. Dacă sunteți îngrijorat de securitate cu WordPress JavaScript, este posibil să vă liniștiți cu un plugin de securitate WordPress care pune cele mai multe aspecte ale securității site-ului pe pilot automat.

Două tipuri majore de atac JavaScript

Zicala „Ține-ți prietenii apropiați și dușmanii mai aproape” este relevantă atunci când vine vorba de dezvoltare și securitate. Este foarte important să înțelegeți modul în care băieții răi profită de JavaScript pentru a le putea împiedica eforturile!

Cross Site Scripting (XSS)

Cross-site scripting (XSS) este un tip de atac malware care este executat prin exploatarea vulnerabilităților cross-site pe orice site WordPress. De fapt, este cel mai comun mod prin care site-urile WordPress pot fi piratate, deoarece există atât de multe plugin-uri WordPress care au vulnerabilități XSS.

Se folosește un atac de scriptare între site-uri dacă o pagină permite transmiterea datelor pe aceasta. În acest atac, utilizatorul rău intenționat plasează cod JavaScript în datele care urmează să fie trimise pe o pagină accesibilă publicului.

Dacă nu există măsuri de atenuare, acest cod rău intenționat rulează codul JavaScript pe computerul oricui care vizitează pagina respectivă. Acesta este motivul pentru care este important să „igienizați” datele de intrare. Aceasta înseamnă, înainte de a fi postat, eliminați lucruri precum paranteze și ghilimele care ar face inutil codul.

Falsificare de cereri încrucișate (CSRF)

Acest tip de atac profită de paginile web la care este posibil să fiți deja conectat. Cel mai frecvent scenariu ar presupune că sunteți conectat la banca dvs.

Spuneți că v-ați conectat la contul dvs. bancar, dar apoi decideți să accesați un site web torrent care are CSRF gata de pornire. CSRF, în absența atenuărilor browserului, adoptă modelul de legătură pentru a face lucruri precum transferuri bancare pentru fiecare bancă majoră, apoi le rulează pe computerul dvs. în fundal.

Un scenariu care s-a întâmplat de fapt cu un site major și o bancă importantă a fost că legătura băncii cu transferul de bani arăta ca: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 pentru a transfera 1.000 $ într-un cont cu numărul 12345 .

Pentru bancă, se pare că ați solicitat-o ​​și, deoarece cererea ar proveni de la adresa dvs. IP, este greu să demonstrați că nu ați inițiat-o. Din fericire, majoritatea browserelor moderne vor detecta automat acest lucru și îl vor preveni.

Pot folosi JavaScript în interiorul WordPress?

Da, puteți utiliza JavaScript când vă dezvoltați pentru WordPress. Rețineți că WordPress este un sistem flexibil de gestionare a conținutului care are două moduri de editare. Unul dintre ele vă permite să editați direct codul, iar celălalt vă permite să utilizați un editor similar cu ceea ce ați putea vedea pe un procesor de text, cunoscut și sub numele de editor „WYSIWYG”. În cea mai recentă versiune de WordPress, editorul WYSIWYG se numește Gutenberg.

Rețineți că puteți utiliza JavaScript și atunci când dezvoltați extensii pentru WordPress. În timp ce partea de server a WordPress este PHP, partea de client reprezintă aproape 100% din timp JavaScript.

Ar trebui să învăț JavaScript pentru WordPress?

Răspunsul la aceste întrebări depinde de ceea ce intenționați să faceți cu WordPress. Dacă doriți doar câteva pagini statice pe care le generați folosind platforma, probabil că vă veți simți bine fără să învățați JavaScript.

În plus, este destul de ușor să începeți cu JavaScript și veți afla, de asemenea, multe despre cum funcționează HTML și CSS. Cu toate acestea, pe lângă instruirea WordPress, veți dori să lucrați la învățarea JavaScript-ului dacă doriți să creați un site dinamic și memorabil.

Un avertisment rapid: dacă sunteți un dezvoltator web începător, nu vă așteptați să stăpâniți JavaScript în câteva zile. JavaScript este cunoscut pentru că are mesaje de eroare foarte vagi și este adesea criticat pentru că este „cod spaghetti”. Aceasta înseamnă că, de-a lungul anilor, dezvoltatorii au acumulat o mulțime de coduri fără a-l organiza corect. Mai mult decât atât, majoritatea dezvoltatorilor învață cum să programeze în cadre care utilizează JavaScript, dar sintactic sunt puțin diferite.

În special, ar trebui să investiți timp în învățarea JavaScript-ului dacă sunteți un freelancer sau o agenție care administrează site-urile clienților. Deși există instrumente de top care vă permit să gestionați mai multe site-uri WordPress, niciun plugin nu poate crea site-urile pentru dvs.!

În plus, dacă aveți aspirații de a fi dezvoltator web, învățarea JavaScript este benefică pentru aceste cariere:

• Dezvoltator interfețe
• Dezvoltator back-end
• Dezvoltator cu norma intreaga

În plus, învățarea JavaScript, împreună cu HTML, CSS și PHP mai avansate servesc ca o bază solidă WP care probabil va reduce costurile generale pentru dvs. Nu va mai trebui să plătiți contractanți externi, pentru a vă îndeplini rezultatele, pentru a îndeplini sarcini care, în realitate, pot dura câteva minute. Odată ce stăpâniți JavaScript, puteți trece la cadre populare, cum ar fi React și Angular, pentru a crea aplicații cu adevărat unice și receptive în WordPress.

Cum scriu JavaScript când codez în WordPress?

Chiar dacă adăugarea JavaScript la un site WordPress nu este la fel de simplă ca adăugarea CSS și HTML, nu vă va dura mult să începeți. Există două moduri diferite de abordare și fiecare are un scop diferit.

Metoda 1: pe fiecare pagină

Dacă doriți să rulați același script pe fiecare pagină a site-ului dvs. WordPress, adăugarea manuală a codului la fiecare pagină ar fi destul de plictisitoare, pentru a spune cel puțin. Locul potrivit pentru a insera JavaScript în HTML este în antetul și subsolul paginii.

Există câteva plugin-uri gratuite care vă vor prelua JavaScript-ul personalizat și îl vor arunca în antetul și / sau subsolul fiecărei pagini de pe site-ul dvs. WordPress. Administratorii WordPress adoră aceste pluginuri, deoarece funcționează perfect cu Google Analytics, asigurându-se că fiecare accesare a paginii este numărată, contribuind la creșterea rapidă a clasamentului SEO.

Metoda 2: JavaScript diferit pe fiecare pagină

Să presupunem că rulați un site WordPress care are un instrument diferit pe fiecare pagină care se bazează pe cel puțin o „bibliotecă” pentru a funcționa. Forțarea încărcării tuturor JavaScript-urilor dvs. pe fiecare pagină, mai ales atunci când nu este necesară, va încetini pur și simplu accesul la site-ul dvs. Bunul simț ne spune că încetinirea experienței vizitatorilor dvs. nu este cel mai bun mod de a câștiga afaceri!

Există o mulțime de tutoriale pe web care au metode extrem de complicate de a efectua acest proces. Deși este adevărat că acest lucru se poate face făcând editări complexe în fișierul funcții.php, nu este nevoie să luați această abordare decât dacă vă bucurați de dureri de cap.

În schimb, instalați pluginul Code Embed pe site-ul dvs. Acest lucru vă va permite să adăugați JavaScript și să îl încorporați oriunde doriți în pagină.

Folosind pluginul CodeEmbed

După instalarea pluginului Code Embed, accesați Opțiuni ecran și bifați caseta de selectare care spune „Câmpuri personalizate”. Acest lucru vă va permite să adăugați JavaScript la pagină.

Pe pagina de editare, veți vedea o casetă pe care scrie „Câmpuri personalizate”, cu opțiunea „Introduceți noi” câmpuri personalizate. Faceți clic pe acesta și veți avea casete de text goale pentru a introduce numele codului dvs. JavaScript, precum și pentru codul în sine.

Pentru a evita conflictele cu codurile WordPress existente, trebuie să începeți numele codului JavaScript cu literele cu majusculă „COD”. Ceva de genul „CODEtimer” ar fi bine. Apoi, veți adăuga JavaScript-ul real în cealaltă casetă. Asigurați-vă că includeți etichetele de deschidere și închidere a scriptului !

După ce ați terminat, faceți clic pe butonul „Adăugați un câmp personalizat”. În cele din urmă, identificați unde doriți să executați codul JavaScript din pagină. De exemplu, dacă codul încarcă un temporizator, găsiți unde doriți să introduceți temporizatorul pe pagina dvs. Apoi veți utiliza sintaxa exactă [[CODEtimer]] pentru ca WordPress să vă insereze JavaScript acolo și ați terminat!

Cum includ fișierele mele JavaScript și CSS în WordPress?

Deși WordPress are teme încorporate, mulți dezvoltatori web preferă să aibă un design mai unic și își vor folosi propriul CSS. De asemenea, veți avea nevoie de o modalitate de stocare a acestor fișiere JavaScript.

În această porțiune, va trebui să vă îndreptați către Managerul de fișiere și să localizați fișierul numit „functions.php”. Rețineți că acesta va fi în dosarul în care se află tema de bază pentru site-ul dvs.

Adăugarea CSS la functions.php

După ce vă aflați în fișierul functions.php , urmați acești pași:

1. Pe o nouă linie, creați o funcție goală adăugând funcția de cod
   addMyCSS () {#Fill This In Later}
2. „Înregistrați-vă” fișierul CSS cu WordPress utilizând funcția încorporată numită wp_register_style în pasul următor
3. Eliminați umplutura pe care am introdus-o în cod și, în schimb, puneți wp_register_style ('name_of_css_style', plugins_url ('file-location.css', __ FILE__));
4. Acum i-am spus WordPress cum să numim stilul nostru CSS și unde este. Acum este timpul să „punem în coadă” stilul sau să spunem WordPress că suntem gata să îl folosim.
5. Rămânând în blocul funcțional addMyCSS , adăugați codul wp_enqueue_style ('nume_de_css_style'); chiar sub codul pe care l-am introdus în ultimul pas.
6. Există un ultim pas, dar mai întâi, asigurați-vă că sunteți ÎN AFARA întregii funcții pe care am creat-o și în partea generală a fișierului PHP.
7. În afara addMyCSS , pur și simplu adăugați următoarea linie: add_action ('wp_enqueue_scripts', 'name_of_css_style'); . Acest lucru îi spune WordPress să declanșeze încărcarea acestui fișier la încărcarea paginii.

S-ar putea să vă întrebați de ce avem wp_enqueue_scripts în funcția add_action pentru o foaie de stil. Acesta este pur și simplu modul în care WordPress a implementat întotdeauna funcția.

Adăugarea de fișiere JavaScript la WordPress

Acum că am parcurs procesul de generare a unei funcții, înregistrarea unui fișier și adăugarea unei acțiuni, această parte ar trebui să fie o bucată de tort!

1. Faceți o funcție în functions.php numită addMyJS la fel cum am făcut cu addMyCSS .
2. Vom utiliza funcția wp_register_script , dar este puțin mai complexă. Are cinci „parametri” (elementele puse între paranteze). Uită-te mai jos pentru a vedea care este fiecare parametru.
3. wp_register_script (1. Numele scriptului dvs., 2. plugins_url (location_of_script.js, __FILE__), 3. matrice de dependențe JS, de obicei matrice (jquery), 4. (Opțional) versiunea fișierului dvs. JS între ghilimele unice, 5. ar trebui să fie adevărat dacă doriți JS în subsolul dvs., fals dacă îl doriți în antet);
4. Iată un exemplu practic de JavaScript pentru a rula în subsolul unei teme: wp_register_script ('timer_js', plugins_url ('timer_file.js', __FILE__), array ('jquery'), '1.0', true);
5. Din nou, ÎN AFARA funcției noastre addMyJS , „scoateți” scriptul dvs. plasând acest lucru în zona dvs. generală din PHP: add_action ('wp_enqueue_scripts', 'addMyJS');

S-ar putea să arate complex, dar, odată ce ai obținut, va dura mai puțin de un minut, așa că nu te teme!

Ce pluginuri pot folosi pentru a adăuga JavaScript la WordPress?

Există multe plugin-uri complet gratuite doar în acest scop. Fiecare funcționează ușor diferit, așa că experimentați cu câteva înainte de a vă angaja. Iată cinci dintre cele mai importante încercări.

• ASync - În mod unic, acest plugin încarcă atât fișierele JS cât și CSS separat de restul paginii. Acest lucru poate fi deosebit de util dacă există o eroare de codare care altfel ar opri pe termen nelimitat pagina de încărcare.

• JS în Widgets - Trebuie doar să adăugați câteva linii de coduri pentru ceva de genul Google Analytics? Acest plugin elimină problemele și va permite adăugarea de fragmente mici pe site-urile dvs. WordPress.

• Zia CSS / JS Helper - Acesta este de departe cel mai bun pentru cei experimentați cu dezvoltarea web clasică HTML / CSS / JS. Face funcționalitatea de editare WordPress la fel ca editarea unui site prin managerul de fișiere al cPanel. Puteți utiliza CSS și JavaScript inline pentru a adăuga rapid biți de cod, pentru a crea și gestiona fișiere externe și multe altele.

Întotdeauna faceți întotdeauna o copie de rezervă a site-ului!

În timp ce marea majoritate a pluginurilor WordPress nu vă vor face rău site-ului, există întotdeauna șansa să întâmpinați probleme. Înainte de a instala orice plugin suplimentar sau de a modifica site-ul dvs., faceți o copie de rezervă a site-ului dvs. utilizând un plugin de copiere de rezervă WordPress care poate gestiona copiile de rezervă complete ale instalării dvs. WordPress, cum ar fi BackupBuddy. Economisiți-vă ore de posibilă relucrare și asigurați-vă că toată munca voastră grea nu se risipește.

Pot utiliza API-uri WordPress folosind JavaScript?

După cum probabil știți, WordPress are o serie extinsă de API-uri sau interfețe de programare a aplicațiilor. API-urile sunt în esență funcții de server pe care le puteți utiliza în limbi precum JavaScript. Cea mai nouă metodă mai modernă pentru dezvoltatori de a învăța funcționalitatea API WordPress este prin pagina de referință a codului API WordPress WordPress.

Aici am obținut acele „funcții încorporate” pe care le-am folosit mai devreme. Am putea continua zile întregi despre fiecare funcție din API-uri și despre modul în care acestea funcționează în tandem cu JavaScript. Cu toate acestea, acesta este un subiect avansat care necesită pur și simplu timp și dedicare individuală pentru a învăța.

Există biblioteci JavaScript adaptate pentru WordPress?

Da! Recunoscând că mulți dezvoltatori nu au stăpânit integral conținutul API WordPress, mulți programatori au creat biblioteci JavaScript care pot fi încorporate cu ușurință, folosind oricare dintre pluginurile pe care le-am discutat anterior.

Majoritatea bibliotecilor JavaScript se găsesc pe GitHub și sunt complet gratuite. Există sute de mii de biblioteci JavaScript compatibile cu WordPress, de la una care adaugă efecte distractive la WordPress la una care vă permite să creați un site cu un aspect foarte similar cu Pinterest!

Cea mai cunoscută bibliotecă utilizată cu WordPress (și majoritatea site-urilor) se numește jQuery. jQuery elimină complexitatea din JavaScript și, odată ce îl veți obține, veți scrie funcții rapid și ușor.

Ajutor! JavaScript-ul meu WordPress nu funcționează!

Una dintre părțile mai puțin norocoase ale JavaScript este că erorile nu sunt evidente. Și adăugarea WordPress pe deasupra poate face acest lucru destul de confuz.

Unele erori pot fi cauzate la fel de ușor ca un ghilimel uitat. Altele pot fi cauzate de erori majore de codare care nu sunt identificate atât de ușor. Deci, cum fac diferența dezvoltatorii profesioniști?

Există două chei principale pentru depanarea: funcția JavaScript console.log și consola de depanare a browserului. Consola Chrome în special este excelentă pentru acest lucru.

consolă.log

Aceasta poate fi utilizată pentru a vedea care este valoarea unei variabile la un anumit punct al unei funcții și pentru a se asigura că părțile funcțiilor sunt de fapt atinse. Într-un fișier JavaScript, pur și simplu ați pune ceva de genul console.log („test”); .

Consola de depanare

În funcție de browserul utilizat, configurarea consolei va fi diferită. În general, trebuie doar să apăsați F12 pentru a-l deschide, apoi faceți clic pe fila „Consolă”.

Consola va arăta ce linie, din ce fișier JavaScript a apărut o eroare. De obicei, arată „stacktrace” complet sau seria de fișiere pe care trebuie să le parcurgeți până când loviți vinovatul. Tot aici se imprimă mesajele console.log .

Încheiere: JavaScript + WordPress

Există instrumente profesionale care vă vor oferi mult mai multă înțelegere, dar acestea costă de obicei un bănuț destul de mare. Vestea bună este că, pe măsură ce vă extindeți ca următorul cel mai mare dezvoltator de JavaScript WordPress din lume, instrumentele vor crește cu dvs.!

Kristen Wright

Kristen a scris tutoriale pentru a ajuta utilizatorii WordPress din 2011. De obicei, o puteți găsi lucrând la articole noi pentru blogul iThemes sau dezvoltând resurse pentru #WPprosper. În afara muncii, Kristen se bucură de jurnal (a scris două cărți!), Drumeții și camping, gătit și aventuri zilnice cu familia ei, sperând să ducă o viață mai prezentă.