Ominaisuudet Käyttötapaukset Hinnoittelu
Blogi Dokumentaatio Muutosloki
Kirjaudu sisään
Aloita

CSS-valitsimet

5 min read

CSS-valitsimet kertovat TTSWP:lle, mitkä osat julkaisustasi luetaan ääneen ja mitkä jätetään lukematta. Käytä niitä silloin, kun yksinkertaisempi "no-audio class" -menetelmä ei riitä tai kun haluat sivustolaajuisia poisjätöjä muokkaamatta jokaista julkaisua erikseen.

Kaksi valitsintyyppiä

Sisällytysvahvistimet

Oletuksena Puhe tekstistä - TTSWP lukee koko julkaisun sisältöalueen. Jos teemasi käärii pääartikkelin tiettyyn säilöön (esim. .article-body tai #main-content), voit rajata lukemisen vain kyseiseen säilöön.

Esimerkki:

.article-body

Vain .article-body-elementtien sisältä löytyvä teksti luetaan ääneen. Kaikki sen ulkopuolinen ohitetaan.

Jätä kenttä tyhjäksi pitääksesi oletusasetuksen (koko julkaisun sisältö).

Poissulkuvalitsimet

Kaikki poissulkuvalitsimeen täsmäävät elementit poistetaan tekstistä ennen äänigenerointia. Myös kaikkien kyseisten elementtien sisältö poistetaan.

Usea valitsin, yksi per rivi:

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

Yleisiä poissulkuesimerkkejä

Kopioi nämä poissulkulistaasi, jos ne sopivat teemasisi.

Kuvatekstit

.wp-caption
figcaption
.caption

Sivupalkit ja widgetit

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

Mainokset

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

Kommentit

.comments-area
#comments
.comment-list

Aiheeseen liittyvät julkaisut ja uutiskirjeen tilaukset

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

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

Truncate After

Käytä Truncate After -toimintoa, kun haluat pysäyttää lukemisen tiettyyn kohtaan julkaisussa. Kaikki ensimmäisestä täsmäyksestä eteenpäin poistetaan ennen äänigenerointia. Tämä on kätevää alaviitteiden, lähdeluetteloiden tai kirjoittajaosioiden katkaisemiseen, jotka sijaitsevat pääsisältöalueella eikä niitä voi helposti kääriä yhteen CSS-luokkaan.

Kuinka se otetaan käyttöön

  1. Siirry kohtaan Puhe tekstistä - TTSWP → CSS-valitsimet.
  2. Vieritä alas Truncate After -korttiin.
  3. Syötä yksi merkkijono per rivi. Tallenna.
  4. Generoi ääni uudelleen haluamissasi julkaisuissa.

Täsmäyssäännöt

  • Kirjainkoosta riippumaton osajono täsmäytetään julkaisun renderöityä HTML-koodia vasten.
  • Voit syöttää pelkkää tekstiä tai HTML-merkkausta. Esimerkiksi <strong>Alaviitteet<\/strong> täsmää vain silloin, kun Alaviitteet on lihavoitu, kun taas Alaviitteet täsmää mihin tahansa sivulla esiintyvään kohtaan.
  • Syötä useita merkkijonoja, jos haluat useita mahdollisia katkaisukohtia. Julkaisussa ensimmäisenä täsmäävä voittaa.

Esimerkkejä

Katkaise lihavoitun Alaviitteet-otsikon kohdalta:

<strong>Alaviitteet<\/strong>

Katkaise useista mahdollisista merkeistä ensimmäisen kohdalta:

<h2>Lähteet<\/h2>
<strong>Tietoa kirjoittajasta<\/strong>

Poissulkuvalitsimet vs. Truncate After

  • Käytä Poissulkuvalitsimia, kun ohitettava kohde on kääritty selkeään luokkaan tai ID:hen (sivupalkki, mainos, widget).
  • Käytä Truncate After -toimintoa, kun haluat katkaista kaiken merkin alapuolelta eikä yhtään siistiä kääriä ole kohteena.

Molemmat toimivat ennen synteesiä, joten ne muuttavat vain ääntä, eivät näkyvää sivua.

Kuinka löydät oikean valitsimen

Avaa julkaisusi käyttöliittymässä ja käytä selaimen tarkastinta (F12, sitten klikkaa elementtiä).

Etsi:

  • Class-attribuutti (alkaa class="...") - muuttuu muotoon .luokka-nimi
  • ID-attribuutti (alkaa id="...") - muuttuu muotoon #id-nimi
  • Yleinen tagi - muuttuu pelkäksi tagin nimeksi (figcaption, aside)

Valitse tarkin valitsin, joka silti kattaa kaiken haluamasi poissuljettavan. Jos sinulla on useita samankaltaisia elementtejä, käytä luokkaa tai tagia.

Valitsimien testaaminen

Valitsimien tallentamisen jälkeen:

  1. Avaa jokin äänen sisältävä julkaisu.
  2. Siirry kohtaan Julkaisut → Kaikki julkaisut.
  3. Klikkaa Generoi uudelleen -kuvaketta.
  4. Toista uusi ääni.

Jos ei-toivottua sisältöä esiintyy edelleen, valitsimesi ei täsmännyt. Avaa selaimesi tarkastin, vahvista luokka tai tagi ja yritä uudelleen.

Rajoitukset

  • CSS-valitsimet suoritetaan ennen synteesiä julkaisun raakasisällölle
  • Ne eivät vaikuta visuaaliseen sivuun - vain ElevenLabs-palveluun lähetettävään tekstiin
  • Monimutkaiset valitsimet toimivat (.widget-area aside > .title), mutta pidä ne yksinkertaisina helpomman ylläpidon vuoksi

Aiheeseen liittyvät sivut