Fitur Kasus Penggunaan Harga
Blog Dokumentasi Log perubahan
Masuk
Mulai Sekarang

CSS Selectors

5 mnt membaca

CSS selectors memberi tahu TTSWP bagian mana dari postingan Anda yang harus atau tidak harus dinarasikan. Gunakan fitur ini saat metode "no-audio class" yang lebih sederhana tidak cukup, atau saat Anda ingin pengecualian di seluruh situs tanpa mengedit setiap postingan.

Dua jenis selector

Include selectors

Secara default, TTSWP mennarasi seluruh area konten postingan. Jika tema Anda membungkus artikel utama dalam container tertentu (seperti .article-body atau #main-content), Anda dapat membatasi narasi hanya pada container tersebut.

Contoh:

.article-body

Hanya teks di dalam elemen yang cocok dengan .article-body yang akan dinarasikan. Semua yang berada di luar container tersebut diabaikan.

Biarkan kolom kosong untuk mempertahankan default (seluruh konten postingan).

Exclude selectors

Setiap elemen yang cocok dengan exclude selector akan dihapus dari teks sebelum proses pembuatan audio. Semua konten di dalam elemen tersebut juga ikut dihapus.

Beberapa selector, satu per baris:

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

Contoh pengecualian umum

Salin dan tempel daftar ini ke daftar pengecualian Anda jika sesuai dengan tema Anda.

Keterangan gambar

.wp-caption
figcaption
.caption

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

Iklan

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

Komentar

.comments-area
#comments
.comment-list

Postingan terkait dan pendaftaran newsletter

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

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

Truncate After

Gunakan Truncate After saat Anda ingin menghentikan narasi pada titik tertentu dalam postingan. Semua konten dari kecocokan pertama ke bawah akan dihapus sebelum audio dibuat. Fitur ini berguna untuk memotong catatan kaki, daftar referensi, atau kotak penulis yang berada di dalam area konten utama dan sulit dibungkus dalam satu kelas CSS.

Cara mengaturnya

  1. Buka Teks ke Ucapan - CSS Selectors.
  2. Gulir ke kartu Truncate After.
  3. Masukkan satu string per baris. Simpan.
  4. Buat ulang audio pada postingan mana pun.

Aturan pencocokan

  • Pencocokan substring tidak peka huruf besar-kecil terhadap HTML postingan yang sudah di-render.
  • Anda dapat memasukkan teks biasa atau markup HTML. Misalnya, <strong>Catatan Kaki<\/strong> hanya cocok saat Catatan Kaki dicetak tebal, sedangkan Catatan Kaki cocok dengan tampilan apa pun di halaman.
  • Masukkan beberapa string jika Anda menginginkan beberapa kemungkinan titik pemotongan. Kecocokan paling awal dalam postingan yang digunakan.

Contoh

Potong pada judul Catatan Kaki yang ditebalkan:

<strong>Catatan Kaki<\/strong>

Potong pada yang pertama dari beberapa penanda yang mungkin:

<h2>Referensi<\/h2>
<strong>Tentang penulis<\/strong>

Exclude Selectors vs. Truncate After

  • Gunakan Exclude Selectors saat target yang dilewati dibungkus dalam kelas atau ID yang bersih (sidebar, iklan, widget).
  • Gunakan Truncate After saat Anda ingin memotong semua konten di bawah penanda dan tidak ada pembungkus yang bersih untuk ditargetkan.

Keduanya berjalan sebelum proses sintesis, sehingga hanya mengubah audio, bukan halaman yang terlihat.

Cara menemukan selector yang tepat

Buka postingan Anda di sisi depan dan gunakan browser inspector (F12, lalu klik elemennya).

Cari:

  • Atribut class (dimulai dengan class="...") - menjadi .nama-class
  • Atribut ID (dimulai dengan id="...") - menjadi #nama-id
  • Tag umum - menjadi nama tag saja (figcaption, aside)

Pilih selector yang paling spesifik yang tetap mencakup semua yang ingin Anda kecualikan. Jika ada beberapa elemen serupa, gunakan class atau tag.

Menguji selector Anda

Setelah menyimpan selector:

  1. Buka postingan mana pun yang memiliki audio.
  2. Buka Postingan - Semua Postingan.
  3. Klik ikon Regenerate.
  4. Putar audio baru.

Jika konten yang tidak diinginkan masih muncul, selector Anda tidak cocok. Buka browser inspector, konfirmasi class atau tag, lalu coba lagi.

Batasan

  • CSS selectors berjalan sebelum sintesis pada konten postingan mentah
  • Selector tidak memengaruhi tampilan halaman - hanya teks yang dikirim ke ElevenLabs
  • Selector kompleks berfungsi (.widget-area aside > .title), tetapi usahakan tetap sederhana untuk kemudahan pemeliharaan