WordPress mette a disposizione diversi selettori CSS.
Il CMS mette a tua disposizioni diverse classi ed ID, per permetterti di specificare regole CSS che saranno applicate solo in determinati casi.
Ad esempio, è possibile specificare regole CSS che saranno applicate ad una determinata pagina, oppure regole CSS applicate solo alla visualizzazione di un singolo articolo.
E’ possibile inoltre scrivere delle regole CSS da applicare a contenuti generati con altri plugin, come WooCommerce.
Indice
Le classi CSS del body
Come probabilmente saprai, ogni pagina HTML valida deve contenere un tag <body>.
Ogni tema WordPress ben sviluppato includerà nel codice HTML inviato al browser degli utenti delle classi CSS nel tag <body>.
Questi classi forniscono molte informazioni riguardo al contenuto della pagina attuale.
Considerando come esempio questa pagina, troverai che il body conterrà delle classi CSS simili a quelle in figura.
Osservando le classi inserite, possiamo dedurre le seguenti informazioni:
- La pagina visualizzata è una pagina che contiene un post per intero
- Tale pagina fa uso del template di default
- In questo pagina stiamo visualizzando i commenti
- Il post visualizzato nella pagina ha un’immagine di copertina (classe has-post-thumbnail)
- Il post visualizzato ha id 681 (classe postid-681)
body_class(): i selettori CSS di WordPress per il body
La funzione body_class() permette agli sviluppatori di temi di includere nel tag body le classi CSS viste in precedenza.
Oltre alle classi predefinite di WordPress, è possibile includerne altre fornendole come argomento della funzione.
I selettori di WooCommerce
Anche WooCommerce inserisce nel DOM delle classi CSS per aiutare gli sviluppatori a scrivere regole CSS precise.
Ad esempio, il form del carrello è identificato dalla classe woocommerce-cart-form, mentre il div contenente le informazioni di fatturazione del cliente in fase di checkout ha id customer_details.
post_class(): i selettori CSS di WordPress per gli articoli
In maniera analoga a body_class(), la funzione post_class( ) permette di ottenere le classi da applicare all’elemento che conterrà un singolo post, che tipicamente è un tag <article>.
Selettori css WordPress: esempi pratici
Di seguito fornirò alcuni esempi pratici di applicazione dei selettori WordPress.
Mostrare il box dei commenti solo alle persone loggate
Nel caso di questo tema, la classe del contenitore dei commenti è comments-wrapper, dovrai verificare quale sia la classe utilizzata nel tuo tema per il contenitore dei commenti.
/* Nascondiamo il box dei commenti per tutti */
body .comments-wrapper {
display: none;
}
/* Mostriamo il box dei commenti solo agli utenti loggati */
body.logged-in .comments-wrapper {
display: none;
}
Nascondere le immagini degli articoli in homepage
Questa regola CSS nasconderà tutte le immagini presenti negli articoli visualizzati nella homepage.
body.home article img {
display: none;
}
Conclusioni
In questo articolo ho mostrato alcuni dei selettori CSS resi disponibili da WordPress.
Gli esempi mostrati ovviamente non sono esaustivi, il modo migliore per scoprire tutti i selettori disponibili è consultare la documentazione di WordPress.
Questo articolo è stato utile? Controlla i miei articoli dedicati a WordPress