Como Adicionar Botão Copiar Código com Notificação “Copiado!” no WordPress (Sem Plugins)

Adicionar um botão de “Copiar Código” com notificação visual de “Copiado!” ao lado do botão é uma das melhores formas de melhorar a experiência do usuário em posts técnicos no WordPress.

E o melhor: dá para fazer isso sem plugins, usando apenas HTML, CSS e JavaScript de forma leve e profissional. Neste tutorial, vou te mostrar como criar essa funcionalidade, ideal para quem usa o tema GeneratePress (free ou premium).

🎯 O Que Vamos Fazer:

• Caixa de código personalizada.
• Botão “Copiar” flutuante no canto superior direito.
• Notificação “Copiado!” ao lado do botão (tipo tooltip).
• Tudo sem precisar de plugins.

🛠️ Passo 1: Adicione o CSS (Aparência > Personalizar > CSS Adicional)

.code-box {
  position: relative;
  background: #1e1e1e;
  color: #fff;
  padding: 1em;
  border-radius: 10px;
  font-family: monospace;
  overflow: auto;
  margin-bottom: 20px;
}

.copy-code-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
}

.copy-code-btn:hover {
  background: #45a049;
}

.inline-toast {
  position: absolute;
  top: 10px;
  right: 100px; /* Distância do botão */
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-5px);
  z-index: 10;
}

.inline-toast.show {
  opacity: 1;
  transform: translateY(0);
}

🛠️ Passo 2: Adicione o JavaScript (Footer.php ou Custom HTML no Footer)

Vá em Aparência > Editor de Arquivos > footer.php e antes do </body>, adicione:

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.copy-code-btn').forEach(button => {
    // Cria o Toast Inline dentro da code-box
    const toast = document.createElement('div');
    toast.className = 'inline-toast';
    toast.innerText = 'Copiado!';
    button.parentElement.appendChild(toast);

    // Evento de clique no botão
    button.addEventListener('click', function() {
      const codeBlock = this.parentElement.querySelector('pre code');
      const textToCopy = codeBlock.innerText;

      navigator.clipboard.writeText(textToCopy).then(() => {
        // Exibir Toast Inline
        toast.classList.add('show');
        setTimeout(() => {
          toast.classList.remove('show');
        }, 2000);
      }).catch(err => {
        console.error('Erro ao copiar código: ', err);
      });
    });
  });
});
</script>

🛠️ Passo 3: Como Usar nos Posts (Gutenberg HTML)

Para exibir um código com botão copiar, siga estes passos:

1. No Gutenberg, adicione um Bloco HTML Personalizado.
2. Cole este template:

<div class="code-box">
  <button class="copy-code-btn">Copiar</button>
  <pre><code>
# Exemplo de código
echo "Olá Mundo!";
  </code></pre>
</div>

➡️ Substitua o conteúdo pelo seu código.

✅ O Resultado Final:

• O botão “Copiar” aparecerá no canto superior direito da caixa de código.
• Ao clicar, o código será copiado para a área de transferência.
• Uma notificação flutuante “Copiado!” aparecerá ao lado do botão e desaparecerá suavemente em 2 segundos.
• Funciona para múltiplos blocos de código em um mesmo post.

❓ FAQ — Perguntas Frequentes

Preciso de plugins para essa função?
Não! Essa solução é 100% em HTML, CSS e JavaScript puro. Sem plugins pesados.

Funciona em qualquer tema do WordPress?
Sim. Funciona em qualquer tema que permita inserção de CSS e edição do arquivo footer.php. Em GeneratePress (free ou premium), funciona perfeitamente.

Posso salvar essa caixa de código para usar em todos os posts?
Sim! Você pode criar um Bloco Reutilizável no Gutenberg com essa estrutura e só substituir o conteúdo nos posts futuros.

🚀 Gostou desse tutorial?
🔔 Siga nosso blog e receba mais guias práticos para otimizar seu WordPress de forma leve e profissional!