Anche se scrivere il tuo CSS da zero potrebbe essere una sfida, aggiungere frammenti pre-scritti dovrebbe essere semplice.<\/p>\n
In questo tutorial imparerai l’approccio pi\u00f9 semplice e migliore per aggiungere CSS personalizzati al tuo sito in modo da poter modificare gli stili nel tuo tema WordPress.<\/p>\n
Come aggiungere CSS personalizzati<\/h2>\n
In passato, ho consigliato il plug-in CSS personalizzato semplice<\/a>, ma non \u00e8 pi\u00f9 necessario un plug-in per aggiungere CSS al tuo sito.<\/p>\n Invece, puoi utilizzare la sezione CSS aggiuntiva integrata nel Customizer. Per accedere a questa funzione, inizia facendo clic sulla voce di menu Personalizza che si trova sotto Aspetto.<\/p>\n Quindi, apri la sezione CSS aggiuntivo, che dovrebbe trovarsi nella parte inferiore del pannello Personalizzatore.<\/p>\n All’interno, puoi semplicemente incollare il CSS che devi aggiungere al tuo sito.<\/p>\n La cosa fantastica della funzione CSS aggiuntiva \u00e8 che ottieni un’anteprima dal vivo di come influenzer\u00e0 il tuo sito. L’anteprima si aggiorna istantaneamente e i visitatori non vedranno le tue modifiche finch\u00e9 non fai clic sul pulsante Pubblica in alto.<\/p>\n Molti utenti di WordPress sono tentati di modificare il foglio di stile del tema direttamente tramite il menu Editor del tema.<\/p>\n Non farlo mai.<\/strong><\/p>\n Il problema pi\u00f9 grande nell’apportare modifiche in questo modo \u00e8 che tutto il tuo duro lavoro andr\u00e0 perso quando aggiorni il tema. Ad esempio, se stai utilizzando Mission News<\/a> versione 1.38 e domani esce la 1.39, il processo di aggiornamento copia tutti i nuovi file sui vecchi file. Il tema certamente non includer\u00e0 le stesse personalizzazioni che hai fatto, e quindi andranno perse in modo permanente (a meno che tu non abbia un backup recente<\/a> ).<\/p>\n Ci\u00f2 pu\u00f2 essere evitato utilizzando la sezione CSS aggiuntivo nel Customizer, che non \u00e8 influenzato dagli aggiornamenti del tema.<\/p>\n L’unica sfida della funzione CSS aggiuntiva \u00e8 che a volte, rendere effettivo il tuo CSS pu\u00f2 essere un po’ pi\u00f9 difficile.<\/p>\n Senza entrare nel merito, i CSS utilizzano un sistema di specificit\u00e0<\/a> per decidere quali regole di stile si sostituiscono a vicenda.<\/p>\n Un modo per garantire che i tuoi stili prevalgano sugli stili del tema \u00e8 utilizzare un Prendi questo snippet CSS per esempio:<\/p>\n In tutti i nostri temi<\/a>, quel codice renderebbe il titolo del sito 28px. Se non vedi alcuna modifica dopo aver implementato questo codice, prova ad aggiungere il Con quell’aggiornamento, il codice \u00e8 essenzialmente garantito per avere effetto fintanto che prende di mira il selettore giusto. Prova a riservarlo per occasioni speciali, poich\u00e9 utilizzarlo dozzine di volte nel codice pu\u00f2 rendere pi\u00f9 difficile l’override degli stili in futuro.<\/p>\n Un problema comune che gli utenti devono affrontare quando utilizzano questa funzione \u00e8 che il loro codice funzioner\u00e0 durante l’utilizzo di Live Customizer, ma una volta che visualizzano il sito normalmente, le modifiche non vengono visualizzate.<\/p>\n Questo \u00e8 quasi sempre dovuto alla memorizzazione nella cache e qui tratter\u00f2 la soluzione in dettaglio:<\/p>\n Come correggere le modifiche di WordPress che non vengono visualizzate?<\/a><\/p>\n Dovrebbero volerci solo un minuto o due per sistemare le cose.<\/p>\n Anche se non hai idea di come scrivere il tuo CSS, la funzione CSS aggiuntivo semplifica l’incollaggio del codice nel tuo sito.<\/p>\n Se vuoi saperne di pi\u00f9 sulla personalizzazione dei temi di WordPress con CSS, ti consiglierei la mia guida su come trovare i selettori CSS in<\/a> seguito.<\/p>\n E se ti \u00e8 piaciuto imparare qualcosa di nuovo su WordPress oggi, ti potrebbe piacere il mio corso di posta elettronica gratuito:<\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nPerch\u00e9 non dovresti mai modificare style.css<\/h2>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nSuggerimenti per far funzionare il tuo CSS personalizzato<\/h3>\n
!important<\/code>tag.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>tag, in questo modo:<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\nCosa succede se viene mostrato solo nell’anteprima dal vivo?<\/h2>\n
Personalizza facilmente con CSS<\/h2>\n