Manipularea DOM în WordPress folosind JQuery
Publicat: 2023-02-12Datorită platformei open-source a WordPress și comunității de dezvoltatori vibrante, crearea de teme pentru platformă are un atractiv destul de larg. Navigarea tuturor elementelor și conținutului necesar pentru a construi un site WordPress poate fi totuși o provocare, în funcție de cunoștințele și experiența dvs. de programare.
Din fericire, Document Object Model (DOM) poate facilita manipularea sau călătoria prin codul HTML al unui site. DOM funcționează permițându-vă să creați un arbore format din diferite noduri sau obiecte. Acest lucru deschide oportunitatea de a schimba afișarea, structura sau funcția site-ului, folosind biblioteci JavaScript, cum ar fi jQuery.
În acest articol, vom explica ce este DOM-ul și de ce ați putea dori să-l utilizați. Vom furniza apoi câteva tehnici standard de manipulare jQuery pentru utilizarea DOM-ului cu WordPress. Să ne scufundăm direct!
Ce este DOM-ul?
Mai simplu spus, DOM este o interfață de programare a aplicațiilor (API) pentru HTML. Acesta creează un arbore de obiecte care reprezintă conținutul și structura unei pagini web. Este, de asemenea, o platformă și un script independent de limbă, ceea ce îl face destul de versatil. Când DOM reprezintă codul sursă HTML în acest fel, îl face accesibil, astfel încât diferite limbaje de programare să se poată conecta la acesta.
De ce să folosiți DOM-ul?
În calitate de utilizator WordPress, probabil că vedeți DOM-ul în acțiune de fiecare dată când întâlniți interactivitate dinamică. Aceasta ar putea include situația în care este returnată o eroare dacă este trimis un formular cu informații lipsă. Glisoarele de conținut sunt un alt exemplu de DOM utilizat:
Dezvoltatorii pot folosi DOM pentru a actualiza și modifica aproape toate elementele dintr-o pagină web. Îl puteți folosi pentru a construi documente și a naviga în structura acestora. DOM poate fi folosit și pentru a adăuga, modifica sau șterge elemente și obiecte.
Manipularea DOM cu JQuery
Pentru a fi clar, DOM și HTML nu sunt la fel, deși ar trebui să conțină aceleași elemente. DOM-ul este o reprezentare modelată a codului sursă HTML și poate fi modificată de JavaScript la nivel de client.
Mai jos, ne vom uita la metodele din biblioteca jQuery pentru a testa unele tehnici de manipulare DOM. Rețineți că diferite browsere gestionează DOM-ul în felul lor, dar nu trebuie să faceți nimic special pentru a începe să îl utilizați. Toate browserele folosesc o anumită formă a DOM pentru a face paginile accesibile pentru JavaScript.
Tehnici de manipulare DOM
DOM-ul poate fi utilizat într-o mare varietate de moduri. Pentru a ilustra flexibilitatea acestuia, să ne uităm la șase tehnici care vă pot ajuta să începeți cu acest API util.
1. Metoda Înainte().
Fidel numelui său, metoda before() este utilizată atunci când doriți să inserați orice element înaintea altui element țintă, așa cum este indicat în cod.
În acest exemplu, metoda poate fi folosită pentru a adăuga un element pătrat cu text deasupra unui element desemnat, cum ar fi un buton, odată ce se face clic pe:
$(this).before( "<div class='square'>Un alt pătrat</div>" );
Plasarea paginii și aspectul sunt considerații de reținut atunci când utilizați această metodă. Veți dori să vă asigurați că noul element nu vă va rupe aspectul sau nu va cauza probleme vizuale.
2. Metoda After().
În același mod în care metoda before() vă permite să introduceți elemente înaintea altui element indicat, metoda after() permite opusul. De exemplu, ar putea fi folosit pentru a adăuga un element chiar sub un buton, odată ce butonul este selectat:
$(this).after( "<div class='square'>Un alt pătrat</div>" );
Adăugarea de conținut interactiv prin manipularea DOM cu jQuery astfel este o modalitate solidă de a câștiga interactivitate, fără a pierde viteza în proces.
3. Metoda Append().
În loc să apară elemente noi individuale, este posibil să doriți să adăugați noul element pe unul existent. De exemplu, poate doriți să adăugați textul „La mulți ani!” într-o zonă colorată ori de câte ori se face clic pe un anumit buton.
Pentru a adăuga noul element la conținutul existent al elementului țintă, ar trebui să inserați comanda append() jQuery în codul sursă HTML:
$( ".box" ).append( "<p>La mulți ani!</p>" );
Această metodă adaugă manipularea la sfârșitul elementului pe care îl indicați în șir, mai degrabă decât să-l pună înainte sau după. În contextul documentului HTML complet, puteți vedea cum are loc manipularea:
<!doctype html>
<title>Exemplu</title>
<stil>
.cutie {
fundal: portocaliu;
culoare albă;
culoare albă;
latime: 150px;
umplutură: 20px;
marja: 10px;
}
</stil>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "buton" ).click( function() {
$(this).after( "<div class='box'>La mulți ani!</div>" );
});
});
</script>
<button>Creează o casetă</button>
Această tehnică vă oferă o opțiune simplă pentru a crea interactivitate într-un spațiu restrâns. Nu uitați, cu această metodă particulară, manipulările vor apărea ca o extensie a elementului pe care îl indicați, mai degrabă decât ca elemente noi individuale.
4. Metoda Prepend().
Ca echilibru la metoda append() , prepend() va adăuga un element la sfârșitul oricărui element țintă pe care îl indicați în comanda jQuery:
$( ".banner" ).prepend( "<p>La mulți ani!</p>" );
În acest exemplu, textul „La mulți ani!” ar apărea la începutul bannerului indicat în șirul de cod.
Este de remarcat faptul că aceste metode (inclusiv before() , after() și append() ) sunt toate abordări acceptabile pentru utilizări simple. Cu toate acestea, recomandăm alte tehnici pentru inserții mai complexe.
5. Metoda Clone().
În continuare, metoda clone() este o opțiune destul de puternică în ceea ce privește manipularea DOM-ului cu jQuery. În timp ce cele patru tehnici anterioare vă permit să inserați elemente și să le mutați, clone() face posibilă copierea unui element, îndepărtarea lui din locul inițial și reinserarea sau adăugarea lui în altă parte.
De exemplu, această linie înseamnă că elementul cutie original va rămâne acolo unde se află, în timp ce o clonă a acestuia va fi atașată la elementul triunghi:
$( ".box" ).clone().appendTo( ".triunghi" );
Dezavantajul acestei metode este că poate provoca duplicarea atributului id al elementului. Aceste atribute sunt menite să fie unice. Puteți evita această problemă utilizând atributele clasei ca identificatori și folosind metoda clonării cu moderație.
6. Metoda Wrap().
În cele din urmă, metoda wrap() este utilă dacă doriți să înfășurați un element în jurul unui șir existent. De exemplu, puteți include mai multe paragrafe într-o nouă structură HTML identificând clasa și indicând ce structură este implementată:
$( ".targetclass" ).wrap( "<div class='new'></div>" );
Cu această tehnică, creați un <div> în jurul oricărui element care se potrivește cu clasa țintă din șirul wrap() . Deși puteți crea o înfășurare care are mai multe niveluri adâncime, totuși, ar trebui să vă asigurați că există doar un singur element interior.
Depanarea DOM
Când vine vorba de lucrul cu DOM, dorim să evidențiem un aspect cheie căruia trebuie să-i acordați atenție. Pentru a menține paginile să se încarce rapid și pentru a evita codul inutil (mai ales dacă dezvoltați o temă), ar trebui să aveți grijă să nu utilizați elemente care nu fac parte din arborele DOM.
Dacă nu sunteți sigur dacă un element face parte sau nu din DOM, îl puteți verifica pe fiecare prin browser-ul dvs. în partea din față a site-ului dvs. Puteți inspecta elementele din pagină și puteți determina unde sunt incluse în arborele DOM.
Acest lucru este util în special atunci când un alt script a schimbat HTML-ul original al site-ului dvs. În caz contrar, HTML și DOM pot apărea uneori exact la fel.
Explorați alte resurse și instrumente ale motorului WP
Dacă te gândești la DOM ca la o parte organică a site-ului tău, o resursă vie care răspunde la codul sursă HTML, puterea accesibilității sale este destul de uluitoare. De aceea, înțelegerea DOM-ului și a modului în care poate fi folosit pentru a vă îmbunătăți proiectele vă poate ajuta să vă duceți site-ul la nivelul următor.
Manipularea DOM cu jQuery evidențiază frumusețea platformei open-source a WordPress. Aici, la WP Engine, înțelegem cum resursele de înaltă calitate pentru dezvoltatori pot face toată diferența. De aceea oferim o mulțime de ajutor pentru utilizatorii WordPres, împreună cu planuri de găzduire de top!