Caricare correttamente i CSS in WordPress

Italian (Italiano) translation by Danilo Maccioni (you can also view the original English article)

Senza i CSS, avete una serie limitata di scelte per modellare le vostre pagine web. E senza una corretta inclusione in WordPress, potreste rendere estremamente difficoltosa la personalizzazione dello stile all'utente del tema.

In questo tutorial, daremo uno sguardo al modo corretto di accodare i CSS in WordPress.

Attualmente WordPress è il più popolare content management system al mondo e conta decine di migliaia di utenti. Questa è la ragione per cui, per realizzare un tema di successo, occorre considerare ad ogni suo singolo utente, seguire le direttive e caricare correttamente i CSS nei vostri temi.

Il modo sbagliato di caricare CSS in WordPress

Durante gli anni, il codice di WordPress è aumentato per garantire sempre più flessibilità e la gestione dell'inclusione di CSS e JavaScript puntava in quella direzione. Tuttavia, le nostre cattive abitudini sono continuate per un po'. Nonostante sapessimo che WordPress aveva introdotto l'inclusione CSS e JavaScript, abbiamo continuato ad aggiungere il codice nei nostri file header.php:

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

...oppure aggiungevamo il codice dentro ai nostri file function.php, pensando fosse meglio:

<?php

function add_stylesheet_to_head() {
  echo "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}

add_action( 'wp_head', 'add_stylesheet_to_head' );

?>

Nei suddetti casi, WordPress non poteva determinare quando i file CSS venivano caricati e quando no. Questo potrebbe essere un grave errore!

Se un altro plugin usa lo stesso file CSS, esso non può verificare se il file CSS sia già stato incluso nella pagina. Quindi il plugin caricherà lo stesso file una seconda volta, duplicando il codice.

Fortunatamente, WordPress ha una soluzione molto semplice per tali problemi: registrare e accodare i fogli di stile.

Il modo giusto di caricare i CSS in WordPress

Come abbiamo detto prima, WordPress è cresciuto durante gli anni e dobbiamo pensare a ciascun utente WordPress nel mondo.

In aggiunta a questo, dobbiamo anche tenere conto di migliaia di plugin. Ma non lasciate che questi grandi numeri vi spaventino: WordPress possiede utili funzioni per caricare gli stili CSS.

Diamo uno sguardo.

Registrare i file CSS

Se volete caricare i fogli di stile, dovreste prima registrarli con la funzione wp_register_style():

<?php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>

$handle (stringa, richiesto) è un nome univoco per il vostro foglio di stile. Altre funzioni useranno "handle" per accodare e stampare il vostro foglio di stile.
$src (stringa, richiesto) si riferisce alla URL del foglio di stile. Potete usare funzioni quali get_template_directory_uri() per raggiungere i file all'interno della cartella del vostro tema. Non scrivete mai direttamente path assoluti!
$deps (array, opzionale) gestisce i nomi per le dipendenze dello stile. Se il vostro foglio di stile non funziona in caso altri manchino, usate questo parametro per dichiarare le "dipendenze".
$ver (stringa o booleano, opzionale) è il numero di versione. Potete usare la versione del vostro tema o se volete, inventarvene uno. Se non volete utilizzare il numero di versione, impostatelo a null. Di base è impostato a false, che fa si che WordPress adotti il suo stesso numero di versione.
$media (stringa, opzionale) è il tipo di media CSS, come ad esempio "screen" o "handheld" o "print". Se non siete certi di averne bisogno, non usatelo. Di base è impostato ad "all".

Segue un esempio d'uso della funzione wp_register_style():

<?php

// wp_register_style() example
wp_register_style(
	'my-bootstrap-extension', // handle name
	get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet
	array( 'bootstrap-main' ), // an array of dependent styles
	'1.2', // version number
	'screen', // CSS media type
);

?>

Registrare gli stili è "opzionale" in WordPress. Se non pensate che il vostro stile venga usato da plugin o se non dovete caricarlo ancora, siete liberi di accodare lo stile senza registrarlo. Guardate di seguito come avviene.

Accodare i file CSS

Dopo aver registrato il nostro foglio di stile, dobbiamo "accodarlo" per fare in modo che venga caricato nella sezione <head> del nostro tema.

Questo grazie alla funzione wp_enqueue_style():

<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

I parametri sono esattamente gli stessi della funzione wp_register_style(), perciò non dovrete ripeterli.

Ma come abbiamo detto, la funzione wp_register_style() non è obbligatoria, per questo potete utilizzare wp_enqueue_style() in due modi diversi:

<?php

// if we registered the style before:
wp_enqueue_style( 'my-bootstrap-extension' );

// if we didn't register it, we HAVE to set the $src parameter!
wp_enqueue_style(
	'my-bootstrap-extension',
	get_template_directory_uri() . '/css/my-bootstrap-extension.css',
	array( 'bootstrap-main' ),
	null, // example of no version number...
	// ...and no CSS media type
);

?>

Ricordate che se un plugin ha bisogno di trovare il vostro foglio di stile o avete intenzione di caricarlo in varie pari del tema, certamente prima dovrete registrarlo.

Carichiamo gli stili nel nostro sito web

Non possiamo semplicemente usare la funzione wp_enqueue_style() ovunque nel nostro tema – dobbiamo usare le "azioni". Ci sono tre azioni che possiamo usare per vari scopi:

wp_enqueue_scripts per caricare script e stili nel frontend del nostro sito,
admin_enqueue_scripts per caricare script e stili nelle pagine di amministrazione,
login_enqueue_scripts per caricare script e stili nella pagina di accesso di WordPress.

Qui gli esempi per queste tre azioni:

<?php

// load css into the website's front-end
function mytheme_enqueue_style() {
	wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

// load css into the admin pages
function mytheme_enqueue_options_style() {
	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );

// load css into the login page
function mytheme_enqueue_login_style() {
	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );

?>

C'è un importante annuncio su Make WordPress: "Use wp_enqueue_scripts(), not wp_print_styles()!". Parla di possibili errori di compatibilità con WordPress v3.3.

Alcune funzioni extra

Ci sono alcune utili funzioni riguardo CSS in WordPress: Esse ci permettono di stampare gli stili inline, controllare lo stato di accodamento dei nostri fogli di stile, aggiungere meta dati ai nostri file e depennare gli stili.

Diamo un'occhiata.

Aggiungere stili inline dinamici `wp_add_inline_style()`

Se il vostro tema permette di aggiungere personalizzazioni allo stile, potete usare la funzione wp_add_inline_style() per stamparle inline:

<?php

function mytheme_custom_styles() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"
	$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

?>

Facile e veloce. Ma ricordate: dovrete utilizzare lo stesso nome di handle del foglio di stile a cui volete aggiungere stili inline.

Controllare lo stato di accodamento del foglio di stile: `wp_style_is()`

In alcuni casi, potreste aver bisogno di sapere lo stato del CSS: è registrato, è accodato, è stampato o in attesa di esserlo? Potete determinare ciò con la funzione wp_style_is():

<?php

/*
 * wp_style_is( $handle, $state );
 * $handle - name of the stylesheet
 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
 */

// wp_style_is() example
function bootstrap_styles() {

	if( wp_style_is( 'bootstrap-main' ) {
    
		// enqueue the bootstrap theme if bootstrap is already enqueued
		wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
        
	}
    
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );

?>

Aggiungere meta dati al foglio di stile: `wp_style_add_data()`

Ecco una splendida funzione chiamata wp_style_add_data(), che vi permette di aggiungere meta dati al vostro stile, includere commenti condizionali, supporto RTL e molto altro!

Osservate:

<?php

/*
 * wp_style_add_data( $handle, $key, $value );
 * Possible values for $key and $value:
 * 'conditional' string      Comments for IE 6, lte IE 7 etc.
 * 'rtl'         bool|string To declare an RTL stylesheet.
 * 'suffix'      string      Optional suffix, used in combination with RTL.
 * 'alt'         bool        For rel="alternate stylesheet".
 * 'title'       string      For preferred/alternate stylesheets.
 */

// wp_style_add_data() example
function mytheme_extra_styles() {
	wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
	wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
	/*
	 * alternate usage:
	 * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
	 * wp_style_add_data() is cleaner, though.
	 */
}

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

?>

Grandioso no?!

[Se non sbaglio, questo è il primo tutorial mai scritto riguaguardo questa piccola —ma utilissima— funzione.

Cancellare i fogli di stile `wp_deregister_style()`

Se avete bisogno di "depennare" un foglio di stile (per esempio in caso dobbiate registrarne una versione modificata), potete farlo con la funzione wp_deregister_style().

Vediamo un esempio:

<?php

function mytheme_load_modified_bootstrap() {
	// if bootstrap is registered before...
	if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
		// ...deregister it first...
		wp_deregister_style( 'bootstrap-main' );
		// ...and re-register it with our own, modified bootstrap-main.css...
		wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
		// ...and enqueue it!
		wp_enqueue_style( 'bootstrap-main' );
	}
}

add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );

?>

Anche se non è obbligatorio, dovreste sempre registrare un altro stile quando ne cancellate uno – non facendolo potreste rompere qualcosa.

[C'è anche una funzione simile chiamata wp_dequeue_style(), che come suggerisce il nome rimuove i fogli di stile accodati.

Conclusioni

Congratulazioni, ora conoscete tutto su come includere correttamente i CSS in WordPress! Spero abbiate gradito il tutorial.

Avete consigli o esperienze da raccontare? Commentate di seguito e condividete la vostra conoscenza con noi! E se questo tutorial vi è piaciuto, non dimenticate di divulgarlo ai vostri amici!