Volete provare a modificare il CSS di WordPress, ma non sapete da dove cominciare? Con gli stili CSS, potete modificare l’aspetto del vostro sito a livello globale o su specifiche pagine. Potete aggiungere colori, dare spazio a certi elementi, progettate un layout e in pratica cambiate esattamente l’aspetto di qualsiasi cosa appaia nel vostro tema WordPress.
Se volete acquisire maggiore familiarità con l’ambiente di sviluppo di WordPress, o semplicemente avere un maggior controllo sull’aspetto del vostro sito web, dovete sapere come aggiungere CSS in WordPress (e come modificare quello che è già presente).
Modificando il tema e includendo CSS personali, sarete in grado di ottimizzare ogni singolo elemento visivo del vostro sito. Oggi daremo un’occhiata più da vicino ai CSS.
Pronti a iniziare? Andiamo!
Cos’È l’Editing del CSS?
CSS sta per Cascading Style Sheets ed è il linguaggio web più popolare a parte l’HTML. I due vanno a braccetto, dato che i CSS sono utilizzati per lo stile degli elementi HTML. L’HTML getta le basi dell’aspetto di un sito web e i CSS sono usati per aggiungere lo stile.
I CSS vi danno la possibilità di rendere un sito web reattivo, aggiungere colori, cambiare font, modificare il layout e, in generale, perfezionare la presentazione visuale di un sito web. Come HTML e JavaScript, i CSS sono un linguaggio frontend lato client, il che significa che vengono eseguiti dal lato utente, invece che sul backend del server.
Quando vi immergete nello sviluppo di WordPress, HTML, CSS, JavaScript e PHP sono i linguaggi da conoscere. Questo è il cuore del CMS, così come dei suoi numerosi temi e plugin.
Ma anche se non siete web designer o uno sviluppatore, è bene acquisire un po’ di conoscenza di CSS, in quanto potete utilizzarlo per spostare o stilizzare elementi del vostro sito web, o fare piccole modifiche estetiche al vostro tema per adattarlo meglio alle vostre esigenze.
WordPress e CSS
All’interno di WordPress, i CSS sono un po’ diversi. Sono controllati dai temi, che sono costituiti da template file, template tags, e naturalmente dal foglio di stile CSS. Anche se generati dal vostro tema, tutti questi elementi sono modificabili.
I template file dividono parti del vostro sito web in sezioni (come header.php o archive.php), e i template tag vengono utilizzati per inserirvi altri contenuti prelevati dal vostro database. Questi file sono in realtà costituiti per lo più da PHP e HTML, anche se è possibile aggiungere CSS se necessario.
Quello che state davvero cercando è il foglio di stile, o style.css. Per cambiare l’aspetto del vostro sito web, dovrete imparare ad aggiungere e modificare il codice presente in questo file.
Come personalizzare il vostro tema WordPress con i CSS
Se volete personalizzare il vostro tema e cambiare l’aspetto del vostro sito con i CSS, dovrete aggiungere il vostro codice o modificare quello che c’è già. Ci sono diversi modi per aggiungere CSS senza dover mai toccare i file del tema, ma per cambiare il codice del tema esistente, dovrete accedere al foglio di stile del vostro sito.
Mentre apportate queste modifiche, c’è una cosa che dovete sapere: quando il vostro tema viene aggiornato, tutte le modifiche apportate ai file style.css, functions.php o ad altri template file del tema saranno cancellati. In generale, non dovreste apportare modifiche dirette al vostro sito web nell’editor senza utilizzare un child theme.
Il foglio di stile è come una “lista di istruzioni” per il vostro sito web che imposta esattamente lo stile e il modo in cui il codice CSS viene gestito. Qui è il posto dove fare la maggior parte delle modifiche, ma vi mostreremo anche come accedere ad altri template file dei temi, come header.php e footer.php.
Ci sono due modi per accedere al foglio di stile del vostro sito WordPress: attraverso il cruscotto di WordPress o tramite un client FTP. Li analizzeremo entrambi.
Non vi sentite sicuri a farlo da soli? Considerate la possibilità di assumere uno sviluppatore WordPress che se ne occupi per voi.
Modificare i CSS di WordPress nel cruscotto
Il modo più semplice e comodo per accedere al vostro foglio di stile CSS è proprio nel cruscotto di WordPress. Non è necessario installare programmi FTP o editor di codice. Potete modificare direttamente qualsiasi file con l’evidenziazione della sintassi e la documentazione delle funzioni incorporate.
Prima di fare qualsiasi modifica importante ai file del core, dovreste sempre fare un backup del sito WordPress. È molto facile commettere accidentalmente un errore che potrebbe rompere l’aspetto del vostro sito se siete dei neofiti dei CSS, e potrebbe essere difficile capire come annullare le modifiche.
Una volta che avete fatto un backup e un child theme, accedete al vostro backend. Potete trovare l’editor andando nel menu e cliccando su Aspetto > Editor del tema.
Dovreste vedere un popup che vi avverte di non effettuare modifiche dirette a questi file. Non preoccupatevi, basta cliccare su “Ho capito”. È solo un avvertimento con cui venite invitati ad utilizzare un child theme e a fare un backup del vostro sito web prima di apportare modifiche importanti. Seguite questi passaggi e sarete sicuri di quello che state facendo.
E ora siete dentro! Dovreste essere sul foglio di stile predefinito, ma guardate il menu a destra per visualizzare i file del tema e verificare se ci siete davvero.
Oltre a style.css, avrete anche accesso a file come functions.php, header.php e single.php. Tutti questi file influiscono sul modo in cui agiscono determinate pagine del vostro sito.
Ma dovreste familiarizzare con PHP prima di immergervi in questi particolari file.
Ricordate solo che la maggior parte delle modifiche che farete qui ai CSS saranno globali. Ad esempio, se cambiate i vostri header H1 con un certo font, questo avrà effetto per ogni singola pagina del vostro sito. Per personalizzare lo stile di pagine specifiche dovrete utilizzare una sintassi speciale.
Modificare Direttamente i File del Tema
E se non riusciste ad accedere all’Editor dei Temi o preferiste fare il vostro lavoro via FTP? È più facile usare l’editor di backend, ma alcuni temi o plugin potrebbero disabilitarlo. In tal caso, dovrete connettervi al vostro sito web via FTP.
FTP, o File Transfer Protocol, consente di accedere e modificare a distanza i file di un sito web. La prima cosa che dovrete fare è scaricare FileZilla o un qualsiasi altro client FTP.
Di seguito, dovrete contattare il vostro host e chiedere le vostre credenziali FTP (host, porta e nome utente/password, se disponibili). Se il vostro host ha una dashboard, potreste essere in grado di trovarle effettuando il login.
Le credenziali degli utenti di Kinsta si trovano nel cruscotto di MyKinsta alla voce Siti > SFTP/SSH.
Una volta che avete i dati, avviate il vostro client FTP e inserite queste informazioni. Se non funziona, nella sezione Host provate a inserire “sftp://” prima dell’URL.
Una volta entrati, troverete il vostro file style.css facendo clic sulla cartella wp-content, poi sulla cartella del vostro tema (come il tema Twenty Twenty), quindi scorrete fino al file style.css.
Fate doppio clic per aprirlo (oppure clic con il tasto destro del mouse e poi Visualizza/Modifica) ed effettuare le modifiche. Ricordatevi di salvare e caricare nuovamente sul server.
Se avete bisogno di modificare altri template file come home.php, single.php, archive.php, potete trovarli nella stessa cartella del file style.css.
Non è sempre necessario modificare i file dei temi, attraverso FTP o dall cruscotto. Infatti, è meglio evitare di farlo se state solo aggiungendo del codice extra.
Per piccole modifiche, ecco il modo migliore per aggiungere CSS al vostro sito WordPress.
Come aggiungere CSS personalizzati in WordPress
Se non si vuole modificare il codice CSS esistente, e si vuole solo aggiungere il proprio stile, si consiglia vivamente di utilizzare uno dei seguenti metodi: Personalizzare WordPress o utilizzare un plugin dedicato.
Per prima cosa, il codice CSS aggiunto attraverso uno di questi metodi è molto più facile da accedere e da usare. Non dovete preoccuparvi di mettere il vostro nuovo CSS nel posto sbagliato o di dimenticare dove lo avete aggiunto se volete apportare modifiche in seguito.
Inoltre, i CSS aggiunti attraverso uno di questi metodi non andranno persi quando il vostro tema si aggiorna (anche se potrebbero comunque scomparire se cambiate tema).
Questo significa che non è necessario utilizzare un tema infantile, e se qualcosa si rompe, tutto quello che dovete fare è rimuovere il CSS che avete appena aggiunto.
Si noti che si dovrebbe comunque tenere un backup del proprio sito web, in quanto alcune persone hanno segnalato occasionalmente di aver perso i propri CSS durante i principali aggiornamenti. Tuttavia, questo metodo è molto più affidabile rispetto alla modifica diretta dei file dei temi.
Mentre si può semplicemente aggiungere codice a style.css e chiamarlo un giorno, se non si vuole creare un tema per bambini, apportare modifiche importanti ai CSS esistenti nel tema, e potenzialmente finire con tutto il vostro lavoro cancellato, è meglio utilizzare l’opzione CSS aggiuntivi nel customizer di WordPress o installare un plugin.
1. Modificare i CSS Attraverso il Customizer di WordPress
Invece di utilizzare L’Editor dei Temi, provate questa soluzione. Accedete al backend di WordPress e fate clic su Aspetto > Personalizza per aprire la schermata di personalizzazione del tema. Vedrete un’anteprima live del vostro sito web, con opzioni a sinistra per personalizzare elementi come i colori, i menu o altri widget.
In fondo a questo menu dovreste trovare la casella CSS aggiuntivo.
Fate clic per aprirlo. Verrete indirizzati ad una nuova schermata con una casella per l’input del codice e alcune istruzioni. La schermata CSS aggiuntivo include l’evidenziazione della sintassi, proprio come l’Editor dei temi, insieme alla validazione, che consente di sapere se il codice contiene errori.
Qualsiasi codice che scrivete appare automaticamente nell’area di anteprima a destra, a meno che non ci sia un errore (anche se potete scegliere di pubblicarlo comunque).
Quando avete finito il vostro lavoro, potete pubblicare il vostro codice, programmare il momento in cui entrerà in funzione o salvarlo come bozza su cui lavorare in seguito. Potete anche ottenere un link di anteprima da condividere con altri.
Come potete vedere, la pagina del CSS aggiuntivo è per molti versi più potente dell’Editor dei Temi e molto più adatta ad aggiungere codice che a pasticciare con i file del core.
Il codice CSS che scrivete qui sovrascrive lo stile predefinito del vostro tema e non scompare quando il vostro tema viene aggiornato. Se non riuscite a vederlo “live” sulla vostra anteprima, verificate che state utilizzando nel vostro codice CSS i selettori corretti.
Proprio come con l’Editor dei temi, i CSS sono globali di default, ma potete scrivere codice che si applica a pagine specifiche.
L’aspetto negativo è che, se cambiate tema, tutto quello che avete scritto sarà cancellato. Assicuratevi di fare un backup del vostro CSS prima di passare ad un nuovo tema o potreste finire per perdere molto lavoro.
Se avete difficoltà ad tilizzare questa soluzione, oppure volete una soluzione che vada bene su più temi e che sia più facilmente indirizzabile su determinate pagine, dovreste provare un plugin.
2. Aggiungere CSS Personalizzati a WordPress Utilizzando un Plugin
Ci sono diverse ragioni per utilizzare un plugin per aggiungere CSS a WordPress. Anche se la funzione è simile al menu CSS aggiuntivo, gli stili di solito rimangono invariati anche se si cambia o si aggiorna il tema.
Potreste anche apprezzare di più la loro interfaccia utente o alcune funzioni extra come l’autocompletamento. Alcuni plugin permettono anche di costruire CSS attraverso menu a tendina, invece di doverli scrivere da soli.
Simple Custom CSS
Simple Custom CSS è il più popolare plugin editor di CSS, grazie alla sua facilità d’uso, all’interfaccia minimale e al backend leggero. In breve, è un plugin di WordPress molto piccolo che racchiude in sé un grande valore.
La configurazione è semplicissima e non vedrete alcun impatto negativo sulle prestazioni. Funziona con qualsiasi tema e include l’evidenziazione della sintassi e il controllo degli errori.
Simple Custom CSS and JS
Simple Custom CSS and JS è una buona alternativa. Permette anche di puntare all’header, al footer, al frontend o anche al backend di amministrazione.
SiteOrigin CSS
SiteOrigin CSS è un’altra soluzione che offre anche un editor CSS tradizionale. Potete passare all’editor visuale in qualsiasi momento.
WP Add Custom CSS
Se avete difficoltà ad aggiungere il vostro codice CSS a pagine specifiche, WP Add Custom CSS aggiunge un box CSS personalizzato alla schermata di modifica, e viene fornito anche con stili globali.
CSS Hero
Potreste anche provare un editor CSS visuale. Questi prendono tutto quel codice complicato e lo trasformano in una serie di campi di input facili da usare e menu a tendina che gestiscono tutta il codice per voi.
CSS Hero è un plugin per l’editing visuale di qualità superiore con alcune caratteristiche molto potenti (animazione, modifiche specifiche per dispositivo e editing non distruttivo, solo per citarne alcune).
Dove Imparare CSS
Pronti a tuffarvi nei CSS da soli? Questi tutorial per principianti vi daranno le basi e vi insegneranno la sintassi da conoscere per scrivere il vostro codice CSS.
Può essere scoraggiante, ma a meno che non stiate cercando di fare qualcosa di veramente avanzato, il CSS non è molto difficile! Cose come cambiare il colore di sfondo o impostare lo stile dei font sono abbastanza semplici, e ci sono molti esempi online.
Anche la maggior parte dei tutorial che troverete su internet sono completamente gratuiti. Ci sono un sacco di informazioni in giro, senza alcun costo.
Ecco alcuni esempi che riguardano i migliori tutorial CSS per principianti.
- W3Schools CSS Tutorial: qui c’è una tonnellata di informazioni: tutorial approfonditi, esempi e riferimenti con cui lavorare. I tutorial di W3Schools sono i più semplici e facili da seguire, quindi, anche se siete principianti, questo è un ottimo punto di partenza.
- Codeacademy Learn CSS: attraverso sei lezioni pratiche gratuite, imparerete le basi dei CSS. Non si tratta di un semplice video tutorial, ma di una lezione interattiva che vi farà lavorare con il codice vero e proprio. Con la versione pro, avrete anche quiz e progetti in forma libera su cui lavorare.
- Learn CSS in One Hour: molti vogliono imparare un nuovo linguaggio, ma non hanno tempo da dedicarvi. Ma se potete dedicarvi solo un’ora, potete imparare i CSS con questo corso gratuito in 20 parti. Anche se alla fine non siete maestri, dovreste acquisire una buona conoscenza delle basi.
- Introduction to Basic HTML & CSS for WordPress Users: cercate qualcosa di specifico per WordPress? Se avete sempre avuto difficoltà a scrivere HTML e CSS, questo corso è perfetto per voi. È a pagamento, ma viene fornito con 52 lezioni e cinque ore di video.
Riepilogo
Come utenti di WordPress, saltare nel codice CSS all’inizio potrebbe crearvi confusione. Ma, una volta che sapete come modificare i file del tema e dove aggiungere lo stile, non dovreste avere più difficoltà.
Per cambiare l’aspetto del vostro sito, potete modificare i file del tema sia dal vostro backend che tramite FTP, ma questo dovrebbe essere di solito evitato a meno che non sia necessario modificare il codice esistente.
Se volete solo aggiungere i vostri CSS, usate la pagina CSS aggiuntivi sotto Aspetto > Personalizza, oppure provate un plugin se avete bisogno di qualcosa di più potente.
Le modifiche al vostro foglio di stile andranno perse dall’aggiornamento del tema, a meno che non utilizziate un child theme. Lo stesso non vale per il CSS aggiuntivo. Il vostro codice è al sicuro dagli aggiornamenti, ma non dimenticate: solo un plugin manterrà i CSS quando cambiate tema.
Qualunque sia il metodo che scegliete, dovreste sempre tenere regolari backup del vostro sito web, incluso il foglio di stile e il codice custom che avete aggiunto. Ora è il momento di rispolverare le vostre basi di CSS utilizzando le risorse che vi abbiamo fornito.
Happy styling!
Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.
Grazie per la guida. Una info: dove vengono memorizzati i dati css inseriti in Aspetto > Personalizza > Editor aggiuntivo (quindi non il file css del tema)?
Buongiorno Daniele. Quei dati vengono memorizzati nel database e poi inseriti nella pagina generata da WordPress, ma non entrano nel file style.css
Guida bellissima su tutto. Una domanda ma se invece di impazzire con un tam child mi scarico il file del css del tema non ho già risolto. Così in caso di aggiornamento tema con sovrascrittura del csstyle lo sostituisco col vecchio e non perdo nulla.
Ciao Alessandro. Non è detto che una soluzione del genere prevenga errori dopo un aggiornamento perché potrebbe venire aggiornata anche la struttura del tema e quindi il CSS dovrebbe essere aggiornato di conseguenza.