CSS-selektorer

5 min read

CSS-selektorer forteller TTSWP hvilke deler av innlegget ditt som skal eller ikke skal leses opp. Bruk dem når den enklere "ingen-lyd-klasse"-metoden ikke er nok, eller når du vil ha utelukkelser for hele nettstedet uten å redigere hvert enkelt innlegg.

To typer selektorer

Inkluderingsselektorer

Som standard leser TTSWP opp hele innholdsområdet i innlegget. Hvis temaet ditt pakker hovedartikkelen i en bestemt beholder (som .article-body eller #main-content), kan du begrense avspillingen til bare den beholderen.

Eksempel:

.article-body

Bare tekst inne i elementer som samsvarer med .article-body vil bli lest opp. Alt utenfor den beholderen ignoreres.

La feltet stå tomt for å beholde standarden (hele innholdsområdet i innlegget).

Ekskluderingsselektorer

Alle elementer som samsvarer med en ekskluderingsselektor fjernes fra teksten før generering. Alt inne i disse elementene fjernes også.

Flere selektorer, en per linje:

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

Vanlige ekskluderingseksempler

Kopier og lim inn disse i ekskluderingslisten din hvis de passer til temaet ditt.

Bildetekster

.wp-caption
figcaption
.caption

Sidefelter og widgeter

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

Annonser

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

Kommentarer

.comments-area
#comments
.comment-list

Relaterte innlegg og nyhetsbrevpameldinger

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

Brødsmuler og metainformasjon

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

Avkutt etter

Bruk Avkutt etter når du vil stoppe lydversjonen på et bestemt punkt i innlegget. Alt fra det første treffet og utover fjernes før lyden genereres. Dette er nyttig for å kutte bort fotnoter, referanselister eller forfatterbiografier som ligger inne i hovedinnholdsområdet og er vanskelige å pakke inn i en enkelt CSS-klasse.

Slik setter du det opp

  1. Ga til Tekst til Tale → CSS-selektorer.
  2. Rull ned til Avkutt etter-kortet.
  3. Skriv inn en streng per linje. Lagre.
  4. Regenerer lyden pa et innlegg.

Samsvarsregler

  • Uten hensyn til store og sma bokstaver, delstrengsamsvar mot den gjengitte HTML-koden i innlegget.
  • Du kan skrive inn ren tekst eller HTML-kode. For eksempel samsvarer <strong>Fotnoter<\/strong> bare nar Fotnoter er fet, mens Fotnoter samsvarer med alle forekomster pa siden.
  • Skriv inn flere strenger hvis du vil ha flere mulige avskjaringspunkter. Det tidligste treffet i innlegget vinner.

Eksempler

Kutt ved en fet Fotnoter-overskrift:

<strong>Fotnoter<\/strong>

Kutt ved den forste av flere mulige markorer:

<h2>Referanser<\/h2>
<strong>Om forfatteren<\/strong>

Ekskluderingsselektorer vs. Avkutt etter

  • Bruk Ekskluderingsselektorer nar hoppe-over-maalet er pakket inn i en ren klasse eller ID (sidefelt, annonse, widget).
  • Bruk Avkutt etter nar du vil kutte alt under en markour og det ikke finnes noen ren beholder a angi.

Begge kjorer for syntese, sa de endrer bare lyden, ikke den synlige siden.

Slik finner du riktig selektor

Apne innlegget ditt pa forsiden og bruk nettleserens inspektor (F12, klikk deretter pa elementet).

Se etter:

  • Et class-attributt (starter med class="...") - blir .class-name
  • Et ID-attributt (starter med id="...") - blir #id-name
  • En vanlig tagg - blir bare taggenavnet (figcaption, aside)

Velg den mest spesifikke selektoren som fortsatt fanger alt du vil ekskludere. Hvis du har flere lignende elementer, bruk en klasse eller tagg.

Teste selektorene dine

Etter at du har lagret selektorer:

  1. Apne et innlegg med lyd.
  2. Ga til Innlegg → Alle innlegg.
  3. Klikk pa Regenerer-ikonet.
  4. Spill av den nye lyden.

Hvis uonsket innhold fortsatt vises, samsvarte ikke selektoren. Apne nettleserinspektoren, bekreft klassen eller taggen, og prova igjen.

Begrensninger

  • CSS-selektorer kjorer for syntese pa det raa innlegginnholdet
  • De pavirker ikke den synlige siden - bare teksten som sendes til ElevenLabs
  • Komplekse selektorer fungerer (.widget-area aside > .title), men hold dem enkle for enklere vedlikehold

Relaterte sider