Come aggiungere una classe body personalizzata su pagine specifiche con Astra Pro

Vuoi applicare stili CSS unici a pagine specifiche del tuo sito WordPress?
Il metodo più pulito è aggiungere una classe personalizzata al tag <body> — così puoi targetizzare quelle pagine con precisione usando i CSS.
Seguendo i passaggi qui sotto, potrai aggiungere una classe body personalizzata a qualsiasi pagina (o gruppo di pagine) usando la funzione Custom Layouts di Astra Pro — senza alcuna conoscenza di programmazione.

Panoramica

WordPress aggiunge già automaticamente alcune classi al body (come page-id-42), ma a volte hai bisogno di
una classe pulita e significativa come special-page che controlli tu stesso.
La funzione Custom Layouts di Astra Pro ti permette di iniettare un piccolo frammento JavaScript in pagine specifiche,
che aggiunge la tua classe personalizzata al body al caricamento della pagina.

Flusso di lavoro:

[Astra Pro → Custom Layouts] → [Frammento JavaScript] → [Iniettato tramite hook wp_head] → [Classe body aggiunta al DOMContentLoaded]

Passo 1. Aprire Custom Layouts in Astra Pro

1. Accedi alla dashboard di amministrazione di WordPress.
2. Vai su Aspetto → Astra Options.
3. Trova il modulo Custom Layouts e clicca su Settings.
4. Clicca su Add New.

Se non vedi Custom Layouts, potrebbe essere necessario attivarlo prima.
Vai su Aspetto → Astra Options → Astra Addons e attiva il pulsante Custom Layouts.

Passo 2. Configurare il Custom Layout

Vedrai una nuova schermata dell’editor. Compila i seguenti campi:

1. Aggiungi un Titolo come riferimento personale (es. Body Class - Pagine Speciali).
2. Nell’editor, clicca sulla scheda Code e incolla il seguente frammento:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Sostituisci special-page con il nome di classe che desideri utilizzare.

Passo 3. Configurare il Hook

Scorri verso il basso per trovare il pannello Layout Settings e configura:

Layout → Hook
Action → wp_head
Priority → 10

Importante: Anche se lo script viene iniettato all’interno del <head>,
non verrà eseguito finché il DOM non sarà completamente analizzato — perché lo abbiamo racchiuso in
document.addEventListener('DOMContentLoaded', ...).
Questo garantisce che document.body esista quando viene aggiunta la classe,
e viene eseguito prima di wp_footer, evitando qualsiasi flash di contenuto non stilizzato.

Passo 4. Impostare le condizioni di visualizzazione

Sempre nel pannello Layout Settings, trova Display On e seleziona le pagine
su cui vuoi che appaia la classe body.

Puoi scegliere tra condizioni come:

Specific Page — targetizza una o più pagine individuali per nome
All Pages — si applica a tutte le pagine del sito
Front Page — solo la homepage
Page Template — tutte le pagine che usano un template specifico

Puoi aggiungere più pagine contemporaneamente in un singolo Custom Layout,
il che è molto più efficiente che creare un layout per ogni pagina.

Passo 5. Pubblicare

Una volta configurati hook e condizioni di visualizzazione, clicca su Publish nell’angolo in alto a destra.

Passo 6. Verificare il funzionamento

Visita una delle pagine che hai selezionato in Display On.
Fai clic destro in qualsiasi punto della pagina e seleziona Ispeziona (o premi F12).
Nella scheda Elements, trova il tag <body>.
Conferma che la tua classe personalizzata appaia nell’elenco delle classi:

<body class="home page-template-default ... special-page">

Nota: Non usare Visualizza sorgente pagina per verificare —
mostra l’HTML grezzo prima dell’esecuzione di JavaScript, quindi la classe non apparirà lì.
Usa sempre Ispeziona elemento per vedere il DOM live dopo l’esecuzione di JavaScript.

Utilizzalo nel tuo CSS

Ora puoi targetizzare quelle pagine specificamente nel tuo CSS:

/* Si applica solo alle pagine con la classe body special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Aggiungilo in Aspetto → Personalizza → CSS aggiuntivo o nel foglio di stile del tuo tema figlio.

Risoluzione dei problemi

La classe non appare? Assicurati di verificare con Ispeziona elemento, non con Visualizza sorgente.
Non funziona ancora? Svuota la cache del browser e dei plugin di caching del sito, poi ricarica.
Usi Cloudflare? Svuota anche la cache di Cloudflare per quella pagina.
La classe appare sulle pagine sbagliate? Ricontrolla le condizioni Display On nel Custom Layout.

Conclusione

Ora hai un modo semplice e affidabile per aggiungere una classe body personalizzata a pagine specifiche di WordPress
usando Astra Pro — senza toccare functions.php né creare template di pagina personalizzati.

Riepilogo del processo:
Custom Layouts → Frammento JavaScript → Hook wp_head → Condizioni di visualizzazione → Classe body personalizzata ✅

Questo approccio è particolarmente utile quando devi applicare stili unici a un gruppo di pagine
senza influenzare il resto del sito. Pulito, mirato e facile da gestire.