Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Caricare correttamente i CSS in WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

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:

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

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():

  • $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():

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():

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:

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:

Qui gli esempi per queste tre azioni:

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:

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():

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:

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:

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.