Come aggiungere il pulsante Copia Codice negli articoli WordPress senza plugin

Aggiungere il pulsante Copia Codice negli articoli WordPress senza plugin è una delle personalizzazioni più utili per blog tecnici, siti di programmazione e guide dedicate a WordPress, Linux, Windows o sviluppo web.

Quando un visitatore trova uno snippet PHP, HTML, CSS o JavaScript, spesso deve selezionarlo manualmente con il mouse per copiarlo. Questo non solo è scomodo, ma aumenta anche il rischio di errori durante la selezione del codice.

Per questo motivo molti siti professionali mostrano un pulsante Copia direttamente sopra i blocchi di codice.

La buona notizia è che puoi farlo senza installare plugin aggiuntivi, mantenendo WordPress più leggero e veloce.

Perché evitare un plugin per questa funzione

Molti plugin dedicati ai blocchi di codice aggiungono:

• file CSS aggiuntivi
• librerie JavaScript
• richieste HTTP extra
• funzionalità inutilizzate

Se il tuo obiettivo è ottimizzare WordPress, spesso uno snippet personalizzato è la scelta migliore.

Un semplice script può aggiungere il pulsante copia a tutti i blocchi <pre> del sito senza impattare sulle prestazioni.

Come funziona il pulsante Copia Codice

Il principio è semplice.

Quando l’utente preme il pulsante:

Copia

JavaScript legge automaticamente il contenuto del blocco di codice e lo salva negli appunti tramite le API moderne del browser.

Successivamente il pulsante può mostrare un messaggio come:

Copiato!

per confermare l’operazione.

Aggiungere il codice con WPCode

Il metodo più sicuro consiste nell’utilizzare WPCode(download).

Installa il plugin:

WPCode

e vai su:

Code Snippets → Add Snippet → Add Your Custom Code

Seleziona:

JavaScript Snippet

Codice JavaScript

Inserisci questo snippet.

document.addEventListener('DOMContentLoaded', function() {

    document.querySelectorAll('pre').forEach(function(block) {

        const button = document.createElement('button');
        button.innerText = 'Copia';
        button.className = 'bd-copy-btn';

        block.style.position = 'relative';
        block.appendChild(button);

        button.addEventListener('click', function() {

            navigator.clipboard.writeText(
                block.innerText.replace('Copia', '')
            );

            button.innerText = 'Copiato!';

            setTimeout(function() {
                button.innerText = 'Copia';
            }, 2000);

        });

    });

});

Questo script aggiungerà automaticamente un pulsante a tutti i blocchi <pre> presenti negli articoli.

Aggiungere lo stile del pulsante

Per rendere il pulsante più professionale puoi aggiungere questo CSS.

Vai su:

Aspetto → Personalizza → CSS Aggiuntivo

oppure utilizza WPCode.

.bd-copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    background:#2271b1;
    color:#fff;
}

.bd-copy-btn:hover{
    opacity:.9;
}

Compatibilità con Gutenberg

Lo snippet funziona perfettamente con:

• Gutenberg
• blocco Codice
• blocco Preformattato
• editor classico
• temi personalizzati

L’unico requisito è che il codice venga racchiuso nel tag HTML:

<pre>
Codice qui
</pre>

oppure:

<pre><code>
Codice qui
</code></pre>

Chiaramente dentro Gutenberg aggiungiamo il blocco pre

codice esempio

Versione senza plugin

Questo lo inserirei nell’articolo al posto della parte che parla di footer.php.

Metodo 2: aggiungere il pulsante Copia Codice senza plugin tramite functions.php

Se non vuoi installare plugin aggiuntivi puoi utilizzare direttamente il file functions.php del tema o del tema child.

Questo metodo è compatibile con la maggior parte dei temi WordPress moderni e non richiede la presenza del file footer.php.

Vai su:

Aspetto → Editor file tema → functions.php

oppure apri il file tramite:

File Manager del server → wp-content → themes → tuo-tema

e aggiungi il codice seguente alla fine del file.

add_action('wp_footer', function() {
?>
<script>

document.addEventListener('DOMContentLoaded', function() {

    document.querySelectorAll('pre').forEach(function(block) {

        const button = document.createElement('button');
        button.innerText = 'Copia';
        button.className = 'bd-copy-btn';

        block.style.position = 'relative';
        block.appendChild(button);

        button.addEventListener('click', function() {

            navigator.clipboard.writeText(
                block.innerText.replace('Copia', '')
            );

            button.innerText = 'Copiato!';

            setTimeout(function() {
                button.innerText = 'Copia';
            }, 2000);

        });

    });

});

</script>

<style>

.bd-copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    background:#2271b1;
    color:#fff;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    z-index:10;
}

.bd-copy-btn:hover{
    opacity:.9;
}

pre{
    position:relative;
}

</style>
<?php
});

Dopo aver salvato il file, WordPress aggiungerà automaticamente il pulsante Copia a tutti i blocchi di codice presenti negli articoli.

Il vantaggio di questo sistema è che non devi modificare:

• footer.php
• file del tema
• template Gutenberg

e il pulsante verrà generato automaticamente in ogni blocco <pre> del sito.

Se utilizzi un tema che viene aggiornato frequentemente, è comunque consigliabile usare un tema child oppure WPCode per evitare di perdere le modifiche durante gli aggiornamenti.

Miglioramento SEO ed esperienza utente

Anche se il pulsante copia non è un fattore SEO diretto, migliora molto la User Experience.

Gli utenti:

• copiano più facilmente gli snippet
• rimangono più tempo sul sito
• utilizzano realmente il codice pubblicato
• trovano più utili le guide tecniche

Per blog WordPress, Linux e programmazione questo piccolo dettaglio aumenta sensibilmente la qualità percepita del contenuto.

Box rapido