Per evidenziare codice WordPress CSS durante lo scorrimento serve una combinazione di CSS e JavaScript: il CSS definisce l’aspetto del blocco attivo, mentre JavaScript rileva quale elemento si trova nella zona centrale della finestra. La soluzione funziona con i blocchi Codice dell’editor Gutenberg e aggiunge una classe CSS soltanto al blocco visualizzato in quel momento. In questo modo una pagina con molti esempi diventa più leggibile, senza modificare il contenuto del codice e senza installare un’estensione dedicata. L’implementazione usa IntersectionObserver, una funzione integrata nei browser moderni.

Come preparare i blocchi di codice in WordPress

L’editor Gutenberg genera normalmente i blocchi Codice con l’elemento HTML pre e la classe wp-block-code. Per applicare l’effetto in modo prevedibile, è consigliabile assegnare una classe comune a tutti i blocchi che devono partecipare all’evidenziazione.

Passo 1: aggiungere una classe ai blocchi Codice

Apri l’articolo o la pagina nell’editor di WordPress e seleziona un blocco Codice. Nel pannello laterale destro apri la sezione Avanzate, quindi inserisci codice-scroll nel campo Classe CSS aggiuntiva. Ripeti l’operazione per ogni blocco di codice da evidenziare.

Il risultato HTML sarà simile a questo:

<pre class="wp-block-code codice-scroll"><code>body {
color: #222;
}</code></pre>

La classe codice-scroll limita lo script ai blocchi scelti, evitando che vengano modificati eventuali blocchi di codice usati in altre parti del sito.

Passo 2: controllare la struttura del tema

Il metodo funziona se il tema conserva la struttura standard dei blocchi Gutenberg. Un tema può usare markup personalizzato, quindi verifica con gli strumenti per sviluppatori del browser che il blocco contenga effettivamente un elemento pre con la classe codice-scroll.

La classe wp-block-code identifica il blocco Codice standard di WordPress, mentre codice-scroll è la classe personalizzata utilizzata da CSS e JavaScript.

Come creare lo stile CSS del blocco attivo

Il CSS seguente può essere inserito in Aspetto > Personalizza > CSS aggiuntivo nei temi che mantengono il Personalizzatore. Nei temi a blocchi, il percorso può essere Aspetto > Editor > Stili > CSS aggiuntivo, se il tema e la versione di WordPress rendono disponibile questa voce.

Il codice applica un bordo laterale, uno sfondo leggermente diverso e un’ombra al blocco attivo. L’effetto iniziale resta discreto, così la pagina non evidenzia tutti i blocchi contemporaneamente.

.codice-scroll {
--codice-colore-bordo: #d7dce2;
--codice-colore-sfondo: #f6f8fa;
--codice-colore-attivo: #2271b1;

position: relative;
margin-block: 1.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--codice-colore-bordo);
border-left: 4px solid var(--codice-colore-bordo);
border-radius: 6px;
background: var(--codice-colore-sfondo);
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}

.codice-scroll.is-codice-attivo {
border-left-color: var(--codice-colore-attivo);
background-color: #ffffff;
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
transform: translateX(3px);
}

.codice-scroll code {
color: inherit;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
.codice-scroll {
transition: none;
}

.codice-scroll.is-codice-attivo {
transform: none;
}
}

La classe is-codice-attivo non deve essere aggiunta manualmente nell’editor. JavaScript la inserirà quando il blocco raggiunge la posizione stabilita nella finestra del browser e la rimuoverà quando un altro blocco diventa attivo.

Il selettore prefers-reduced-motion riduce gli effetti animati per gli utenti che hanno disattivato le animazioni nelle impostazioni del sistema operativo. Questa regola non elimina l’evidenziazione, ma evita lo spostamento orizzontale del blocco.

Come attivare automaticamente il blocco durante lo scorrimento

IntersectionObserver permette di controllare quando un elemento entra in una determinata area della finestra senza ascoltare continuamente l’evento scroll. In questo caso l’area utile viene ridotta alla fascia centrale dello schermo: il blocco più vicino a quella zona riceve la classe attiva.

Passo 3: creare il file JavaScript

Nel tema child crea il file codice-scroll.js nella cartella assets/js/. Inserisci questo codice:

document.addEventListener('DOMContentLoaded', () => {
const blocchi = document.querySelectorAll('.codice-scroll');

if (!blocchi.length) {
return;
}

const osservatore = new IntersectionObserver(
(elementi) => {
elementi.forEach((elemento) => {
elemento.target.classList.toggle(
'is-codice-attivo',
elemento.isIntersecting
);
});
},
{
root: null,
rootMargin: '-38% 0px -38% 0px',
threshold: 0
}
);

blocchi.forEach((blocco) => {
osservatore.observe(blocco);
});
});

Con rootMargin: '-38% 0px -38% 0px', l’osservatore considera attiva una fascia centrale pari a circa il 24% dell’altezza della finestra. Se due blocchi sono contemporaneamente dentro questa fascia, entrambi possono ricevere la classe per un breve intervallo.

Per mantenere una sola evidenziazione attiva anche quando due blocchi si sovrappongono nella fascia centrale, usa questa variante più selettiva:

document.addEventListener('DOMContentLoaded', () => {
const blocchi = [...document.querySelectorAll('.codice-scroll')];

if (!blocchi.length) {
return;
}

const aggiornaBloccoAttivo = () => {
const centroFinestra = window.innerHeight / 2;
let bloccoAttivo = null;
let distanzaMinima = Number.POSITIVE_INFINITY;

blocchi.forEach((blocco) => {
const rettangolo = blocco.getBoundingClientRect();

if (
rettangolo.bottom > 0 &&
rettangolo.top < window.innerHeight
) {
const centroBlocco = rettangolo.top + rettangolo.height / 2;
const distanza = Math.abs(centroBlocco - centroFinestra);

if (distanza < distanzaMinima) {
distanzaMinima = distanza;
bloccoAttivo = blocco;
}
}
});

blocchi.forEach((blocco) => {
blocco.classList.toggle(
'is-codice-attivo',
blocco === bloccoAttivo
);
});
};

let animazioneRichiesta = false;

window.addEventListener(
'scroll',
() => {
if (!animazioneRichiesta) {
window.requestAnimationFrame(() => {
aggiornaBloccoAttivo();
animazioneRichiesta = false;
});

animazioneRichiesta = true;
}
},
{ passive: true }
);

window.addEventListener('resize', aggiornaBloccoAttivo);
aggiornaBloccoAttivo();
});

La seconda variante sceglie sempre il blocco il cui centro è più vicino al centro della finestra. requestAnimationFrame limita gli aggiornamenti durante lo scorrimento e riduce il rischio di appesantire la pagina con molti esempi di codice.

Passo 4: caricare lo script nel tema child

Apri il file functions.php del tema child e aggiungi il caricamento del file JavaScript. Il file viene caricato nel piè di pagina e soltanto sul front-end del sito.

<?php
function backdigit_carica_codice_scroll() {
if (is_admin()) {
return;
}

wp_enqueue_script(
'backdigit-codice-scroll',
get_stylesheet_directory_uri() . '/assets/js/codice-scroll.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_codice_scroll');

Il parametro true richiede a WordPress di caricare lo script nel footer, dopo il contenuto HTML principale. La funzione get_stylesheet_directory_uri() punta alla directory del tema child, quindi il file non viene perso quando il tema principale riceve un aggiornamento.

Se il tema child usa già un sistema di caricamento degli asset, inserisci il file JavaScript nella funzione esistente invece di duplicare l’hook wp_enqueue_scripts.

Come verificare il risultato e risolvere i problemi

Dopo aver salvato CSS, JavaScript e functions.php, svuota la cache di WordPress, del plugin di ottimizzazione e del browser. Apri una pagina con almeno tre blocchi contrassegnati dalla classe codice-scroll, quindi scorri lentamente: il blocco più vicino al centro della finestra dovrebbe mostrare il bordo blu e l’ombra.

Se nessun blocco cambia aspetto, controlla questi elementi:

La classe codice-scroll deve essere inserita nel campo Classe CSS aggiuntiva senza il punto iniziale.
Il file codice-scroll.js deve trovarsi davvero in assets/js/ del tema child.
Il percorso registrato in get_stylesheet_directory_uri() deve corrispondere alla posizione del file.
Il browser non deve mostrare errori JavaScript nella scheda Console degli strumenti per sviluppatori.
Il CSS del tema non deve sovrascrivere border-left-color, background-color o box-shadow.

Il codice evidenzia soltanto i blocchi presenti nella pagina al momento del caricamento. Se un plugin inserisce blocchi di codice dopo il caricamento tramite AJAX, quei nuovi elementi richiedono un’inizializzazione aggiuntiva dell’osservatore.

Per un contrasto più evidente puoi sostituire #2271b1 con un colore coerente con il tema, mantenendo comunque un rapporto di contrasto leggibile tra testo, sfondo e bordo. Il meccanismo per evidenziare codice WordPress CSS resta invariato anche cambiando colori, spaziature e intensità dell’ombra.

Potrebbe interessarti anche:

FAQ

Il CSS può essere inserito nel Personalizzatore, ma il JavaScript e il codice PHP è preferibile aggiungerli tramite un tema child o un plugin per snippet affidabile, così gli aggiornamenti del tema non cancellano le modifiche.

Sì, purché ai blocchi venga aggiunta la classe CSS codice-scroll e il tema conservi l’elemento HTML pre generato da Gutenberg.

Con IntersectionObserver due blocchi possono trovarsi nello stesso momento nella fascia osservata. La seconda variante JavaScript sceglie invece un solo blocco in base alla distanza dal centro della finestra.

Sì. Nella prima variante puoi modificare rootMargin; nella seconda variante puoi sostituire window.innerHeight / 2 con un’altra posizione verticale.

No. CSS e JavaScript aggiungono soltanto una classe al contenitore del blocco e non cambiano il testo, la formattazione o il contenuto dell’esempio.

Altri articoli di questa serie: