Includi ed escludi selettori CSS

Escludi selettori CSS per mantenere parti di una pagina nella lingua di origine. Tutto ciò che contiene testo viene tradotto per impostazione predefinita, quindi questo è un modo per escludere contenuti anziché aggiungerli.

Queste impostazioni si trovano nella schermata Regole di traduzione del progetto, nei campi Includi selettori CSS ed Escludi selettori CSS. Inserisci un selettore per riga.

Come funziona

Non esiste un elenco di tag a cui aderire. Qualsiasi elemento che contenga direttamente testo viene tradotto: un'intestazione, un paragrafo, l'etichetta di un pulsante, una cella di tabella e un semplice <div> o <span> che contenga testo vengono trattati allo stesso modo.

I selettori di esclusione vengono eseguiti prima che venga estratto qualsiasi elemento. Un elemento corrispondente e tutto ciò che contiene viene rimosso interamente dalla traduzione, quindi il suo contenuto non viene mai inviato da nessuna parte.

Cosa non viene mai tradotto

Senza alcuna configurazione, questi elementi vengono lasciati nella lingua di origine:

• Tag <script>, <style> e <noscript>
• Blocchi <pre>
• Elementi con la classe .notranslate o .no-translate
• Elementi con un attributo translate="no"
• Elementi con un attributo hreflang

Un elemento <code> da solo non è in quell'elenco. Il codice all'interno di un blocco <pre> è protetto, ma il <code> utilizzato inline viene tradotto insieme alla frase circostante, quindi racchiudilo in .notranslate se deve rimanere invariato.

Siti WordPress

Su WordPress, si applicano automaticamente altre due esclusioni:

• #wpadminbar (barra degli strumenti di amministrazione)
• .wp-admin (elementi di amministrazione)

Includi selettori CSS

Questo campo non restringe la traduzione e compilarlo non cambia ciò che viene tradotto. Tutto ciò che contiene testo viene già rilevato, quindi non c'è nulla che un selettore di inclusione possa aggiungere. Lascialo vuoto.

Se stai cercando un modo per tradurre solo una sezione di una pagina e lasciare il resto invariato, questo campo non fa questo. Escludi invece le parti che desideri mantenere nella lingua di origine.

Escludi selettori

Usa i selettori di esclusione per mantenere sezioni specifiche nella lingua di origine. Il contenuto all'interno di un elemento escluso viene completamente ignorato.

Esempi

.pricing-table
#code-examples
.api-reference
.user-generated-content
[data-no-translate]
footer .copyright

Quando usarli

• Blocchi di codice o sezioni di riferimento tecnico
• Contenuti generati dagli utenti che dovrebbero rimanere nella lingua originale
• Dati di prezzo o numerici che non dovrebbero essere modificati
• Incorporamenti di terze parti che gestiscono la propria localizzazione
• Elementi di navigazione che dovrebbero rimanere nella lingua di origine
• Testi legali che devono rimanere nella lingua originale

Se puoi modificare il tuo HTML, il modo più semplice per escludere un elemento è aggiungere translate="no" o class="notranslate" direttamente nel tuo codice sorgente: nessuna configurazione del dashboard necessaria.

<h1 translate="no">WP Rocket</h1> <p class="notranslate">Questo rimane nella lingua originale</p>

Sintassi del selettore

Supporta universalmente la sintassi standard dei selettori CSS:

Selettore	Cosa corrisponde	Esempio
.classe	Elementi con una classe	.sidebar
#id	Elemento con un ID	#footer
[attributo]	Elementi con un attributo	[data-translate]
[attr="value"]	Elementi con un valore di attributo specifico	[role="navigation"]
.parent .child	Elementi nidificati (discendenti)	.blog-post .title
.parent > .child	Elementi figli diretti	.nav > .item

Regole di convalida

• Ogni selettore deve contenere almeno un carattere ., # o [
• Il selettore jolly * non è consentito (corrisponderebbe a tutto)
• La lunghezza massima del selettore è di 200 caratteri
• Le righe vuote vengono ignorate

Un selettore che non soddisfa nessuna di queste condizioni viene scartato senza avviso, quindi una regola che sembra non fare nulla merita di essere riletta prima di essere sottoposta a debug.

Indica il contenitore desiderato

Un'esclusione prende l'intero sottoalbero. .pricing-table e .faq-item .answer hanno le dimensioni giuste; .content, #page e .entry-content racchiudono la maggior parte di una pagina e l'esclusione di uno di questi lascia quasi l'intera pagina non tradotta senza alcun resoconto.

Modelli comuni

Escludi una sezione ma traducine una parte

Questo non è supportato. Un elemento escluso rimuove tutto ciò che contiene e non c'è modo di recuperarne una parte. Se è necessario tradurre parte di una sezione esclusa, ristrutturare l'HTML in modo che la parte traducibile si trovi al di fuori del contenitore escluso.

Escludi widget di chat

#intercom-container
.drift-widget
.tawk-widget
[id^="hubspot-messages"]

Escludi documentazione del codice

.code-block
.api-endpoint
pre code
.syntax-highlight

Impostazioni correlate

Escludi localizzazione link: impedisci che i link interni vengano riscritti con prefissi linguistici

Escludi pagine: salta intere pagine dalla traduzione in base ai percorsi URL

Suggerimenti

1. Usa gli Strumenti per sviluppatori del browser per trovare i selettori. Fai clic con il pulsante destro del mouse su un elemento, seleziona "Ispeziona" e annota la classe o l'ID.
2. Sii specifico. .sidebar .widget-title è meglio di .widget-title se vuoi selezionare solo i titoli dei widget della barra laterale.