Documentazione Universally

Guide passo-passo, suggerimenti SEO multilingue e best practice per aiutarti a tradurre e scalare il tuo sito WordPress.

Includi ed escludi selettori CSS

I selettori CSS ti danno un controllo preciso su quali parti della tua pagina vengono tradotte. Puoi scegliere sezioni specifiche da tradurre o escludere sezioni che dovrebbero rimanere non tradotte.

Queste impostazioni sono configurate nella scheda Impostazioni del tuo progetto, sotto Includi selettori CSS e Escludi selettori CSS. Inserisci un selettore per riga.

Come Funziona

Universally utilizza selettori CSS per determinare quali elementi HTML contengono testo traducibile. Il motore di traduzione elabora la pagina in due fasi:

Fase di esclusione: Gli elementi che corrispondono ai selettori di esclusione vengono rimossi completamente dal contesto di traduzione. Il loro contenuto non viene mai visto dal traduttore.
Fase di inclusione: Solo il testo all'interno degli elementi che corrispondono ai selettori di inclusione viene estratto per la traduzione.

I selettori di esclusione vengono applicati per primi, quindi prevalgono sempre sui selettori di inclusione.

Comportamento Predefinito

Senza alcuna configurazione personalizzata, Universally traduce già gli elementi di contenuto più comuni ed esclude gli elementi non di contenuto.

Inclusi per impostazione predefinita

Intestazioni: h1, h2, h3, h4, h5, h6
Testo: p, blockquote, figcaption, summary
Elenchi: li, dt, dd
Tabelle: td, th, tr, thead, tbody, tfoot
Moduli: button, label, option
Il tag <title>
Elementi con la classe .translate
Elementi con attributo translate="yes"

Esclusi per impostazione predefinita

Tag <script>, <style>, <noscript>
Blocchi <pre> (snippet di codice)
Elementi con la classe .notranslate o .no-translate
Elementi con attributo translate="no"
Elementi con attributo hreflang

Siti WordPress

Per i siti WordPress, si applicano automaticamente questi ulteriori valori predefiniti:

Inclusi:

.wp-block-button__link (blocchi pulsante Gutenberg)
.menu-item.menu-item-has-children > a (voci di menu con sottomenu)

Esclusi:

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

Includi selettori

Usa i selettori di inclusione per aggiungere elementi che non vengono tradotti per impostazione predefinita. Questo è utile per componenti personalizzati o strutture HTML non standard.

Esempi

.product-description
#hero-text
[data-translate]
.custom-widget .title
article .excerpt

Quando usarli

Il tuo sito utilizza componenti personalizzati con classi non presenti nell'elenco predefinito
Hai <div> o <span> elementi contenenti testo traducibile che non sono all'interno di un elemento incluso per impostazione predefinita
Widget di terze parti che visualizzano testo in contenitori non standard

Se puoi modificare il tuo HTML, il modo più semplice per includere un elemento è aggiungere translate="yes" o class="translate" direttamente nel tuo codice sorgente — nessuna configurazione della dashboard necessaria.

<div translate="yes">Questo verrà tradotto</div>
<div class="translate">Anche questo</div>

Escludi selettori

Usa i selettori di esclusione per impedire la traduzione di sezioni specifiche. Il contenuto all'interno degli elementi esclusi 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
Prezzi o dati 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 della dashboard necessaria.

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

Sintassi dei selettori

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

Pattern comuni

Traduci un componente personalizzato

.my-component

Traduce tutto il testo all'interno degli elementi con la classe my-component.

Escludi una sezione ma traducine una parte

Questo non è direttamente supportato. I selettori di esclusione rimuovono completamente gli elementi prima che vengano elaborati i selettori di inclusione. Se è necessario tradurre parte di una sezione esclusa, ristrutturare l'HTML in modo che la parte traducibile sia 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

Traduci blocchi WordPress personalizzati

.wp-block-custom .content
.elementor-widget-text .elementor-text-editor
.fl-module-content

Impostazioni correlate

Escludi localizzazione link — Impedisci la riscrittura dei link interni con prefissi di lingua

Escludi pagine — Salta intere pagine dalla traduzione in base ai percorsi URL

Suggerimenti

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.
Sii specifico. .sidebar .widget-title è meglio di .widget-title se vuoi selezionare solo i widget della barra laterale.
Verifica dopo le modifiche. Visita una pagina tradotta dopo aver aggiornato i selettori per verificare i risultati.
Utilizza .notranslate nel tuo HTML. Se controlli l'HTML, aggiungere class="notranslate" a un elemento è spesso più semplice che configurare i selettori di esclusione nella dashboard.
I selettori di esclusione hanno sempre la precedenza. Se lo stesso elemento corrisponde sia a un selettore di inclusione che a uno di esclusione, verrà escluso.

È stato utile?