Los selectores CSS te dan control preciso sobre qué partes de tu página se traducen. Puedes apuntar a secciones específicas para traducir o excluir secciones que deben permanecer sin traducir.
Estas configuraciones se configuran en la pestaña de Configuración de tu proyecto, en Selectores CSS de inclusión y Selectores CSS de exclusión. Ingresa un selector por línea.
Cómo funciona
Universally usa selectores CSS para determinar qué elementos HTML contienen texto traducible. El motor de traducción procesa la página en dos fases:
- Fase de exclusión: Los elementos que coinciden con los selectores de exclusión se eliminan por completo del contexto de traducción. Su contenido nunca es visto por el traductor.
- Fase de inclusión: Solo el texto dentro de los elementos que coinciden con los selectores de inclusión se extrae para su traducción.
Los selectores de exclusión se aplican primero, por lo que siempre prevalecen sobre los selectores de inclusión.
Comportamiento Predeterminado
Sin ninguna configuración personalizada, Universally ya traduce los elementos de contenido más comunes y excluye los elementos que no son de contenido.
Incluidos por defecto
- Encabezados:
h1,h2,h3,h4,h5,h6 - Texto:
p,blockquote,figcaption,summary - Listas:
li,dt,dd - Tablas:
td,th,tr,thead,tbody,tfoot - Formularios:
button,label,option - La etiqueta
<title> - Elementos con la clase
.translate - Elementos con el atributo
translate="yes"
Excluidos por defecto
- Etiquetas
<script>,<style>,<noscript> - Bloques
<pre>(fragmentos de código) - Elementos con la clase
.notranslateo.no-translate - Elementos con el atributo
translate="no" - Elementos con un atributo
hreflang
Sitios de WordPress
Para sitios de WordPress, estas configuraciones predeterminadas adicionales se aplican automáticamente:
Incluidos:
.wp-block-button__link(bloques de botones de Gutenberg).menu-item.menu-item-has-children > a(elementos de menú con submenús)
Excluidos:
#wpadminbar(barra de administración).wp-admin(elementos de administración)
Incluir selectores
Usa selectores de inclusión para agregar elementos que no se traducen por defecto. Esto es útil para componentes personalizados o estructuras HTML no estándar.
Ejemplos
.product-description
#hero-text
[data-translate]
.custom-widget .title
article .excerpt
Cuándo usar
- Tu sitio usa componentes personalizados con clases que no están en la lista predeterminada
- Tienes
<div>o<span>elementos que contienen texto traducible que no están dentro de un elemento incluido por defecto - Widgets de terceros que muestran texto en contenedores no estándar
Si puedes editar tu HTML, la forma más fácil de incluir un elemento es agregar translate="yes" o class="translate" directamente en tu código fuente, sin necesidad de configuración en el panel de control.<div translate="yes">Esto se traducirá</div><div class="translate">Esto también</div>
Excluir selectores
Usa selectores de exclusión para evitar que se traduzcan secciones específicas. El contenido dentro de los elementos excluidos 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
- Precios o datos 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, sin necesidad de configuración en el panel de control.<h1 translate="no">WP Rocket</h1><p class="notranslate">Esto permanece en el idioma original</p>
Sintaxis de 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 de
.,#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
Patrones comunes
Traducir un componente personalizado
.my-componentTraduce todo el texto dentro de los elementos con la clase my-component.
Excluir una sección pero traducir una parte de ella
Esto no se admite directamente. Los selectores de exclusión eliminan elementos por completo antes de que se procesen los selectores de inclusión. Si necesita traducir parte de una sección excluida, reestructure el HTML para que la parte traducible esté 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
Traducir bloques personalizados de WordPress
.wp-block-custom .content
.elementor-widget-text .elementor-text-editor
.fl-module-content
Configuración relacionada
Excluir localización de enlaces — Evita que los enlaces internos se reescriban con prefijos de idioma
Excluir páginas — Omite páginas completas de la traducción según las rutas de URL
Consejos
- 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.
- Sé específico.
.sidebar .widget-titlees mejor que.widget-titlesi solo quieres dirigir los widgets de la barra lateral. - Prueba después de los cambios. Visita una página traducida después de actualizar los selectores para verificar los resultados.
- Usa
.notranslateen tu HTML. Si controlas el HTML, agregarclass="notranslate"a un elemento a menudo es más simple que configurar selectores de exclusión en el panel de control. - Los selectores de exclusión siempre ganan. Si el mismo elemento coincide con un selector de inclusión y uno de exclusión, será excluido.