Come per i file .js, anche i file .css è importante che siano inclusi dentro ad un tema WordPress in modo corretto. In questo modo abbiamo la garanzia che eventuali altri plugin (per esempio quelli che si occupano della cache o i cosìdetti “minifier”) interagiscano con essi in modo corretto. Mettiamo da parte quindi le cattive abitudini e vediamo come si caricano correttamente i CSS in WordPress.
Caricare un file CSS in WordPress nel modo SBAGLIATO
Okay, quello che segue NON va fatto, in nessun caso, per nessuna ragione. I CSS non vanno inclusi nell’header.php così:
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
e NON vanno inclusi nel file functions.php cosà:
<?php
function add_stylesheet_to_head() {
echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
?>Negli ‘esempi sopra WordPress non può sapere, per esempio, se il CSS va caricato in tutte le pagine oppure no. Se altri plugin facessero uso dello stesso foglio stile poi, ci ritroveremmo con dei doppioni.
Fortunatamente WordPress ha un sistema piuttosto semplice per risolvere questi problemi.
Caricare i file CSS nel modo GIUSTO
Come agire quindi nel modo giusto?
Tramite l’utilizzo della funzione wp_register_style(), se si vuole registrare il CSS, oppure esclusivamente con wp_enqueue_style().
Registrare gli stili (opzionale)
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
Anzichè analizzare ogni singolo parametro (per quello ti rimando alla consultazione del codex ufficiale), vediamo un esempio pratico di utilizzo commentato:
<?php
wp_register_style(
'il-mio-css-stupendo', // nome dello style
get_template_directory_uri() . '/css/my-amazing.css', // indirizzo del CSS
array( 'my-css' ), // fogli stile dipendenti
'1.2', // numero di versione del CSS
'screen', // media type del CSS
);
?>Accodare i files CSS
Registrare gli stili tuttavia è opzionale in WordPress, ha senso solamente se verranno usati da qualche plugin di terze parti. Se non è questo il caso, è sufficiente avvalersi della funzione wp_enqueue_style(), che carica i fogli stili dentro l’<head> del nostro tema.
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
Come visto in precedenza, lasciamo al code ufficiale la descrizione della funzione, e passiamo a commentare un esempio di “accodamento”:
<?php
// se abbiamo registrato il foglio stile in precedenza sarà sufficiente scrivere
wp_enqueue_style( 'il-mio-css-strupendo' );
// se non l'abbiamo registrato, DOBBIAMO settare il parametro $src!
wp_enqueue_style(
'il-mio-css-stupendo',
get_template_directory_uri() . '/css/my-amazing.css',
array( 'my-css' ),
null, // esempio senza numero di versione
// ...e senza media type dichiarato
);
?>Caricare gli stili nel nostro sito: le azioni
Una volta registrati e/o accodati gli stili CSS, dobbiamo usare le azioni di WordPress per decidere dove “mostrarli”.
Abbiamo a disposizione 3 tipi di azioni:
wp_enqueue_scriptsper caricare scripts js e stili css nel fron-end del nostro sitoadmin_enqueue_scriptsper caricare scripts js e stili css nelle pagine del pannello di amministrazionelogin_enqueue_scriptsper caricare scripts js e stili css nella login
Vediamo come usare le 3 azioni:
<?php
// carica CSS nel front-end
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// carica CSS nel pannello di amministrazione
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' );
// carica css nel login
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' );
?>Et voilà, i nostri CSS sono pronti per essere letti ed interpretati dove richiesto!
