CSS-Selektoren einschließen und ausschließen

CSS-Selektoren geben Ihnen die präzise Kontrolle darüber, welche Teile Ihrer Seite übersetzt werden. Sie können bestimmte Abschnitte für die Übersetzung anvisieren oder Abschnitte ausschließen, die unverändert bleiben sollen.

Diese Einstellungen werden im Tab „Einstellungen“ Ihres Projekts unter „CSS-Selektoren einschließen“ und „CSS-Selektoren ausschließen“ konfiguriert. Geben Sie einen Selektor pro Zeile ein.

So funktioniert's

Universally verwendet CSS-Selektoren, um zu bestimmen, welche HTML-Elemente übersetzbaren Text enthalten. Die Übersetzungs-Engine verarbeitet die Seite in zwei Phasen:

1. Ausschlussphase: Elemente, die den Ausschlussselektoren entsprechen, werden vollständig aus dem Übersetzungskontext entfernt. Ihr Inhalt wird vom Übersetzer nie gesehen.
2. Einschlussphase: Nur Text in Elementen, die den Einschlussselektoren entsprechen, wird zur Übersetzung extrahiert.

Ausschlussselektoren werden zuerst angewendet und haben daher immer Vorrang vor Einschlussselektoren.

Standardverhalten

Ohne benutzerdefinierte Konfiguration übersetzt Universally bereits die gängigsten Inhaltselemente und schließt Nicht-Inhaltselemente aus.

Standardmäßig eingeschlossen

• Überschriften: h1, h2, h3, h4, h5, h6
• Text: p, blockquote, figcaption, summary
• Listen: li, dt, dd
• Tabellen: td, th, tr, thead, tbody, tfoot
• Formulare: button, label, option
• Das <title>-Tag
• Elemente mit der Klasse .translate
• Elemente mit dem Attribut translate="yes"

Standardmäßig ausgeschlossen

• <script>-, <style>-, <noscript>-Tags
• <pre>-Blöcke (Code-Schnipsel)
• Elemente mit der Klasse .notranslate oder .no-translate
• Elemente mit dem Attribut translate="no"
• Elemente mit einem hreflang-Attribut

WordPress-Seiten

Für WordPress-Websites gelten automatisch diese zusätzlichen Standardeinstellungen:

Eingeschlossen:

• .wp-block-button__link (Gutenberg-Schaltflächenblöcke)
• .menu-item.menu-item-has-children > a (Menüpunkte mit Untermenüs)

Ausgeschlossen:

• #wpadminbar (Admin-Symbolleiste)
• .wp-admin (Admin-Elemente)

Selektoren einschließen

Verwenden Sie Inklusionsselektoren, um Elemente hinzuzufügen, die standardmäßig nicht übersetzt werden. Dies ist nützlich für benutzerdefinierte Komponenten oder nicht standardmäßige HTML-Strukturen.

Beispiele

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

Wann verwenden

• Ihre Website verwendet benutzerdefinierte Komponenten mit Klassen, die nicht in der Standardliste enthalten sind
• Sie haben <div> oder <span> Elemente mit übersetzbarem Text, die sich nicht innerhalb eines standardmäßig eingeschlossenen Elements befinden
• Widgets von Drittanbietern rendern Text in nicht standardmäßigen Containern

Wenn Sie Ihr HTML bearbeiten können, ist der einfachste Weg, ein Element einzuschließen, das Hinzufügen von translate="yes" oder class="translate" direkt in Ihrem Quellcode — keine Dashboard-Konfiguration erforderlich.

<div translate="yes">Dies wird übersetzt</div>
<div class="translate">Das auch</div>

Selektoren ausschließen

Verwenden Sie Ausschlussselektoren, um bestimmte Abschnitte von der Übersetzung auszuschließen. Inhalte innerhalb ausgeschlossener Elemente werden vollständig ignoriert.

Beispiele

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

Wann verwenden

• Codeblöcke oder technische Referenzabschnitte
• Benutzergenerierte Inhalte, die in der Originalsprache bleiben sollen
• Preisgestaltung oder numerische Daten, die nicht geändert werden sollen
• Einbettungen von Drittanbietern, die ihre eigene Lokalisierung handhaben
• Navigationselemente, die in der Quellsprache verbleiben sollen
• Rechtliche Texte, die in der Originalsprache bleiben müssen

Wenn Sie Ihr HTML bearbeiten können, ist der einfachste Weg, ein Element auszuschließen, das Hinzufügen von translate="no" oder class="notranslate" direkt in Ihrem Quellcode — keine Dashboard-Konfiguration erforderlich.

<h1 translate="no">WP Rocket</h1>
<p class="notranslate">Dies bleibt in der Originalsprache</p>

Selektorsyntax

Universally unterstützt Standard-CSS-Selektorsyntax:

Selektor	Was es abgleicht	Beispiel
.Klasse	Elemente mit einer Klasse	.Seitenleiste
#ID	Element mit einer ID	#Fußzeile
[Attribut]	Elemente mit einem Attribut	[Daten-Übersetzen]
[Attribut="Wert"]	Elemente mit einem bestimmten Attributwert	[Rolle="Navigation"]
.Elternteil .Kind	Verschachtelte Elemente (Nachfahre)	.Blogbeitrag .Titel
.parent > .child	Direkte Kindelemente	.nav > .item

Validierungsregeln

• Jeder Selektor muss mindestens ein ., # oder [ Zeichen enthalten
• Der Platzhalter * Selektor ist nicht erlaubt (er würde alles abgleichen)
• Maximale Selektorlänge beträgt 200 Zeichen
• Leere Zeilen werden ignoriert

Gängige Muster

Eine benutzerdefinierte Komponente übersetzen

.my-component

Übersetzt allen Text innerhalb von Elementen mit der Klasse my-component.

Einen Abschnitt ausschließen, aber einen Teil davon übersetzen

Dies wird nicht direkt unterstützt. Ausschlussselektoren entfernen Elemente vollständig, bevor Einschlussselektoren verarbeitet werden. Wenn Sie einen Teil eines ausgeschlossenen Abschnitts übersetzen müssen, strukturieren Sie das HTML so um, dass sich der übersetzbare Teil außerhalb des ausgeschlossenen Containers befindet.

Chat-Widgets ausschließen

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

Code-Dokumentation ausschließen

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

Benutzerdefinierte WordPress-Blöcke übersetzen

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

Verwandte Einstellungen

Link-Lokalisierung ausschließen — Verhindert, dass interne Links mit Sprachpräfixen neu geschrieben werden

Seiten ausschließen — Ganze Seiten von der Übersetzung basierend auf URL-Pfaden überspringen

Tipps

1. Verwenden Sie die Entwicklertools des Browsers, um Selektoren zu finden. Klicken Sie mit der rechten Maustaste auf ein Element, wählen Sie „Untersuchen“ und notieren Sie die Klasse oder ID.
2. Seien Sie spezifisch. .sidebar .widget-title ist besser als .widget-title, wenn Sie nur Sidebar-Widgets ansprechen möchten.
3. Testen Sie nach Änderungen. Besuchen Sie eine übersetzte Seite, nachdem Sie Selektoren aktualisiert haben, um die Ergebnisse zu überprüfen.
4. Verwenden Sie .notranslate in Ihrem HTML. Wenn Sie das HTML kontrollieren, ist das Hinzufügen von class="notranslate" zu einem Element oft einfacher als die Konfiguration von Ausschlussselektoren im Dashboard.
5. Ausschlussselektoren gewinnen immer. Wenn dasselbe Element sowohl mit einem Einschluss- als auch mit einem Ausschlussselektor übereinstimmt, wird es ausgeschlossen.