Un pulsante “Copia codice” rende più semplice utilizzare gli snippet pubblicati in un articolo WordPress. Con un breve script JavaScript puoi aggiungere il comando a ogni blocco di codice, copiare il contenuto negli appunti e mostrare un messaggio di conferma senza ricaricare la pagina. La soluzione funziona con i blocchi Codice dell’editor Gutenberg e può essere adattata anche a markup HTML personalizzato. Il tutorial utilizza un file JavaScript separato, il caricamento corretto tramite WordPress e un messaggio accessibile per informare il lettore dell’avvenuta copia.

Come funziona il pulsante per copiare il codice in WordPress

La soluzione individua i blocchi HTML che contengono la classe wp-block-code, inserisce un pulsante e legge il testo contenuto nell’elemento code. Il codice viene copiato tramite l’API JavaScript navigator.clipboard, mentre un metodo alternativo consente di mantenere la compatibilità con browser o contesti nei quali l’API moderna non è disponibile.

Il pulsante non modifica lo snippet pubblicato: aggiunge soltanto un controllo visibile accanto al blocco. Dopo una copia riuscita, il testo del pulsante cambia temporaneamente e compare un messaggio di conferma come “Codice copiato negli appunti”.

La procedura richiede:

Un sito WordPress con accesso ai file del tema child o a un plugin personalizzato.
Almeno un blocco Codice inserito con l’editor Gutenberg.
Un sito servito tramite HTTPS per utilizzare normalmente la Clipboard API.
La possibilità di aggiungere codice PHP, JavaScript e CSS senza modificare il tema principale.

È preferibile inserire lo script in un tema child o in un piccolo plugin, invece di incollarlo direttamente nell’editor degli articoli. In questo modo il pulsante copia codice WordPress JavaScript rimane separato dai contenuti e non viene perso quando si cambia tema.

Come preparare i blocchi di codice nell’editor WordPress

Passo 1: inserire un blocco Codice

Apri l’articolo nell’editor WordPress e aggiungi il blocco Codice. Incolla lo snippet nel blocco e pubblica o aggiorna l’articolo. Gutenberg genera normalmente una struttura simile a questa:

<pre class="wp-block-code"><code>console.log('Esempio');</code></pre>

Lo script utilizzerà proprio la classe wp-block-code, già presente nei blocchi Codice standard. Non è quindi necessario aggiungere manualmente un pulsante dentro ogni articolo.

Se utilizzi un blocco HTML personalizzato o un plugin che produce una struttura diversa, puoi aggiungere la classe wp-block-code all’elemento pre. L’elemento code deve contenere il testo effettivamente copiabile.

Passo 2: creare il file JavaScript

Nel tema child crea una cartella chiamata js, se non esiste già, e al suo interno crea il file copy-code.js. Inserisci questo codice:

document.addEventListener('DOMContentLoaded', function () {
const codeBlocks = document.querySelectorAll('pre.wp-block-code');

codeBlocks.forEach(function (block) {
if (block.querySelector('.copy-code-button')) {
return;
}

const codeElement = block.querySelector('code');

if (!codeElement) {
return;
}

const wrapper = document.createElement('div');
wrapper.className = 'copy-code-controls';

const button = document.createElement('button');
button.type = 'button';
button.className = 'copy-code-button';
button.textContent = 'Copia codice';
button.setAttribute('aria-label', 'Copia il codice negli appunti');

const status = document.createElement('span');
status.className = 'copy-code-status';
status.setAttribute('role', 'status');
status.setAttribute('aria-live', 'polite');

wrapper.appendChild(button);
wrapper.appendChild(status);
block.appendChild(wrapper);

button.addEventListener('click', async function () {
const code = codeElement.textContent;

try {
await copyText(code);
button.textContent = 'Copiato';
status.textContent = 'Codice copiato negli appunti';

setTimeout(function () {
button.textContent = 'Copia codice';
status.textContent = '';
}, 2000);
} catch (error) {
status.textContent = 'Copia non riuscita. Seleziona il codice manualmente.';
}
});
});

async function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
return;
}

const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';

document.body.appendChild(textarea);
textarea.select();

const copied = document.execCommand('copy');
document.body.removeChild(textarea);

if (!copied) {
throw new Error('Copia non riuscita');
}
}
});

Lo script usa textContent e quindi copia il testo dello snippet senza i tag HTML eventualmente utilizzati per evidenziare la sintassi. Il messaggio viene inserito in un elemento con aria-live, così i lettori che usano tecnologie assistive possono ricevere la conferma.

Passo 3: caricare lo script tramite WordPress

Apri il file functions.php del tema child e aggiungi il seguente codice:

function backdigit_copy_code_script() {
$script_path = get_stylesheet_directory() . '/js/copy-code.js';

wp_enqueue_script(
'backdigit-copy-code',
get_stylesheet_directory_uri() . '/js/copy-code.js',
array(),
file_exists($script_path) ? filemtime($script_path) : null,
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_copy_code_script');

get_stylesheet_directory_uri() carica il file dal tema child attivo, mentre filemtime() aggiorna automaticamente la versione dello script quando il file viene modificato. Il parametro true chiede a WordPress di caricare JavaScript nel piè di pagina, riducendo l’impatto sul caricamento iniziale della pagina.

Se il codice viene inserito nel tema principale, devi sostituire le funzioni del tema child con get_template_directory() e get_template_directory_uri(). La modifica al tema principale può però essere sovrascritta da un aggiornamento.

Come aggiungere lo stile al pulsante di copia

Per rendere leggibile il controllo, apri Aspetto > Personalizza > CSS aggiuntivo oppure il pannello degli stili del tema a blocchi. Incolla queste regole:

.wp-block-code {
position: relative;
padding-top: 3.5rem;
}

.copy-code-controls {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
}

.copy-code-button {
border: 1px solid currentColor;
border-radius: 4px;
padding: 0.45rem 0.75rem;
background: #ffffff;
color: #1f2937;
cursor: pointer;
font-size: 0.875rem;
}

.copy-code-button:hover,
.copy-code-button:focus-visible {
background: #1f2937;
color: #ffffff;
}

.copy-code-status {
font-size: 0.8rem;
color: #166534;
}

Il padding superiore evita che il pulsante copra le prime righe dello snippet. Il selettore :focus-visible mantiene un indicatore chiaro quando il pulsante viene raggiunto con la tastiera.

Su blocchi con sfondo scuro puoi modificare i colori di .copy-code-button. È importante mantenere un contrasto sufficiente tra testo e sfondo, soprattutto per il messaggio di conferma.

Come verificare la copia del codice

Apri la pagina pubblicata in Google Chrome, Mozilla Firefox, Microsoft Edge o Safari e premi il pulsante Copia codice. Il testo del pulsante deve cambiare in “Copiato” e il messaggio “Codice copiato negli appunti” deve comparire accanto al controllo.

Incolla il risultato in un editor di testo per verificare che siano state mantenute interruzioni di riga, spazi e indentazione. Il codice utilizza il contenuto testuale del blocco, quindi eventuali elementi decorativi o pulsanti interni non vengono copiati.

Se il pulsante non compare, controlla che il markup contenga pre.wp-block-code e che il file JavaScript sia raggiungibile dal browser. La cache di WordPress, del tema o di un CDN può mostrare una versione precedente del file: svuota la cache e ricarica la pagina.

Se compare il pulsante ma la copia non funziona, verifica che il sito utilizzi HTTPS. La Clipboard API richiede normalmente un contesto sicuro; il fallback incluso nello script può aiutare, ma alcuni browser ne limitano l’utilizzo.

Per evitare pulsanti duplicati, lo script controlla la presenza della classe .copy-code-button prima di aggiungere i controlli. Questa verifica è utile anche quando un plugin modifica il contenuto della pagina dopo il caricamento iniziale.

La copia codice WordPress JavaScript diventa così un elemento riutilizzabile per tutti gli snippet pubblicati, senza inserire manualmente lo stesso pulsante in ogni articolo.

Potrebbe interessarti anche:

FAQ

Funziona direttamente con i blocchi Codice Gutenberg che producono pre.wp-block-code. Per altri plugin o markup personalizzati può essere necessario modificare il selettore JavaScript.

Controlla che il file copy-code.js sia caricato e che il blocco contenga la classe wp-block-code. Svuota anche la cache del sito e del browser.

HTTPS è richiesto normalmente dalla Clipboard API di JavaScript. Lo script include un fallback, ma i browser possono limitarne il funzionamento su pagine non sicure.

Sì. Il messaggio usa role="status" e aria-live="polite", attributi che permettono alle tecnologie assistive di annunciare l’esito della copia.

Sì, puoi inserirlo in un plugin personalizzato o in un plugin che consenta di aggiungere JavaScript e CSS, evitando modifiche ai file del tema principale.

Altri articoli di questa serie: