Documentation Universally

Guides étape par étape, conseils de SEO multilingue et meilleures pratiques pour vous aider à traduire et à développer votre site WordPress.

Inclure et exclure les sélecteurs CSS

Les sélecteurs CSS vous donnent un contrôle précis sur les parties de votre page qui sont traduites. Vous pouvez cibler des sections spécifiques pour la traduction ou exclure des sections qui doivent rester non traduites.

Ces paramètres sont configurés dans l'onglet Paramètres de votre projet, sous Inclure les sélecteurs CSS et Exclure les sélecteurs CSS. Entrez un sélecteur par ligne.

Comment ça marche

Universally utilise des sélecteurs CSS pour déterminer quels éléments HTML contiennent du texte traduisible. Le moteur de traduction traite la page en deux phases :

Phase d'exclusion : Les éléments correspondant aux sélecteurs d'exclusion sont entièrement supprimés du contexte de traduction. Leur contenu n'est jamais vu par le traducteur.
Phase d'inclusion : Seul le texte à l'intérieur des éléments correspondant aux sélecteurs d'inclusion est extrait pour la traduction.

Les sélecteurs d'exclusion sont appliqués en premier, ils priment donc toujours sur les sélecteurs d'inclusion.

Comportement par défaut

Sans aucune configuration personnalisée, Universally traduit déjà les éléments de contenu les plus courants et exclut les éléments non pertinents.

Inclus par défaut

Titres : h1, h2, h3, h4, h5, h6
Texte : p, blockquote, figcaption, summary
Listes : li, dt, dd
Tableaux : td, th, tr, thead, tbody, tfoot
Formulaires : button, label, option
La balise <title>
Éléments avec la classe .translate
Éléments avec l'attribut translate="yes"

Exclus par défaut

Balises <script>, <style>, <noscript>
Blocs <pre> (extraits de code)
Éléments avec la classe .notranslate ou .no-translate
Éléments avec l'attribut translate="no"
Éléments avec un attribut hreflang

Sites WordPress

Pour les sites WordPress, ces paramètres par défaut supplémentaires s'appliquent automatiquement :

Inclus :

.wp-block-button__link (boutons de blocs Gutenberg)
.menu-item.menu-item-has-children > a (éléments de menu avec sous-menus)

Exclus :

#wpadminbar (barre d'administration)
.wp-admin (éléments d'administration)

Inclure les sélecteurs

Utilisez les sélecteurs d'inclusion pour ajouter des éléments qui ne sont pas traduits par défaut. Ceci est utile pour les composants personnalisés ou les structures HTML non standard.

Exemples

.product-description
#hero-text
[data-translate]
.custom-widget .title
article .excerpt

Quand l'utiliser

Votre site utilise des composants personnalisés avec des classes qui ne figurent pas dans la liste par défaut
Vous avez <div> ou <span> éléments contenant du texte traduisible qui ne sont pas à l'intérieur d'un élément inclus par défaut
Les widgets tiers rendent le texte dans des conteneurs non standard

Si vous pouvez modifier votre HTML, la manière la plus simple d'inclure un élément est d'ajouter translate="yes" ou class="translate" directement dans votre code source — aucune configuration du tableau de bord n'est nécessaire.

<div translate="yes">Ceci sera traduit</div>
<div class="translate">Ceci aussi</div>

Exclure les sélecteurs

Utilisez les sélecteurs d'exclusion pour empêcher la traduction de sections spécifiques. Le contenu à l'intérieur des éléments exclus est complètement ignoré.

Exemples

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

Quand l'utiliser

Blocs de code ou sections de référence technique
Contenu généré par l'utilisateur qui doit rester dans la langue d'origine
Prix ou données numériques qui ne doivent pas être modifiés
Intégrations tierces qui gèrent leur propre localisation
Éléments de navigation qui doivent rester dans la langue source
Texte légal qui doit rester dans la langue d'origine

Si vous pouvez modifier votre HTML, la manière la plus simple d'exclure un élément est d'ajouter translate="no" ou class="notranslate" directement dans votre code source — aucune configuration du tableau de bord n'est nécessaire.

<h1 translate="no">WP Rocket</h1>
<p class="notranslate">Ceci reste dans la langue d'origine</p>

Syntaxe des sélecteurs

Prend en charge universellement la syntaxe standard des sélecteurs CSS :

Sélecteur	Ce qu'il correspond	Exemple
`.classe`	Éléments avec une classe	`.barre latérale`
`#id`	Élément avec un ID	`#pied de page`
`[attribut]`	Éléments avec un attribut	`[data-translate]`
`[attr="value"]`	Éléments avec une valeur d'attribut spécifique	`[role="navigation"]`
`.parent .child`	Éléments imbriqués (descendant)	`.blog-post .title`
`.parent > .child`	Éléments enfants directs	`.nav > .item`

Règles de validation

Chaque sélecteur doit contenir au moins un caractère ., #, ou [.
Le sélecteur générique * n'est pas autorisé (il correspondrait à tout).
La longueur maximale du sélecteur est de 200 caractères.
Les lignes vides sont ignorées.

Modèles courants

Traduire un composant personnalisé

.my-component

Traduit tout le texte à l'intérieur des éléments avec la classe my-component.

Exclure une section mais en traduire une partie

Ce n'est pas directement pris en charge. Les sélecteurs d'exclusion suppriment complètement les éléments avant que les sélecteurs d'inclusion ne soient traités. Si vous avez besoin de traduire une partie d'une section exclue, restructurez le HTML de manière à ce que la partie traduisible soit à l'extérieur du conteneur exclu.

Exclure les widgets de chat

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

Exclure la documentation du code

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

Traduire des blocs WordPress personnalisés

.wp-block-custom .content
.elementor-widget-text .elementor-text-editor
.fl-module-content

Paramètres associés

Exclure la localisation des liens — Empêche la réécriture des liens internes avec des préfixes de langue.

Exclure les pages — Ignore des pages entières de la traduction en fonction des chemins d'URL.

Conseils

Utilisez les outils de développement du navigateur pour trouver les sélecteurs. Faites un clic droit sur un élément, sélectionnez « Inspecter », et notez la classe ou l'ID.
Soyez précis. .sidebar .widget-title est mieux que .widget-title si vous ne souhaitez cibler que les widgets de la barre latérale.
Testez après les modifications. Visitez une page traduite après avoir mis à jour les sélecteurs pour vérifier les résultats.
Utilisez .notranslate dans votre HTML. Si vous contrôlez le HTML, ajouter class="notranslate" à un élément est souvent plus simple que de configurer des sélecteurs d'exclusion dans le tableau de bord.
Les sélecteurs d'exclusion l'emportent toujours. Si le même élément correspond à la fois à un sélecteur d'inclusion et à un sélecteur d'exclusion, il sera exclu.

Est-ce que cela vous a été utile ?