{"id":38430,"date":"2020-07-15T03:23:49","date_gmt":"2020-07-15T10:23:49","guid":{"rendered":"https:\/\/kinsta.com\/?p=70179"},"modified":"2023-02-03T12:57:13","modified_gmt":"2023-02-03T11:57:13","slug":"wordpress-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/","title":{"rendered":"Come Modificare i CSS in WordPress (Modificare e Aggiungere Codice per Personalizzare l’Aspetto del Vostro Sito)"},"content":{"rendered":"

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.<\/p>\n

Se volete acquisire maggiore familiarit\u00e0 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 \u00e8 gi\u00e0 presente).<\/p>\n

Modificando il tema e includendo CSS personali, sarete in grado di ottimizzare ogni singolo elemento visivo del vostro sito. Oggi daremo un’occhiata pi\u00f9 da vicino ai CSS.<\/p>\n

Pronti a iniziare? Andiamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00c8 l’Editing del CSS?<\/h2>\n

CSS sta per Cascading Style Sheets ed \u00e8 il linguaggio web pi\u00f9 popolare a parte l’HTML<\/a>. I due vanno a braccetto, dato che i CSS sono utilizzati per lo stile degli elementi HTML<\/a>. L’HTML getta le basi dell’aspetto di un sito web e i CSS sono usati per aggiungere lo stile.<\/p>\n

\"Esempio
Esempio di codice CSS (Fonte: w3schools.com)<\/figcaption><\/figure>\n

I CSS vi danno la possibilit\u00e0 di rendere un sito web reattivo<\/a>, aggiungere colori, cambiare font,<\/a> 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.<\/p>\n

Quando vi immergete nello sviluppo di WordPress, HTML, CSS, JavaScript e PHP<\/a> sono i linguaggi da conoscere. Questo \u00e8 il cuore del CMS<\/a>, cos\u00ec come dei suoi numerosi<\/a> temi e plugin<\/a>.<\/p>\n

Ma anche se non siete web designer<\/a> o uno sviluppatore<\/a>, \u00e8 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.<\/p>\n\n

WordPress e CSS<\/h2>\n

All’interno di WordPress, i CSS sono un po’ diversi. Sono controllati dai temi<\/a>, 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.<\/p>\n

I template file<\/a> dividono parti del vostro sito web in sezioni (come header.php o archive.php), e i template tag<\/a> vengono utilizzati per inserirvi altri contenuti prelevati dal vostro database. Questi file sono in realt\u00e0 costituiti per lo pi\u00f9 da PHP e HTML, anche se \u00e8 possibile aggiungere CSS se necessario.<\/p>\n

Quello che state davvero cercando \u00e8 il foglio di stile<\/a>, o style.css. Per cambiare l’aspetto del vostro sito web, dovrete imparare ad aggiungere e modificare il codice<\/a> presente in questo file.<\/p>\n

Come personalizzare il vostro tema WordPress con i CSS<\/h2>\n

Se volete personalizzare il vostro tema<\/a> e cambiare l’aspetto del vostro sito con i CSS, dovrete aggiungere il vostro codice o modificare quello che c’\u00e8 gi\u00e0. 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.<\/p>\n

Mentre apportate queste modifiche, c’\u00e8 una cosa che dovete sapere: quando il vostro tema viene aggiornato,<\/a> tutte le modifiche apportate ai file style.css<\/i>, functions.php<\/i> 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<\/a>.<\/p>\n

Il foglio di stile \u00e8 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 \u00e8 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<\/a>.<\/p>\n

Ci sono due modi per accedere al foglio di stile del vostro sito WordPress: attraverso il cruscotto di WordPress<\/a> o tramite un client FTP<\/a>. Li analizzeremo entrambi.<\/p>\n

Non vi sentite sicuri a farlo da soli? Considerate la possibilit\u00e0 di assumere uno sviluppatore WordPress<\/a> che se ne occupi per voi.<\/p>\n

Modificare i CSS di WordPress nel cruscotto<\/h3>\n

Il modo pi\u00f9 semplice e comodo per accedere al vostro foglio di stile CSS \u00e8 proprio nel cruscotto di WordPress. Non \u00e8 necessario installare programmi FTP o editor di codice<\/a>. Potete modificare direttamente qualsiasi file con l’evidenziazione della sintassi e la documentazione delle funzioni incorporate.<\/p>\n

Prima di fare qualsiasi modifica importante ai file del core, dovreste sempre fare un backup del sito WordPress<\/a>. \u00c8 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.<\/p>\n

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<\/em>.<\/p>\n

Dovreste vedere un popup che vi avverte di non effettuare modifiche dirette a questi file. Non preoccupatevi, basta cliccare su “Ho capito”. \u00c8 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.<\/p>\n

\"Effettuare
Effettuare modifiche dirette ai file WordPress<\/figcaption><\/figure>\n

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.<\/p>\n

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.<\/p>\n

Ma dovreste familiarizzare con PHP<\/a>\u00a0prima di immergervi in questi particolari file.<\/p>\n

\"Modifica
Modifica del foglio di stile style.css in un tema WordPress<\/figcaption><\/figure>\n

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\u00e0 effetto per ogni singola pagina del vostro sito. Per personalizzare lo stile di pagine specifiche dovrete utilizzare una sintassi speciale.<\/p>\n

Modificare Direttamente i File del Tema<\/h3>\n

E se non riusciste ad accedere all’Editor dei Temi o preferiste fare il vostro lavoro via FTP? \u00c8 pi\u00f9 facile usare l’editor di backend, ma alcuni temi o plugin potrebbero disabilitarlo. In tal caso, dovrete connettervi al vostro sito web via FTP<\/a>.<\/p>\n

FTP, o File Transfer Protocol, consente di accedere e modificare a distanza i file di un sito web. La prima cosa che dovrete fare \u00e8 scaricare FileZilla<\/a> o un qualsiasi altro client FTP.<\/p>\n

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.<\/p>\n

\"Credenziali
Credenziali FTP in MyKinsta<\/figcaption><\/figure>\n

Le credenziali degli utenti di Kinsta si trovano nel cruscotto di MyKinsta<\/a> alla voce Siti > SFTP\/SSH<\/em>.<\/i><\/p>\n

Una volta che avete i dati, avviate il vostro client FTP e inserite queste informazioni. Se non funziona, nella sezione Host<\/em> provate a inserire “sftp:\/\/” prima dell’URL.<\/p>\n

\"FileZilla\"
FileZilla<\/figcaption><\/figure>\n

Una volta entrati, troverete il vostro file style.css facendo clic sulla cartella wp-content<\/em>, poi sulla cartella del vostro tema (come il tema Twenty Twenty<\/em><\/a>), quindi scorrete fino al file style.css.<\/p>\n

Fate doppio clic per aprirlo (oppure clic con il tasto destro del mouse e poi Visualizza\/Modifica<\/em>) ed effettuare le modifiche. Ricordatevi di salvare e caricare nuovamente sul server.<\/p>\n

Se avete bisogno di modificare altri template file<\/a> come home.php, single.php, archive.php, potete trovarli nella stessa cartella del file style.css.<\/p>\n

Non \u00e8 sempre necessario\u00a0modificare i file dei temi<\/a>, attraverso FTP o dall cruscotto. Infatti, \u00e8 meglio evitare di farlo se state solo aggiungendo del codice extra.<\/p>\n

Per piccole modifiche, ecco il modo migliore per aggiungere CSS al vostro sito WordPress.<\/p>\n

Come aggiungere CSS personalizzati in WordPress<\/h2>\n

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.<\/p>\n

Per prima cosa, il codice CSS aggiunto attraverso uno di questi metodi \u00e8 molto pi\u00f9 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.<\/p>\n

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<\/a>).<\/p>\n

Questo significa che non \u00e8 necessario utilizzare un tema infantile, e se qualcosa si rompe, tutto quello che dovete fare \u00e8 rimuovere il CSS che avete appena aggiunto.<\/p>\n

Si noti che si dovrebbe comunque tenere un backup del proprio sito web<\/a>, in quanto alcune persone hanno segnalato occasionalmente di aver perso i propri CSS durante i principali aggiornamenti. Tuttavia, questo metodo \u00e8 molto pi\u00f9 affidabile rispetto alla modifica diretta dei file dei temi.<\/p>\n

Mentre si pu\u00f2 semplicemente aggiungere codice a style.css e chiamarlo un giorno, se non si vuole creare un tema per bambini<\/a>, apportare modifiche importanti ai CSS esistenti nel tema, e potenzialmente finire con tutto il vostro lavoro cancellato, \u00e8 meglio utilizzare l’opzione CSS aggiuntivi nel customizer di WordPress o installare un plugin.<\/p>\n

1. Modificare i CSS Attraverso il Customizer di WordPress<\/h3>\n

Invece di utilizzare L’Editor dei Temi, provate questa soluzione. Accedete al backend di WordPress<\/a> e fate clic su Aspetto > Personalizza<\/em> 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<\/a>.<\/p>\n

In fondo a questo menu dovreste trovare la casella\u00a0CSS aggiuntivo<\/a><\/em>.<\/p>\n

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.<\/p>\n

\"CSS
CSS aggiuntivo in WordPress<\/figcaption><\/figure>\n

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).<\/p>\n

Quando avete finito il vostro lavoro, potete pubblicare il vostro codice, programmare il momento in cui entrer\u00e0 in funzione o salvarlo come bozza su cui lavorare in seguito. Potete anche ottenere un link di anteprima da condividere con altri.<\/p>\n

Come potete vedere, la pagina del CSS aggiuntivo \u00e8 per molti versi pi\u00f9 potente dell’Editor dei Temi e molto pi\u00f9 adatta ad aggiungere codice che a pasticciare con i file del core.<\/p>\n

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.<\/p>\n

Proprio come con l’Editor dei temi, i CSS sono globali di default, ma potete scrivere codice che si applica a pagine specifiche<\/a>.<\/p>\n

L’aspetto negativo \u00e8 che, se cambiate tema<\/a>, tutto quello che avete scritto sar\u00e0 cancellato. Assicuratevi di fare un backup del vostro CSS prima di passare ad un nuovo tema o potreste finire per perdere molto lavoro.<\/p>\n

Se avete difficolt\u00e0 ad tilizzare questa soluzione, oppure volete una soluzione che vada bene su pi\u00f9 temi e che sia pi\u00f9 facilmente indirizzabile su determinate pagine, dovreste provare un plugin.<\/p>\n

2. Aggiungere CSS Personalizzati a WordPress Utilizzando un Plugin<\/h3>\n

Ci sono diverse ragioni per utilizzare un plugin per aggiungere CSS a WordPress. Anche se la funzione \u00e8 simile al menu CSS aggiuntivo, gli stili di solito rimangono invariati anche se si cambia o si aggiorna il tema.<\/p>\n

Potreste anche apprezzare di pi\u00f9 la loro interfaccia utente o alcune funzioni extra come l’autocompletamento. Alcuni plugin permettono anche di costruire CSS attraverso menu a tendina<\/a>, invece di doverli scrivere da soli.<\/p>\n

Simple Custom CSS<\/h4>\n

Simple Custom CSS<\/a> \u00e8 il pi\u00f9 popolare plugin editor di CSS, grazie alla sua facilit\u00e0 d’uso, all’interfaccia minimale e al backend leggero. In breve, \u00e8 un plugin di WordPress molto piccolo che racchiude in s\u00e9 un grande valore.<\/p>\n

\"Il
Il plugin WordPress Simple Custom CSS<\/figcaption><\/figure>\n

La configurazione \u00e8 semplicissima e non vedrete alcun impatto negativo sulle prestazioni<\/a>. Funziona con qualsiasi tema e include l’evidenziazione della sintassi e il controllo degli errori.<\/p>\n

Simple Custom CSS and JS<\/h4>\n
\"Il
Il plugin per WordPress Simple Custom CSS and JS<\/figcaption><\/figure>\n

Simple Custom CSS and JS<\/a> \u00e8 una buona alternativa. Permette anche di puntare all’header, al footer, al frontend o anche al backend di amministrazione.<\/p>\n

SiteOrigin CSS<\/h4>\n
\"Il
Il plugin WordPress SiteOrigin CSS<\/figcaption><\/figure>\n

SiteOrigin CSS<\/a> \u00e8 un’altra soluzione che offre anche un editor CSS tradizionale. Potete passare all’editor visuale<\/a> in qualsiasi momento.<\/p>\n

WP Add Custom CSS<\/h4>\n
\"Il
Il plugin WordPress WP Add Custom CSS<\/figcaption><\/figure>\n

Se avete difficolt\u00e0 ad aggiungere il vostro codice CSS a pagine specifiche, WP Add Custom CSS<\/a> aggiunge un box CSS personalizzato alla schermata di modifica, e viene fornito anche con stili globali.<\/p>\n

CSS Hero<\/h4>\n

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.<\/p>\n

\"CSS
CSS Hero<\/figcaption><\/figure>\n

CSS Hero<\/a> \u00e8 un plugin per l’editing visuale di qualit\u00e0 superiore con alcune caratteristiche molto potenti (animazione, modifiche specifiche per dispositivo e editing non distruttivo, solo per citarne alcune).<\/p>\n

Dove Imparare CSS<\/h2>\n

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.<\/p>\n

\"Imparare
Imparare CSS<\/figcaption><\/figure>\n

Pu\u00f2 essere scoraggiante, ma a meno che non stiate cercando di fare qualcosa di veramente avanzato, il CSS non \u00e8 molto difficile! Cose come cambiare il colore di sfondo o impostare lo stile dei font<\/a> sono abbastanza semplici, e ci sono molti esempi online.<\/p>\n

Anche la maggior parte dei tutorial che<\/a> troverete su internet sono completamente gratuiti. Ci sono un sacco di informazioni in giro<\/a>, senza alcun costo.<\/p>\n

Ecco alcuni esempi che riguardano i migliori tutorial CSS per principianti.<\/p>\n