Un pulsante “Copia codice” permette ai lettori di trasferire uno snippet negli appunti senza selezionarlo manualmente. In WordPress puoi realizzarlo con HTML, JavaScript e poche regole CSS, senza installare un’estensione aggiuntiva. Il pulsante copia codice WordPress JavaScript deve però comunicare chiaramente l’esito dell’operazione, funzionare con la tastiera e non basarsi soltanto sul colore. Il metodo seguente usa l’API Clipboard, un messaggio aria-live e file caricati correttamente dal tema, preferibilmente da un tema child.

Struttura HTML del blocco di codice

Il markup deve separare il codice da copiare dal pulsante che avvia l’azione. Il contenitore .blocco-codice permette al JavaScript di individuare soltanto il blocco interessato, anche quando nella stessa pagina sono presenti più snippet.

Nel pannello di WordPress aggiungi un blocco HTML personalizzato e incolla una struttura simile:

<div class="blocco-codice">
<div class="intestazione-codice">
<span>JavaScript</span>
<button type="button" class="pulsante-copia" aria-label="Copia il codice negli appunti">
Copia codice
</button>
</div>

<pre><code class="linguaggio-javascript">const messaggio = "Ciao, WordPress!";
console.log(messaggio);</code></pre>

<p class="stato-copia" aria-live="polite"></p>
</div>

L’elemento button è preferibile a un link perché rappresenta correttamente un’azione. L’attributo type="button" impedisce l’invio accidentale di un modulo quando il blocco viene inserito all’interno di un form.

Il testo da copiare viene letto da code.textContent, non da innerHTML. Questa scelta evita di copiare i tag HTML eventualmente aggiunti da un sistema di evidenziazione della sintassi. La classe linguaggio-javascript è facoltativa e può essere sostituita con linguaggio-php, linguaggio-css o un’altra convenzione usata dal tema.

Come aggiungere il JavaScript nel tema WordPress

Il file JavaScript va caricato tramite wp_enqueue_script(), invece di essere inserito direttamente nell’editor o nel file header.php. La posizione consigliata è un tema child, così gli aggiornamenti del tema principale non cancellano le modifiche personalizzate.

Crea il file copia-codice.js nella cartella:

/wp-content/themes/tema-child/assets/js/copia-codice.js

Inserisci quindi questo codice nel file functions.php del tema child:

<?php
function backdigit_carica_script_copia_codice() {
wp_enqueue_script(
'backdigit-copia-codice',
get_stylesheet_directory_uri() . '/assets/js/copia-codice.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_script_copia_codice');

get_stylesheet_directory_uri() punta al tema attivo, quindi funziona correttamente anche quando il tema attivo è un child theme. Il parametro true carica lo script nel footer, dopo il contenuto HTML, ma il codice usa comunque DOMContentLoaded per gestire anche eventuali variazioni del caricamento della pagina.

Nel file copia-codice.js inserisci:

document.addEventListener("DOMContentLoaded", function () {
const blocchi = document.querySelectorAll(".blocco-codice");

blocchi.forEach(function (blocco) {
const pulsante = blocco.querySelector(".pulsante-copia");
const codice = blocco.querySelector("code");
const stato = blocco.querySelector(".stato-copia");

if (!pulsante || !codice || !stato) {
return;
}

pulsante.addEventListener("click", async function () {
const testoDaCopiare = codice.textContent.trim();
const etichettaOriginale = pulsante.textContent;

if (!testoDaCopiare) {
stato.textContent = "Non c'è codice da copiare.";
return;
}

try {
await navigator.clipboard.writeText(testoDaCopiare);

pulsante.textContent = "Copiato";
stato.textContent = "Codice copiato negli appunti.";
pulsante.classList.add("copia-eseguita");

window.setTimeout(function () {
pulsante.textContent = etichettaOriginale;
pulsante.classList.remove("copia-eseguita");
stato.textContent = "";
}, 2500);
} catch (errore) {
stato.textContent = "Copia non riuscita. Seleziona il codice manualmente.";
}
});
});
});

L’API navigator.clipboard.writeText() richiede normalmente una connessione HTTPS; localhost è considerato un contesto sicuro per lo sviluppo. Se il sito viene aperto tramite HTTP non protetto, il browser può rifiutare l’accesso agli appunti per motivi di sicurezza.

Il messaggio viene inserito in un elemento con aria-live="polite", così i lettori che utilizzano uno screen reader ricevono l’esito senza perdere il punto di navigazione. Il focus rimane sul pulsante e non viene spostato manualmente dopo il clic.

Stile CSS per un feedback visivo accessibile

Il feedback non deve dipendere soltanto dal cambio di colore. Il testo del pulsante passa da “Copia codice” a “Copiato”, mentre il messaggio in aria-live comunica lo stesso risultato alle tecnologie assistive.

Aggiungi questo CSS nel personalizzatore di WordPress, nel file style.css del tema child oppure nel foglio di stile del progetto:

.blocco-codice {
margin: 1.5rem 0;
border: 1px solid #d9dee5;
border-radius: 8px;
overflow: hidden;
background: #f7f8fa;
}

.intestazione-codice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
background: #e9edf2;
}

.pulsante-copia {
padding: 0.55rem 0.85rem;
border: 2px solid #1d4ed8;
border-radius: 5px;
color: #ffffff;
background: #1d4ed8;
cursor: pointer;
font: inherit;
}

.pulsante-copia:hover,
.pulsante-copia.copia-eseguita {
background: #166534;
border-color: #166534;
}

.pulsante-copia:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}

.blocco-codice pre {
margin: 0;
padding: 1rem;
overflow-x: auto;
}

.stato-copia {
min-height: 1.5em;
margin: 0;
padding: 0 1rem 0.75rem;
color: #166534;
}

min-height: 1.5em evita che la comparsa del messaggio modifichi bruscamente l’altezza del blocco. La regola :focus-visible rende evidente la posizione del cursore per chi naviga con la tastiera senza aggiungere un contorno permanente agli utenti che fanno clic con il mouse.

Il contrasto tra testo e sfondo deve essere verificato anche dopo eventuali personalizzazioni del tema. Il pulsante deve restare leggibile in modalità ad alto contrasto e quando l’utente aumenta la dimensione dei caratteri.

Verifiche prima della pubblicazione

Il pulsante copia codice WordPress JavaScript va testato su ogni pagina in cui viene utilizzato, perché plugin di cache, sistemi di minificazione e strumenti di evidenziazione possono modificare il markup o l’ordine di caricamento degli script.

Controlla in particolare questi aspetti:

Il clic copia il testo senza i tag HTML e senza l’etichetta del linguaggio.
La tastiera raggiunge il pulsante con il tasto Tab e il tasto Invio lo attiva.
Il messaggio “Codice copiato negli appunti” compare anche senza affidarsi al solo colore.
La pagina usa HTTPS, requisito normalmente necessario per navigator.clipboard.
Più blocchi nella stessa pagina funzionano indipendentemente.
Un blocco privo di codice non genera errori JavaScript visibili nella console.
Il pulsante resta utilizzabile su schermi piccoli, anche con righe di codice molto lunghe.

Se il tema usa già classi come .wp-block-code, puoi mantenere il blocco Codice di Gutenberg e aggiungere il pulsante con un contenitore personalizzato, ma devi verificare il markup generato dal tema. Il selettore JavaScript deve sempre puntare all’elemento code che contiene realmente lo snippet.

Quando il sito utilizza una politica CSP restrittiva, l’API Clipboard può richiedere autorizzazioni aggiuntive configurate dal server. In assenza di HTTPS o di permessi compatibili, il messaggio di errore previsto dallo script invita l’utente a selezionare il codice manualmente invece di simulare una copia riuscita.

Il pulsante copia codice WordPress JavaScript diventa affidabile quando markup semantico, API Clipboard e feedback accessibile lavorano insieme.

Potrebbe interessarti anche:

FAQ

Funziona nelle pagine in cui sono presenti il markup .blocco-codice e lo script caricato dal tema. Ogni blocco viene gestito separatamente.

L’API Clipboard richiede generalmente HTTPS o un contesto sicuro come localhost. Su HTTP il browser può bloccare l’operazione.

Sì, ma un aggiornamento del tema può sovrascrivere functions.php, il file JavaScript o gli stili. Un tema child o un plugin personalizzato è più sicuro.

Sì, se il messaggio viene inserito nell’elemento con aria-live="polite". Il testo del pulsante cambia inoltre da “Copia codice” a “Copiato”.

Sì, ma devi adattare i selettori al markup effettivamente prodotto dal tema o dal plugin di evidenziazione della sintassi.

Altri articoli di questa serie: