7 Giugno 2024

Come si modifica il CSS di WordPress?

Il CSS (Cascading Style Sheets) è un linguaggio utilizzato per descrivere la presentazione di un documento scritto in HTML o XML. Il CSS permette di controllare il layout delle pagine web, determinando come gli elementi devono essere visualizzati sullo schermo, sulla carta, o su altri media.

Cos'è il CSS

Il CSS è fondamentale per la progettazione web. Consente ai designer di separare il contenuto dal design, facilitando la manutenzione e l'aggiornamento dei siti web. Con il CSS, è possibile definire stili per elementi specifici, come colori, font, margini, bordi e molto altro. Le regole CSS sono applicate in cascata, il che significa che le dichiarazioni possono essere sovrascritte da altre dichiarazioni più specifiche o dichiarazioni che appaiono più in basso nel foglio di stile.

Struttura di base del CSS

Un file CSS è costituito da una serie di regole. Ogni regola ha due parti principali: un selettore e una dichiarazione. Il selettore indica a quali elementi HTML si applicano le regole, mentre la dichiarazione contiene le proprietà e i valori che definiscono l'aspetto degli elementi selezionati.

/* Esempio di una regola CSS */
selettore {
  proprietà: valore;
}

Ad esempio:

/* Imposta il colore del testo di tutti i paragrafi a blu */
p {
  color: blue;
}

Perché WordPress usa il CSS

WordPress utilizza il CSS per definire lo stile e l'aspetto dei temi. Ogni tema WordPress ha almeno un file CSS principale, solitamente chiamato style.css, che contiene le regole di stile per quel tema. Questo file può essere modificato per personalizzare l'aspetto del sito, adattandolo alle esigenze specifiche dell'utente.

Vantaggi dell'uso del CSS in WordPress

Personalizzazione: Gli utenti possono facilmente personalizzare l'aspetto del loro sito modificando il file CSS.
Consistenza: Il CSS permette di mantenere un aspetto coerente su tutte le pagine del sito.
Manutenzione: Separando lo stile dal contenuto, è più facile aggiornare e mantenere il sito nel tempo.
Prestazioni: Utilizzare un file CSS esterno può migliorare le prestazioni del sito, poiché i file CSS possono essere memorizzati nella cache del browser.

Come modificare il CSS tramite `functions.php`

Un metodo per aggiungere CSS personalizzato al tuo tema WordPress è tramite il file functions.php. Questo file permette di aggiungere funzionalità al tuo tema, inclusa l'iniezione di codice CSS nell'header del sito.

Esempio di funzione per l'injection di CSS nell'header

function woodoing_css_personalizzato() {
    echo '
    <style type="text/css">
        /* Aggiungi qui le tue regole CSS personalizzate. Sotto un esempio */
        body {
            background-color: #f0f0f0;
        }
    </style>
    ';
}
add_action('wp_head', 'woodoing_css_personalizzato');

Questa funzione utilizza l'hook wp_head per iniettare il CSS personalizzato nell'header di ogni pagina del sito. Puoi modificare il contenuto del tag <style> per includere le tue regole CSS specifiche.

Come si modifica il CSS di WordPress tramite Customizer

WordPress offre un'interfaccia utente per modificare il CSS del tema senza dover toccare direttamente i file del tema. Questo può essere fatto nativamente tramite il Customizer, accessibile dal menu "Aspetto > Personalizza".

Passaggi per modificare il CSS tramite il Customizer

Accedi al Customizer: Vai nel pannello di amministrazione di WordPress e seleziona "Aspetto > Personalizza".
Seleziona la sezione "CSS aggiuntivo": Nel Customizer, trova e clicca sulla sezione "CSS aggiuntivo".
Aggiungi il tuo CSS personalizzato: Qui puoi aggiungere le tue regole CSS personalizzate. Le modifiche verranno visualizzate in anteprima in tempo reale.
Pubblica le modifiche: Una volta soddisfatto delle modifiche, clicca su "Pubblica" per salvare le modifiche.

Come modificare il CSS tramite plugin

Se preferisci non modificare i file del tema o utilizzare il Customizer, ci sono diversi plugin disponibili che permettono di aggiungere CSS personalizzato al tuo sito WordPress.

Plugin popolari per aggiungere CSS personalizzato

Simple Custom CSS and JS: Questo plugin permette di aggiungere CSS e JavaScript personalizzato al tuo sito. È semplice da usare e non richiede competenze tecniche avanzate.
SiteOrigin CSS: Un potente editor CSS che include un visual editor per modificare il design del tuo sito senza scrivere codice.
Custom CSS & JS: Consente di aggiungere CSS e JavaScript personalizzato direttamente dall'area di amministrazione di WordPress.

Come usare un plugin per aggiungere CSS personalizzato

Installa e attiva il plugin: Vai su "Plugin > Aggiungi nuovo" nel pannello di amministrazione di WordPress, cerca il plugin desiderato, installalo e attivalo. Puoi anche cercarlo manualmente dalla repo ufficiale di WordPress. Per maggiori dettagli visita la nostra guida dedicata su come installare un plugin su WordPress in maniera automatica o manuale.
Aggiungi il tuo CSS personalizzato: Una volta attivato il plugin, troverai una nuova voce di menu nell'area di amministrazione dove potrai aggiungere le tue regole CSS personalizzate.
Salva le modifiche: Dopo aver aggiunto il tuo CSS, salva le modifiche. Le nuove regole verranno applicate al tuo sito.

Bonus: modifica CSS di WordPress da page builder o tema

Oltre ai metodi tradizionali per modificare il CSS, alcuni temi e page builder offrono strumenti integrati per personalizzare lo stile del tuo sito.

Modifica CSS tramite temi

Alcuni temi WordPress includono una casella apposita per l'inserimento di CSS personalizzato. Questa funzionalità si trova solitamente nelle opzioni del tema e permette di aggiungere e modificare il CSS senza dover toccare i file del tema o usare plugin esterni.

Modifica CSS di WordPress tramite page builder

I page builder come Elementor e Divi offrono potenti strumenti di personalizzazione che permettono di aggiungere CSS personalizzato a livello globale, per singoli elementi o per interi template. Questi strumenti spesso includono un editor visivo che facilita l'anteprima delle modifiche in tempo reale.

Elementor: Permette di aggiungere CSS personalizzato tramite l'opzione "CSS personalizzato" disponibile nelle impostazioni del widget, della sezione o della colonna. Inoltre, Elementor Pro offre un pannello per l'inserimento di CSS globale.
Divi: Offre un editor CSS integrato che consente di aggiungere CSS personalizzato per moduli, righe, sezioni e persino a livello globale tramite le opzioni del tema.

Per maggiori dettagli su come utilizzare queste funzionalità, ti consigliamo di consultare la documentazione ufficiale del page builder o del tema in uso.

Conclusione

Modificare il CSS in WordPress è un modo potente per personalizzare l'aspetto del tuo sito. Che tu scelga di farlo tramite il file functions.php, il Customizer, un plugin o un page builder, WordPress offre diverse opzioni per soddisfare le tue esigenze di design. Con un po' di pratica, sarai in grado di creare uno stile unico per il tuo sito web, rendendolo davvero tuo. Se poi vuoi richiedere una consulenza o vuoi che pensiamo noi a tutte le modifiche del caso, scrivici a questo link.

Condividi questo articolo sui social