Creare un Foglio di Stile Personalizzato in WordPress: Snippet Utili per il Tuo Tema

Tutti partono da un tema, che ha già un proprio stile, ma c’è sempre qualcosa che si desidera cambiare. A volte queste esigenze non sono coperte dalle impostazioni che il tema mette a disposizione ecco perché oggi scopriremo come aggiungere un Foglio di Stile Personalizzato in WordPress.

I nuovi temi con blocchi permettono, di solito, di personalizzare il tema, mentre altri potrebbero avere delle aree di testo dove inserire il proprio CSS nelle impostazioni. Tuttavia, preferisco sempre aggiungere un foglio di stile dedicato per maggiore chiarezza, per poterlo gestire con il mio editor, sostituirlo facilmente quando serve (ad esempio avere diverse versioni) e per mantenere un controllo più preciso sulle personalizzazioni.

Personalizzazzione senza editare il file del tema

Personalizzare il design di un sito WordPress senza modificare direttamente i file del tema è una pratica consigliata per mantenere la compatibilità con gli aggiornamenti.

Spesso i temi hanno già un foglio di stile per le personalizzazioni, ma a volte il foglio contiene già del codice che potrebbe essere stato inserito con gli aggiornamenti del tema.

Creare un foglio di stile personalizzato ti consente di modificare l’aspetto del sito in modo sicuro ed efficiente. In questo articolo vedremo come aggiungere un CSS personalizzato e alcuni snippet utili per migliorare l’aspetto del tuo sito.

Come Aggiungere un Foglio di Stile Personalizzato in WordPress

1. Creare un File CSS Personalizzato nel Tema Parent

Se preferisci, puoi creare direttamente un file CSS (foglio di stile) personalizzato all’interno del tema parent (il tema principale, nel caso tu abbia dei child). Tuttavia, questa pratica non è consigliata poiché eventuali aggiornamenti del tema potrebbero sovrascrivere il file e perdere le modifiche. Per farlo:

• Accedi alla cartella del tema parent via FTP o File Manager.
• Crea un nuovo file chiamato custom-style.css.
• Aggiungi le regole CSS personalizzate.
• Carica il file nel tema tramite il file functions.php con il seguente codice:

// functions.php del tema
function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

2. Creare un File CSS Personalizzato e Caricarlo nel Tema Child

Per un approccio più strutturato e sicuro, è consigliabile usare un tema child:

• Crea una cartella per il tema child (se non esiste già).
• Aggiungi un file style.css con la seguente intestazione:

/*
Theme Name: Nome del Tema Child
Template: nome-del-tema-parent
Author: Il tuo nome
Version: 1.0
*/

• Inserisci le regole CSS personalizzate in questo file.
• Nel file functions.php del tema child (se non esiste crealo), aggiungi il seguente codice per caricare il CSS del tema parent:

<?php
function enqueue_child_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'enqueue_child_styles');
?>

Vantaggi dell’uso di un Tema Child

Utilizzare un tema child offre numerosi vantaggi:

• Protezione dagli aggiornamenti: Le personalizzazioni restano intatte anche quando il tema parent viene aggiornato.
• Maggiore organizzazione: Separa le modifiche dal tema principale, rendendo la gestione del codice più chiara.
• Facilità di debug: Le modifiche possono essere isolate senza interferire con i file del tema principale.
• Flessibilità: Puoi personalizzare non solo il CSS ma anche i file PHP senza modificare direttamente il tema parent.

Questa metodologia garantisce un approccio professionale e scalabile alla personalizzazione del tuo sito WordPress.

Inoltre grazie ai parent è possibile creare delle varianti del tema ed cambiarle in modo molte semplice dalla sezione aspetto > temi.

3. Utilizzare un Plugin per Aggiungere CSS Personalizzato

Un’altra alternativa è creare un plugin personalizzato per aggiungere lo stile CSS senza modificare il tema. Questo metodo garantisce che le personalizzazioni non vengano sovrascritte dagli aggiornamenti del tema.
Il plugin conterrà un file php che puoi utilizzare come se fosse il functions.php del tuo tema.

Qui puoi trovare la spiegazione dettagliata e il plugin minimo da scaricare per implementarlo nel tuo sito, contiene già un foglio di stile ed anche un file per eventuali script in javascript.

Snippet CSS Utili per Personalizzare WordPress

Ecco alcuni snippet CSS pratici per migliorare l’aspetto del tuo sito.

1. Cambiare il Font e la Tipografia del Sito

Se il font non è già presente nel tema, puoi importarlo da Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Poi puoi applicarlo al sito:

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

2. Personalizzare i Pulsanti

Per personalizzare i pulsanti, aggiungendo spaziatura, colore di sfondo ed anche una transizione, puoi aggiungere il seguente CSS

.button, .wp-block-button__link {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}
.button:hover, .wp-block-button__link:hover {
    background-color: #cc5500;
}

3. Aggiungere un’Effetto Ombra alle Immagini

Questo aggiunge un effetto di ombra alle immagini, il selettore potrebbe essere troppo generico, qui ti consiglio di limitarlo aggiungendo ad esempio article img{} perché venga applicato solo all’interno delle immagini dentro al tag <article>

img {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

4. Adattare il Design per i Dispositivi Mobili

Per migliorare la visualizzazione sui dispositivi mobili, puoi usare i media queries. Ecco un esempio:

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .container {
        padding: 10px;
    }
}

Conslusione: Foglio di Stile Personalizzato in WordPress

Creare un foglio di stile personalizzato in WordPress permette di migliorare il design del sito senza compromettere gli aggiornamenti del tema. Utilizzando il CSS aggiuntivo o un tema child, puoi facilmente implementare le tue personalizzazioni. Spero che questi snippet ti siano utili! 😊

Boilerplate Plugin

Scarica il plugin vuoto da personalizzare per aggiungere il tuo CSS e personalizzare il tuo sito senza modificare i file del tema.