Come aggiungere javascript e css in WordPress

Rocco Vincycss, javascript, template tags

Per creare l’interfaccia grafica di un sito, non si può fare a meno di usare uno o più fogli di stile, per definirne l’aspetto, e di script per renderlo dinamico. In questa parte della guida su come realizzare un tema per un sito WordPress, vedremo qual è il modo corretto per aggiungere Javascript e CSS in WordPress.

Ogni sito WordPress, oltre ad avere un tema personalizzato, fa uso di molti plugin. Ognuno di questi plugin potrebbe far uso, a sua volta, di fogli di stile e di javascript.

Ora, prova ad immaginare cosa potrebbe succedere se il tema che hai realizzato e più di un plugin dovessero far tutti uso di script dipendenti dalla stessa libreria, per esempio jQuery. Sicuramente, ognuno di essi chiederebbe il caricamento di questa libreria. Di conseguenza, se la gestione del caricamento dovesse avvenire in modo indipendente, senza nessun controllo, la libreria jQuery sarebbe caricata più volte all’interno del sito, con il suo conseguente appesantimento.

Fortunatamente, WordPress ha implementato un metodo che permette di caricare efficacemente script e file CSS che è in grado di risolvere, in modo efficiente, eventuali problemi di incompatibilità.

In pratica, il metodo consiste nel caricare script e fogli di stile usando rispettivamente le funzioni wp_enqueue_script() o wp_enqueue_style().

In particolare, si scrive una funzione all’interno del file functions.php, che sarà richiamata tramite un Hook, che si occuperà di caricare e accodare correttamente i vari file javascript e css.

Ma procediamo con ordine e vediamo quali sono gli errori più comuni che si potrebbero commettere quando si vuole aggiungere javascript e CSS in WordPress.

Come inserire script e fogli di stile in un tema

Come abbiamo visto quando abbiamo parlato dei template files, header.php è il template file che si occupa di creare l’intestazione del sito. Di conseguenza dovrebbe contenere quella parte di codice che si occupa di caricare i file CSS e javascript all’interno del tag head.

Abbiamo anche detto che un esempio di header.php potrebbe essere:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<!-- Required meta tags -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php wp_head(); ?>
</head>
<body>

Quindi, se conosci l’HTML, sai benissimo che se volessimo aggiungere qualsiasi file javascript nell’head dovremmo aggiungere la seguente riga:

<script type=”text/javascript” src=”/scripts/mio_script.js”></script>

Allo stesso modo, volendo aggiungere un foglio di stile personalizzato, dovremmo aggiungere la riga:

<link rel="stylesheet" type="text/css" href="/css/mio_stile.css" />

Quindi, in teoria, ci basterà modificare header.php in questo modo per aggiungere javascript e css al nostro tema:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<!-- Required meta tags -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/css/mio_stile.css" />
<script type=”text/javascript” src=”/scripts/mio_script.js”></script>
<?php wp_head(); ?>
</head>
<body>

In effetti il tutto funzionerebbe normalmente, tranne per il fatto che non ci sarebbe nessun controllo ne di dipendenza ne di conflitto su gli script e i fogli di stile che saranno di volta in volta caricati. Mentre, come abbiamo detto, questi controlli avverrebbero se si usassero le funzioni messe a disposizione da Worpress per caricare correttamente javascript e css.

Come aggiungere javascript e css correttamente in un tema WordPress

Vediamo ora cosa dobbiamo fare per aggiungere in modo corretto javascript e css in un tema WordPress.

Innanzitutto, creiamo una funzione nel file functions.php e richiamiamo al suo interno wp_enqueue_script() per caricare gli script e wp_enqueue_style() per i fogli di stile.

Ma cerchiamo prima di capire meglio come usare queste due funzioni.

La sintassi della funzione base per caricare e accodare i fogli di stile è:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

I parametri che possiamo passare a questa funzione sono:

$handle è il nome del foglio di stile;
$src è il percorso dove si trova il file;
$deps è un array dove devono vanno indicate eventuali dipendenze. Il foglio di stile sarà caricato solo dopo il caricamento di tutte le dipendenze;
$ver indica il numero della versione;
$media indica il tipo di media dove dev’essere caricato, accetta valori tipo ‘all’, ‘print’ o ‘screen’. Il valore di default è ‘all’.

Tieni presente che solo il primo parametro($handle) è obbligatorio, gli altri sono opzionali. Tuttavia, nel caso in cui il foglio di stile non fosse pre-registrato è necessario indicare anche il percorso del file. Più avanti vedremo come registrare script e fogli di stile.

Come abbiamo già detto in precedenza, il file style.css è obbligatorio e contiene i meta dati necessari a WordPress per riconosce ed installare il tema.

Ma naturalmente, questo file contiene anche del codice css che definisce lo stile del sito. Quindi, come qualsiasi altro css, dev’essere caricato nel tema che stiamo realizzando.

Per farlo è sufficiente usare la funzione wp_enqueue_style() in questo modo:

wp_enqueue_style( 'style', get_stylesheet_uri() );

dove get_stylesheet_uri() restituisce il percorso completo, compreso il nome del file, di style.css.

La funzione wp_enqueue_script ha una sintassi simile a wp_enqueue_style. In particolare:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Dove:

$handle è il nome del foglio dello script;
$src è il percorso dove si trova lo script;
$deps è un array dove devono essere indicate eventuali dipendenze da caricare prima dello script, come per esempio jQuery;
$ver indica il numero della versione;
$in_footer se viene passato il valore true lo script sarà accodato e caricato nel footer della pagina, cioè prima della chiusura del tag body, altrimenti lo script sarà caricato nell’intestazione prima della chiusura del tag head.

Anche per questa funzione, se lo script è già registrato sarà sufficiente indicare solo il primo parametro, mentre, in caso contrario, sarà necessario indicare anche il percorso.

Registrare script e fogli di stile in WordPress

Vediamo cosa vuol dire registrare uno script o un file css.

Registrare uno script o un foglio di stile, vuol dire preparare il file e renderlo disponibile per il caricamento.

Devi sapere che WordPress mette a disposizione degli sviluppatori alcune tra le più popolari librerie in javascript. Si tratta di script già registrati dal core e pronti per essere usati, come per esempio jQuery.

Sul sito wordpress.org, puoi consultare l’elenco degli script inclusi e pre-registrati in Worpress.

Quindi, se vuoi caricare uno di questi script, ti basterà semplicemente passare solo il parametro $handle alla funzione wp_enqueue_script.

Per esempio, per includere la libreria jQuery dovrai semplicemente scrivere:

wp_enqueue_script( 'jquery' );

Ma, se vuoi usare una versione diversa di jquery o di un qualsiasi altro script già presente in WordPress, lo devi prima de-registrare e poi registrare la versione che vuoi usare.

Le funzioni che devi usare per de-registrare e registrare script sono rispettivamente:

wp_deregister_script( $handle )

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Come puoi vedere, i parametri che accetta la funzione wp_register_script() sono gli stessi di wp_enqueue_script( ), ma in wp_register_script() sono obbligatori sia $handle che $src.

Una volta registrato uno script, può essere messo in coda per il caricamento nel sito passando solo il suo nome ($handle) alla funzione wp_enqueue_script( ).

Allo stesso modo è possibile registrare e de-registrare fogli di stili con le funzioni:

wp_register_style( $handle, $src, $deps, $ver, $media )

wp_deregister_style( $handle )

Come aggiungere javascript e css in functions.php

Giunti a questo punto, possiamo finalmente scrivere una nostra funzione personalizzata all’interno del file functions.php che si occuperà di caricare gli script e i fogli di stile necessari. Questa funzione sarà richiamata con l’hook wp_enqueue_scripts:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Non dovrai fare nient’altro, perché il template tag wp_head(), presente in header.php prima della chiusura del tag head, e il template tag wp_footer(), presente in footer.php prima della chiusura del tag body, si occuperanno di aggiungere, nell’ordine corretto, i fogli di stile e gli script nell’header e nel footer che hai aggiunto in coda con le funzioni wp_enqueue_style() e wp_enqueue_script().

Conclusioni

Come hai avuto modo di vedere in questo articolo, usando le funzioni messe a disposizione dal core di WordPress, puoi aggiungere facilmente e in modo efficiente qualsiasi script o foglio di stile all’interno di un tema.

Inoltre, se usi i tag condizionali come is_page(), is_single(), is_home() ecc… puoi limitare il caricamento di script e fogli di stili solo a determinati contenuti. Per esempio per aggiungere un particolare foglio di stile solo alle pagine, puoi scrivere:

if(is_page()){
    wp_enqueue_style( 'mio_stile_pagina', 'url_stile_pagina' );
}

Continuiamo il nostro percorso e, dopo esserci occupato delle nozioni basilari, iniziamo a creare i diversi template files che costituiscono un tema.

Ma prima, per completezza, cerchiamo di conoscere meglio cosa sono le tassonomie di WordPress, in modo particolare quelle predefinite, cioè tags e categorie. Inoltre, vediamo anche come è possibile creare tassonomie personalizzate.

Nel frattempo, se hai dubbi o per qualsiasi informazione o chiarimento puoi scrivermi attraverso la nostra pagina Facebook di BlogAmico, o contattarmi via email.

Prossimo articolo -> Categorie, Tags e Tassonomie

Functions.php – Aggiungere caratteristiche e funzionalità a WordPress <- Articolo precedente