Come personalizzare un tema WordPress con i CSS

Sai che puoi sperimentare con il tuo sito WordPress e cambiarne l’aspetto con i CSS? Puoi aggiungere piccole modifiche estetiche, aggiungere colori, modificare il layout o persino alterare completamente il tuo tema WordPress.

Avere il controllo sull’aspetto del tuo sito web ti dà la possibilità di crearlo nel modo che preferisci.

Puoi aggiungere il tuo tocco personale al sito Web del tuo marchio, rendendolo molto diverso da altre persone o aziende che utilizzano lo stesso tema WordPress!

In questo post, diamo un’occhiata più da vicino a come personalizzare un tema WordPress con i CSS.

Cos’è il CSS?

CSS o Cascading Style Sheets è un linguaggio web utilizzato per presentare pagine web. Con i CSS, puoi impostare il layout, i colori, il carattere, lo sfondo e altri elementi che possono rendere le nostre pagine Web presentabili per gli utenti. Questo è il motivo per cui chiamiamo linguaggio lato client frontend CSS poiché viene eseguito sul lato utente. CSS viene utilizzato in combinazione con HTML e Javascript per rendere i siti Web reattivi. Se stai pensando che devi essere un programmatore hardcore per imparare e implementare i CSS, non è vero. Puoi imparare facilmente i CSS e usarli per alterare la presentazione del tuo sito, anche se prima non hai conoscenze di programmazione.

Cos’è WordPress?

WordPress è il modo più popolare e più semplice per avviare il tuo sito Web o blog. Parlando tecnicamente, WordPress è un sistema di gestione dei contenuti open source. Gestisce tutti gli aspetti importanti di un sito Web come contenuto, layout, sicurezza, ecc. Puoi creare qualsiasi tipo di sito Web utilizzando WordPress. Ad esempio, siti Web aziendali, siti Web di e-commerce, portafogli, curriculum, social network, ecc. WordPress è gratuito e viene fornito con vari temi e plug-in. Si può cambiare l’aspetto del proprio sito WordPress utilizzando i CSS.

CSS e WordPress

Per iniziare a modificare il tuo tema WordPress, devi prima capire alcune cose: file modello, tag modello e foglio di stile CSS. I file modello controllano il tuo tema WordPress. Potresti vedere diversi file come header.php, archive.php. Questi sono file modello che controllano il tuo tema WordPress. I tag modello vengono utilizzati per controllare questi file e altri elementi del database. Il foglio di stile CSS o style.css è il file che devi cercare per cambiare l’aspetto del tuo sito web. Modificherai il codice in style.css per personalizzare il tuo tema WordPress.

Come personalizzare un tema WordPress con i CSS

Prima di tutto, devi capire che se vuoi personalizzare il tuo tema WordPress con i CSS, devi aggiungere un certo codice o devi modificare il codice che è già stato scritto. Ti consiglierei di imparare almeno alcune basi di CSS, HTML, JavaScript e PHP prima di iniziare a modificare il tuo tema.

Un’altra cosa da tenere presente è che se hai intenzione di apportare modifiche al foglio di stile del tuo tema WordPress, queste modifiche verranno rimosse una volta aggiornato il tema. Quindi devi conoscere i temi figlio e utilizzare un tema figlio per apportare modifiche utilizzando style.css, functions.php o altri file modello di tema. Ho parlato di temi figlio più avanti in questo articolo.

Ci sono due modi per modificare o aggiungere CSS al tuo tema

1 Utilizzo della dashboard

Ciò ti consente di modificare il tuo tema WordPress direttamente utilizzando il foglio di stile CSS nella dashboard di WordPress. Tuttavia, è necessario notare che eventuali grandi modifiche apportate qui potrebbero essere difficili da annullare. Quindi consiglierei di fare un backup del CSS originale del tuo tema WordPress e quindi apportare eventuali modifiche. Ti consiglierei anche di creare un tema figlio per il tuo sito. Se non sai di cosa si tratta, leggi la sezione successiva e torna indietro.

Crea un tema figlio e poi, in quel tema figlio vai su Aspetto e poi Editor tema. Apparirà un pop-up mentre stai usando un tema figlio, ma non c’è nulla di cui preoccuparsi. Basta fare clic su ‘Ho capito’ e si accederà al foglio di stile. Se vuoi apportare modifiche a file modello come header.php, functions.php, ecc. devi prima imparare PHP e poi provare le tue abilità di codifica. Altrimenti, limitati a modificare il foglio di stile.

Che cos’è un tema figlio in WordPress?

Un tema figlio è una replica di un tema originale (noto anche come tema principale). Il tema figlio include la funzionalità e lo stile del tema principale. Si consiglia di utilizzare un tema figlio quando si desidera mantenere intatto il codice originale mentre si apportano modifiche al design del sito. Quindi, puoi creare nuovi e migliori design sul tema figlio e mantenere la funzionalità del tema genitore. Alcuni vantaggi dell’utilizzo di un tema figlio includono:

• Non devi preoccuparti di fare scherzi con il codice originale poiché il tema principale è sicuro e non modificato.
• Puoi utilizzare la codifica per estendere la funzionalità di un tema principale, sperimentarlo e creare qualcosa di nuovo.
• Non è necessario creare un tema da zero. Se per caso ti dimentichi di una certa funzionalità o caratteristica, il codice del tema principale è lì per te.

Tuttavia, devi stare molto attento quando usi i temi figlio. Uno dei motivi è che richiederebbe abilità ed esperienza di programmazione. Se hai appena iniziato con CSS, HTML, JavaScript e PHP, concediti un po’ di tempo per diventare prima un esperto. Altrimenti, la curva di apprendimento potrebbe essere piuttosto alta.

Un’altra cosa di cui occuparsi durante l’utilizzo di un tema figlio è che è necessario controllare prima gli aggiornamenti. Se il tuo tema principale viene aggiornato con una funzionalità che non desideri, non devi aggiornare il tuo tema WordPress poiché si rifletterebbe nel tema di tuo figlio. A volte, se una delle funzionalità viene eliminata nel tema principale e la aggiorni, il tuo tema figlio potrebbe risentirne. Pertanto, aumentando il tuo lavoro di codifica.

2 Utilizzo del server FTP

Potrebbe esserci la possibilità che tu non possa accedere direttamente alla dashboard del tuo tema. A volte l’utilizzo di plug-in disabilita tale funzione. Quindi è necessario utilizzare FTP o File Transfer Protocol per accedere in remoto ai file del tuo sito. Inizia con il download di qualsiasi applicazione client FTP. Contatta il tuo host e chiedi le tue credenziali FTP.

Man mano che inserirai le credenziali, ti sarà consentito l’accesso a style.css. Ora apporta modifiche al file, salva le modifiche e caricale nuovamente sul server. Questo potrebbe essere un metodo piuttosto frenetico per aggiungere CSS al tuo sito, quindi usalo solo se non hai accesso alla tua dashboard.

Semplici modi per aggiungere CSS al tuo sito WordPress

Esistono due semplici metodi con cui puoi aggiungere CSS al tuo sito WordPress. Includono l’utilizzo di un personalizzatore di WordPress o di un plug-in. Sarà molto più facile aggiungere il tuo codice CSS usando questi metodi. Anche l’aggiunta di CSS utilizzando un personalizzatore di WordPress o un plug-in non farebbe scomparire il codice una volta aggiornato il tema. Tuttavia, ti consiglio comunque di conservare un backup del codice originale del tuo sito Web nel caso in cui qualcosa accada involontariamente. Ora controlliamo i due semplici modi per aggiungere CSS al tuo sito WordPress.

1 Modifica tramite Personalizzatore di WordPress

Basta accedere al back-end di WordPress. Fare clic su Aspetto e quindi fare clic su Personalizza. Si aprirà una schermata di personalizzazione. Questa schermata ti mostra un’anteprima del tuo sito web in quel momento e ci saranno alcune opzioni sul lato sinistro dello schermo per personalizzare elementi come i colori, i menu o altri widget.

Sul lato sinistro dello schermo, vedrai un’opzione chiamata CSS aggiuntivo. Qui è dove devi spruzzare la tua magia. Appena cliccherai sul CSS aggiuntivo, si aprirà una nuova pagina con il codice del tuo sito web. Ora puoi apportare modifiche al codice e se lo hai scritto correttamente (nessun errore!) vedrai le modifiche riflesse nell’anteprima.

Il codice CSS che scrivi qui non cambierà o scomparirà una volta aggiornato il tuo tema! Ma se passi a un nuovo tema, il codice scritto qui verrebbe cancellato. Quindi ti suggeriamo di eseguire il backup del tuo CSS prima di cambiare il tema.

2 Usa un plug-in

In questa sezione, parlerò di quattro diversi plugin che puoi utilizzare per modificare i CSS per il tuo tema WordPress: Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS e CSS Hero. Se non lo sai, i plugin di WordPress sono piccoli software che possono essere collegati a WordPress per espanderne le funzionalità. Alcuni plugin sono disponibili gratuitamente, mentre per alcuni devi pagare dei soldi per aggiungerli al tuo sito WordPress. I plugin possono aiutarti a modificare o aggiungere CSS al tuo sito WordPress in pochi clic!

Utilizzo del plug-in dell’editor CSS avanzato

Il primo plugin che consiglierei si chiama Advanced CSS Editor. Questo plug-in ti consente di aggiungere CSS per l’aspetto del tuo sito Web su desktop, tablet e telefono cellulare. In questo modo, puoi ottimizzare il tuo sito Web per ogni dispositivo. Per iniziare a modificare, installa il plug-in. Vai alla dashboard di WordPress, fai clic su Aspetto, quindi su Personalizzatore. Vedrai una nuova opzione chiamata Editor CSS avanzato. Aggiungi il CSS personalizzato che desideri e salva le modifiche.

Un enorme vantaggio dell’utilizzo di questo plug-in è che puoi controllare l’aspetto del tuo sito Web su diversi dispositivi. Inoltre, puoi ancora utilizzare la tecnica che ti ho detto al punto #1 per modificare il tuo tema WordPress. Tuttavia, per alcune persone che non sono abituate alla programmazione, apportare modifiche per ogni tipo di dispositivo potrebbe richiedere molto lavoro. Dovrebbero prima imparare a scrivere CSS per ogni tipo di dispositivo.

Utilizzo del plug-in CSS personalizzato modulare

Il secondo plugin che consiglierei è Modular Custom CSS. Questo plugin ti aiuta ad apportare modifiche al tema del tuo sito WordPress. Ad esempio, se stai attualmente utilizzando un tema e apporti modifiche a quel tema utilizzando Modular Custom CSS. Quindi, decidi di scegliere un altro tema per il tuo sito. Pertanto, le modifiche apportate al primo tema non verrebbero eliminate. Rimarranno intatti in questo plugin. Puoi anche aggiungere CSS globale usando questo plugin. Quel CSS rimarrebbe lo stesso nonostante i cambiamenti del tema.

Per utilizzare questo plug-in, innanzitutto scarica il plug-in e aggiungilo al tuo sito WordPress. Quindi fare clic su Aspetto -> Personalizza -> CSS aggiuntivo. L’unico inconveniente che ho potuto trovare su questo metodo è che l’aggiunta di CSS globale potrebbe non essere sempre l’idea migliore. A volte, il CSS globale potrebbe non funzionare con un tema e potrebbe essere un disastro.

Utilizzo del plug-in CSS SiteOrigin

Il terzo plugin che consiglio è noto come SiteOrigin CSS. Questo plug-in ti offre controlli visivi che ti consentono di modificare l’aspetto del tuo sito in tempo reale. Questo plugin è adatto sia ai principianti che agli utenti CSS di livello avanzato. L’anteprima in tempo reale e i controlli visivi aiutano i principianti mentre gli utenti avanzati possono programmare rapidamente utilizzando la funzione di completamento automatico del codice di questo plug-in.

Questo plugin apre un editor CSS autonomo per WordPress. Per accedere a questo plug-in, scarica prima il plug-in e aggiungilo al tuo sito WordPress. Quindi fare clic su Aspetto -> CSS personalizzato. Una grande caratteristica di questo plugin è che puoi modificare qualsiasi elemento del tuo sito Web semplicemente facendo clic su di esso. Puoi modificare alcuni semplici elementi del tema senza utilizzare i CSS. Tuttavia, uno svantaggio di tale funzionalità potrebbe essere che se apporti modifiche a molti elementi diversi di un tema, potrebbe essere difficile tenerne traccia.

Usando il plug-in CSS Hero

Ora, questo è qualcosa di interessante. La mia terza raccomandazione sui plug-in include un plug-in che ti aiuta a modificare il CSS sul tuo sito WordPress utilizzando il trascinamento della selezione. È noto come CSS Hero. Per modificare i CSS utilizzando questo plugin, devi solo passare il mouse sopra l’elemento che desideri modificare e fare clic su di esso. Quindi, puoi regolarlo come preferisci. Ecco alcune fantastiche funzionalità di questo plugin:

• Questo plugin include una facile modifica degli stili dei caratteri e della topografia. Il plug-in supporta i caratteri Google Fonts e TypeKit.
• Puoi anche utilizzare un selettore di colori e sperimentare un colore dal vivo e un cambio di sfondo. Puoi trovare facilmente i tuoi ultimi colori usati.
• Puoi semplicemente trascinare un cursore e vedere come appaiono i margini.
• Il plug-in supporta anche elementi del sito come gradiente, ombre di riquadri, ombre di testo e altre moderne proprietà CSS.
• Puoi salvare istantanee delle tue modifiche con questo plugin. Quindi non devi far vivere tutto. Continua a lavorare e pubblica la versione finale.
• Questo plug-in non influisce sui file del tema. Quindi non devi preoccuparti che gli aggiornamenti rovinino le tue modifiche.

Confrontando i diversi modi di personalizzare il tema WordPress con i CSS

Quindi, oggi abbiamo appreso 4 modi diversi per personalizzare un sito WordPress utilizzando i CSS. Puoi modificare o aggiungere CSS al tuo tema WordPress utilizzando la Dashboard oppure puoi utilizzare un’applicazione FTP. Puoi utilizzare WordPress Customiser per aggiungere o modificare CSS o, infine, puoi utilizzare alcuni plug-in per personalizzare il tuo tema WordPress con CSS.

• Se sei abbastanza nuovo su WordPress e CSS, ti consiglio di utilizzare il Customizer di WordPress per modificare o aggiungere CSS. In questo modo, puoi controllare le modifiche nell’anteprima e non devi preoccuparti che le modifiche vengano rimosse una volta aggiornato il tema.
• Se hai una certa esperienza con CSS e WordPress e hai già lavorato sui plugin, ti consiglierei di scegliere uno dei quattro plugin che ho condiviso con te oggi. I plug-in offrono opzioni e possibilità migliori per migliorare il tuo sito.
• Se sei un veterano dei CSS. Hai creato siti web e sai come i CSS funzionano a fondo. Quindi, ti consiglierei di utilizzare Dashboard o FTP per apportare modifiche direttamente nel foglio di stile di WordPress.

È importante l’aspetto del tuo sito web

Il design, il layout, i colori, i caratteri o il tema del tuo sito Web sono piuttosto importanti. Aiuta a trasmettere la sensazione che vuoi che l’utente abbia sulla tua azienda. Può creare un’immagine di marca unica e definire la tua identità.

Anche il design e il layout del tuo sito web svolgono un ruolo importante nel migliorare l’esperienza dell’utente. Se il tuo design non è così buono, hai inserito gli annunci nelle posizioni sbagliate, i colori del tuo sito web sono piuttosto fastidiosi, tutto ciò potrebbe influenzare l’esperienza dell’utente.

Un ottimo design e layout possono aiutarti a controllare come il messaggio viene consegnato agli utenti. Puoi attirare la loro attenzione al momento giusto e guidarli verso un percorso che soddisfi i tuoi obiettivi. Quindi, cambiare, aggiungere o modificare il CSS del tuo sito WordPress è una questione di responsabilità. La responsabilità di rendere il tuo sito web migliore per gli utenti.

Spero che questi suggerimenti e trucchi per personalizzare il tuo tema WordPress con i CSS ti aiutino a dare un tocco personalizzato al tuo sito web. Se ne usi qualcuno o li hai usati in passato, condividi le tue esperienze nella sezione dei commenti e spargi la voce!