Wie kann man Inhalte in einer bestimmten Sprache anzeigen/ausblenden?

In diesem Artikel erfahren Sie, wie Sie Inhalte in einer bestimmten Sprache anzeigen und/oder ausblenden können.

Wenn Sie bestimmte Inhalte nur in einer bestimmten Sprache anzeigen möchten (z. B. eine Schaltfläche mit einem Link), führen Sie die folgenden Schritte aus:

1. Erstellen Sie zwei verschiedene Elemente

Erstellen Sie auf Ihrer ursprünglichen Website zwei Elemente:

• Eine für Ihre Originalsprache
• Eine für die übersetzte Sprache

Beide Elemente sind in Ihrer ursprünglichen Version vorhanden, aber dank einer CSS-Regel wird jeweils nur eines angezeigt.

2. Hinzufügen eines CSS-Selektors für jedes Element

Weisen Sie jedem Element einen eindeutigen CSS-Selektor (Klasse oder ID) zu. Zum Beispiel:

• link-en für die englische Version
• link-es für die spanische Version

Sie wissen nicht, was ein CSS-Selektor ist? Siehe den Abschnitt "Was ist ein CSS-Selektor?" unten.

3. Hinzufügen einiger benutzerdefinierter CSS

Sobald Sie die Klasse/ID zu den Elementen hinzugefügt haben, die Sie ausblenden/anzeigen möchten, gehen Sie zu Ihrem Weglot Dashboard > Wählen Sie Ihr Projekt > Einstellungen > Sprachumschaltung und geben Sie diesen Code in das Feld "Custom CSS" ein:

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

Wie es funktioniert:

• :not() ist eine CSS-Pseudoklasse mit der Bedeutung "wenn es NICHT diese Sprache ist".
• Zum Beispiel, html:not([lang="es"]) bedeutet "dieses Element ausblenden, wenn die ausgewählte Sprache nicht Spanisch ist".

Vergessen Sie das nicht:

• Ersetzen Sie en und es mit den richtigen Sprachcodes für Ihre Website
• Ersetzen Sie .link-en und .link-es mit Ihren tatsächlichen Klassen- oder ID-Namen

Sie wissen nicht, wie Sie auf Ihren Quellcode zugreifen können? Weitere Informationen finden Sie unten.

Wenn Ihre Ausgangssprache Englisch mit einem en-US-Kurzcode ist, ist hier der endgültige Code, den Sie verwenden müssen:

html:not([lang="en-US"]) .link-en {
   display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}

Wenn Sie schließlich den Code für eine dritte Sprache, z. B. Deutsch, anwenden möchten, können Sie nur eine Zeile mit benutzerdefiniertem CSS hinzufügen. Sie sieht dann so aus:

html:not([lang="en-US"]) .link-en {
  display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}
html:not([lang="de"]) .link-de {
  display: none!important;
}

4. Zusätzliche Informationen

Was ist ein CSS-Selektor?

CSS-Selektoren werden verwendet, um HTML-Elemente (Elemente auf Ihren Seiten) zu finden oder auszuwählen, die Sie gestalten, bearbeiten oder, in unserem Fall, ausblenden möchten. Wenn Sie Inhalte zu Ihrer ursprünglichen Website hinzufügen, sollten Sie in der Lage sein, einen CSS-Selektor hinzuzufügen.

Zum Beispiel können Sie entweder:

- Suchen Sie ein spezielles Feld, je nachdem, welches CMS, welche App oder welches Plugin Sie für die Erstellung der Inhalte verwenden:

Oder

- Fügen Sie die Klasse oder die ID manuell direkt in den HTML-Code ein, so dass er wie folgt aussieht:

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

Danach müssen Sie CSS-Regeln verwenden, um die Elemente auszublenden, die je nach der gewählten Sprache nicht angezeigt werden sollen.

Wie kann ich auf meinen Quellcode zugreifen?

Um auf Ihren Quellcode zuzugreifen, können Sie mit der rechten Maustaste auf Ihre Homepage klicken und dann auf "Seitenquelltext anzeigen" klicken: