Aggiungere il CSS personalizzato

Mentre la maggior parte delle modifiche può essere apportata con le impostazioni nell’editor di WordPress, potresti preferire l’uso del CSS per personalizzare il tuo sito se hai esperienza con la scrittura di codice CSS. Questa guida ti mostrerà come modificare il tuo sito web con CSS.

Questa funzionalità è disponibile sui siti con i nostri piani WordPress.com Premium, Business e Commerce, nonché con il piano Pro legacy. Per i siti con i piani gratuito e Personal, aggiorna il tuo piano per accedere a questa funzionalità.

Informazioni sul CSS

CSS sta per Cascading Style Sheets. È un linguaggio di markup che controlla l’aspetto degli elementi HTML su una pagina web. WordPress include un editor CSS che ti consente di aggiungere stili CSS personali per sovrascrivere gli stili predefiniti del tuo tema.

Esiste un potenziale pressoché infinito per ciò che puoi fare con il CSS per modificare il design di un sito web. Tuttavia, richiede la conoscenza di come funzionano CSS e HTML (o almeno la volontà di imparare). La guida CSS dei documenti web MDN è un ottimo punto di partenza per imparare il CSS.

Se non sei interessato ad apprendere il CSS, scegli un tema a blocchi per il tuo sito. Questi temi forniscono le opzioni più flessibili per personalizzare qualsiasi aspetto del design del tuo sito web senza alcuna conoscenza del codice del computer.

Esistono due metodi per accedere all’editor CSS del sito, a seconda del tema. Ciascun metodo è spiegato di seguito.

Accedi all’editor CSS tramite Stili

Se il tuo sito usa un tema che supporta l’Editor del sito, puoi personalizzare il sito con CSS utilizzando questo metodo. Un modo rapido per determinare se il sito usa l’Editor del sito è controllare in Aspetto nella tua bacheca. Se visualizzi qui l’editor, puoi accedere all’editor CSS seguendo questi passaggi:

1. Visita la bacheca del sito.
2. Passa a Aspetto → Editor.
3. Fai clic su Stili nel menu Design a sinistra.
   • Se il tuo tema include Variazioni di stile, devi quindi fare clic sull’icona a forma di matita per aprire le opzioni Stili:

4. Fai clic sui tre puntini a destra dell’intestazione “Stili” e scegli “CSS aggiuntivo“:

5. Digita o incolla il CSS nella casella di testo.
6. Fai clic sul pulsante “Salva” in alto a destra dello schermo per salvare il CSS sul tuo sito.

Nei temi dell’Editor del sito, puoi applicare il codice CSS a blocchi specifici a livello di sito seguendo i passaggi di seguito.

1. Visita la bacheca del sito.
2. Passa a Aspetto → Editor.
3. Fai clic su Stili nel menu Design a sinistra.
   • Se il tuo tema include Variazioni di stile, devi quindi fare clic sull’icona a forma di matita per aprire le opzioni Stili.
4. Questa volta, seleziona la sezione “Blocchi” per accedere alle impostazioni per personalizzare l’aspetto di blocchi specifici per l’intero sito.
5. Fai clic sul nome del blocco a cui desideri aggiungere il CSS. Puoi anche individuare il tipo di blocco desiderato utilizzando la casella di ricerca.
6. Scorri verso il basso e fai clic su “Avanzate“.
7. Nella casella etichettata “CSS aggiuntivo“, digita CSS che verrà applicato a tutte le istanze di quel tipo di blocco. Quando aggiungi il CSS per blocco, non devi includere un selettore CSS: basta aggiungere proprietà e valore. Un esempio è incluso nel video sopra.
8. Fai clic sul pulsante “Salva” in alto a destra dello schermo per salvare il CSS sul tuo sito.

Accedi all’editor CSS tramite Personalizza

Per i temi che non utilizzano l’Editor del sito, inclusi i temi classici e molti temi di terze parti, puoi aggiungere CSS seguendo questi passaggi:

1. Visita la bacheca del sito.
2. Passa ad Aspetto → Personalizza → CSS aggiuntivo.
3. Digita o incolla il CSS nella casella di testo. La finestra di anteprima a destra rifletterà le tue modifiche.
4. Fai clic sul pulsante “Salva modifiche” per applicare il CSS al tuo sito.

L’opzione “Larghezza elemento multimediale” deve essere usata se hai modificato la larghezza dell’area contenuti principale usando il CSS personalizzato. L’impostazione “Larghezza elemento multimediale” viene usata come dimensione predefinita per immagini a schermo interno quando queste vengono inserite in un sito.

Questo non influenza la dimensione di alcune immagini che hai aggiunto prima di modificare l’impostazione, in base a come sono state inserite, e potresti dover reinserirne alcune dopo la modifica dell’impostazione.

Per impostazione predefinita il CSS personalizzato che aggiungi all’editor CSS verrà caricato dopo il CSS originale del tema, il che significa che le tue regole possono avere la precedenza e sovrascrivere gli stili del tema.

Puoi uscire completamente dal CSS originale del tema facendo clic sull’opzione “Non usare il CSS originale del tema”. Questo ti permetterà di usare qualsiasi tema WordPress.com come se fosse una tela bianca per la progettazione con CSS. È un’opzione avanzata e dovrebbe essere usata solamente se desideri sovrascrivere e progettare il CSS per il tema da zero.

Se desideri basarti sulle regole CSS esistenti, approccio più comune e consigliato, puoi lasciare questa opzione disabilitata.

WordPress.com ha un supporto per processori CSS LESS e Sass (sintassi SCSS). Questa è un’opzione avanzata per gli utenti che desiderano utilizzare estensioni CSS come variabili e mixin. Vedi i siti web LESS e Sass per ulteriori informazioni.

Domande frequenti

I crediti a piè di pagina non devono essere modificati con CSS. Puoi rimuovere o modificare i crediti a piè di pagina con le impostazioni a seconda del tipo di tema utilizzato dal sito:

• Se il tuo sito utilizza un tema a blocchi, puoi modificare o rimuovere i crediti a piè di pagina usando l’Editor del sito, senza CSS richiesto.
• Se il tuo sito utilizza un tema classico, puoi modificare il credito a piè di pagina con un logo WordPress minimalista. Puoi nascondere il credito se il sito ha un abbonamento al piano Business o Commerce.

Sì, solo su siti con plugin.

Puoi scegliere i caratteri del tuo sito web utilizzando le opzioni con il tuo tema. Il limite è di due caratteri web sul front-end quando lavori con CSS. Tuttavia, puoi aggiungere caratteri aggiuntivi usando plugin per caratteri di terze parti.

Sì. Puoi caricare un’immagine sulla tua Libreria multimediale, quindi farvi riferimento dal suo URL diretto all’interno del tuo foglio di stile CSS. Ecco un esempio di come usare un’immagine di sfondo nel tuo foglio di stile:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Consigliamo di apportare modifiche CSS usando l’editor CSS, come spiegato in questa guida sopra. Quando aggiungi CSS usando questo metodo, sovrascrivi le regole CSS dal foglio di stile del tema. Questo è un metodo sicuro che semplifica il debug dei conflitti CSS e il ripristino delle versioni precedenti del CSS che hai aggiunto.

Se sei esperto nella modifica diretta dei file del tema, puoi farlo tramite SFTP o creando un tema secondario. Consigliamo di verificare le modifiche su un sito di gestione temporanea prima di applicarle al tuo sito live.

Tutti gli aggiornamenti di WordPress.com vengono rinnovati annualmente. Se scegli di annullare l’abbonamento, il tuo CSS personalizzato verrà salvato comunque, ma non verrà più applicato al tuo sito affinché altri possano vederlo. Se desideri che venga riapplicato al tuo sito, puoi riacquistare il piano e gli stili verranno riapplicati automaticamente a condizione che tu non abbia modificato i temi. Se hai cambiato tema, troverai il tuo precedente CSS nel link Revisioni CSS.