Cómo añadir un botón de «copiar código» en WordPress sin plugins

Si tienes una web o un blog técnico en WordPress donde compartes fragmentos de código, seguro que te has encontrado con un pequeño inconveniente: el bloque de código por defecto del editor de WordPress es funcional, pero no incluye una opción para que los usuarios puedan copiar el contenido con un solo clic.

Esto obliga a los visitantes a seleccionar manualmente todo el texto, un proceso que puede ser tedioso y propenso a errores, especialmente en fragmentos largos o en dispositivos móviles.

Vamos a solucionar esto de una manera limpia, eficiente y, lo mejor de todo, sin necesidad de instalar ningún plugin adicional.

El resultado será un botón funcional y elegante, totalmente personalizable, que mejorará enormemente la experiencia de tus usuarios.

La solución: un único bloque de código

Para lograr nuestro objetivo, utilizaremos un único bloque de código PHP que se encarga de todo: inyectar el JavaScript que crea el botón, añadir los estilos CSS para que se vea bien, y todo ello de una forma segura y optimizada.

<?php
/**
 * Carga el botón de copiar código para los bloques de Gutenberg.
 */
add_action('wp_footer', 'jrb_create_copy_code_button_assets');

function jrb_create_copy_code_button_assets() {
    if ( ! is_singular() ) {
        return;
    }

    $javascript_code = "
    document.addEventListener('DOMContentLoaded', function () {
        const codeBlocks = document.querySelectorAll('.wp-block-code');
        if (codeBlocks.length === 0) {
            return;
        }
        codeBlocks.forEach(function (codeBlock) {
            if (codeBlock.querySelector('.jrb-copy-btn')) { return; }
            const button = document.createElement('button');
            button.className = 'jrb-copy-btn';
            button.type = 'button';
            const initialText = 'Copiar código';
            button.textContent = initialText;
            button.setAttribute('aria-label', initialText);
            codeBlock.appendChild(button);
            button.addEventListener('click', function () {
                const codeToCopy = codeBlock.querySelector('code').innerText;
                navigator.clipboard.writeText(codeToCopy).then(() => {
                    button.textContent = '¡Copiado!';
                    setTimeout(() => { button.textContent = initialText; }, 3000);
                });
            });
        });
    });
    ";

    $css_code = "
    .wp-block-code {
        position: relative;
        padding: 1.25em 1.5em !important;
    }
    .wp-block-code pre {
        padding-right: 110px !important;
    }
    .jrb-copy-btn {
        position: absolute;
        top: 2.5em;
        right: 2.7em;
        padding: 6px 12px;
        background: #ffffff;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .jrb-copy-btn:hover {
        background: #f5f5f5;
        border-color: #ccc;
    }
    .jrb-copy-btn.copied {
        background-color: #28a745;
        border-color: #28a745;
        color: #ffffff;
    }
    ";

    wp_register_script('jrb-copy-code-handle', false);
    wp_enqueue_script('jrb-copy-code-handle');
    wp_add_inline_script('jrb-copy-code-handle', $javascript_code);

    wp_register_style('jrb-copy-code-style-handle', false);
    wp_enqueue_style('jrb-copy-code-style-handle');
    wp_add_inline_style('jrb-copy-code-style-handle', $css_code);
}Lenguaje del código: PHP (php)

Explicación del código: ¿qué hace?

Me gusta que entiendas qué hace cada parte del código que añades a tu web. A continuación, lo desgloso:

• add_action('wp_footer', ...): Engancho la función al hook wp_footer. Esto hace que el código se ejecute de forma segura al final de la carga de la página, garantizando que todo el contenido ya está presente y que WordPress ha cargado todas sus funciones.
• if ( ! is_singular() ): Esta es una comprobación de rendimiento. Con esta línea le indico a WordPress que solo ejecute este código en páginas individuales (entradas, páginas, etc.) y no en el blog, archivos de categorías o la página de inicio.
• La variable $javascript_code: Aquí defino toda la lógica del botón. El script busca todos los bloques de código (.wp-block-code), crea un botón, lo añade a cada bloque y le asigna la funcionalidad de copiar el contenido del bloque al portapapeles usando la API nativa del navegador (navigator.clipboard). También se encarga del feedback visual, cambiando el texto a «¡Copiado!» durante 3 segundos.
• La variable $css_code: Contiene todos los estilos para posicionar el botón en la esquina superior derecha y darle un aspecto limpio y profesional. También define los estilos para los estados :hover (cuando pasas el ratón por encima) y .copied (cuando el texto ha sido copiado).
• wp_register_... y wp_add_inline_...: Esta es la forma correcta y profesional en WordPress de inyectar código JavaScript y CSS en una página. Se crea un «manejador» o handle vacío al que se le adjunta nuestro código. Esto lo hace independiente de otros scripts como jQuery y asegura que funcionará en cualquier tema.

Personaliza tu botón

Lo mejor de esta solución es que tienes control total. Si quieres cambiar el diseño o el comportamiento:

• Para cambiar los colores, la posición o el tamaño del botón, simplemente modifica las reglas en la variable $css_code.
• Para cambiar el tiempo que se muestra el mensaje «¡Copiado!», busca la línea del setTimeout en la variable $javascript_code y cambia el valor 3000 (en milisegundos) por el que prefieras.

¿Dónde añado este código?

Tienes tres opciones principales:

1. En el archivo functions.php de tu tema hijo: Esta es la práctica recomendada por WordPress. Usar un tema hijo (child theme) asegura que tus modificaciones no se perderán cuando el tema principal se actualice.
2. Creando tu propio plugin de funcionalidades: Esta es la solución más avanzada y robusta. Consiste en crear un pequeño plugin personal donde alojar todas tus funciones. La gran ventaja es que el código es totalmente independiente del tema que uses; podrás cambiar de tema sin perder nunca tus personalizaciones. Si te interesa este método, en este tutorial te explico paso a paso cómo crear tu propio plugin de funciones.
3. Usando un plugin de fragmentos de código: Si no usas un tema hijo o prefieres tener tus personalizaciones separadas y gestionadas desde el panel de WordPress, puedes usar un plugin como Code Snippets o Advanced Scripts. Simplemente crea un nuevo fragmento de tipo PHP y pega el código allí.