Functies Gebruikssituaties Prijzen
Blog Documentatie Wijzigingslog
Inloggen
Aan de slag

CSS Selectors

5 min read

CSS selectors vertellen TTSWP welke delen van je bericht wel of niet worden ingesproken. Gebruik ze wanneer de eenvoudigere methode met de "geen-audio class" niet volstaat, of wanneer je site-brede uitsluitingen wilt zonder elk bericht te bewerken.

Twee soorten selectors

Include selectors

Standaard spreekt TTSWP het volledige inhoudgebied van het bericht in. Als je thema het hoofdartikel in een specifieke container plaatst (zoals .article-body of #main-content), kun je de inspraak beperken tot alleen die container.

Voorbeeld:

.article-body

Alleen tekst binnen elementen die overeenkomen met .article-body wordt ingesproken. Alles buiten die container wordt genegeerd.

Laat het veld leeg om de standaardinstelling te behouden (volledig berichtinhoud).

Exclude selectors

Elk element dat overeenkomt met een exclude selector wordt verwijderd uit de tekst voor de generatie. Alles binnen die elementen wordt ook verwijderd.

Meerdere selectors, één per regel:

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

Veelgebruikte uitsluitingsvoorbeelden

Kopieer en plak deze in je uitsluitingslijst als ze van toepassing zijn op je thema.

Afbeeldingsbijschriften

.wp-caption
figcaption
.caption

Zijbalken en widgets

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

Advertenties

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

Reacties

.comments-area
#comments
.comment-list

Gerelateerde berichten en nieuwsbriefinschrijvingen

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

Broodkruimels en meta-informatie

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

Afkappen Na

Gebruik Afkappen Na wanneer je de inspraak op een bepaald punt in het bericht wilt stoppen. Alles vanaf de eerste overeenkomst wordt verwijderd voor de audio wordt gegenereerd. Dit is handig voor het wegsnijden van voetnoten, referentielijsten of auteursvakken die zich in het hoofdinhoudsgebied bevinden en moeilijk in één CSS class te omhullen zijn.

Instellen

  1. Ga naar Tekst naar spraak - TTSWP → CSS Selectors.
  2. Scroll naar de kaart Afkappen Na.
  3. Voer één tekenreeks per regel in. Sla op.
  4. Genereer de audio opnieuw voor elk bericht.

Overeenkomstregels

  • Hoofdletterongevoelige subtekenreeksmatch tegen de gerenderde HTML van het bericht.
  • Je kunt platte tekst of HTML-opmaak invoeren. Bijvoorbeeld: <strong>Voetnoten<\/strong> komt alleen overeen wanneer Voetnoten vet is, terwijl Voetnoten elke verschijning op de pagina matcht.
  • Voer meerdere tekenreeksen in als je meerdere mogelijke afkappunten wilt. De vroegste overeenkomst in het bericht wint.

Voorbeelden

Afkappen bij een vette kop Voetnoten:

<strong>Voetnoten<\/strong>

Afkappen bij de eerste van meerdere mogelijke markeringen:

<h2>Referenties<\/h2>
<strong>Over de auteur<\/strong>

Exclude Selectors vs. Afkappen Na

  • Gebruik Exclude Selectors wanneer het over te slaan element is omhulld in een duidelijke class of ID (zijbalk, advertentie, widget).
  • Gebruik Afkappen Na wanneer je alles onder een markering wilt wegsnijden en er geen duidelijke omhulling beschikbaar is.

Beide opties worden uitgevoerd voor de synthese, zodat ze alleen de audio wijzigen, niet de zichtbare pagina.

De juiste selector vinden

Open je bericht in de frontend en gebruik de inspector van je browser (F12, klik vervolgens op het element).

Let op:

  • Een class-attribuut (begint met class="...") - wordt .class-naam
  • Een ID-attribuut (begint met id="...") - wordt #id-naam
  • Een veelgebruikte tag - wordt alleen de tagnaam (figcaption, aside)

Kies de meest specifieke selector die nog alles opvangt wat je wilt uitsluiten. Als je meerdere vergelijkbare elementen hebt, gebruik dan een class of tag.

Je selectors testen

Na het opslaan van selectors:

  1. Open een bericht met audio.
  2. Ga naar Berichten → Alle berichten.
  3. Klik op het pictogram Opnieuw genereren.
  4. Speel de nieuwe audio af.

Als ongewenste inhoud nog steeds verschijnt, is je selector niet overeengekomen. Open de browser-inspector, controleer de class of tag en probeer het opnieuw.

Beperkingen

  • CSS selectors worden uitgevoerd voor de synthese op de ruwe berichtinhoud
  • Ze hebben geen invloed op de visuele pagina - alleen op de tekst die naar ElevenLabs wordt gestuurd
  • Complexe selectors werken (.widget-area aside > .title), maar houd ze eenvoudig voor beter onderhoud

Gerelateerde pagina's