Selektory CSS

5 min read

Selektory CSS mówią TTSWP, które fragmenty posta mają być narracją, a które nie. Używaj ich, gdy prostsza metoda "klasy bez audio" nie wystarczy, albo gdy chcesz wykluczyć elementy w całej witrynie bez edytowania każdego posta.

Dwa typy selektorów

Selektory dołączające

Domyślnie Tekst na Mowę - TTSWP narruje cały obszar treści posta. Jeśli Twój motyw opakowuje główny artykuł w konkretny kontener (np. .article-body lub #main-content), możesz ograniczyć narrację tylko do tego kontenera.

Przykład:

.article-body

Narracji podlega tylko tekst wewnątrz elementów pasujących do .article-body. Wszystko poza tym kontenerem jest ignorowane.

Zostaw pole puste, aby zachować domyślne ustawienie (cały obszar treści posta).

Selektory wykluczające

Każdy element pasujący do selektora wykluczającego jest usuwany z tekstu przed generowaniem. Usuwana jest też cała zawartość tych elementów.

Wiele selektorów, jeden w wierszu:

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

Popularne przykłady wykluczeń

Skopiuj i wklej te selektory do listy wykluczeń, jeśli pasują do Twojego motywu.

Podpisy obrazków

.wp-caption
figcaption
.caption

Paski boczne i widżety

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

Reklamy

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

Komentarze

.comments-area
#comments
.comment-list

Powiązane posty i zapisy do newslettera

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

Okruszki nawigacyjne i metadane

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

Przytnij po

Użyj funkcji Przytnij po, gdy chcesz zatrzymać narrację w konkretnym miejscu posta. Wszystko od pierwszego dopasowania w dół jest usuwane przed wygenerowaniem audio. Przydaje się to do odcinania przypisów, list źródeł lub notek autorskich, które znajdują się w głównym obszarze treści i trudno je ująć w jednej klasie CSS.

Jak to skonfigurować

  1. Przejdź do Tekst na Mowę → Selektory CSS.
  2. Przewiń do karty Przytnij po.
  3. Wpisz jeden ciąg znaków w wierszu. Zapisz.
  4. Wygeneruj audio ponownie w dowolnym poście.

Zasady dopasowywania

  • Dopasowanie podciągu bez rozróżniania wielkości liter w wyrenderowanym kodzie HTML posta.
  • Możesz wpisać zwykły tekst lub znacznik HTML. Na przykład <strong>Przypisy</strong> pasuje tylko wtedy, gdy słowo Przypisy jest pogrubione, natomiast Przypisy pasuje do każdego wystąpienia na stronie.
  • Wpisz kilka ciągów, jeśli chcesz mieć wiele możliwych punktów odcięcia. Wygrywa najwcześniejsze dopasowanie w poście.

Przykłady

Przetnij przy pogrubionym nagłówku Przypisów:

<strong>Przypisy</strong>

Przetnij przy pierwszym z kilku możliwych znaczników:

<h2>Źródła</h2>
<strong>O autorze</strong>

Selektory wykluczające a Przytnij po

  • Używaj Selektorów wykluczających, gdy element do pominięcia jest owinięty w czystą klasę lub ID (pasek boczny, reklama, widżet).
  • Używaj Przytnij po, gdy chcesz odciąć wszystko poniżej znacznika, a nie ma żadnego czystego wrappera do wskazania.

Obie funkcje działają przed syntezą, więc zmieniają tylko audio, a nie widoczną stronę.

Jak znaleźć właściwy selektor

Otwórz posta na stronie i użyj inspektora przeglądarki (F12, następnie kliknij element).

Szukaj:

  • Atrybutu klasy (zaczyna się od class="...") - staje się .nazwa-klasy
  • Atrybutu ID (zaczyna się od id="...") - staje się #nazwa-id
  • Popularnego tagu - staje się po prostu nazwą tagu (figcaption, aside)

Wybierz jak najbardziej precyzyjny selektor, który mimo to obejmie wszystko, co chcesz wykluczyć. Jeśli masz wiele podobnych elementów, użyj klasy lub tagu.

Testowanie selektorów

Po zapisaniu selektorów:

  1. Otwórz dowolny post z audio.
  2. Przejdź do Posty → Wszystkie posty.
  3. Kliknij ikonę Generuj ponownie.
  4. Odtwórz nowe audio.

Jeśli niechciana treść nadal się pojawia, selektor nie pasował. Otwórz inspektor przeglądarki, sprawdź klasę lub tag i spróbuj ponownie.

Ograniczenia

  • Selektory CSS działają przed syntezą na surowej treści posta
  • Nie wpływają na widoczną stronę - tylko na tekst wysyłany do ElevenLabs
  • Złożone selektory działają (.widget-area aside > .title), ale dla łatwiejszego utrzymania warto je upraszczać

Powiązane strony