Funktionen Anwendungsfalle Preise
Blog Dokumentation Änderungsprotokoll
Anmelden
Loslegen

CSS-Selektoren

5 min read

CSS-Selektoren teilen TTSWP mit, welche Teile deines Beitrags vertont werden sollen oder nicht. Verwende sie, wenn die einfachere "No-Audio-Klasse"-Methode nicht ausreicht oder wenn du seitenweite Ausschlüsse ohne das Bearbeiten jedes einzelnen Beitrags möchtest.

Zwei Arten von Selektoren

Include-Selektoren

Standardmäßig vertont TTSWP den gesamten Beitragsinhalt. Wenn dein Theme den Hauptartikel in einem bestimmten Container (wie .article-body oder #main-content) einschließt, kannst du die Vertonung auf diesen Container beschränken.

Beispiel:

.article-body

Nur Text innerhalb von Elementen, die .article-body entsprechen, wird vertont. Alles außerhalb dieses Containers wird ignoriert.

Lasse das Feld leer, um den Standard beizubehalten (gesamter Beitragsinhalt).

Exclude-Selektoren

Jedes Element, das einem Exclude-Selektor entspricht, wird vor der Generierung aus dem Text entfernt. Alles innerhalb dieser Elemente wird ebenfalls entfernt.

Mehrere Selektoren, einer pro Zeile:

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

Häufige Ausschluss-Beispiele

Kopiere diese in deine Ausschlussliste, wenn sie auf dein Theme zutreffen.

Bildunterschriften

.wp-caption
figcaption
.caption

Seitenleisten und Widgets

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

Anzeigen

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

Kommentare

.comments-area
#comments
.comment-list

Verwandte Beiträge und Newsletter-Anmeldungen

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

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

Abschneiden nach

Verwende "Abschneiden nach", wenn du die Vertonung an einer bestimmten Stelle im Beitrag stoppen möchtest. Alles ab dem ersten Treffer wird vor der Audio-Generierung entfernt. Das ist praktisch, um Fußnoten, Referenzlisten oder Autorenboxen abzuschneiden, die sich im Hauptinhaltsbereich befinden und schwer in einer einzigen CSS-Klasse zu umschließen sind.

Einrichtung

  1. Gehe zu Text-zu-Sprache - TTSWP → CSS-Selektoren.
  2. Scrolle zur Karte Abschneiden nach.
  3. Gib einen String pro Zeile ein. Speichern.
  4. Generiere das Audio für jeden Beitrag neu.

Trefferregeln

  • Groß-/Kleinschreibungsunabhängige Teilstring-Suche im gerenderten HTML des Beitrags.
  • Du kannst einfachen Text oder HTML-Markup eingeben. Zum Beispiel trifft <strong>Fußnoten</strong> nur dann zu, wenn Fußnoten fett ist, während Fußnoten an jeder Stelle auf der Seite trifft.
  • Gib mehrere Strings ein, wenn du mehrere mögliche Abschneidepunkte möchtest. Der früheste Treffer im Beitrag gewinnt.

Beispiele

Abschneiden bei einer fetten Fußnoten-Überschrift:

<strong>Fußnoten</strong>

Abschneiden beim ersten von mehreren möglichen Markern:

<h2>Referenzen</h2>
<strong>Über den Autor</strong>

Exclude-Selektoren vs. Abschneiden nach

  • Verwende Exclude-Selektoren, wenn das Ziel in einer sauberen Klasse oder ID eingeschlossen ist (Seitenleiste, Anzeige, Widget).
  • Verwende Abschneiden nach, wenn du alles unterhalb eines Markers entfernen möchtest und kein sauberes Wrapper-Element zum Anvisieren vorhanden ist.

Beide Methoden laufen vor der Synthese, sie verändern also nur das Audio, nicht die sichtbare Seite.

Den richtigen Selektor finden

Öffne deinen Beitrag im Frontend und verwende den Browser-Inspektor (F12, dann auf das Element klicken).

Achte auf:

  • Ein class-Attribut (beginnt mit class="...") - wird zu .class-name
  • Ein ID-Attribut (beginnt mit id="...") - wird zu #id-name
  • Ein gängiges Tag - wird einfach zum Tag-Namen (figcaption, aside)

Wähle den spezifischsten Selektor, der trotzdem alles erfasst, was du ausschließen möchtest. Bei mehreren ähnlichen Elementen verwende eine Klasse oder ein Tag.

Selektoren testen

Nach dem Speichern der Selektoren:

  1. Öffne einen Beitrag mit Audio.
  2. Gehe zu Beiträge → Alle Beiträge.
  3. Klicke auf das Symbol Neu generieren.
  4. Spiele das neue Audio ab.

Wenn unerwünschter Inhalt noch erscheint, hat dein Selektor nicht getroffen. Öffne den Browser-Inspektor, bestätige die Klasse oder das Tag, und versuche es erneut.

Einschränkungen

  • CSS-Selektoren laufen vor der Synthese auf dem rohen Beitragsinhalt
  • Sie beeinflussen die sichtbare Seite nicht - nur der Text, der an ElevenLabs gesendet wird
  • Komplexe Selektoren funktionieren (.widget-area aside > .title), aber halte sie einfach für einfachere Wartung

Verwandte Seiten