Os seletores CSS informam ao TTSWP quais partes do seu post devem ou não ser narradas. Use-os quando o método mais simples de "classe sem áudio" não for suficiente, ou quando você quiser exclusões em todo o site sem editar cada post.
Dois tipos de seletores
Seletores de inclusão
Por padrão, o TTSWP narra toda a área de conteúdo do post. Se o seu tema envolve o artigo principal em um container específico (como .article-body ou #main-content), você pode restringir a narração apenas a esse container.
Exemplo:
.article-body
Somente o texto dentro dos elementos que correspondem a .article-body será narrado. Tudo fora desse container é ignorado.
Deixe o campo vazio para manter o padrão (toda a área de conteúdo do post).
Seletores de exclusão
Qualquer elemento que corresponda a um seletor de exclusão é removido do texto antes da geração. Tudo dentro desses elementos também é removido.
Vários seletores, um por linha:
.wp-caption
figcaption
.sidebar
.widget-area
.ad-container
Exemplos comuns de exclusão
Copie e cole estes exemplos na sua lista de exclusão se eles se aplicarem ao seu tema.
Legendas de imagens
.wp-caption
figcaption
.caption
Barras laterais e widgets
.sidebar
#secondary
.widget-area
.elementor-sidebar
Anúncios
.ad-container
.advertisement
.ads
[data-ad]
.google-auto-placed
Comentários
.comments-area
#comments
.comment-list
Posts relacionados e formulários de newsletter
.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form
Breadcrumbs e informações de meta
.breadcrumbs
.post-meta
.entry-meta
.author-box
Truncar Após
Use Truncar Após quando quiser parar a narração em um ponto específico do post. Tudo a partir da primeira correspondência em diante é descartado antes de o áudio ser gerado. Isso é útil para cortar notas de rodapé, listas de referências ou caixas de autor que ficam dentro da área de conteúdo principal e são difíceis de envolver em uma única classe CSS.
Como configurar
- Acesse Texto para Voz → Seletores CSS.
- Role até o card Truncar Após.
- Insira uma string por linha. Salve.
- Regere o áudio em qualquer post.
Regras de correspondência
- Correspondência de substring sem distinção entre maiúsculas e minúsculas no HTML renderizado do post.
- Você pode inserir texto simples ou marcação HTML. Por exemplo,
<strong>Notas de rodapé</strong>corresponde apenas quando Notas de rodapé está em negrito, enquantoNotas de rodapécorresponde a qualquer aparição na página. - Insira várias strings se quiser múltiplos pontos de corte possíveis. A correspondência mais anterior no post prevalece.
Exemplos
Cortar em um título em negrito Notas de rodapé:
<strong>Notas de rodapé</strong>
Cortar no primeiro de vários marcadores possíveis:
<h2>Referências</h2>
<strong>Sobre o autor</strong>
Seletores de exclusão vs. Truncar Após
- Use Seletores de Exclusão quando o elemento a ignorar estiver envolvido em uma classe ou ID limpo (barra lateral, anúncio, widget).
- Use Truncar Após quando quiser cortar tudo abaixo de um marcador e não houver um wrapper limpo para direcionar.
Ambos são executados antes da síntese, então alteram apenas o áudio, não a página visível.
Como encontrar o seletor correto
Abra seu post no front-end e use o inspetor do navegador (F12, depois clique no elemento).
Procure por:
- Um atributo de classe (começa com
class="...") - torna-se.nome-da-classe - Um atributo de ID (começa com
id="...") - torna-se#nome-do-id - Uma tag comum - torna-se apenas o nome da tag (
figcaption,aside)
Escolha o seletor mais específico que ainda capture tudo o que você quer excluir. Se você tiver vários elementos semelhantes, use uma classe ou tag.
Testando seus seletores
Após salvar os seletores:
- Abra qualquer post com áudio.
- Acesse Posts → Todos os Posts.
- Clique no ícone Regerar.
- Reproduza o novo áudio.
Se o conteúdo indesejado ainda aparecer, seu seletor não correspondeu. Abra o inspetor do navegador, confirme a classe ou tag e tente novamente.
Limitações
- Os seletores CSS são executados antes da síntese no conteúdo bruto do post
- Eles não afetam a página visual - apenas o texto enviado ao ElevenLabs
- Seletores complexos funcionam (
.widget-area aside > .title), mas mantenha-os simples para facilitar a manutenção