Come aggiungere correttamente JavaScript e stili in WordPress

In questo articolo vedremo come aggiungere correttamente JavaScript e stili in WordPress .

Ci sono molti nuovi sviluppatori WordPress a cui piace scrivere codice e sviluppare plug-in esclusivamente per i propri siti Web o venderli in vari mercati e ottenere un buon ritorno.

Esistono vari modi per scrivere un codice, ma ci sono solo modi selezionati per scrivere il codice in modo efficiente.

Se riesci a scrivere un codice in due righe anziché in dieci, stai risparmiando molta elaborazione oltre che memoria.

Se potrebbe non essere importante per un sito Web piccolo e leggero, ma per un sito Web pesante, potrebbe significare molto.

Se non scrivi codice nitido e usi le risorse disponibili in modo efficiente, creerai molti conflitti per altri programmi.

Ad esempio, ci sono vari modi per caricare Javascript esterno già pronto in WordPress per il tuo plugin.

Ma se non segui lo standard corretto, tutti i plugin attivati ​​possono bloccarsi gravemente.

Questo articolo è principalmente per i nuovi sviluppatori di WordPress che desiderano sviluppare temi e plugin per WordPress.

A meno che non codifichi correttamente, il tuo codice non sarà professionale e qualsiasi prodotto che realizzi, non importa quanto sia buono il concetto, non verrai mai accettato.

Quindi, è meglio sapere come aggiungere correttamente JavaScript e stili in WordPress .

Gli errori nell'aggiunta di JavaScript

Alcuni di voi potrebbero essere consapevoli del fatto che WordPress ha una funzione chiamata wp_head che ti aiuta a caricare qualsiasi cosa nella sezione dell'intestazione del sito web.

Tutto quello che devi fare è aggiungere le seguenti righe di codice nel tuo file di script e qualsiasi cosa apparirà nell'intestazione.

add_action('wp_head', 'wpb_bad_script');
funzione wpb_bad_script() {
echo 'jQuery va qui';
}

Questa è una scorciatoia per aggiungere cose, ma non è il modo migliore. Devi seguire lo standard corretto abbandonando le scorciatoie, e questo è il punto centrale di questa illustrazione.

Ad esempio, carichi JQuery manualmente nel tuo plug-in e anche un altro sviluppatore carica lo stesso JQuery manualmente o tramite lo standard appropriato. Se una persona ha attivato entrambi i tuoi plugin, JQuery verrà caricato due volte nella memoria, il che è uno spreco.

Inoltre, se JQuery caricato differisce nella versione, ci sarebbero molti problemi nei plugin a causa di conflitti. Devi sapere come aggiungere correttamente JavaScript e stili in WordPress prima di scrivere qualsiasi codice.

Come evitare tali errori: il concetto di funzione di coda?

Come forse saprai, la community di sviluppatori di WordPress è grande e forte. Ci sono letteralmente migliaia e migliaia di sviluppatori che sviluppano nuovi temi e plugin ogni giorno.

Ma quello che stanno facendo per assicurarsi che non ci sia mai alcun conflitto con il metodo di codifica dell'altro è tramite la funzione di script di accodamento.

Questa è la funzione responsabile per aggiungere correttamente JavaScript e stili in WordPress in modo che non ci siano mai conflitti e blocchi inutili di memoria.

Garantisce un modo sistematico di caricare JavaScript e stili. La funzione qp_enquque_function dice a Wordless quando caricare quei JavaScript e stili, dove caricarli e soprattutto in quali condizioni.

Con l'aiuto di questi non è necessario caricare manualmente JQuery e cose del genere e, quindi, non ci sarà mai una condizione di blocco della memoria a causa del caricamento degli stessi file ancora e ancora.

La ragione di ciò è il fatto che la funzione Accoda ti consente di utilizzare le librerie integrate fornite con WordPress stesso. Ridurrà inoltre il carico di tempo di caricamento lento della pagina dovuto all'assenza del caricamento manuale di JavaScript.

Passaggi per aggiungere correttamente JavaScript e stili in WordPress-

1. Accoda gli script in WordPress

Le seguenti righe di codice caricano il bundle JavaScript integrato fornito con WordPress. Devi inserire queste righe nel file dei plugin quando crei i plugin o devi inserirle in functions.php se stai creando un tema.

funzione wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Spiegazione del codice

Lo script viene registrato tramite la funzione wp_register_script() che ha cinque parametri diversi.

1. $handle – È un nome univoco per lo script. Ecco 'my_amazing_script'.

2. $src – Definisce la posizione del tuo script. La funzione di libreria plugins_url recupera l'URL corretto della cartella dei plugin. Una volta recuperato, inizierà a cercare il file amazing_script.js al suo interno.

3. $deps – Definisce la dipendenza. Devi aggiungerlo quando chiedi a WordPress di caricare script di libreria come Jquery.

Se gli script sono già caricati in memoria, non verranno più caricati e verrà eseguito un nuovo caricamento. Questo assicura nessun conflitto, nessun blocco della memoria e nessuna perdita di tempo.

4. $ver – Definisce il numero di versione dello script. Non è obbligatorio.

5. $in_footer – Viene utilizzato per caricare lo script nel footer. Se vuoi caricare lo script nell'intestazione, dovresti mantenerlo su false.

Una volta che tutto è definito, basta chiamare lo script con wp_enqueue_script().

2. Accoda gli stili in WordPress

Proprio come JavaScript, devi accodare i fogli di stile. Usa il seguente pezzo di codice nel tuo file di plugin o nel file functions.php per la creazione del tema.

funzione wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

I codici di cui sopra sono adatti durante la creazione di un plug-in. Quando crei un tema, devi cambiare plugins_url() in get_template_directory_uri(). Il resto delle cose rimarranno esattamente le stesse.

funzione wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Se stai creando un tema figlio, devi usare get_stylesheet_direcroy_uri() invece di get_template_directory_uri().

Questo è il modo standard per aggiungere correttamente JavaScript e stili in WordPress.

Se il tuo plugin o tema sta affrontando problemi, dovresti modificarne il codice con le righe di codice sopra menzionate e forse i problemi verranno risolti.

Segui sempre gli standard di codifica seguiti in tutto il mondo per essere sulla stessa pagina con altri sviluppatori di successo.