Come mantenere CSS personalizzati durante l'aggiornamento di un tema WordPress
Pubblicato: 2022-05-05I temi determinano il layout e l'aspetto dei siti Web WordPress. Indipendentemente dal tema con cui vai, potrebbe essere necessario personalizzarlo un po' per soddisfare le tue esigenze specifiche.
Un modo per personalizzare il tuo tema consiste nell'usare Cascading Style Sheets (CSS). Questo popolare linguaggio di fogli di stile ti consentirà di modificare quasi tutti gli elementi del tuo tema. Puoi aggiungere CSS personalizzati al tuo tema per specificare i colori di sfondo, modificare le dimensioni dei caratteri, creare spazi tra i contenuti, riposizionare i menu e altro ancora. Il CSS personalizzato, tuttavia, potrebbe essere eliminato la prossima volta che aggiorni il tema.
Perché gli aggiornamenti dei temi interrompono i CSS personalizzati
Tutti i temi hanno un file style.css. Disponibile nella cartella del tema, contiene il CSS. Quando aggiorni il tuo tema, ne scarichi una nuova versione diversa con cui sostituire la versione esistente.
L'aggiornamento del tema eliminerà il file style.css esistente e lo sostituirà con un nuovo file style.css. Il nuovo file style.css non conterrà alcun CSS personalizzato che potresti aver aggiunto in precedenza. Puoi sempre aggiungere nuovamente il CSS personalizzato eliminato, ma farlo dopo ogni aggiornamento del tema può essere noioso.
Aggiungi alla personalizzazione
Puoi mantenere CSS personalizzato quando aggiorni il tuo tema aggiungendolo alla personalizzazione. Il personalizzatore è uno strumento di personalizzazione del tema nella dashboard di WordPress. È dotato di un campo "CSS aggiuntivo". Invece di aggiungere CSS personalizzato direttamente al file style.css del tuo tema, puoi aggiungerlo a questo campo.
Il campo "CSS aggiuntivo" è stato introdotto nella versione 4.7 di WordPress per evitare che i CSS personalizzati vengano eliminati durante gli aggiornamenti del tema. Non influisce sul file style.css, né su altri file nella cartella del tema. Quando aggiungi CSS personalizzato al personalizzatore tramite questo campo, verrà archiviato nel database del tuo sito web. Puoi quindi aggiornare il tuo tema mantenendo il CSS personalizzato.
Per accedere alla personalizzazione, fai clic su "Aspetto" nella dashboard di WordPress e scegli "Personalizza". La scheda "CSS aggiuntivo" si trova nella parte inferiore. Facendo clic su questa scheda verrà visualizzato un campo in cui è possibile inserire CSS personalizzati. L'aggiornamento del tema sostituirà solo i file nella cartella del tema. Non sostituirà né influirà in altro modo sul database del tuo sito Web, quindi il CSS personalizzato verrà preservato.
L'aggiunta di CSS personalizzati al personalizzatore ti consente di visualizzarne l'anteprima. Il personalizzatore ha una funzione di anteprima integrata per tutte le modifiche. Sia che tu stia impostando nuovi widget o aggiungendo CSS personalizzati, il personalizzatore rivelerà come apparirà il tuo sito web. Puoi quindi scegliere di procedere con la personalizzazione facendo clic su "Pubblica". Se il tuo sito web non ha un aspetto corretto, puoi modificare le opzioni di personalizzazione prima di renderlo attivo. Indipendentemente da ciò, il personalizzatore mostrerà un'anteprima del tuo sito Web con il CSS personalizzato.
Crea un tema figlio
Un'altra soluzione è creare un tema figlio. I temi figlio sono essenzialmente copie di altri temi che puoi personalizzare senza temere di perdere le modifiche. Non sono copie complete. Piuttosto, la maggior parte dei temi figlio è costituita da pochi file di base, inclusi un file style.css e un file functions.php.
I temi figlio sono progettati per ereditare le proprietà di un tema padre. Puoi usare il tuo tema come tema principale. Il tema figlio avrà una propria cartella, che conterrà il proprio file style.css e il file functions.php. Il tema figlio, tuttavia, non conterrà un file index.php, un file page.php, un file single.php o altri file di temi standard. Sfrutterà il tema principale per queste proprietà.
Poiché i temi figlio hanno il proprio file style.css, supportano CSS personalizzati. Ancora più importante, i temi figlio conservano tutti i loro CSS personalizzati quando i temi principali vengono aggiornati. L'aggiornamento del tema principale non influirà sul file style.css del tema figlio. Per istruzioni su come creare un tema figlio, visita developer.wordpress.org/themes/advanced-topics/child-theme. In alternativa, alcuni temi premium sono dotati di un tema figlio.
Per poche righe di CSS personalizzato, potresti volerlo aggiungere alla personalizzazione. Per quantità maggiori di CSS personalizzati, la creazione di un tema figlio vale probabilmente la pena. Un tema figlio ti fornirà un file style.css separato che puoi personalizzare.
Puoi anche lavorare offline sul file style.css del tema figlio e, poiché è un file separato, avrai molto spazio per CSS personalizzato. L'aggiunta di CSS personalizzati alla personalizzazione ti limiterà a un piccolo campo accessibile solo online. Il personalizzatore offre il vantaggio di una modalità di anteprima, mentre un tema figlio offre il vantaggio di un file style.css separato.
Usa un plugin CSS personalizzato
Puoi utilizzare un plug-in CSS personalizzato. Il plugin Simple Custom CSS, ad esempio, fa esattamente quello che sembra: ti consente di aggiungere facilmente CSS personalizzati al tuo tema. Il CSS personalizzato aggiunto al plugin sostituirà il CSS del tuo tema.
Dopo aver attivato il plugin Simple Custom CSS, dovresti vedere una nuova scheda "Custom CSS" sotto "Aspetto" nella dashboard di WordPress. Qui è dove puoi aggiungere CSS personalizzati. Quando aggiorni il tuo tema, il CSS personalizzato verrà preservato. L'aggiornamento del tema sostituirà il file style.css del tema, ma il plug-in sovrascriverà il nuovo file style.css con il tuo CSS personalizzato.
C'è anche il plugin Simple Custom CSS e JS, che supporta sia CSS personalizzati che JavaScript personalizzati. Puoi usarlo per creare CSS personalizzati che sovrascrivono il CSS del tuo tema. Se non vuoi pasticciare con la creazione di un tema figlio, potresti voler utilizzare un plug-in CSS personalizzato. Il download di un plug-in CSS personalizzato è un modo semplice per preservare i CSS personalizzati durante gli aggiornamenti dei temi.
Conclusione
È frustrante quando perdi CSS personalizzato dopo aver aggiornato un tema. Anche se hai salvato il CSS personalizzato localmente sul tuo computer, dovrai tornare indietro e aggiungerlo. Puoi mantenere il CSS personalizzato del tuo tema utilizzando il personalizzatore nella dashboard di WordPress, creando un tema figlio o utilizzando un plug-in CSS personalizzato.
