Personalizzare temi WordPress con CSS

I temi sono uno dei maggiori punti di forza di WordPress. Il tema giusto può far risaltare davvero il tuo sito web. Tuttavia, di solito vorrai apportare almeno alcune modifiche personalizzate a qualunque tema tu usi, per ottenere tutto nel modo giusto.

Nella maggior parte dei casi, dovrai utilizzare Cascading Style Sheets (CSS) per personalizzare lo stile del tuo tema. Con WordPress, ci sono diversi modi per farlo. Anche se non hai alcuna esperienza con il codice, puoi facilmente aggiungere le tue modifiche CSS al tema WordPress.

In questa guida, daremo un'occhiata a tre metodi che puoi utilizzare per aggiungere e modificare CSS personalizzati in WordPress. Ti guideremo attraverso l'intero processo e parleremo di quando ha senso utilizzare ciascuna tecnica. Iniziamo!

Aggiungi CSS personalizzato con Theme Customizer

Livello di esperienza: principiante

Il Customizer di WordPress ti consente di apportare modifiche al design del tuo sito Web e visualizzarne l'anteprima in tempo reale. Per accedervi, accedi alla dashboard di WordPress e vai alla scheda Aspetto > Personalizza :

Ci sono molte impostazioni con cui puoi giocare qui. Tuttavia, in questo momento cerca la scheda CSS aggiuntivo . Dopo aver fatto clic su di esso, si aprirà una nuova sezione, con un campo in cui è possibile aggiungere CSS personalizzati:

Se non conosci i CSS, puoi leggere di più su come usarlo con WordPress nel Codex ufficiale. Ci sono anche molte altre eccellenti risorse sulle basi dei CSS e ti consigliamo di verificarne alcune.

I CSS possono diventare un po' complessi, ma c'è molto che puoi fare solo conoscendo le basi. La cosa grandiosa dell'utilizzo del Customizer di WordPress è che ti consente di visualizzare immediatamente in anteprima tutte le modifiche apportate utilizzando i CSS. Ciò significa che questo approccio è perfetto per imparare come funziona il CSS.

Nota : le modifiche apportate utilizzando il Customizer non persisteranno se cambi temi. Inoltre, l'aggiornamento del tuo tema attuale potrebbe cancellare il tuo CSS personalizzato. Quindi non consigliamo questo approccio se intendi apportare molte modifiche o opzioni di tema intermedie.

Aggiungi CSS personalizzato con un plug-in

Livello di esperienza: da principiante a intermedio

Il metodo sopra funziona bene, ma puoi espandere le tue opzioni utilizzando i plugin. Nelle sezioni seguenti, esploreremo tre plugin che ti consentono di personalizzare il tuo tema WordPress.

Nota : il livello di esperienza per la modifica dei CSS di WordPress utilizzando i plug-in dipenderà dallo strumento utilizzato. Ti consigliamo di provarli tutti e vedere quale si sente più a tuo agio.

Editor CSS avanzato

Se ti piace usare il Customizer di WordPress, ma desideri che offra più opzioni, vale la pena dare un'occhiata a questo plugin. Con Advanced CSS Editor, sarai in grado di aggiungere CSS personalizzati per desktop, telefoni e tablet. In questo modo, puoi perfezionare l'aspetto del tuo sito web su ogni tipo di dispositivo.

Dopo aver installato il plug-in di WordPress, vai alla scheda Aspetto > Personalizzatore nella tua dashboard. Dovresti vedere una nuova opzione Editor CSS avanzato , che ti fornisce l'accesso a più editor per ogni tipo di dispositivo:

Tutto quello che devi fare è aggiungere il CSS personalizzato che desideri, verificare che funzioni correttamente e salvare le modifiche al tuo tema.

Professionisti:

• Ottieni il pieno controllo sull'aspetto del tuo sito web su tutti i dispositivi.
• Puoi comunque modificare il tema tramite il Customizer.

Contro:

• L'aggiunta di CSS personalizzati per più tipi di dispositivi può richiedere molto lavoro.

Voto medio: 4.5/5

Nota: questo plug-in include anche un'opzione per minimizzare il tuo CSS, che può aiutare a ridurre i tempi di caricamento del tuo sito.

CSS personalizzato modulare

Modular Custom CSS ti consente di aggiungere CSS al tuo tema tramite il Customizer di WordPress. Tuttavia, aggiunge anche alcune funzionalità molto gradite all'editor CSS predefinito. Per essere più specifici, questo plug-in ti consente di creare CSS personalizzati per singoli temi e apportare modifiche globali che persistono su qualsiasi tema che hai impostato:

Per accedere a questi campi, devi tornare alla sezione Aspetto > Personalizzatore > CSS aggiuntivo . Una volta che sei lì, puoi iniziare ad apportare modifiche.

Professionisti:

• Puoi aggiungere CSS personalizzati solo per temi specifici e apportare modifiche che rimarranno anche se cambi tema.

Contro:

• Il CSS "globale" potrebbe non funzionare bene con tutti i temi, quindi devi stare attento quando passi a uno nuovo.

Valutazione media: 5/5

SiteOrigin CSS

SiteOrigin CSS è un allontanamento dai plugin di cui abbiamo parlato finora. Invece di aggiungere nuove funzionalità al Customizer, offre un editor CSS WordPress autonomo. Puoi accedere a questo nuovo editor andando alla scheda Aspetto > CSS personalizzato dopo aver installato il plug-in:

A prima vista, questo editor CSS non sembra molto. Tuttavia, se fai clic sull'icona a forma di occhio, avvierai un editor visivo. Qui puoi fare clic su qualsiasi elemento del tuo tema e modificarlo facilmente utilizzando i CSS:

Il plug-in CSS di SiteOrigin può essere un po' travolgente all'inizio. Tuttavia, può anche farti risparmiare un sacco di tempo, dal momento che non dovrai cercare i selettori corretti. Tutto quello che devi fare è fare clic sull'elemento che desideri modificare, quindi aggiungere il codice CSS che preferisci.

Professionisti:

• Puoi modificare qualsiasi elemento che desideri sul tuo sito Web facendo clic su di esso.
• Questo plugin ti consente di modificare alcuni semplici aspetti del tuo tema senza dover utilizzare i CSS, come i suoi caratteri.

Contro:

• Può essere difficile tenere traccia di tutti i CSS personalizzati che aggiungi al tuo tema se modifichi più elementi.

Voto medio: 4.9/5

Modifica CSS con il foglio di stile del tema figlio

Livello di esperienza: Avanzato

Un tema figlio è una copia di un tema esistente (noto come 'genitore'). I temi secondari ti consentono di apportare modifiche al tuo sito Web WordPress in modo sicuro. Questo perché puoi ancora aggiornare il tema principale, senza perdere nessuna delle tue modifiche CSS personalizzate. Inoltre, se aggiungi un CSS che ha un impatto negativo sul tuo sito, puoi semplicemente disabilitare il tema figlio.

Qualsiasi CSS personalizzato che aggiungi a un tema figlio sovrascriverà gli stili del suo genitore. Tuttavia, affinché funzioni, devi prima sapere come creare un tema child. Una volta che il tuo "figlio" è pronto, puoi accedere ai suoi file utilizzando un client FTP come FileZilla.

Dopo esserti connesso al tuo sito Web tramite FTP, ti consigliamo di individuare la tua cartella principale, che è spesso chiamata public_html o www o prende il nome dal tuo sito Web:

Successivamente, vai alla directory wp-content/themes . Lì troverai le singole cartelle per tutti i tuoi temi, incluso il bambino che hai impostato. Apri la cartella del tema figlio e cerca il file style.css all'interno:

Fare clic con il tasto destro sul file del tema e selezionare l'opzione Visualizza/Modifica . Questo aprirà il file utilizzando il tuo editor di testo predefinito, consentendoti di apportare modifiche ad esso. Ciò significa che puoi aggiungere CSS personalizzati al tuo tema, solo che ora stai utilizzando un editor di testo completo invece del Customizer di WordPress.

Quando hai finito, salva le modifiche al file e chiudi l'editor. Quindi, puoi visitare il tuo sito Web per vedere se le modifiche apportate hanno funzionato come previsto. In caso contrario, puoi tornare al tuo file style.css e continuare a modificare il suo CSS.

Nota: questa è una panoramica di alto livello e c'è molto di più sulla configurazione e l'utilizzo di un tema figlio. Ti suggeriamo di procedere con attenzione se sei nuovo in questo processo.

CSS personalizzato con Theme Customizer vs Plugin CSS vs Foglio di stile del tema figlio

Come puoi vedere, hai molte opzioni quando si tratta di aggiungere CSS personalizzati a WordPress. Tuttavia, scegliere l'approccio giusto può essere una sfida. Analizziamo le scelte, in base al tuo livello di esperienza con la piattaforma e con i CSS in generale:

• Sei nuovo su WordPress e non sei abituato a usare i CSS. In questo scenario, la soluzione migliore è attenersi al Customizer di WordPress. Con esso, sarai in grado di visualizzare in anteprima le modifiche all'istante e abituarti all'uso dei CSS.
• Hai una certa esperienza con WordPress e CSS. In questa fase, vorrai più opzioni rispetto a quelle fornite dal Customizer predefinito. Pertanto, ti consigliamo di utilizzare plug-in che migliorano la sua funzionalità per modificare CSS personalizzati in WordPress.
• Sei un veterano di WordPress che ha dimestichezza con i CSS. Se non sei intimidito dai CSS e dai frammenti di codice, probabilmente vorrai impostare un tema child e modificarne manualmente il foglio di stile.

Tieni presente che queste sono solo linee guida e dovresti sentirti libero di utilizzare qualsiasi approccio ti sembri più comodo.

Migliora l'esperienza digitale con un ottimo design e un hosting di prim'ordine

Il design del tuo sito web gioca un ruolo significativo in ciò che i visitatori ne pensano. Con WordPress hai accesso a migliaia di temi e puoi modificarli utilizzando CSS personalizzati.

Tuttavia, la gestione di un sito Web di successo non riguarda solo l'aspetto. Avrai anche bisogno di un web hosting WordPress che offra prestazioni, sicurezza e supporto eccellenti. Con WP Engine, avrai accesso a tutte queste funzionalità con ognuno dei nostri piani!