Quando si desidera personalizzare un tema, alleggerire una dashboard ingombra di plugin, dare al proprio blog un bell’aspetto su ogni schermo, i CSS offrono la soluzione più veloce per fare le cose in WordPress senza installare l’ennesimo plugin.
Ma siamo realisti: non tutti gli utenti di WordPress hanno il tempo di studiarsi i fogli di stile dei temi o decifrare le stranezze del Block Editor. Ecco perché abbiamo messo insieme questo elenco di consigli pratici e salva-tempo sui CSS, pensati appositamente per WordPress.
Non si tratta di trucchi generici. Al contrario, possono aiutare a risolvere i problemi più comuni di blogger, proprietari di siti, sviluppatori e freelance che lavorano con WordPress ogni giorno.
Questa guida spiega come:
- Risolvere i problemi di sticky header con i link di ancoraggio
- Snellire griglie di post lunghi con moderne tecniche di layout
- Personalizzare la schermata di login senza plugin
- Nascondere gli elementi più ingombranti dell’interfaccia utente dei plugin
- E molto altro…
Questi suggerimenti possono aiutare a snellire il lavoro e a migliorare le prestazioni, che si utilizzi un tema classico, un tema a blocchi o un builder, il tutto con poche righe di CSS.
1. Risolvere i problemi dei link di ancoraggio con gli sticky header
A volte capita di cliccare su un link di ancorato a una sezione di una pagina per poi scoprire che l’intestazione di destinazione è nascosta dietro la navbar fissa. Questo è un problema comune in WordPress. Di solito si presenta nei post lunghi che utilizzano il plugin Table of Contents.
La maggior parte dei temi utilizza position: sticky o fixed per le barre di navigazione, che si sovrappongono alla parte superiore della pagina. Quando un utente clicca su un link di ancoraggio (come #faq o #pricing), il browser fa scorrere la sezione in questione fino all’inizio, proprio sotto la barra di navigazione.
È possibile risolvere questo problema utilizzando la proprietà CSS scroll-margin-top. Questa proprietà aggiunge uno spazio sopra l’intestazione, in modo che non rimanga bloccata sotto la barra di navigazione.
h2, h3 {
scroll-margin-top: 80px;
}La prassi migliore è quella di far corrispondere il valore all’altezza dell’intestazione. Se la barra di navigazione fissa è alta 64px, si puù impostare scroll-margin-top: 64px o poco più. Lo si può applicare ai livelli di intestazione utilizzati nei link di ancoraggio, in genere h2 o h3.
2. Puntare a specifiche schermate di amministrazione di WordPress con le classi del <body>
Molti plugin di WordPress ingombrano l’interfaccia della bacheca con avvisi di upsell, banner o elementi senza stile. Ma rimuoverli o modificarli in tutto il sito non è sempre pratico, soprattutto quando si desidera apportare modifiche solo in una schermata specifica, come le impostazioni di WooCommerce o l’editor di un tipo di post personalizzato.
WordPress aggiunge automaticamente al tag <body> delle pagine del pannello di amministrazione delle classi che tengono conto del contesto. Queste classi includono gli slug delle pagine, i tipi di post e i riferimenti alle voci di menu e sono incredibilmente utili per scrivere codice CSS mirato che si applichi solo dove necessario.
Ad esempio, supponiamo di voler nascondere gli avvisi solo nella pagina delle impostazioni di WooCommerce.
body.toplevel_page_woocommerce .notice {
display: none;
}Per trovare queste classi, basta aprire il pannello di amministrazione di WordPress, fare clic con il tasto destro del mouse e scegliere Ispeziona (oppure premere Cmd+Option+I / Ctrl+Shift+I). Il tag <body> conterrà diverse classi utili.
Ad esempio, dalla schermata della dashboard si può ottenere questo:
<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">Alcune classi da cercare:
post-type-product: editor di prodotti WooCommerceedit-tags-php: gestione delle categorie/tagsettings_page_yoast: impostazioni di Yoast SEOtoplevel_page_woocommerce: pagina principale delle impostazioni di WooCommerce
Per utilizzarli nel codice CSS, bisogna accodare un foglio di stile personalizzato al pannello di amministrazione. Non è possibile aggiungerli attraverso il Customizer, che ha effetto solo sul frontend.
Si può aggiungere al file functions.php del tema:
function my_custom_admin_styles() {
wp_enqueue_style(
'my-admin-css',
get_stylesheet_directory_uri() . '/admin.css'
);
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');Si potrà creare, quindi, un file chiamato admin.css nella cartella del tema e aggiungere lì gli stili.
3. Creare griglie reattive senza un page builder
I page builder permettono di creare facilmente il layout, ma creano anche un po’ di ingombro. Se si lavora con un tema classico (come Astra o GeneratePress) o se si sta creando un block template, le griglie CSS rendono più veloce e pulita la creazione di un layout reattivo.
Sono utili soprattutto per:
- Griglie per gli articoli del blog sulla pagina iniziale o sull’archivio
- Liste di tipi di post personalizzati come eventi, membri del team o testimonianze
- Layout di prodotti WooCommerce senza sovrascrivere i template file
Basta semplicemente aggiungerlo al foglio di stile del child theme (o inserirlo tramite il file functions.php):
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}Poi si racchiude il loop in un container come questo:
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<div class="post-card">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; ?>
</div>Questo CSS crea automaticamente il numero di colonne necessarie, assicura che ogni elemento sia largo almeno 280px e si riduce a un numero inferiore di colonne sugli schermi più piccoli, senza bisogno di media queries o plugin.
4. Utilizzare clamp() per ottenere dimensioni dei caratteri reattive senza media queries
Progettare per diverse dimensioni dello schermo spesso significa definire diverse dimensioni dei font con le media query. Ma le media query possono essere complicate, soprattutto quando si ha a che fare con diversi punti di interruzione o si vuole un ridimensionamento coerente tra i vari dispositivi.
È qui che entra in gioco clamp(), una moderna funzione CSS che permette di definire un valore fluido tra una dimensione minima, una preferita e una massima, tutto in una riga.
Ecco il formato di base:
font-size: clamp(min, preferred, max);Permette al browser di regolare automaticamente la dimensione del carattere in base alla larghezza del viewport, senza bisogno di media query separate.
La maggior parte dei temi WordPress (soprattutto quelli a blocchi) hanno un design fluido. Ma l’editor a blocchi Gutenberg non sempre permette di avere il pieno controllo sul ridimensionamento dei caratteri, soprattutto per cose come:
- Titoli delle sezioni principali
- Titoli dei post in evidenza
- Layout di pagina a tutta larghezza
Invece di specificare più dimensioni di carattere con le media queries, clamp() permette di avere un codice più pulito, meno ripetizioni e una migliore reattività. SI può utilizzare per titoli, pulsanti, citazioni e così via, all’interno di stili di blocco personalizzati tramite il theme.json o il file editor-style.css.
h1 {
font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}clamp() è supportato da tutti i browser moderni. È sicuro per tutti i progetti WordPress, a meno che non si tratti di browser aziendali estremamente obsoleti (ad esempio, Internet Explorer 11, che WordPress stesso non supporta più).
5. Migliorare le prestazioni delle pagine lunghe con la visibilità dei contenuti
Se la homepage elenca gli articoli del blog, la pagina del negozio carica decine di prodotti oppure si usa una query personalizzata per le testimonianze, probabilmente si riscontrano problemi di prestazioni, soprattutto su mobile. Quel ritardo che si avverte quando si scorre un lungo elenco? È il browser che sta facendo più lavoro del necessario.
La proprietà content-visibility può essere di aiuto dicendo al browser: “Non eseguire il rendering di questo elemento finché non viene visualizzato”
.article-card {
content-visibility: auto;
contain-intrinsic-size: 400px;
}È come il lazy-loading per gli elementi HTML, che riduce il costo di layout e di paint per i contenuti fuori dallo schermo. L’opzione contain-intrinsic-size fornisce al browser un’altezza stimata per riservare spazio, in modo che il layout non si sposti durante il caricamento del contenuto.
È possibile farlo aggiungendo una classe come .article-card o .product-card a ogni elemento del loop quando si modifica un tema, quindi lasciando il CSS nel foglio di stile del child theme o inserendolo tramite il file functions.php.
In Gutenberg, si può aggiungere una classe personalizzata al blocco (nelle impostazioni avanzate), quindi inserirla nella sezione CSS aggiuntivi o nel file del tema.
6. Usare !important con parsimonia ma in modo intelligente quando si sovrascrivono gli stili dei plugin
Nella maggior parte dei progetti WordPress, si prova a creare uno stile e non succede nulla. Si scrive la regola, si controlla il selettore, si aggiorna… e ancora gli stili originali del plugin hanno la meglio.
Questo perché molti plugin di WordPress aggiungono stili con:
- Alta specificità (lunghe catene di classi)
- Attributi in linea
style - Fogli di stile che vengono caricati in coda
Invece di correre dietro a selettori complessi, la soluzione più pulita è spesso quella di utilizzare !important, quando è opportuno.
Ad esempio, Contact Form 7 utilizza classi specifiche come .wpcf7-form-control, ma i suoi stili predefiniti possono essere difficili da sovrascrivere senza !important.
Ecco come arrotondare gli input del modulo:
input.wpcf7-form-control {
border-radius: 6px !important;
}È importante utilizzarlo con attenzione. Invece di infilare !important dappertutto, è bene isolare le sovrascritture in un foglio di stile dedicato per il pannello di amministrazione o per i plugin. In questo modo si mantiene pulito il CSS del tema principale e si evitano conflitti accidentali.
Se si lavora con i siti dei clienti, questo approccio aiuta a domare gli stili aggressivi dei plugin senza dover forzare i template o aggiungere un altro plugin.
7. Usare :where() per sovrascrivere gli stili dei blocchi senza problemi di specificità
Chi provato a modificare lo stile predefinito dei blocchi di Gutenberg conosce bene il problema: il core di WordPress e i temi basati sui blocchi spesso vengono forniti con selettori estremamente specifici. Anche piccole modifiche come la regolazione dei margini dei pulsanti o la rimozione della spaziatura dei blocchi richiedono complesse sovrascritture o un sacco di tentativi ed errori.
È possibile risolvere il problema utilizzando la pseudo-classe :where(), un wrapper di selettori CSS che ha sempre una specificità pari a zero, indipendentemente da ciò che si inserisce al suo interno.
:where(.wp-block-button) {
margin-bottom: 0;
}Possiamo applicare uno stile a .wp-block-button ma, a differenza di un normale selettore, non “compete” con altre regole CSS, e ciò lo rende sicuro e flessibile.
Supponiamo di lavorare su un sito con un tema a blocchi (come Twenty Twenty-Four o il block starter di Astra) e decidiamo di rimuovere il margine extra sotto i pulsanti:
.wp-block-button {
margin-bottom: 0;
}Questo codice potrebbe non funzionare perché il core di WordPress o il tema potrebbero avere una regola più specifica, come ad esempio:
.entry-content .wp-block-button:not(.is-style-outline) {
margin-bottom: 1.5rem;
}Possiamo dare maggiore specificità (fragile), usare !important (pesante) o usare :where() per scrivere un CSS più mantenibile e che si adatti al resto del codice.
8. Personalizzare la schermata di login di WordPress senza un plugin
Vogliamo aggiungere il nostro logo alla pagina di login? Cambiare il colore dello sfondo? Modificare i font o lo stile dei pulsanti? Non c’è bisogno di un plugin per questo. WordPress permette di personalizzare facilmente la schermata di login con i CSS. Tutto ciò di cui abbiamo bisogno è un action hook.
Basta richiedere un foglio di stile personalizzato utilizzando l’hook login_enqueue_scripts:
function custom_login_styles() {
wp_enqueue_style(
'my-login-styles',
get_stylesheet_directory_uri() . '/login.css'
);
}
add_action('login_enqueue_scripts', 'custom_login_styles');Quindi, nel file login.css, aggiungeremo stili come questo:
body.login {
background-color: #f9f9f9;
}
.login h1 a {
background-image: url('/wp-content/uploads/your-logo.png');
background-size: contain;
width: 100%;
height: 80px;
}
.login #loginform {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}Questo dà al sito un tocco professionale ed evita l’ennesimo plugin che fa solo una cosa.
9. Evitare che le immagini rovinino il layout
Un’immagine troppo larga per il suo container può rovinare il layout di WordPress, soprattutto nei temi classici o nei contenuti di pagine e post. Se l’immagine non è vincolata dai CSS, può uscire fuori dal suo contenitore e causare lo scorrimento orizzontale o sezioni non allineate.
Questo accade solitamente quando:
- L’editor dei contenuti incolla un’immagine senza impostare l’allineamento o le dimensioni
- Un tema non ha una gestione predefinita delle immagini responsive
- Si aggiungono immagini all’interno di blocchi personalizzati o shortcode legacy
Per risolvere questo problema, bisogna impostare una larghezza massima e reimpostare il comportamento del layout:
img {
max-width: 100%;
height: auto;
display: block;
}Ecco come funziona:
max-width: 100%: assicura che l’immagine non superi mai il suo contenitoreheight: auto: preserva il rapporto d’aspetto originaledisplay: block: rimuove gli spazi vuoti inaspettati sotto le immagini causati dalle impostazioni predefinite del layout in linea
È possibile applicare lo stesso schema per vincolare i video:
iframe {
max-width: 100%;
height: auto;
display: block;
}Oppure utilizzare un wrapper con aspect-ratio se il tema supporta i CSS moderni.
Riepilogo
Il CSS potrebbe non sembrare un elemento così importante, ma in WordPress alcune righe ben posizionate possono far risparmiare ore di lavoro.
Si può trattare di personalizzare i layout, di ripulire il pannello di amministrazione o di migliorare le prestazioni del frontend, i suggerimenti di questa guida sono stati pensati per aiutare a lavorare in modo più intelligente, non più difficile.
Ma anche il CSS più raffinato può arrivare solo fino a un certo punto. Affinché i miglioramenti apportati al frontend siano davvero brillanti, con pagine che si caricano velocemente, layout stabili e un’interattività fluida, è necessaria anche una piattaforma di hosting progettata per le prestazioni.
L’infrastruttura di Kinsta è stata progettata con queste ottimizzazioni, con l’ottimizzazione delle immagini, la cache perimetrale, il supporto di un CDN e ottimizzazioni a livello di server specifiche per WordPress.
Quindi, mentre questi trucchi con i CSS aiutano a controllare l’aspetto del sito, Kinsta garantisce il caricamento e le prestazioni che gli utenti si aspettano.
