Vuoi applicare CSS e modificare lo stile del tuo sito? Se è così, questo post è per te. In questa guida, ti mostreremo diversi modi per aggiungere CSS a WordPress in modo da poter personalizzare il tuo sito web e fare colpo sui tuoi visitatori.

Anche se WordPress ha molti temi e template che puoi usare, se vuoi cambiare l’aspetto del tuo sito, prima o poi finirai per aggiungere codice CSS.

L’aggiunta di CSS a un sito web è abbastanza semplice. Tutti questi metodi diversi hanno i loro pro e contro, quindi può essere difficile per i principianti capire quale sia il modo migliore per aggiungere CSS per la loro situazione specifica. Ecco perché in questa guida ti mostreremo diversi modi per aggiungere lo stile CSS a un sito web WordPress .

Iniziamo.

Come aggiungere CSS a WordPress

Esistono diversi modi per applicare lo stile CSS a un sito WordPress:

  1. Tramite il customizer del tema
  2. Modificando dei file del child theme
  3. Caricare il proprio file CSS
  4. Applicando CSS all’header con gli hook
  5. Aggiungendo CSS al backend

Diamo un’occhiata a ciascun metodo, in modo che tu possa scegliere quello più appropriato per te.

NOTA : non spiegheremo nel dettaglio la struttura dei CSS in questo post, quindi ti consigliamo di avere una conoscenza di base dei CSS per poter seguire questa guida senza problemi.

Come passaggio precedente all’applicazione dei CSS, ti consigliamo di utilizzare lo strumento di sviluppo del browser per trovare elementi HTML specifici che desideri modificare. 

Leggi anche: Come eliminare JS e CSS che bloccano il rendering delle pagine del sito

1) Applica i CSS WordPress con il customizer del tema

Il modo più semplice e veloce per aggiungere codice CSS personalizzato a WordPress è inserirlo nell’editor CSS aggiuntivo del customizer del tema che è l’editor CSS integrato di WordPress ed è presente su tutti i siti web per impostazione predefinita. Tuttavia, tieni presente che alcuni temi e plugin potrebbero disabilitare questa funzione.

Per applicare il tuo CSS utilizzando il customizer del tema, vai alla tua dashboard e vai su Aspetto> Personalizza > CSS aggiuntivo per aprire l’ editor CSS . Lì vedrai il codice CSS del tuo sito e potrai aggiungere il tuo codice.

applica il tuo CSS personalizzato inserendolo nell'editor CSS aggiuntivo del customizer del tema.

Uno dei maggiori vantaggi di questo metodo è che puoi visualizzare in anteprima il risultato della personalizzazione CSS in tempo reale sul lato destro dello schermo.

Una volta aggiunto il codice, verrà salvato nel database nella tabella *_posts , sotto il tipo di post custom_css . Anche se qui puoi applicare tutti i tipi di personalizzazione, non è una pratica consigliata per un lungo elenco di regole CSS a causa delle prestazioni.

2) Modifica dei file del child theme

Un altro modo per aggiungere lo stile CSS a WordPress è modificare i file CSS del child theme. Questo metodo ha prestazioni migliori rispetto all’applicazione del codice direttamente dal Customizer perché si carica senza la necessità di recuperarlo dal database.

La maggior parte dei child theme ha un file style.css , quindi puoi semplicemente aggiungere lì il tuo CSS personalizzato. Per trovare il file style.css del tuo child theme, nella dashboard di WordPress vai su Aspetto > Editor del tema . Quindi clicca il menu a discesa in alto a destra, seleziona il tema figlio e fai clic sul file style.css come mostrato di seguito.

Modifica il codice CSS direttamente sui file del tema figlio

Se il tuo tema child non ha un file style.css o qualsiasi altro file con estensione .css , puoi crearlo e applicarlo come descritto nella sezione successiva.

In alternativa, alcuni temi child hanno una cartella CSS con diversi file al suo interno. Se questo è il tuo caso, assicurati di modificare il file style.css corretto .

3) Carica il tuo file CSS WordPress

Se desideri aggiungere codice CSS personalizzato di grandi dimensioni a WordPress, è buona norma averlo in un file separato e caricarlo insieme ai file del tuo sito web sul server. Vediamo come farlo passo passo.

3.1) Crea il file CSS utilizzando un editor di codice

Per fare ciò, devi usare un editor di codice come Visual Studio Code, Sublime text, Coda o qualsiasi altro che supporti i file CSS.

Crea il file CSS usando un editor di codice

Crea un nuovo file con l’estensione CSS e incolla lì il tuo codice. In questo esempio, abbiamo chiamato il file my-styles.css .

Dopo aver incollato il codice, salva il file e continua con il passaggio successivo.

3.2) Carica il file CSS nella cartella del Child Theme WordPress

Se il tuo tema child ha una directory CSS, copia e incolla il tuo file lì. In alternativa, puoi anche caricarlo direttamente nella directory principale del child theme. Non preoccuparti della posizione nella cartella del tema child, indirizzeremo il percorso del file nel passaggio successivo.

Ora usa il cPanel o un client FTP come FileZilla per caricare il file.

Se sei su un server localhost, puoi semplicemente copiare e incollare il file nella cartella del tema child situata nella cartella pubblica del tuo server localhost.

Seguendo il nostro esempio, incolleremo il nostro file my-styles.css nel tema child.

3.3) Accoda il tuo file .CSS personalizzato

Ora devi accodare il tuo file CSS personalizzato nel file functions.php del tuo tema figlio per farlo funzionare. Incolla il seguente script PHP dopo qualsiasi codice presente nel file functions.php .

function my_styles() {
wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
wp_enqueue_style( 'my-styles');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Assicurati che il file appena creato venga chiamato correttamente dal percorso a seconda di dove si trova il file nella directory del tema. Inoltre, ricorda di cambiare il nome del file ( my-styles.css in questo esempio) con il tuo..

È possibile utilizzare il seguente snippet per verificare se il percorso è corretto o meno.

add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/my-styles.css';
});

Questo è tutto! Ecco come puoi applicare CSS a WordPress caricando il tuo file CSS.

4) Applica il CSS WordPress alla sezione header utilizzando un hook

Se hai competenze di programmazione, puoi anche aggiungere CSS al tuo sito utilizzando gli hook .

L’hook wp_head() è molto utile quando si sviluppano siti web. Sebbene non sia consigliabile utilizzarlo per includere uno script nel tag HTML <head> , consente di eseguire test rapidi ed eseguire il debug.

Se stai lavorando con più fogli di stile CSS o su siti web complessi e qualcosa non funziona come previsto, puoi aggiungere il tuo codice CSS direttamente nella sezione <head> utilizzando questo hook.

add_Action('wp_head','my_head_css');
function my_head_css(){
echo "<style>
.site-branding{
    background: red;
    width: 200px;
    padding: 11px;
    border-radius: 23px; }
</style>
";}

Con questo script, stiamo cambiando la dimensione dell’intestazione, il colore di sfondo, il bordo e il riempimento.

In questo modo puoi assicurarti che lo script CSS venga applicato al frontend su qualsiasi altro file CSS o incluso nel sito web in qualsiasi altro modo.

5) Aggiungi CSS al backend

Infine, c’è un altro modo per aggiungere lo stile CSS a WordPress. Puoi applicare CSS personalizzato al back-end usando l’hook admin_head() come segue:

add_Action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
#adminmenu{
    background: #602e93;}
</style>';
}

In questo esempio, stiamo cambiando il colore di sfondo (#602e93).

I metodi 4 e 5 possono essere molto utili e possono aiutarti a risparmiare tempo inserendo uno script CSS direttamente nella sezione HTML <head> . Tuttavia, non è una pratica consigliata e non dovresti usare questo metodo per applicare gli stili in modo permanente.

Conclusione

Nel complesso, con un po’ di CSS puoi personalizzare l’aspetto del tuo sito. Aggiungere CSS è facile, ma ci sono diversi modi per farlo, quindi può essere difficile capire quale metodo dovresti usare.

In questo tutorial, ti abbiamo mostrato cinque diversi metodi per aggiungere CSS al tuo sito WordPress:

  1. Tramite il customizer del tema
  2. Modificando i file del child theme
  3. Caricando il proprio file CSS
  4. Applicando i CSS all’header con gli hook
  5. Aggiungendo CSS al backend

Ogni metodo ha i suoi pro e contro. Aggiungere CSS dal tema Customizer, ad esempio, è facile e ti da la possibilità di avere un’anteprima in tempo reale. Tuttavia, non è una pratica consigliata per un lungo elenco di regole CSS. In alternativa, puoi modificare i file del tuo child theme o caricare il tuo file CSS nel tuo child theme..

Anche se non è una pratica consigliata, puoi utilizzare gli hook per includere uno script nel tag HTML <head> per eseguire test rapidi ed eseguire il debug del tuo sito.

Buon lavoro!