Il CSS (Cascading Style Sheets) è un linguaggio con un insieme di regole che definiscono l’aspetto degli elementi sul sito web.
Queste regole controllano gli elementi di design del sito web, come la dimensione del font e il colore, il colore di sfondo del sito e la quantità di spazio tra le diverse sezioni.
Considerate i CSS come le istruzioni di stile per il vostro sito web. Mentre il tema di WordPress utilizza elementi HTML per strutturare il contenuto del sito (come titoli, paragrafi, immagini e pulsanti), i CSS indicano al browser come presentare visivamente questi elementi.
Perché è necessario modificare i CSS in WordPress?
Sebbene i temi di WordPress offrano una varietà di opzioni di design, a volte si potrebbe desiderare di apportare modifiche specifiche all’aspetto del sito web al di là delle impostazioni integrate del tema. È qui che la modifica dei CSS si rivela utile per gli utenti di WordPress.
Ad esempio, potreste voler cambiare il colore di sfondo di una sezione specifica del vostro sito web o modificare leggermente la dimensione del font per migliorare la leggibilità.
È anche possibile personalizzare l’aspetto del sito web e differenziarlo da altri siti che utilizzano lo stesso tema. Ciò può comportare la modifica del colore della selezione del testo, l’aggiunta di un effetto parallasse o lo styling del modulo di commento di WordPress.
A volte, un tema potrebbe non visualizzare gli elementi esattamente come desiderate nel vostro progetto web. Con poche righe di CSS, è possibile correggere problemi minori come la centratura del testo che appare off-center o la regolazione della spaziatura interna o del margine intorno a un’immagine.
È necessario conoscere i CSS per utilizzare WordPress?
No, non è necessario conoscere i CSS per costruire un sito web WordPress. La maggior parte dei temi WordPress è dotata di una serie di opzioni di design integrate che consentono di personalizzare l’aspetto del sito senza toccare alcun codice.
La modifica dei CSS è generalmente considerata una caratteristica avanzata. Sebbene i principianti possano utilizzare WordPress anche senza, la conoscenza dei CSS offre maggiori possibilità di perfezionamento del design del sito web.
Per semplificare la modifica dei CSS, è possibile utilizzare un plugin per WordPress come CSS Hero. Un plugin CSS offre un approccio visivo alle modifiche CSS ed è compatibile con molti temi WordPress popolari.
Detto questo, capire come funzionano i CSS vi darà maggiore controllo e flessibilità nel personalizzare il vostro sito web WordPress.
Nozioni di base sui CSS in WordPress (con esempi)
I CSS utilizzano una sintassi specifica per definire l’aspetto degli elementi sul sito web. Anche se all’inizio può sembrare complesso, la struttura di base è piuttosto semplice.
La prima cosa da sapere sono i selettori CSS. Questi indicano ai CSS quali elementi del sito web devono essere stilizzati. Sono come etichette che indicano parti specifiche del sito web.
Ad esempio, il tagga body si riferisce all’intera area dei contenuti del sito web. Pertanto, il selettore body si rivolge all’intera pagina.
La seconda è costituita dalle proprietà. Queste definiscono gli aspetti visivi specifici che si desidera modificare. Le proprietà sono come istruzioni per l’aspetto dell’elemento selezionato. Esempi comuni sono il colore, la dimensione del font, il colore di sfondo e il margine.
Il prossimo è il valore. Questi specificano l’impostazione della proprietà. Ad esempio, il valore di color potrebbe essere rosso, blu o un codice colore specifico.
Poi c’è la classe CSS, che è un tipo di attributo che può essere assegnato agli elementi HTML. È possibile assegnare una classe a un elemento nel codice HTML e poi usarla nel CSS per applicare gli stessi stili a tutti gli elementi con quella classe.
Supponiamo di voler cambiare il colore di sfondo dell’intero sito web in nero. Ecco il codice CSS per farlo:
body {
background-color: black;
}
In questo esempio:
contenutoè il selettore, che si rivolge all’intera area dei contenuti del sito web.- Il
colore di sfondoè la proprietà che definisce l’aspetto che vogliamo cambiare. neroè il valore che specifica il nuovo colore di sfondo.
Supponiamo di voler evidenziare un certo testo sul sito web. Si potrebbe creare una classe CSS chiamata .highlight che rende il testo grassetto e ne cambia il colore in giallo. Ecco come definire questa classe nel CSS:
.highlight {
font-weight: bold;
color: yellow;
}
Ed ecco come applicarlo agli elementi del vostro HTML:
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
In questo esempio:
.highlightè il selettore di classe. Seleziona tutti gli elementi con la classe “highlight”.font-weight: grassetto;ecolor: giallo;sono proprietà. Definiscono quali aspetti degli elementi selezionati vogliamo modificare.grassettoegiallosono valori. Specificano i nuovi valori delle proprietà.
Come posso aggiungere codice CSS personalizzato a WordPress?
Le modalità di add-on dei CSS personalizzati dipendono dal tipo di tema WordPress utilizzato.
Se si utilizza un tema classico, si può andare nel CSS personalizzato di WordPress e selezionare “CSS aggiuntivi” per aggiungere il codice.
Se si utilizza un tema WordPress a blocchi, il personalizzatore del tema sarà assente dalla dashboard di WordPress. Questo perché l’editore predefinito è ora l’editor del sito.
Detto questo, potete comunque accedere al Personalizzatore di WordPress aggiungendo /wp-admin/customize.php alla fine del vostro dominio in questo modo:
https://example.com/wp-admin/customize.php
Quando si aggiungono CSS personalizzati tramite il personalizzatore di WordPress, le modifiche vengono memorizzate nel database di WordPress, non nel file style.css fisico (il foglio di stile del tema).
Questo approccio consente di apportare modifiche senza modificare direttamente i file del tema, un metodo molto più sicuro.
Detto questo, non è possibile apportare modifiche CSS complesse in questo modo. Quindi, l’alternativa è usare un plugin per gli snippet di codice come WPCode, che può inserire in modo sicuro CSS personalizzati nel tema di WordPress.
È anche possibile creare un tema child e aggiungervi il codice CSS personalizzato. In questo modo, le vostre modifiche CSS saranno presenti anche quando il tema genitore verrà aggiornato.
Per maggiori informazioni, potete leggere la nostra guida passo-passo su come add-on i CSS personalizzati al vostro sito WordPress.
Infine, è possibile utilizzare un plugin per l’editore di CSS, come CSS Hero. Questo plugin permette di modificare i CSS senza conoscere il codice. Per maggiori informazioni, selezionate la nostra recensione di CSS Hero.
Perché il mio CSS non viene visualizzato sul mio sito WordPress?
È possibile che il CSS non venga visualizzato sul sito WordPress a causa di errori di sintassi. Un piccolo errore nel codice CSS può impedirne l’applicazione. Potrebbe trattarsi di una parentesi mancante, di un errore di battitura nel nome di una proprietà o di un valore errato.
Inoltre, se di recente avete aggiunto o modificato il CSS, potrebbe essere necessario cancellare la cache per vedere le modifiche. Cancellate la cache del browser e, se state usando un plugin per la cache sul vostro sito WordPress, cancellate anche quello.
A volte, altri temi o plugin possono interferire con il CSS. Provate a disattivare altri plugin uno alla volta per vedere se il problema si corregge. In caso affermativo, è probabile che il conflitto sia causato dal plugin disattivato per ultimo.
Se si utilizza un tema child e il CSS non viene visualizzato, assicurarsi che il tema child sia impostato correttamente e che il file CSS sia correttamente inserito nel file functions.php del tema child.
Se avete bisogno di aiuto, potete selezionare la nostra guida per principianti alla risoluzione degli errori di WordPress.
Speriamo che questo articolo vi abbia aiutato ad approfondire il tema dei CSS in WordPress. Potreste anche consultare il nostro elenco di letture aggiuntive qui sotto per trovare articoli correlati su suggerimenti, trucchi e idee utili per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
