Les sélecteurs CSS à exclure permettent de conserver des parties d'une page dans la langue source. Tout ce qui contient du texte est traduit par défaut, il s'agit donc d'un moyen de retirer du contenu plutôt que d'en ajouter.

Ces paramètres se trouvent sur l'écran Règles de traduction du projet, dans les champs Inclure les sélecteurs CSS et Exclure les sélecteurs CSS. Entrez un sélecteur par ligne.

Comment ça marche

Il n'y a pas de liste d'éléments à inclure. Tout élément contenant directement du texte est traduit : un titre, un paragraphe, une étiquette de bouton, une cellule de tableau, et une simple balise <div> ou <span> contenant du texte sont traités de la même manière.

Les sélecteurs à exclure s'exécutent avant toute extraction. Un élément correspondant et tout ce qu'il contient sont entièrement supprimés de la traduction, de sorte que son contenu n'est jamais envoyé.

Ce qui n'est jamais traduit

Sans aucune configuration, les éléments suivants sont laissés dans la langue source :

• Balises <script>, <style> et <noscript>
• Blocs <pre>
• Éléments avec la classe .notranslate ou .no-translate
• Éléments avec l'attribut translate="no"
• Éléments avec l'attribut hreflang

Un élément <code> seul ne figure pas sur cette liste. Le code à l'intérieur d'un bloc <pre> est protégé, mais le code <code> utilisé en ligne est traduit avec la phrase environnante. Encadrez-le donc avec .notranslate s'il doit rester tel quel.

Sites WordPress

Sur WordPress, deux exclusions supplémentaires s'appliquent automatiquement :

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

Inclure les sélecteurs CSS

Ce champ ne réduit pas la traduction, et le remplir ne change pas ce qui est traduit. Tout ce qui contient du texte est déjà pris en compte, il n'y a donc rien à ajouter pour un sélecteur d'inclusion. Laissez-le vide.

Si vous cherchez un moyen de traduire une seule section d'une page et de laisser le reste intact, ce n'est pas ce que fait ce champ. Excluez plutôt les parties que vous souhaitez laisser dans la langue source.

Exclure les sélecteurs

Utilisez les sélecteurs d'exclusion pour conserver des sections spécifiques dans la langue source. Le contenu à l'intérieur d'un élément exclu 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
• Données de prix ou numériques qui ne doivent pas être modifiées
• 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, le moyen le 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.

WP Rocket

Ceci reste dans la langue d'origine

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.

Un sélecteur qui échoue à l'un de ceux-ci est ignoré sans avertissement. Ainsi, une règle qui semble ne rien faire mérite d'être relue avant de chercher à la déboguer.

Visez le conteneur que vous voulez

Une exclusion prend tout le sous-arbre. .pricing-table et .faq-item .answer ont la bonne taille ; .content, #page et .entry-content englobent la majeure partie d'une page, et exclure l'un d'eux laisse presque toute la page non traduite sans rien signaler.

Modèles courants

Exclure une section mais en traduire une partie

Ce n'est pas pris en charge. Un élément exclu supprime tout ce qu'il contient, et il n'y a aucun moyen de récupérer une partie. Si vous avez besoin de traduire une partie d'une section exclue, restructurez le HTML de sorte que la partie traduisible se trouve à 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

Paramètres associés

Exclure la localisation des liens : empêcher la réécriture des liens internes avec des préfixes de langue

Exclure les pages : ignorer des pages entières de la traduction en fonction des chemins d'URL

Conseils

1. 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.
2. Soyez précis. .sidebar .widget-title est mieux que .widget-title si vous ne voulez cibler que les titres de widgets de la barre latérale.