Tutorial WordPress: Hacer botones de “Copiar código” con HTML y CSS (sin JS, truco CSS)

Introducción: ¿es posible un botón Copiar código sin JavaScript?

Resumen: técnicamente no existe una forma estándar y universal para copiar texto al portapapeles con solo HTML y CSS. El método seguro y automático requiere JavaScript (Clipboard API). Sin embargo, con un truco CSS/HTML se puede mejorar mucho la experiencia: crear botones que enfaticen y enfoquen el bloque de código para que el usuario solo tenga que pulsar Ctrl/Cmd C. Este artículo explica cómo implementar dicho botón Copiar código en WordPress sin JavaScript, cómo integrarlo en tu tema o en un bloque HTML del editor, y qué alternativas usar cuando quieras copia automática (con JS).

Concepto y principios

Qué hace el truco CSS:

Usa un control de formulario (por ejemplo, textarea o input) que se puede enfocar con HTML (etiqueta label con atributo for o control con tabindex).
Al hacer clic en la etiqueta que actúa como botón, el navegador enfoca el campo que contiene el código, facilitando la copia por teclado (Ctrl/Cmd C) o mediante el menú contextual.
Se usan estilos CSS para ocultar scroll innecesario, mostrar el botón sobre el bloque, y presentar un aviso accesible (“Pulsa Ctrl/Cmd C”).

Limitación clave: no se realiza la copia al portapapeles automáticamente. Sólo se mejora la accesibilidad y la rapidez para que el usuario copie manualmente.

Dónde colocar el HTML y CSS en WordPress

HTML: en un bloque HTML personalizado (Gutenberg: Bloque HTML personalizado) o en la edición de entrada en modo Texto. Si usas un page builder, usa su widget de HTML.
CSS: en Personalizar → CSS adicional o en el archivo style.css de tu tema hijo. También puedes añadirlo mediante enqueue en functions.php si prefieres.
Evita el editor visual que a veces limpia etiquetas el bloque HTML personalizado es el más fiable.

Ejemplo completo (HTML CSS) — método CSS-only para facilitar la copia manual

Este ejemplo crea un bloque de código con un botón Copiar que, al pulsarlo, enfoca la textarea con el código. El usuario solo necesita pulsar Ctrl/Cmd C. Puedes pegar el HTML en un bloque HTML personalizado y el CSS en CSS adicional.

HTML (pega en un bloque HTML personalizado)



  Copiar
  lt?php
// Ejemplo de snippet PHP
function ejemplo_saludo() {
    echo Hola desde el snippet!
}
?gt
  
  Pulsa Ctrl/Cmd C para copiar

CSS (pega en Apariencia → Personalizar → CSS adicional)

/ Estilos para el bloque de código y botón copiar (sin JS) /
.code-wrapper {
  position: relative
  max-width: 900px
  margin: 1em 0
  font-family: Menlo, Monaco, Courier New, monospace
}

.code-area {
  width: 100%
  box-sizing: border-box
  padding: 0.9rem 1rem
  font-size: 0.95rem
  line-height: 1.45
  background: #0e1012
  color: #e6eef3
  border-radius: 6px
  border: 1px solid rgba(255,255,255,0.06)
  resize: vertical
  overflow: auto
  white-space: pre
}

/ Botón que en realidad es una label asociada al textarea /
.copy-btn {
  position: absolute
  right: 10px
  top: -10px
  background: linear-gradient(180deg,#2a2f33,#212427)
  color: #fff
  padding: .35rem .6rem
  border-radius: 6px
  font-size: .85rem
  cursor: pointer
  border: 1px solid rgba(255,255,255,0.06)
  box-shadow: 0 2px 6px rgba(0,0,0,0.25)
  user-select: none
}

/ Efecto foco visible al hacer clic en el label (el browser pone foco en la textarea) /
.code-area:focus {
  outline: 3px solid rgba(90,160,255,0.16)
  box-shadow: 0 0 0 4px rgba(90,160,255,0.06)
}

/ Pista que aparece siempre (puede ocultarse en móviles si quieres) /
.copy-hint {
  margin-top: .4rem
  font-size: .8rem
  color: #6d7880
}

/ Ajustes responsivos /
@media (max-width: 480px) {
  .copy-btn { right: 6px top: -12px padding: .25rem .45rem font-size:.8rem }
  .copy-hint { font-size:.75rem }
}

Cómo funciona en la práctica (pasos para el usuario)

El lector hace clic en el botón “Copiar” (la etiqueta ltlabelgt asociada al textarea).
El navegador pone el foco en la textarea que contiene el código.
El lector pulsa Ctrl C (Windows/Linux) o Cmd C (macOS) para copiar al portapapeles.

Mejoras opcionales y accesibilidad

Indicadores visuales: el estilo :focus de la textarea ayuda a saber que está lista para copiar.
Lectores de pantalla: usa aria-label en la etiqueta botón y aria-describedby o role adecuados para describir la acción.
Texto seleccionable y legible: usa un tamaño de fuente suficiente y contraste alto para facilitar la selección manual.
Comportamiento en móviles: en móviles la selección y copiar se hace por menú táctil el truco sigue siendo útil porque centra el foco en el bloque.

Si quieres copia automática (con JavaScript): cuándo usarla

Si la experiencia deseada es que al pulsar el botón el código se copie automáticamente (sin que el usuario pulse Ctrl/Cmd C), necesitas JavaScript. En WordPress puedes añadir un pequeño script que use la Clipboard API. Aquí tienes un ejemplo (opcional):

// Ejemplo JS opcional (añádelo solo si aceptas usar JS)
document.addEventListener(click, function(e) {
  if (!e.target.matches(.copy-btn)) return
  var textarea = document.querySelector(#   e.target.getAttribute(for))
  if (!textarea) return
  // Selecciona el contenido
  textarea.select()
  textarea.setSelectionRange(0, 99999) // para móviles
  try {
    var ok = document.execCommand(copy) // método legacy funciona en muchos navegadores
    // Alternativa moderna: navigator.clipboard.writeText(textarea.value)
  } catch (err) {
    // Fallback: mostrar instrucción
  }
})

Notas prácticas para WordPress

Gutenberg: usa un bloque HTML personalizado para pegar el HTML. No uses el bloque Código si no quieres que WordPress lo formatee (aunque también es válido en algunos casos).
Si tu tema tiene minificado o restringe etiquetas, prueba primero en una entrada de prueba y luego mueve el CSS a style.css del tema hijo.
Si quieres compatibilidad total (copiar al portapapeles al hacer clic), añade el script JS de forma encolada desde functions.php o usando un plugin de snippets.

Variantes y widgets

Hay variantes visuales que puedes aplicar: colocar el botón dentro de la esquina del bloque, sustituir textarea por ltpregt ltcodegt para mejor semántica (aunque enfocar ltpregt no siempre funciona igual), o usar un input tipo text para código corto (one-liners).

Ejemplo semántico usando ltpregt y ltcodegt (NO permite selección automática con label, sirve como alternativa)

Copiar

lth1gtHola Mundolt/h1gt

lth1gtHola Mundolt/h1gt

Conclusión

En resumen: con solo HTML y CSS no es posible copiar automáticamente al portapapeles, pero sí puedes crear un botón que enfoque el bloque de código y haga que la acción de copiar sea de un solo atajo de teclado (Ctrl/Cmd C). Es una solución sencilla, compatible con WordPress sin necesidad de plugins ni JS, y mejora la usabilidad. Si deseas la copia automática, añade un pequeño script JS con la Clipboard API como complemento.

Recursos y recomendaciones

Si finalmente quieres copia automática y máxima compatibilidad, considera usar una librería ligera (por ejemplo: Clipboard.js) o escribir un pequeño snippet con navigator.clipboard.writeText()
Prueba en distintos navegadores y dispositivos, ya que el comportamiento de selección y focus puede variar.

SushiHost