Come personalizzare il tuo sito Web WordPress con CSS: 3 semplici metodi

WordPress si è evoluto nel corso degli anni e oggi è una piattaforma abbastanza flessibile e facile da personalizzare attraverso il suo editor di blocchi, Gutenberg. Tuttavia, ci saranno momenti in cui avrai bisogno di un po' più di copertura rispetto a quella fornita dall'editor Gutenberg.

È qui che torna utile il CSS personalizzato. Lo stile CSS ti consente di modificare i colori, la spaziatura, i caratteri, i layout e praticamente ogni altro elemento visivo del tuo sito Web WordPress, permettendoti di farlo apparire esattamente come desideri.

In questo articolo, ti guideremo attraverso gli elementi essenziali per personalizzare il tuo sito Web WordPress con CSS.

Perché personalizzare il tuo sito web con i CSS?

L'aggiunta di CSS personalizzati è solo uno dei metodi che puoi utilizzare per mettere a punto l'aspetto del tuo sito. Altri metodi includono l'uso di a tema WordPress premium ben caratterizzatoo installando un generatore di pagine.

Sebbene questi due metodi siano un po' più facili da usare per i principianti e non richiedano alcuna conoscenza di codifica, l'utilizzo di CSS personalizzati è più vantaggioso in due modi principali:

Costo Zero

I temi premium e i page builder di WordPress possono essere utili, ma hanno un costo, in dollari e centesimi. Armati della conoscenza di come scrivere CSS personalizzati, d'altra parte, puoi ottenere gli stessi effetti senza incorrere in spese extra.

Gonfiore minimo

I page builder e i temi ben caratterizzati sono progettati per offrire agli utenti maggiore flessibilità e un'ampia gamma di opzioni per personalizzare i propri siti Web. Per questo motivo, tendono a gonfiare i siti Web, potenzialmente rallentandoli.

Quando scrivi CSS personalizzati, d'altra parte, aggiungerai solo le funzionalità necessarie, il che generalmente si traduce in siti Web più leggeri e velocità di caricamento più elevate.

3 semplici metodi per personalizzare il tuo sito Web WordPress con CSS

Spero che tu lo sappia già come scrivere CSS. Una volta acquisita familiarità con le basi, puoi utilizzare uno dei seguenti metodi per aggiungere CSS personalizzati al tuo sito Web WordPress:

Metodo 1: utilizzare il personalizzatore di WordPress

Con WordPress 4.7 o qualsiasi versione successiva, puoi aggiungere CSS personalizzati direttamente dall'area di amministrazione. Questo è il metodo più semplice e, poiché è disponibile un'anteprima dal vivo, puoi vedere tutte le modifiche apportate in tempo reale.

È anche il più consigliato, poiché tutte le modifiche che apporterai vengono salvate all'interno di WordPress stesso. Ciò significa che anche se cambi o aggiorni il tuo tema, non perderai il tuo CSS personalizzato.

Ecco i passaggi da eseguire:

Passo 1: Navigare verso Aspetto > Personalizza.

Questo aprirà il personalizzatore del tema WordPress, che ti mostra un'anteprima dal vivo del tuo sito sulla destra, insieme ad alcune opzioni di personalizzazione sulla sinistra. Scorri verso il basso fino alla parte inferiore del pannello di sinistra e troverai un CSS aggiuntivi scheda.

Passo 2: Clicca sul CSS aggiuntivi tab.

Si aprirà una piccola casella nel riquadro di sinistra in cui puoi aggiungere il tuo CSS personalizzato. Puoi digitare tutte le righe di codice CSS che desideri. La cosa grandiosa di questo editor è che convalida il tuo codice, avvisandoti se ci sono errori.

Passaggio 3: pubblica le modifiche.

Qualsiasi regola CSS valida che aggiungi verrà visualizzata nell'area di anteprima live a destra. Per applicare le modifiche al tuo sito, fai clic su Pubblicare pulsante nella parte superiore del riquadro di sinistra una volta che sei soddisfatto. Se non desideri che le modifiche abbiano effetto immediato, puoi anche programmare la pubblicazione in un secondo momento o salvare il tuo lavoro come bozza.

È importante notare che tutte le modifiche apportate utilizzando il personalizzatore sono legate al tema corrente. Se passi a un altro tema, le modifiche andranno perse a meno che non copi il tuo CSS personalizzato e lo aggiungi al nuovo tema. È buona norma salvare tutti i CSS personalizzati aggiunti a un tema su un blocco note. In questo modo, puoi semplicemente copiare il codice e incollarlo nella sezione "CSS aggiuntivo" per un tema diverso.

Se ti sembra troppo lavoro e preferisci una soluzione che ti permetta di applicare il tuo CSS personalizzato a qualsiasi tema WordPress che utilizzi, il metodo successivo fa per te.

Metodo 2. Usa un plugin

I plug-in CSS personalizzati memorizzano il tuo CSS personalizzato separato dal tuo tema, consentendo l'applicazione delle modifiche indipendentemente dal tema che utilizzi. Questi plug-in sono inoltre dotati di funzionalità extra come il completamento automatico che possono semplificare l'aggiunta di CSS.

L'unico inconveniente è che sono software di terze parti, il che significa che possono potenzialmente rallentare il tuo sito. Tuttavia, la maggior parte di questi plug-in è leggera, quindi in genere ha un impatto minimo sulle prestazioni del tuo sito. Ecco alcuni dei migliori plugin CSS personalizzati che puoi utilizzare:

• CSS personalizzato semplice

CSS personalizzato semplice è uno dei plugin CSS personalizzati più popolari. È leggero, facile da usare e offre ottime funzionalità. Configurarlo è facile. Tutto quello che devi fare è installare e attivare il plugin. Quindi, vai a Aspetto esteriore sezione nel riquadro sinistro della dashboard.

Vedrai una nuova opzione chiamata CSS personalizzato. Facendo clic su di esso si aprirà un editor in cui è possibile aggiungere il proprio CSS personalizzato. Clicca il Aggiorna CSS personalizzato pulsante per salvare le modifiche. Per visualizzare le modifiche, aggiorna il tuo sito web.

• CSS e JS Custom personalizzati semplici

Se vuoi ancora più funzionalità, il Plugin CSS e JS personalizzato semplice è un'ottima opzione. Oltre ad aggiungere CSS, ti consente di aggiungere voci JavaScript.

• Eroe CSS

Se non vuoi scrivere una sola riga di codice, il Plugin CSS Hero è perfetto per te. Questo plugin offre un editor CSS visivo con menu a discesa e campi di input che ti consentono di modificare quasi tutti gli stili CSS sul tuo sito senza dover scrivere alcun codice.

Metodo 3. Modifica il codice grezzo

I due metodi che abbiamo descritto sopra ti consentono di aggiungere CSS personalizzati al tuo sito senza la necessità di toccare nessuno dei tuoi file del tema. Ma, in alcuni casi, potresti voler modificare il CSS del tuo tema o aggiungere direttamente CSS personalizzato al codice del tuo tema.

Per fare ciò, dovrai accedere al foglio di stile del tuo sito web. Un modo semplice per accedere a questo foglio di stile è tramite il Editor di temi sulla dashboard di WordPress.

Prima di andare oltre, però, ci sono alcune salvaguardie che devi mettere in atto. Primo, eseguire il backup del tuo sito web. Durante la modifica dei file del tema, è facile commettere errori che possono potenzialmente far crashare il tuo sito.

Un backup ti assicura di avere un sito web funzionante a cui tornare. Prossimo, creare un tema figlio. Se apporti modifiche dirette al tema principale, le modifiche andranno perse ogni volta che il tema viene aggiornato.

Una volta attivate queste misure di sicurezza, accedi al backend di WordPress. Vai a Aspetto > Editor temi. Quando fai clic sull'opzione dell'editor del tema, vedrai una finestra popup che ti avverte di non apportare modifiche dirette ai file del tema. Se segui i passaggi precedenti, sei a posto.

Clic Capisco procedere.

Dopo aver fatto clic, dovresti vedere il foglio di stile del tuo sito per impostazione predefinita. In caso contrario, guarda semplicemente nel riquadro di destra e fai clic su stile.css sotto il Foglio di stile opzione.

Da qui, puoi apportare modifiche dirette ai file del tema. Basta non dimenticare di fare clic Salva e aggiorna una volta che hai finito.

Prendi il controllo dell'aspetto del tuo sito con CSS personalizzati

Imparare a scrivere CSS personalizzati su WordPress potrebbe richiedere del tempo per i principianti, ma ti darà un vero controllo sull'aspetto del tuo sito web. E questo è a costo zero e con un impatto minimo sulle prestazioni del tuo sito.

Se preferisci non eseguire alcuna progettazione manuale, tuttavia, ci sono altri modi per portare a termine il lavoro, ad esempio utilizzando uno dei principali costruttori di pagine per WordPress.

5 page builder di WordPress che possono aiutarti a creare siti Web sorprendenti

Vuoi rendere fantastico il tuo sito WordPress ma non puoi permetterti uno sviluppatore? Prova invece questi page builder di WordPress.

Leggi Avanti

Circa l'autore