Incluir y excluir selectores CSS

Excluir selectores CSS mantiene partes de una página en el idioma de origen. Todo lo que contiene texto se traduce por defecto, por lo que esta es una forma de sacar contenido en lugar de añadirlo.

Estas configuraciones se encuentran en la pantalla Reglas de traducción del proyecto, en los campos Incluir selectores CSS y Excluir selectores CSS. Ingresa un selector por línea.

Cómo funciona

No hay una lista de etiquetas para optar. Cualquier elemento que contenga texto directamente se traduce: un encabezado, un párrafo, la etiqueta de un botón, una celda de tabla y un <div> o <span> simple que contenga texto se tratan de la misma manera.

Los selectores de exclusión se ejecutan antes de que se extraiga nada. Un elemento coincidente y todo lo que contiene se elimina por completo de la traducción, por lo que su contenido nunca se envía a ningún lado.

Qué nunca se traduce

Sin ninguna configuración, estos se dejan en el idioma de origen:

• Etiquetas <script>, <style> y <noscript>
• Bloques <pre>
• Elementos con la clase .notranslate o .no-translate
• Elementos con un atributo translate="no"
• Elementos con un atributo hreflang

Un elemento <code> por sí solo no está en esa lista. El código dentro de un bloque <pre> está protegido, pero el <code> usado en línea se traduce junto con la oración que lo rodea, así que envuélvelo en .notranslate si debe permanecer literal.

Sitios de WordPress

En WordPress, se aplican automáticamente dos exclusiones más:

• #wpadminbar (barra de administración)
• .wp-admin (elementos de administración)

Incluir selectores CSS

Este campo no limita la traducción, y completarlo no cambia lo que se traduce. Ya se capta todo lo que contiene texto, por lo que no hay nada que un selector de inclusión pueda agregar. Déjalo vacío.

Si buscas una forma de traducir solo una sección de una página y dejar el resto intacto, ese no es el propósito de este campo. En su lugar, excluye las partes que deseas dejar en el idioma de origen.

Excluir selectores

Usa selectores de exclusión para mantener secciones específicas en el idioma de origen. El contenido dentro de un elemento excluido se ignora por completo.

Ejemplos

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

Cuándo usar

• Bloques de código o secciones de referencia técnica
• Contenido generado por el usuario que debe permanecer en el idioma original
• Datos de precios o numéricos que no deben modificarse
• Incrustaciones de terceros que manejan su propia localización
• Elementos de navegación que deben permanecer en el idioma de origen
• Texto legal que debe permanecer en el idioma original

Si puedes editar tu HTML, la forma más fácil de excluir un elemento es agregar translate="no" o class="notranslate" directamente en tu código fuente: no se necesita configuración en el panel.

<h1 translate="no">WP Rocket</h1> <p class="notranslate">Esto se queda en el idioma original</p>

Sintaxis del selector

Universally admite la sintaxis estándar de selectores CSS:

Selector	Lo que coincide	Ejemplo
.clase	Elementos con una clase	.barra lateral
#id	Elemento con un ID	#pie de página
[atributo]	Elementos con un atributo	[data-translate]
[attr="value"]	Elementos con un valor de atributo específico	[role="navigation"]
.parent .child	Elementos anidados (descendientes)	.blog-post .title
.parent > .child	Elementos hijos directos	.nav > .item

Reglas de validación

• Cada selector debe contener al menos un carácter ., # o [
• El selector comodín * no está permitido (coincidiría con todo)
• La longitud máxima del selector es de 200 caracteres
• Las líneas vacías se ignoran

Un selector que no cumpla con ninguno de estos criterios se descarta sin advertencia, por lo que una regla que parece no hacer nada vale la pena releerla antes de depurarla.

Apunta al contenedor que quieres decir

Una exclusión toma todo el subárbol. .pricing-table y .faq-item .answer tienen el tamaño correcto; .content, #page y .entry-content abarcan la mayor parte de una página, y excluir uno de estos deja casi toda la página sin traducir y sin reportar nada.

Patrones comunes

Excluir una sección pero traducir una parte de ella

Esto no es compatible. Un elemento excluido elimina todo lo que hay dentro y no hay forma de recuperar parte de él. Si necesitas traducir parte de una sección excluida, reestructura el HTML para que la parte traducible quede fuera del contenedor excluido.

Excluir widgets de chat

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

Excluir documentación de código

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

Ajustes relacionados

Excluir localización de enlaces: evita que los enlaces internos se reescriban con prefijos de idioma

Excluir páginas: omite páginas enteras de la traducción según las rutas de URL

Consejos

1. Usa las Herramientas para desarrolladores del navegador para encontrar selectores. Haz clic derecho en un elemento, selecciona "Inspeccionar" y anota la clase o el ID.
2. Sé específico. .sidebar .widget-title es mejor que .widget-title si solo quieres dirigir los títulos de los widgets de la barra lateral.