Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
Senza categoria

WPCode: Aggiungere CSS Personalizzato a WordPress

· 8 min di lettura

Perché Aggiungere CSS Personalizzato al Tuo Sito WordPress

Il design del tuo sito WordPress è definito dal tema che utilizzi, ma raramente un tema soddisfa al 100% le tue esigenze estetiche. Che si tratti di cambiare un colore, modificare una spaziatura, nascondere un elemento o personalizzare un font, il CSS personalizzato è lo strumento che ti permette di adattare l’aspetto del tuo sito senza dover cambiare tema o acquistare una versione premium.

Esistono diversi modi per aggiungere CSS personalizzato a WordPress: il Customizer integrato, plugin dedicati, il file style.css del tema child, o un plugin come WPCode. In questo articolo vedremo perché WPCode è la soluzione migliore e come utilizzarlo per gestire il tuo CSS personalizzato in modo efficiente.

I Metodi Tradizionali e i Loro Limiti

Customizer di WordPress

WordPress include una sezione “CSS aggiuntivo” nel Customizer (Aspetto → Personalizza → CSS aggiuntivo). È semplice da usare ma ha limiti significativi:

File style.css del Tema Child

Creare un tema child e modificare il suo file style.css è l’approccio “corretto” dal punto di vista tecnico, ma:

Plugin CSS Dedicati

Esistono plugin come “Simple Custom CSS” o “Custom CSS Pro”, ma aggiungere un plugin che fa solo una cosa è inefficiente quando WPCode può gestire CSS insieme a HTML, JavaScript e PHP.

Gestione degli snippet CSS in WPCode per WordPress

WPCode: La Soluzione Migliore per il CSS Personalizzato

WPCode risolve tutti i limiti dei metodi tradizionali offrendo:

Come Creare uno Snippet CSS con WPCode

  1. Vai su Code Snippets → Add Snippet → Add Your Custom Code
  2. Assegna un titolo descrittivo (es. “Personalizzazione colori header”)
  3. Seleziona CSS Snippet come tipo di codice
  4. Scrivi le tue regole CSS nell’editor — non includere i tag <style>, WPCode li aggiunge automaticamente
  5. Nella sezione Insertion, seleziona Site Wide Header
  6. Attiva e salva lo snippet

È importante selezionare “CSS Snippet” come tipo e non “HTML Snippet”. Quando scegli CSS, WPCode aggiunge automaticamente i tag <style> e gestisce correttamente la priorità del caricamento.

Esempio 1: Personalizzare i Colori del Sito

Uno dei casi più comuni è la modifica dei colori principali del sito. Ecco uno snippet che cambia il colore di sfondo dell’header, il colore dei link e il colore dei pulsanti:

/* Colore di sfondo dell’header */
.site-header {
    background-color: #1a1a2e !important;
}

/* Colore dei link */
a {
    color: #e94560;
}

a:hover {
    color: #c81e45;
}

/* Colore dei pulsanti */
.wp-block-button__link,
button,
input[type="submit"] {
    background-color: #e94560 !important;
    border-color: #e94560 !important;
    color: #ffffff !important;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #c81e45 !important;
    border-color: #c81e45 !important;
}

Il selettore !important assicura che le tue regole sovrascrivano quelle del tema. Usalo con moderazione — preferisci selettori più specifici quando possibile.

Esempio 2: Personalizzare i Font

Per cambiare i font del sito, devi prima caricare il font (se non è già disponibile) e poi applicarlo con CSS:

/* Importa Google Font - serve uno snippet HTML separato per il link nell’header */

/* Applicazione del font */
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Space Grotesk, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

Per il caricamento del font, crea un snippet HTML separato con il link a Google Fonts da inserire nell’header.

Impostazioni CSS personalizzato in WPCode

Esempio 3: Nascondere Elementi Specifici

A volte vuoi semplicemente nascondere un elemento della pagina che non può essere rimosso dalle impostazioni del tema:

/* Nascondere la barra laterale su mobile */
@media (max-width: 768px) {
    .sidebar,
    .widget-area {
        display: none;
    }
}

/* Nascondere la data di pubblicazione sui post */
.entry-date,
.posted-on {
    display: none;
}

/* Nascondere il campo sito web nei commenti */
.comment-form-url {
    display: none;
}

/* Nascondere il powered by nel footer */
.site-info .powered-by {
    display: none;
}

Consiglio: per trovare il selettore CSS corretto dell’elemento che vuoi personalizzare, usa lo strumento “Ispeziona elemento” del browser (tasto destro → Ispeziona). Passa il mouse sull’elemento per vedere le classi CSS applicate.

Esempio 4: Personalizzare la Pagina di Login

La pagina di login di WordPress (/wp-login.php) ha un aspetto standard e poco personalizzato. Con uno snippet CSS puoi brandizzarla:

/* Sfondo della pagina di login */
body.login {
    background-color: #0a0a0f;
    background-image: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
}

/* Logo personalizzato */
.login h1 a {
    background-image: url(https://tuosito.it/wp-content/uploads/logo.png);
    background-size: contain;
    width: 200px;
    height: 80px;
}

/* Box del form */
.login form {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Pulsante di login */
.login .button-primary {
    background-color: #e94560 !important;
    border-color: #e94560 !important;
    border-radius: 6px;
}

Per questo snippet, nella sezione Insertion scegli Admin Only oppure aggiungi una condizione per caricarlo solo sulla pagina di login.

Esempio 5: Layout Responsive Personalizzato

Se il tema non gestisce bene certi breakpoint responsive, puoi correggerli con media query personalizzate:

/* Adattamenti per tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-content {
        padding: 0 20px;
    }

    .entry-title {
        font-size: 28px;
    }
}

/* Adattamenti per smartphone */
@media (max-width: 768px) {
    .site-content {
        padding: 0 15px;
    }

    .entry-title {
        font-size: 22px;
    }

    /* Tabelle scrollabili su mobile */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Immagini a piena larghezza su mobile */
    .entry-content img {
        width: 100% !important;
        height: auto !important;
    }
}

Esempio 6: Personalizzare WooCommerce con CSS

Se gestisci un negozio WooCommerce, potresti voler personalizzare l’aspetto delle pagine prodotto, del carrello o del checkout:

/* Griglia prodotti */
.woocommerce ul.products li.product {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Badge di sconto */
.woocommerce span.onsale {
    background-color: #e94560;
    border-radius: 4px;
    min-height: auto;
    min-width: auto;
    padding: 5px 10px;
    line-height: 1.4;
}

/* Pulsante Aggiungi al carrello */
.woocommerce a.button,
.woocommerce button.button {
    background-color: #0073aa !important;
    color: #ffffff !important;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: #005a87 !important;
}

Per questo snippet, usa la logica condizionale di WPCode per caricarlo solo sulle pagine WooCommerce, evitando CSS inutile sulle altre pagine del sito.

Personalizzazione CSS WooCommerce con WPCode

Organizzare i Tuoi Snippet CSS

Quando il numero di personalizzazioni CSS cresce, l’organizzazione diventa fondamentale. Ecco il nostro approccio consigliato:

Strategia di Naming

Tag Consigliati

CSS e Prestazioni: Best Practice

Anche il CSS può influire sulle prestazioni del sito. Ecco alcuni consigli per mantenere il CSS efficiente:

CSS Personalizzato vs Tema Child

La domanda che molti si pongono è: è meglio usare WPCode o un tema child per il CSS personalizzato? La risposta dipende dal contesto:

Per la maggior parte degli utenti WordPress, WPCode è la scelta più pratica e sicura.

Conclusioni

WPCode trasforma la gestione del CSS personalizzato da un’operazione tecnica e rischiosa a un processo semplice e organizzato. Potendo creare snippet CSS separati per ogni personalizzazione, con la possibilità di attivarli e disattivarli singolarmente e di applicarli solo a pagine specifiche, hai il controllo totale sull’aspetto del tuo sito senza bisogno di plugin extra o modifiche ai file del tema.

📚 Leggi anche gli altri articoli della serie WPCode

Hai bisogno di personalizzazioni CSS professionali per il tuo sito WordPress? Contatta il team di G Tech Group. I nostri web designer possono creare personalizzazioni CSS su misura per dare al tuo sito l’aspetto esatto che desideri, mantenendo le migliori pratiche di performance e compatibilità cross-browser.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#CSS #Design #personalizzazione #Stile #Wordpress #WPCode