Universally Dokumentation

Schritt-für-Schritt-Anleitungen, mehrsprachige SEO-Tipps und Best Practices, die Ihnen helfen, Ihre WordPress-Website zu übersetzen und zu skalieren.

CSS-Selektoren einschließen und ausschließen

CSS-Selektoren ausschließen, um Teile einer Seite in der Quellsprache zu belassen. Alles, was Text enthält, wird standardmäßig übersetzt. Dies ist also eine Möglichkeit, Inhalte zu entfernen, anstatt sie hinzuzufügen.

Diese Einstellungen befinden sich auf dem Bildschirm Übersetzungsregeln des Projekts in den Feldern CSS-Selektoren einschließen und CSS-Selektoren ausschließen. Geben Sie einen Selektor pro Zeile ein.

So funktioniert's

Es gibt keine Liste von Tags, die einbezogen werden können. Jedes Element, das direkt Text enthält, wird übersetzt: eine Überschrift, ein Absatz, eine Schaltflächenbeschriftung, eine Tabellenzelle und ein einfaches <div> oder <span>, das Text enthält, werden alle gleich behandelt.

Ausschließlichkeitsselektoren werden ausgeführt, bevor etwas extrahiert wird. Ein übereinstimmendes Element und alles darin wird vollständig aus der Übersetzung entfernt, sodass sein Inhalt niemals irgendwohin gesendet wird.

Was niemals übersetzt wird

Ohne jegliche Konfiguration bleiben folgende Elemente in der Quellsprache:

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

Ein <code>-Element allein steht nicht auf dieser Liste. Code in einem <pre>-Block ist geschützt, aber <code>, das inline verwendet wird, wird zusammen mit dem umgebenden Satz übersetzt. Verwenden Sie es daher in .notranslate, wenn es wörtlich übernommen werden muss.

WordPress-Seiten

Auf WordPress gelten automatisch zwei weitere Ausschlüsse:

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

CSS-Selektoren einschließen

Dieses Feld schränkt die Übersetzung nicht ein, und das Ausfüllen ändert nichts daran, was übersetzt wird. Alles, was Text enthält, wird bereits erfasst, sodass ein Einschließungsselektor nichts hinzufügen kann. Lassen Sie es leer.

Wenn Sie versuchen, nur einen Abschnitt einer Seite zu übersetzen und den Rest unverändert zu lassen, ist dies nicht die Funktion dieses Feldes. Schließen Sie stattdessen die Teile aus, die Sie in der Quellsprache belassen möchten.

Ausschließlichkeitsselektoren

Verwenden Sie Ausschließlichkeitsselektoren, um bestimmte Abschnitte in der Quellsprache zu belassen. Inhalte innerhalb eines ausgeschlossenen Elements 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
  • Preis- 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, translate="no" oder class="notranslate" direkt in Ihrem Quellcode hinzuzufügen: 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 Wildcard-*-Selektor ist nicht erlaubt (er würde alles abgleichen)
  • Maximale Selektorlänge beträgt 200 Zeichen
  • Leere Zeilen werden ignoriert

Ein Selektor, der eine dieser Bedingungen nicht erfüllt, wird ohne Warnung verworfen. Eine Regel, die scheinbar nichts bewirkt, sollte daher noch einmal gelesen werden, bevor man mit der Fehlersuche beginnt.

Zielen Sie auf den Container, den Sie meinen

Ein Ausschluss erfasst den gesamten Unterbaum. .pricing-table und .faq-item .answer haben die richtige Größe; .content, #page und .entry-content umschließen fast eine ganze Seite. Der Ausschluss eines dieser Elemente lässt fast die gesamte Seite unübersetzt, ohne dass etwas gemeldet wird.

Häufige Muster

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

Dies wird nicht unterstützt. Ein ausgeschlossenes Element entfernt alles, was sich darin befindet, und es gibt keine Möglichkeit, einen Teil davon wiederherzustellen. 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

Link-Lokalisierung ausschließen: Verhindern Sie, dass interne Links mit Sprachpräfixen umgeschrieben werden

Seiten ausschließen: Überspringen Sie ganze Seiten aus der Übersetzung basierend auf URL-Pfaden

Tipps

  1. Verwenden Sie die Browser-Entwicklertools, um Selektoren zu finden. Klicken Sie mit der rechten Maustaste auf ein Element, wählen Sie "Untersuchen" und notieren Sie sich die Klasse oder ID.
  2. Seien Sie spezifisch. .sidebar .widget-title ist besser als .widget-title, wenn Sie nur Widget-Titel in der Seitenleiste ansprechen möchten.
War das hilfreich?