Una rapida introduzione ai CSS<\/h2>\n
Se hai gi\u00e0 familiarit\u00e0 con i CSS, non voglio disturbarti con una lunga panoramica. Se non hai mai lavorato con i CSS o se non sei nemmeno sicuro di cosa siano i CSS, consulta prima il nostro articolo sull’argomento:<\/p>\n
Che cos’\u00e8 il CSS e in che modo influisce su WordPress?<\/a><\/p>\n Ci\u00f2 coprir\u00e0 le basi del motivo per cui i CSS vengono utilizzati per lo stile dei siti e come vengono applicati.<\/p>\n C’\u00e8 un grosso errore che fanno gli utenti di WordPress che non conoscono CSS:<\/p>\n Personalizzano i file del tema.<\/p>\n Ad esempio, qualcuno che utilizza il tema Challenger potrebbe inserire le proprie modifiche CSS direttamente nel file style.css a cui si accede dal menu Aspetto > Editor.<\/p>\n WordPress ora include un avviso che ti avverte di non modificare qui<\/p>\n Il problema con la modifica del file style.css \u00e8 che perderai tutte le modifiche se aggiorni a una nuova versione di Challenger. Fidati di me, perdere le modifiche al codice che hanno richiesto molto tempo per essere apportate pu\u00f2 essere incredibilmente scoraggiante.<\/p>\n C’\u00e8 un modo migliore per aggiungere CSS al tuo sito dove non verr\u00e0 mai sovrascritto. Inoltre, questo codice viene aggiunto al tuo sito in modo da semplificare l’override degli stili del tema.<\/p>\n Per aggiungere CSS al tuo sito, devi aprire il Customizer (Aspetto > Personalizza) e fare clic sulla sezione CSS aggiuntivo.<\/p>\n Di solito \u00e8 l’ultima sezione del Customizer<\/p>\n Se apri questa sezione, vedrai un’area di testo in cui puoi aggiungere il tuo codice. WordPress includer\u00e0 alcuni suggerimenti qui, ma puoi fare clic sul collegamento Chiudi per rimuoverlo e ha mostrato solo l’input del codice.<\/p>\n Puoi inserire e salvare qualsiasi CSS che desideri aggiungere qui.<\/p>\n Il codice che aggiungi qui aggiorner\u00e0 immediatamente l’aspetto del sito nell’anteprima. Una volta che sei soddisfatto delle modifiche, puoi salvare le modifiche.<\/p>\n Il vantaggio aggiuntivo di inserire i CSS qui \u00e8 che puoi guardare gli aggiornamenti in tempo reale, in modo da poter testare rapidamente codice diverso per scoprire cosa ti piace.<\/p>\n Ora che hai dato un’occhiata a come aggiungere CSS in modo sicuro al tuo sito, esaminiamo le basi della scrittura di CSS!<\/p>\n Suggerimento per professionisti:<\/strong> non preoccuparti di danneggiare il tuo sito. Se fai una modifica errata, puoi semplicemente eliminare il CSS che hai aggiunto. \u00c8 impossibile distruggere completamente il tuo sito o perdere l’accesso al menu di amministrazione aggiungendo CSS in questo modo.<\/p>\n Se hai mai scritto CSS, sai che il primo passo \u00e8 scegliere un selettore per dire al browser quale elemento del sito stai prendendo di mira. Nello screenshot qui sopra, sto prendendo di mira tutti gli elementi che hanno la classe "sito-titolo".<\/p>\n Se non sei sicuro di come utilizzare i selettori CSS, dai un’occhiata a questa fantastica introduzione ai selettori CSS di SitePoint<\/a>.<\/p>\n Ora ecco la cosa…<\/p>\n Anche molti utenti esperti di WordPress trovano i selettori sbagliati. Controllano il file style.css per trovare un selettore gi\u00e0 utilizzato dal tema. Questo \u00e8 noioso e potresti non trovare nemmeno un selettore appropriato per realizzare la tua personalizzazione.<\/p>\n Lascia che ti offra un processo molto pi\u00f9 produttivo.<\/p>\n Quando scrivi CSS, hai prima bisogno di un selettore per dire al browser quale elemento vuoi modificare. Sebbene tu possa controllare il foglio di stile nel tuo tema, \u00e8 molto pi\u00f9 semplice utilizzare semplicemente gli strumenti di sviluppo web del tuo browser per trovarli.<\/p>\n Ecco un esempio di ci\u00f2 che intendo:<\/p>\n Questo \u00e8 uno screenshot di Chrome con i suoi strumenti di sviluppo aperti<\/p>\n Puoi vedere le classi e gli ID di ogni elemento negli strumenti di sviluppo aperti. Puoi quindi utilizzare qualsiasi combinazione di classi e ID disponibili per scrivere i tuoi selettori personalizzati.<\/p>\n Vado in dettagli molto pi\u00f9 approfonditi di questo processo in questo tutorial:<\/p>\n Come trovare i selettori CSS sui siti WordPress<\/a><\/p>\n Imparerai come accedere agli strumenti di sviluppo del tuo browser, come navigare nell’HTML e come trovare i selettori CSS di cui hai bisogno.<\/p>\n Ora che hai un modo molto pi\u00f9 rapido per ottenere qualsiasi selettore che desideri e sai come aggiungere codice nella sezione CSS aggiuntivo nel Customizer, l’unica cosa rimasta \u00e8 scegliere le propriet\u00e0 che desideri modificare.<\/p>\n Ad esempio, se desideri scegliere come target il titolo del sito in Challenger<\/a> e ingrandire il carattere, puoi farlo con la Se non hai molta familiarit\u00e0 con i CSS, troverai questo elenco di propriet\u00e0 CSS<\/a> particolarmente utile. Puoi cercare nell’elenco qualsiasi qualit\u00e0 tu voglia modificare (colore di sfondo, dimensione del carattere, bordi, ecc.).<\/p>\n Principiante o maestro CSS, ho qualcosa che penso ti piacer\u00e0…<\/p>\n Se utilizzi uno dei nostri temi, adorerai le librerie di frammenti CSS pre-scritte che abbiamo creato. Ad esempio, la raccolta di frammenti CSS di Tracks<\/a> ha dozzine di frammenti che puoi copiare e incollare nella sezione CSS aggiuntivi per personalizzare il tuo sito:<\/p>\n Questo rende molto facile personalizzare il tuo sito con i CSS anche se non hai mai scritto CSS prima. Puoi semplicemente copiare e incollare qualsiasi snippet che desideri e quindi modificare il valore in quello che desideri.<\/p>\n Per trovare gli snippet CSS per il tuo tema, visita il Centro assistenza<\/a> e seleziona il tema che stai utilizzando. Quindi fai clic sul pulsante Visualizza frammenti CSS nella parte inferiore della barra laterale:<\/p>\nCome aggiungere CSS al tuo sito WordPress<\/h2>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nUn modo migliore<\/h3>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nCome trovare i selettori CSS<\/h2>\n
Come i professionisti di WP trovano i selettori CSS<\/h3>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nPropriet\u00e0 e valori CSS<\/h2>\n
font-size<\/code>propriet\u00e0. Quella dichiarazione CSS potrebbe assomigliare a questa:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nCSS pre-scritto GRATUITO per i nostri utenti<\/h2>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n