Sélecteurs CSS

Les sélecteurs CSS indiquent à TTSWP quelles parties de votre article doivent être narrées ou non. Utilisez-les quand la méthode simple de la "classe sans audio" ne suffit pas, ou quand vous voulez des exclusions sur tout le site sans modifier chaque article.

#Deux types de sélecteurs

#Sélecteurs d'inclusion

Par défaut, TTSWP narre l'ensemble de la zone de contenu de l'article. Si votre thème encapsule l'article principal dans un conteneur spécifique (comme .article-body ou #main-content), vous pouvez restreindre la narration à ce seul conteneur.

Exemple :

.article-body

Seul le texte contenu dans les éléments correspondant à .article-body sera narré. Tout ce qui se trouve en dehors de ce conteneur est ignoré.

Laissez le champ vide pour conserver le comportement par défaut (tout le contenu de l'article).

#Sélecteurs d'exclusion

Tout élément correspondant à un sélecteur d'exclusion est retiré du texte avant la génération. Tout ce qui se trouve à l'intérieur de ces éléments est également retiré.

Plusieurs sélecteurs, un par ligne :

.wp-caption
figcaption
.sidebar
.widget-area
.ad-container

#Exemples d'exclusions courants

Copiez-collez ces sélecteurs dans votre liste d'exclusions s'ils s'appliquent à votre thème.

#Légendes d'images

.wp-caption
figcaption
.caption

#Barres latérales et widgets

.sidebar
#secondary
.widget-area
.elementor-sidebar

#Publicités

.ad-container
.advertisement
.ads
[data-ad]
.google-auto-placed

#Commentaires

.comments-area
#comments
.comment-list

#Articles connexes et inscriptions à la newsletter

.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form

#Fils d'Ariane et méta-informations

.breadcrumbs
.post-meta
.entry-meta
.author-box

#Tronquer Après

Utilisez Tronquer Après quand vous souhaitez arrêter la narration à un point précis de l'article. Tout ce qui suit le premier élément correspondant est supprimé avant la génération de l'audio. C'est pratique pour couper les notes de bas de page, les listes de références, ou les encadrés auteur qui se trouvent dans la zone de contenu principale et sont difficiles à encapsuler dans une seule classe CSS.

#Comment le configurer

1. Allez dans Synthèse vocale - Sélecteurs CSS.
2. Faites défiler jusqu'à la carte Tronquer Après.
3. Saisissez une chaîne par ligne. Enregistrez.
4. Régénérez l'audio sur n'importe quel article.

#Règles de correspondance

• Correspondance de sous-chaîne insensible à la casse sur le HTML rendu de l'article.
• Vous pouvez saisir du texte brut ou du balisage HTML. Par exemple, <strong>Notes de bas de page</strong> correspond uniquement quand le texte est en gras, tandis que Notes de bas de page correspond à toute occurrence sur la page.
• Saisissez plusieurs chaînes si vous souhaitez plusieurs points de coupure possibles. La première correspondance dans l'article l'emporte.

#Exemples

Couper à un titre Notes de bas de page en gras :

<strong>Notes de bas de page</strong>

Couper au premier de plusieurs marqueurs possibles :

<h2>Références</h2>
<strong>À propos de l'auteur</strong>

#Sélecteurs d'exclusion vs. Tronquer Après

• Utilisez les Sélecteurs d'exclusion quand l'élément à ignorer est encapsulé dans une classe ou un ID propre (barre latérale, publicité, widget).
• Utilisez Tronquer Après quand vous voulez couper tout ce qui se trouve sous un marqueur et qu'il n'y a pas de conteneur propre à cibler.

Les deux s'exécutent avant la synthèse, donc ils modifient uniquement l'audio, pas la page visible.

#Comment trouver le bon sélecteur

Ouvrez votre article en frontend et utilisez l'inspecteur de votre navigateur (F12, puis cliquez sur l'élément).

Recherchez :

• Un attribut class (commence par class="...") - devient .nom-de-classe
• Un attribut id (commence par id="...") - devient #nom-id
• Une balise courante - devient simplement le nom de la balise (figcaption, aside)

Choisissez le sélecteur le plus précis qui capture tout ce que vous souhaitez exclure. Si vous avez plusieurs éléments similaires, utilisez une classe ou une balise.

#Tester vos sélecteurs

Après avoir enregistré les sélecteurs :

1. Ouvrez n'importe quel article avec audio.
2. Allez dans Articles - Tous les articles.
3. Cliquez sur l'icône Régénérer.
4. Écoutez le nouvel audio.

Si du contenu indésirable apparaît encore, votre sélecteur ne correspond pas. Ouvrez l'inspecteur de votre navigateur, vérifiez la classe ou la balise, et réessayez.

#Limites

• Les sélecteurs CSS s'exécutent avant la synthèse sur le contenu brut de l'article
• Ils n'affectent pas la page visible - uniquement le texte envoyé à ElevenLabs
• Les sélecteurs complexes fonctionnent (.widget-area aside > .title), mais gardez-les simples pour faciliter la maintenance

#Pages connexes

• Contrôler ce qui est narré
• CSS personnalisé