Como Criar Botão 'Ouvir Artigo' no WordPress em Poucos Minutos [2026]

O botão "ouvir artigo" é uma das funcionalidades de maior impacto em acessibilidade e engajamento que você pode adicionar ao WordPress hoje. E o melhor: não precisa de programação avançada. Neste guia, você vai criar o seu em minutos.

Opção 1: Com Plugin VoiceXpress (5 Minutos)

O método mais simples para criar um botão de áudio profissional no WordPress:

1. Instale o VoiceXpress: WordPress → Plugins → Adicionar novo → buscar "VoiceXpress"
2. Configure a API Key: VoiceXpress → Configurações → insira sua chave de API
3. Escolha o estilo do botão: compacto (ícone + texto), expandido (player completo), ou flutuante
4. Defina a posição: antes do conteúdo, após o título, ou no rodapé do post
5. Salve e publique: o botão aparece automaticamente em todos os posts

O áudio é gerado automaticamente na publicação do post e armazenado em CDN. O botão abre um player acessível com controles de velocidade e barra de progresso.

Opção 2: Shortcode Personalizado

Se você já tem um arquivo de áudio gerado externamente, pode criar um shortcode simples para inserir o botão manualmente em posts selecionados:

// Adicionar ao functions.php
add_shortcode('ouvir_artigo', function($atts) {
    $atts = shortcode_atts([
        'url' => '',
        'titulo' => 'Ouvir este artigo',
    ], $atts);
    
    if (empty($atts['url'])) return '';
    
    return '<div class="ouvir-artigo-wrapper" 
              role="region" 
              aria-label="Versão em áudio">
        <button class="ouvir-btn" 
                aria-expanded="false"
                onclick="togglePlayer(this)">
            🎧 ' . esc_html($atts['titulo']) . '
        </button>
        <div class="player-container" hidden>
            <audio controls preload="none">
                <source src="' . esc_url($atts['url']) . '" type="audio/mpeg">
            </audio>
        </div>
    </div>';
});

Uso no editor: [ouvir_artigo url="https://cdn.exemplo.com/audio/post-123.mp3"]

Opção 3: Bloco Gutenberg HTML Customizado

Se você não quer instalar um plugin e quer controle manual post a post, use o bloco HTML personalizado do Gutenberg:

<!-- Cole no bloco HTML personalizado do Gutenberg -->
<div class="tts-player-box" 
     style="background:#1e293b;border-radius:12px;padding:16px;margin:24px 0;"
     role="region"
     aria-label="Versão em áudio deste artigo">
  
  <div style="display:flex;align-items:center;gap:12px;color:#e2e8f0;">
    <span style="font-size:1.5rem;">🎧</span>
    <span style="font-weight:600;">Ouça este artigo</span>
  </div>
  
  <audio controls preload="none" 
         style="width:100%;margin-top:12px;"
         aria-label="Player de áudio do artigo">
    <source src="URL_DO_AUDIO.mp3" type="audio/mpeg">
    Seu navegador não suporta reprodução de áudio.
  </audio>
  
</div>

Estilizando o Botão com CSS

Para um botão mais bonito e alinhado com o design do seu tema:

/* Adicionar ao CSS do tema ou em Aparência > Personalizar > CSS adicional */
.ouvir-artigo-wrapper {
    background: linear-gradient(135deg, #1e40af, #0891b2);
    border-radius: 12px;
    padding: 20px;
    margin: 32px 0;
    color: white;
}

.ouvir-btn {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s;
}

.ouvir-btn:hover,
.ouvir-btn:focus {
    background: rgba(255,255,255,0.25);
    outline: 3px solid white;
    outline-offset: 2px;
}

.player-container audio {
    width: 100%;
    margin-top: 16px;
    border-radius: 8px;
}

Compatibilidade com Page Builders

O VoiceXpress é compatível com os principais page builders:

• Elementor: widget nativo disponível na biblioteca de widgets
• Divi Builder: módulo customizado ou shortcode [voicexpress_player]
• Beaver Builder: módulo HTML com shortcode
• WPBakery: elemento de shortcode nativo