Excluir seletores CSS mantém partes de uma página no idioma original. Tudo o que contém texto é traduzido por padrão, então esta é uma maneira de remover conteúdo em vez de adicioná-lo.

Essas configurações ficam na tela Regras de Tradução do projeto, nos campos Incluir Seletores CSS e Excluir Seletores CSS. Insira um seletor por linha.

Como funciona

Não há uma lista de tags para optar. Qualquer elemento que contenha texto diretamente é traduzido: um título, um parágrafo, o rótulo de um botão, uma célula de tabela e um <div> ou <span> simples que contenha texto são tratados da mesma forma.

Os seletores de exclusão são executados antes que qualquer coisa seja extraída. Um elemento correspondente e tudo dentro dele é removido completamente da tradução, então seu conteúdo nunca é enviado a lugar nenhum.

O que nunca é traduzido

Sem nenhuma configuração, estes são deixados no idioma original:

• Tags <script>, <style> e <noscript>
• Blocos <pre>
• Elementos com a classe .notranslate ou .no-translate
• Elementos com o atributo translate="no"
• Elementos com um atributo hreflang

Um elemento <code> por si só não está nessa lista. O código dentro de um bloco <pre> é protegido, mas o <code> usado inline é traduzido junto com a frase ao redor, então envolva-o em .notranslate se ele precisar permanecer literal.

Sites WordPress

No WordPress, mais duas exclusões se aplicam automaticamente:

• #wpadminbar (barra de administração)
• .wp-admin (elementos de administração)

Incluir Seletores CSS

Este campo não restringe a tradução, e preenchê-lo não altera o que é traduzido. Tudo o que contém texto já é capturado, então não há nada para um seletor de inclusão adicionar. Deixe-o em branco.

Se você está procurando uma maneira de traduzir apenas uma seção de uma página e deixar o resto intocado, isso não é algo que o campo faz. Exclua as partes que você deseja que permaneçam no idioma original.

Excluir seletores

Use seletores de exclusão para manter seções específicas no idioma original. O conteúdo dentro de um elemento excluído é completamente ignorado.

Exemplos

.pricing-table
#code-examples
.api-reference
.user-generated-content
[data-no-translate]
footer .copyright

Quando usar

• Blocos de código ou seções de referência técnica
• Conteúdo gerado pelo usuário que deve permanecer no idioma original
• Dados de preços ou numéricos que não devem ser modificados
• Incorporações de terceiros que lidam com sua própria localização
• Elementos de navegação que devem permanecer no idioma de origem
• Texto legal que deve permanecer no idioma original

Se você pode editar seu HTML, a maneira mais fácil de excluir um elemento é adicionar translate="no" ou class="notranslate" diretamente em seu código-fonte: nenhuma configuração de painel necessária.

WP Rocket

Este permanece no idioma original

Sintaxe do seletor

Universally suporta a sintaxe padrão de seletores CSS:

Seletor	O que ele corresponde	Exemplo
.classe	Elementos com uma classe	.barra lateral
#id	Elemento com um ID	#rodapé
[atributo]	Elementos com um atributo	[data-translate]
[attr="value"]	Elementos com um valor de atributo específico	[role="navigation"]
.parent .child	Elementos aninhados (descendentes)	.blog-post .title
.parent > .child	Elementos filhos diretos	.nav > .item

Regras de validação

• Cada seletor deve conter pelo menos um caractere ., # ou [
• O seletor curinga * não é permitido (ele corresponderia a tudo)
• O comprimento máximo do seletor é de 200 caracteres
• Linhas em branco são ignoradas

Um seletor que falhar em qualquer um destes é descartado sem aviso, então uma regra que parece não fazer nada vale a pena reler antes de valer a pena depurar.

Mire no contêiner que você quer dizer

Uma exclusão pega toda a subárvore. .pricing-table e .faq-item .answer têm o tamanho certo; .content, #page e .entry-content envolvem a maior parte de uma página, e excluir um desses deixa quase toda a página sem tradução e sem nada reportado.

Padrões comuns

Excluir uma seção, mas traduzir parte dela

Isso não é suportado. Um elemento excluído remove tudo dentro dele, e não há como trazer parte dele de volta. Se você precisar traduzir parte de uma seção excluída, reestruture o HTML para que a parte traduzível fique fora do contêiner excluído.

Excluir widgets de chat

#intercom-container
.drift-widget
.tawk-widget
[id^="hubspot-messages"]

Excluir documentação de código

.code-block
.api-endpoint
pre code
.syntax-highlight

Configurações relacionadas

Excluir Localização de Links: impeça que links internos sejam reescritos com prefixos de idioma

Excluir Páginas: pule páginas inteiras da tradução com base nos caminhos de URL

Dicas

1. Use o DevTools do navegador para encontrar seletores. Clique com o botão direito em um elemento, selecione "Inspecionar" e anote a classe ou ID.
2. Seja específico. .sidebar .widget-title é melhor que .widget-title se você quiser direcionar apenas os títulos de widgets da barra lateral.