Share
Senza CSS, hai scelte molto limitate per modellare le tue pagine web. E senza una corretta inclusione CSS all'interno di WordPress, puoi rendere estremamente difficile per gli utenti del tuo tema personalizzare lo stile del tema.
In questo tutorial, daremo un'occhiata al modo giusto per accodare i CSS in WordPress.
WordPress è attualmente il sistema di gestione dei contenuti più popolare al mondo e ha decine di milioni di utenti. Ecco perché, al fine di creare un tema di successo, dobbiamo pensare come ogni singolo utente di WordPress e cercare di passare al libro e caricare correttamente i nostri file CSS nei nostri temi.
Nel corso degli anni, WordPress ha sviluppato il suo codice per renderlo sempre più flessibile, e l'accodamento di CSS e JavaScript è stato un passo in quella direzione. Le nostre cattive abitudini sono rimaste per un po ', però. Conoscendo che WordPress ha introdotto l'accodamento di CSS e JavaScript, abbiamo continuato ad aggiungere questo codice al nostro header.php File:
... o abbiamo aggiunto il codice qui sotto al nostro functions.php file, pensando che fosse meglio:
Accentsconagua
"; add_action ('wp_head', 'add_stylesheet_to_head');?> Nei casi precedenti, WordPress non è in grado di determinare se i file CSS sono caricati nella pagina o meno. Potrebbe essere un errore orribile!
Se un altro plugin utilizza lo stesso file CSS, non sarebbe in grado di verificare se il file CSS è già stato incluso nella pagina. Quindi il plugin carica lo stesso file per la seconda volta, generando un codice duplicato.
Fortunatamente WordPress ha una soluzione piuttosto semplice per problemi come questo: registrazione e accodamento dei fogli di stile.
Come abbiamo detto prima, WordPress è cresciuto molto nel corso degli anni e noi dovere pensa a ogni singolo utente di WordPress nel mondo.
Oltre a loro, dobbiamo anche prendere in considerazione migliaia di plugin WordPress. Ma non lasciare che questi grandi numeri ti spaventino: WordPress ha funzioni piuttosto utili per noi per caricare correttamente gli stili CSS in WordPress.
Diamo un'occhiata.
Se vuoi caricare fogli di stile CSS, devi prima registrarli con il wp_register_style () funzione:
$ maniglia (stringa, obbligatorio) è un nome univoco per il foglio di stile. Altre funzioni useranno questo "handle" per accodare e stampare il tuo foglio di stile.$ src (stringa, obbligatorio) si riferisce all'URL del foglio di stile. Puoi usare funzioni come get_template_directory_uri () per ottenere i file di stile all'interno della directory del tema. Non pensare mai a codificarlo a fondo!$ dipendenze (array, facoltativo) gestisce i nomi per gli stili dipendenti. Se il tuo foglio di stile non funziona se manca un altro file di stile, usa questo parametro per impostare le "dipendenze". $ ver (stringa o booleano, facoltativo) è il numero di versione. Puoi usare il numero di versione del tema o recuperarne uno, se lo desideri. Se non si desidera utilizzare un numero di versione, impostarlo su nullo. Il valore predefinito è falso, che rende WordPress aggiungere il proprio numero di versione.$ supporti (stringa, facoltativo) è il tipo di supporto CSS come "schermo" o "palmare" o "stampa". Se non sei sicuro di doverlo usare, non usarlo. Il valore predefinito è "tutto".Ecco un esempio per il wp_register_style () funzione:
La registrazione degli stili è una specie di "opzionale" in WordPress. Se non pensi che il tuo stile verrà utilizzato da qualsiasi plug-in o non utilizzerai alcun codice per caricarlo ancora, sei libero di accodare lo stile senza registrarlo. Guarda come è fatto sotto.
Dopo aver registrato il nostro file di stile, dobbiamo "accodarlo" per renderlo pronto per essere caricato nei nostri temi sezione.
Lo facciamo con il wp_enqueue_style () funzione:
I parametri sono esattamente gli stessi con il wp_register_style () funzione, quindi non c'è bisogno di ripeterli.
Ma come abbiamo detto il wp_register_style () la funzione non è obbligatoria, dovrei dirti che puoi usare wp_enqueue_style () in due modi diversi:
Tieni presente che se un plugin deve trovare il tuo foglio di stile o hai intenzione di caricarlo in varie parti del tuo tema, devi prima registrarlo.
Non possiamo semplicemente usare il wp_enqueue_style () funzione ovunque nel nostro tema - abbiamo bisogno di usare "azioni". Ci sono tre azioni che possiamo usare per vari scopi:
wp_enqueue_scripts per caricare script e stili nel front-end del nostro sito web,admin_enqueue_scripts per caricare script e stili nelle pagine del nostro pannello di amministrazione,login_enqueue_scripts per caricare script e stili nella pagina di accesso di WordPress.Ecco gli esempi per queste tre azioni:
C'è un annuncio importante in Make WordPress: "Usa wp_enqueue_scripts (), non wp_print_styles ()!". Ti dice su un possibile errore di incompatibilità con WordPress v3.3.
Ci sono alcune funzioni molto utili sui CSS in WordPress: ci permettono di stampare stili in linea, controllare lo stato di accodamento dei nostri file di stile, aggiungere metadati per i nostri file di stile e annullare la registrazione degli stili.
Diamo un'occhiata.
wp_add_inline_style () Se il tuo tema ha opzioni per personalizzare lo stile del tema, puoi usare lo stile in linea per stamparle con il wp_add_inline_style () funzione:
Facile e veloce. Ricorda però: devi usare lo stesso nome di hadle con il foglio di stile che vuoi aggiungere dopo lo styling in linea.
wp_style_is () In alcuni casi, potremmo aver bisogno delle informazioni sullo stato di uno stile: è registrato, è accodato, è stampato o in attesa di essere stampato? Puoi determinarlo con il wp_style_is () funzione:
wp_style_add_data () Ecco una funzione fantastica chiamata wp_style_add_data () che ti consente di aggiungere metadati al tuo stile, inclusi commenti condizionali, supporto RTL e altro ancora!
Controlla:
add_data ('mytheme-ie', 'condizionale', 'lte IE 9'); * wp_style_add_data () è più pulito, però. * / add_action ('wp_enqueue_scripts', 'mytheme_ie_style'); ?> Fantastico, non è vero??
[Se non sbaglio, questo è il primo tutorial mai scritto su questa piccola ma utile funzione.
wp_deregister_style () Se hai mai avuto bisogno di "annullare la registrazione" di un foglio di stile (per ri-registrarlo con una versione modificata, ad esempio), puoi farlo con wp_deregister_style ().
Vediamo un esempio:
Sebbene non sia necessario, dovresti sempre registrare nuovamente un altro stile se ne annulli uno: potresti rompere qualcosa se non lo fai.
[C'è anche una funzione simile chiamata wp_dequeue_style (), che rimuove i fogli di stile accodati come suggerisce il nome.
Congratulazioni, ora sai tutto su come includere correttamente CSS in WordPress! Spero ti sia piaciuto il tutorial.
Hai qualche consiglio o esperienza che vuoi condividere? Commenta qui sotto e condividi le tue conoscenze con noi! E se ti è piaciuto questo articolo, non dimenticare di condividerlo con i tuoi amici!
