Come aggiungere CSS a WordPress: 5 metodi

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 modelli che puoi utilizzare, 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. In precedenza abbiamo visto come applicare i CSS utilizzando lo strumento di sviluppo del browser, ma ci sono altri modi. Tutti questi diversi metodi hanno 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 .

Come aggiungere CSS a WordPress

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

1. Tramite la personalizzazione del tema
2. Modifica dei file del tema figlio
3. Caricamento del tuo file CSS
4. Applica CSS all'intestazione con hook
5. Aggiungi CSS al back-end

Diamo un'occhiata a ciascun metodo, così puoi scegliere quello più appropriato per te.

NOTA : in questo post non spiegheremo in dettaglio la struttura dei CSS, 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 per sviluppatori del browser per trovare elementi HTML specifici che desideri modificare. Se non sei sicuro di come farlo, dai un'occhiata alla nostra guida su come applicare i CSS utilizzando lo strumento di sviluppo del browser.

1) Applica CSS con il personalizzatore del tema

Il modo più semplice e veloce per aggiungere codice CSS personalizzato a WordPress è inserirlo nell'editor CSS aggiuntivo del personalizzatore del tema. Questo è 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 usando il personalizzatore 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.

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 ampio elenco di regole CSS a causa delle prestazioni.

2) Modifica dei file del tema figlio

Un altro modo per aggiungere lo stile CSS a WordPress è modificare i file CSS del tema figlio. Questo metodo ha prestazioni migliori rispetto all'applicazione del codice direttamente dal Customizer perché viene caricato senza che sia necessario recuperarlo dal database.

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

Se il tuo tema figlio 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 figlio 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

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

3.1) Creare il file CSS utilizzando un editor di codice

A tale scopo, è necessario utilizzare un editor di codice come Visual Studio Code, Sublime text o qualsiasi altro che supporti i file CSS.

Crea un nuovo file con 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 nella cartella Tema figlio

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

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 figlio situata nella cartella pubblica del tuo server localhost.

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

3.3) Accoda il tuo file .CSS personalizzato

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

 funzione i miei_stili() {
wp_register_style( 'i miei-stili', get_stylesheet_directory_uri() . '/i miei-stili.css');
wp_enqueue_style( 'i miei stili');
}
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).

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

 add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/i miei-stili.css';
});

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

4) Applicare CSS alla sezione dell'intestazione usando un hook

Se hai delle capacità di programmazione, puoi anche aggiungere CSS al tuo sito usando gli hook .

L' wp_head() è molto utile durante lo sviluppo di siti web. Sebbene non sia consigliabile utilizzarlo per includere uno script nel tag HTML <head> , consente di eseguire test rapidi e 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> usando questo hook.

 add_Action('wp_head','my_head_css');
funzione mia_testa_css(){
echo "<stile>
.marchio del sito{
    sfondo: rosso;
    larghezza: 200px;
    imbottitura: 11px;
    raggio di confine: 23px; }
</stile>
";}

Ad esempio, con questo script, stiamo cambiando la dimensione dell'intestazione, il colore dello sfondo, il bordo e il riempimento.

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

5) Aggiungi CSS al back-end

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

 add_Action('admin_head', 'my_custom_fonts');
funzione my_custom_fonts() {
eco '<stile>
#menuadmin{
    sfondo: #602e93;}
</stile>';
}

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

Tutto sommato, 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 sapere quale metodo dovresti usare.

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

1. Tramite la personalizzazione del tema
2. Modifica dei file del tema figlio
3. Caricamento del tuo file CSS
4. Applica CSS all'intestazione con hook
5. Aggiungi CSS al back-end

Ogni metodo ha i suoi pro e contro. Ad esempio, l'aggiunta di CSS dal tema Customizer è facile e viene fornita con un'anteprima in tempo reale. Tuttavia, non è una pratica consigliata per un ampio elenco di regole CSS. In alternativa, puoi modificare i file del tuo tema figlio o caricare il tuo file CSS sul tuo tema figlio.

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.

Hai aggiunto CSS al tuo sito web? Quale metodo hai usato? Conosci qualche altro metodo che dovremmo includere? Fateci sapere nei commenti qui sotto!