Categorie
WordPress

Selettori CSS WordPress: come utilizzarli

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.

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.
css wordpress
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.

Hai bisogno di un servizio di hosting veloce ed affidabile?

Scopri ora

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

Seguimi su