Come aggiungere CSS personalizzato a WordPress senza modificare il tema
Vuoi cambiare un colore, nascondere un elemento o modificare un font sul tuo sito WordPress senza toccare i file del tema? Il CSS personalizzato ti permette di sovrascrivere qualsiasi stile del tema senza rischiare di perdere le modifiche con un aggiornamento. In questa guida ti spiego tutti i metodi disponibili, dal più semplice al più avanzato.
Perché non modificare direttamente i file del tema
Modificare il file style.css del tema è la tentazione più comune, ma è un errore. Ogni volta che il tema viene aggiornato, i tuoi cambiamenti vengono sovrascritti e persi. Anche usando un tema child, le modifiche al CSS possono diventare difficili da gestire se non sono organizzate. I metodi descritti in questa guida mantengono il tuo CSS personalizzato separato dal tema, protetto dagli aggiornamenti e facile da modificare.
Il campo CSS aggiuntivo nel Customizer
Il modo più semplice per aggiungere CSS personalizzato è il campo integrato di WordPress. Vai su Aspetto > Personalizza > CSS aggiuntivo. Qui trovi un editor con anteprima in tempo reale: scrivi il tuo CSS e vedrai immediatamente l’effetto sulla pagina. Ad esempio, per cambiare il colore dei link:
a {
color: #e74c3c;
}
a:hover {
color: #c0392b;
}
Il CSS aggiuntivo viene salvato nel database di WordPress, non nei file del tema. Questo significa che sopravvive agli aggiornamenti del tema e puoi anche cambiare tema senza perderlo. È il metodo consigliato per piccole modifiche estetiche.
Trovare il selettore CSS giusto
Per modificare un elemento specifico, devi conoscere il suo selettore CSS. Usa gli strumenti per sviluppatori del browser (F12) per ispezionare l’elemento. Clicca con il tasto destro sull’elemento che vuoi modificare e seleziona “Ispeziona”. Il pannello mostra il codice HTML dell’elemento e tutti gli stili CSS applicati. Da qui puoi identificare la classe o l’ID da usare nel tuo CSS personalizzato.
Ad esempio, se vuoi modificare il titolo del sito e l’ispettore mostra che ha la classe site-title, il tuo CSS sarà:
.site-title {
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
}
Se il tuo CSS non ha effetto, potrebbe essere sovrascritto dagli stili del tema. In quel caso, aggiungi !important dopo il valore per forzare la priorità, ma usalo con parsimonia.
CSS personalizzato con un tema child
Per modifiche più estese, un tema child è la soluzione migliore. Il tema child eredita tutti gli stili del tema genitore e ti permette di aggiungere o sovrascrivere CSS nel suo file style.css. Le modifiche nel tema child non vengono toccate dagli aggiornamenti del tema genitore.
Il file style.css del tema child deve importare gli stili del genitore e aggiungere le personalizzazioni dopo:
/*
Theme Name: MioTema Child
Template: tema-genitore
*/
/* Le personalizzazioni vanno qui */
.header-container {
background-color: #2c3e50;
padding: 20px 0;
}
.footer-widget {
margin-bottom: 30px;
}
Questo metodo è ideale quando hai decine o centinaia di righe di CSS personalizzato, perché il file è più facile da organizzare e versionare rispetto al campo CSS aggiuntivo del Customizer.
Aggiungere CSS con un plugin
Se preferisci un’interfaccia grafica senza creare un tema child, plugin come Simple Custom CSS and JS offrono un editor dedicato nella bacheca di WordPress. Puoi creare fogli di stile separati, organizzarli per funzionalità e scegliere se caricarli nell’header o nel footer. Il plugin supporta anche l’aggiunta di JavaScript personalizzato.
Un altro approccio è usare il plugin Code Snippets, che permette di aggiungere CSS tramite snippet PHP usando la funzione wp_add_inline_style(). Questo metodo è più tecnico ma offre il vantaggio di poter condizionare il CSS in base alla pagina, al tipo di contenuto o al ruolo dell’utente.
CSS personalizzato tramite functions.php
Per gli sviluppatori, il modo più pulito di aggiungere un foglio di stile personalizzato è tramite il file functions.php del tema child. Crea un file CSS separato e registralo con WordPress:
function carica_css_personalizzato() {
wp_enqueue_style(
'custom-style',
get_stylesheet_directory_uri() . '/css/custom.css',
array(),
'1.0.0'
);
}
add_action('wp_enqueue_scripts', 'carica_css_personalizzato');
Questo metodo separa il CSS personalizzato in un file dedicato, lo carica correttamente tramite il sistema di WordPress e permette di gestire le dipendenze e il versioning. È la best practice per progetti professionali.
CSS condizionale per pagine specifiche
A volte vuoi applicare stili solo a determinate pagine. WordPress aggiunge automaticamente classi CSS al tag body che identificano il tipo di pagina. Ad esempio, la homepage ha la classe home, le pagine singole hanno page-id-XX e gli articoli hanno single-post. Puoi sfruttare queste classi per CSS specifico:
/* Solo sulla homepage */
.home .hero-section {
padding: 80px 0;
}
/* Solo sulla pagina Contatti (ID 42) */
.page-id-42 .entry-content {
max-width: 600px;
margin: 0 auto;
}
Serve aiuto con la personalizzazione?
Se vuoi personalizzare il design del tuo sito WordPress senza rischiare di rompere nulla, il team di SoccorsoWP può modificare stili, layout e aspetto grafico del tuo sito in modo professionale. Apri un ticket e trasforma il tuo sito nel modo che desideri.
