Selettori CSS

5 min read

I selettori CSS indicano a TTSWP quali parti del tuo articolo devono essere narrate e quali no. Usali quando il metodo semplice della "classe no-audio" non basta, o quando vuoi esclusioni a livello di sito senza modificare ogni articolo.

Due tipi di selettori

Selettori di inclusione

Per impostazione predefinita TTSWP narra l'intera area del contenuto dell'articolo. Se il tuo tema racchiude l'articolo principale in un contenitore specifico (come .article-body o #main-content), puoi limitare la narrazione solo a quel contenitore.

Esempio:

.article-body

Solo il testo all'interno degli elementi corrispondenti a .article-body verrà narrato. Tutto ciò che si trova fuori da quel contenitore viene ignorato.

Lascia il campo vuoto per mantenere il comportamento predefinito (intera area del contenuto dell'articolo).

Selettori di esclusione

Ogni elemento corrispondente a un selettore di esclusione viene rimosso dal testo prima della generazione. Tutto ciò che si trova all'interno di quegli elementi viene rimosso anch'esso.

Piu selettori, uno per riga:

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

Esempi di esclusioni comuni

Copia e incolla questi nel tuo elenco di esclusioni se si applicano al tuo tema.

Didascalie delle immagini

.wp-caption
figcaption
.caption

Barre laterali e widget

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

Annunci

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

Commenti

.comments-area
#comments
.comment-list

Articoli correlati e iscrizioni alla newsletter

.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form
.breadcrumbs
.post-meta
.entry-meta
.author-box

Tronca Dopo

Usa Tronca Dopo quando vuoi interrompere la narrazione in un punto specifico dell'articolo. Tutto ciò che si trova dalla prima corrispondenza in poi viene eliminato prima che l'audio venga generato. E utile per tagliare note a pie di pagina, elenchi di riferimenti o box autore che si trovano all'interno dell'area del contenuto principale e sono difficili da racchiudere in una singola classe CSS.

Come configurarlo

  1. Vai su Da testo a voce - TTSWP → Selettori CSS.
  2. Scorri fino alla scheda Tronca Dopo.
  3. Inserisci una stringa per riga. Salva.
  4. Rigenera l'audio su qualsiasi articolo.

Regole di corrispondenza

  • Corrispondenza di sottostringa senza distinzione tra maiuscole e minuscole nell'HTML dell'articolo renderizzato.
  • Puoi inserire testo semplice o markup HTML. Ad esempio, <strong>Note<\/strong> corrisponde solo quando Note e in grassetto, mentre Note corrisponde a qualsiasi occorrenza nella pagina.
  • Inserisci piu stringhe se vuoi piu punti di interruzione possibili. Vince la prima corrispondenza trovata nell'articolo.

Esempi

Taglia in corrispondenza di un'intestazione Note in grassetto:

<strong>Note<\/strong>

Taglia al primo tra diversi possibili marcatori:

<h2>Riferimenti<\/h2>
<strong>Sull'autore<\/strong>

Selettori di esclusione vs. Tronca Dopo

  • Usa i Selettori di esclusione quando l'elemento da saltare e racchiuso in una classe o ID preciso (barra laterale, annuncio, widget).
  • Usa Tronca Dopo quando vuoi eliminare tutto cio che si trova sotto un marcatore e non c'e un contenitore preciso da selezionare.

Entrambi vengono eseguiti prima della sintesi, quindi modificano solo l'audio, non la pagina visibile.

Come trovare il selettore giusto

Apri il tuo articolo nel front-end e usa lo strumento di ispezione del browser (F12, poi clicca sull'elemento).

Cerca:

  • Un attributo class (inizia con class="...") - diventa .nome-classe
  • Un attributo ID (inizia con id="...") - diventa #nome-id
  • Un tag comune - diventa semplicemente il nome del tag (figcaption, aside)

Scegli il selettore piu specifico che cattura ancora tutto cio che vuoi escludere. Se hai piu elementi simili, usa una classe o un tag.

Testare i selettori

Dopo aver salvato i selettori:

  1. Apri qualsiasi articolo con audio.
  2. Vai su Articoli → Tutti gli articoli.
  3. Clicca sull'icona Rigenera.
  4. Riproduci il nuovo audio.

Se il contenuto indesiderato compare ancora, il selettore non ha trovato corrispondenze. Apri lo strumento di ispezione del browser, verifica la classe o il tag, e riprova.

Limiti

  • I selettori CSS vengono eseguiti prima della sintesi sul contenuto grezzo dell'articolo
  • Non influenzano la pagina visibile - modificano solo il testo inviato a ElevenLabs
  • I selettori complessi funzionano (.widget-area aside > .title), ma tienili semplici per una manutenzione piu agevole

Pagine correlate