Manipolare il DOM in WordPress usando JQuery

Grazie alla piattaforma open source di WordPress e alla vivace comunità di sviluppatori, la creazione di temi per la piattaforma ha un fascino piuttosto ampio. Navigare tra tutti gli elementi e i contenuti necessari per costruire un sito WordPress può essere impegnativo, tuttavia, a seconda delle tue conoscenze ed esperienze di programmazione.

Fortunatamente, il Document Object Model (DOM) può semplificare la manipolazione o l'esplorazione del codice HTML di un sito. Il DOM funziona consentendo di creare un albero composto da vari nodi o oggetti. Ciò offre l'opportunità di modificare la visualizzazione, la struttura o la funzione del sito, utilizzando librerie JavaScript come jQuery.

In questo articolo, spiegheremo cos'è il DOM e perché potresti volerlo utilizzare. Forniremo quindi alcune tecniche di manipolazione jQuery standard per l'utilizzo del DOM con WordPress. Immergiamoci subito!

Cos'è il DOM?

In poche parole, il DOM è un'API (Application Programming Interface) per HTML. Crea un albero di oggetti che rappresenta il contenuto e la struttura di una pagina web. È anche una piattaforma e uno script indipendente dalla lingua, il che lo rende abbastanza versatile. Quando il DOM rappresenta il codice sorgente HTML in questo modo, lo rende accessibile in modo che vari linguaggi di programmazione possano connettersi ad esso.

Perché usare il DOM?

Come utente di WordPress, probabilmente vedrai il DOM in azione ogni volta che incontri un'interattività dinamica. Ciò potrebbe includere quando viene restituito un errore se un modulo viene inviato con informazioni mancanti. I cursori di contenuto sono un altro esempio del DOM in uso:

Gli sviluppatori possono utilizzare il DOM per aggiornare e modificare quasi tutti gli elementi di una pagina web. Puoi usarlo per creare documenti e navigare nella loro struttura. Il DOM può anche essere utilizzato per aggiungere, modificare o eliminare elementi e oggetti.

Manipolazione DOM con JQuery

Per essere chiari, il DOM e l'HTML non sono la stessa cosa, anche se dovrebbero contenere gli stessi elementi. Il DOM è una rappresentazione modellata del codice sorgente HTML e può essere modificato da JavaScript lato client.

Di seguito, esamineremo i metodi nella libreria jQuery per testare alcune tecniche di manipolazione del DOM. Tieni presente che diversi browser gestiscono il DOM a modo loro, ma non devi fare nulla di speciale per iniziare a usarlo. Tutti i browser utilizzano una qualche forma del DOM per rendere le pagine accessibili a JavaScript.

Tecniche di manipolazione DOM

Il DOM può essere utilizzato in un'ampia varietà di modi. Per illustrare la sua flessibilità, diamo un'occhiata a sei tecniche che possono aiutarti a iniziare con questa utile API.

1. Il metodo Before()

Fedele al suo nome, il metodo before() viene utilizzato quando si desidera inserire qualsiasi elemento prima di un altro elemento di destinazione, come indicato nel codice.

In questo esempio, il metodo può essere utilizzato per aggiungere un elemento quadrato con del testo sopra un elemento designato, ad esempio un pulsante, una volta fatto clic su di esso:

 $(this).before( "<div class='square'>Un altro quadrato</div>" );

Il posizionamento e il layout della pagina sono considerazioni da tenere a mente quando si utilizza questo metodo. Ti consigliamo di assicurarti che il tuo nuovo elemento non rompa il layout o causi problemi visivi.

2. Il metodo After()

Allo stesso modo in cui il metodo before() consente di inserire elementi prima di un altro elemento indicato, il metodo after() consente il contrario. Ad esempio, potrebbe essere utilizzato per aggiungere un elemento subito sotto un pulsante, una volta selezionato il pulsante:

 $(this).after( "<div class='square'>Un altro quadrato</div>" );

L'aggiunta di contenuti interattivi manipolando il DOM con jQuery in questo modo è un modo solido per ottenere interattività, senza perdere velocità nel processo.

3. Il metodo Append()

Invece di far apparire singoli nuovi elementi, potresti voler aggiungere il tuo nuovo elemento a uno esistente. Ad esempio, potresti voler aggiungere il testo "Buon compleanno!" all'interno di un'area colorata ogni volta che si fa clic su un pulsante specifico.

Per aggiungere il tuo nuovo elemento al contenuto esistente dell'elemento di destinazione, devi inserire il comando jQuery append() all'interno del codice sorgente HTML:

 $( ".box" ).append( "<p>Buon compleanno!</p>" );

Questo metodo aggiunge la manipolazione alla fine dell'elemento che indichi nella stringa, piuttosto che metterlo prima o dopo. Nel contesto del documento HTML completo, puoi vedere come avviene la manipolazione:

 <!doctypehtml>
 <title>Esempio</title>
 <stile>
 .scatola {
 sfondo: arancione;
 colore bianco;
 colore bianco;
 larghezza: 150px;
 imbottitura: 20px;
 margine: 10px;
 }
 </stile>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <copione>
 $( funzione() {
 $( "pulsante" ).click( funzione() {
 $(this).after( "<div class='box'>Buon compleanno!</div>" );
 });
 });
 </script>
 <button>Crea una casella</button>

Questa tecnica offre una semplice opzione per creare interattività all'interno di uno spazio ristretto. Ricorda, con questo particolare metodo le manipolazioni appariranno come un'estensione dell'elemento che indichi, piuttosto che come nuovi singoli elementi.

4. Il metodo Prepend()

Come equilibrio del metodo append() , prepend() aggiungerà un elemento alla fine di qualsiasi elemento target indicato nel comando jQuery:

 $( ".banner" ).prepend( "<p>Buon compleanno!</p>" );

In questo esempio, il testo "Buon compleanno!" apparirebbe all'inizio del banner indicato nella stringa di codice.

Vale la pena notare che questi metodi (inclusi before() , after() e append() ) sono tutti approcci accettabili per usi semplici. Tuttavia, raccomandiamo altre tecniche per inserimenti più complessi.

5. Il metodo Clone()

Successivamente, il metodo clone() è un'opzione piuttosto potente in termini di manipolazione del DOM con jQuery. Mentre le quattro tecniche precedenti consentono di inserire elementi e spostarli, clone() consente di copiare un elemento, rimuoverlo dalla sua posizione originale e reinserirlo o aggiungerlo altrove.

Ad esempio, questa linea significa che l'elemento box originale rimarrà dov'è, mentre un suo clone verrà aggiunto all'elemento triangolo:

 $( ".box" ).clone().appendTo( ".triangle" );

Lo svantaggio di questo metodo è che può causare la duplicazione dell'attributo id dell'elemento. Questi attributi sono pensati per essere unici. È possibile evitare questo problema utilizzando gli attributi della classe come identificatori e impiegando con parsimonia il metodo clone.

6. Il metodo Wrap()

Infine, il metodo wrap() è utile se vuoi avvolgere un elemento attorno a una stringa esistente. Ad esempio, puoi racchiudere diversi paragrafi in una nuova struttura HTML identificando la classe e indicando quale struttura viene implementata:

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

Con questa tecnica, crei un <div> attorno a qualsiasi elemento che corrisponda alla classe target nella stringa wrap() . Sebbene sia possibile creare un avvolgimento profondo diversi livelli, tuttavia, è necessario assicurarsi che vi sia un solo elemento più interno.

Risoluzione dei problemi del DOM

Quando si tratta di lavorare con il DOM, vogliamo evidenziare un aspetto chiave a cui prestare attenzione. Per mantenere veloce il caricamento delle pagine ed evitare codice non necessario (soprattutto se stai sviluppando un tema), dovresti fare attenzione a non utilizzare elementi che non fanno parte dell'albero DOM.

Se non sei sicuro che un elemento faccia parte o meno del DOM, puoi controllare ciascuno di essi tramite il tuo browser sul front-end del tuo sito. Puoi ispezionare gli elementi sulla pagina e determinare dove sono inclusi nell'albero DOM.

Ciò è particolarmente utile quando un altro script ha modificato l'HTML originale del tuo sito. Altrimenti, il tuo codice HTML e DOM a volte potrebbero apparire esattamente uguali.

Esplora altre risorse e strumenti di WP Engine

Se pensi al DOM come a una parte organica del tuo sito, una risorsa vivente che risponde al codice sorgente HTML, il potere della sua accessibilità è piuttosto sorprendente. Ecco perché capire il DOM e come può essere utilizzato per migliorare i tuoi progetti può aiutarti a portare il tuo sito al livello successivo.

La manipolazione del DOM con jQuery evidenzia la bellezza della piattaforma open source di WordPress. Qui a WP Engine, capiamo come le risorse per sviluppatori di alta qualità possano fare la differenza. Ecco perché offriamo molto aiuto agli utenti di WordPres, insieme a piani di hosting di prim'ordine!