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.

1. Erstellen Sie 2 verschiedene Elemente

2. CSS-Selektoren für jedes Element hinzufügen

3. Hinzufügen einiger benutzerdefinierter CSS

4. CSS auf einer bestimmten Seite anwenden

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. CSS auf einer bestimmten Seite anwenden

Manchmal möchten Sie möglicherweise benutzerdefiniertes CSS nur auf bestimmten Seiten Ihrer Website anwenden. Beispielsweise möchten Sie möglicherweise den Weglot-Umschalter auf URLs ausblenden, die /widget oder bestimmte Elemente nur auf Blog-Seiten ausschließen.

Dies kann mithilfe von Erweiterte CSS-Selektoren die sich auf die Seite stützen kanonische URL oder hreflang Tags verfügbar auf der Seite <head> .

Durch Verwendung der CSS-Pseudoklasse :has() In Kombination mit Attributselektoren kann CSS „erkennen“, ob die aktuelle Seiten-URL einen bestimmten Pfad enthält.

⚠️ Diese Methode funktioniert nur, wenn Ihre Website Folgendes enthält: canonical oder hreflang Tags im DOM. Ohne sie ist es nicht möglich, URLs allein mit CSS anzusprechen.

Beispiel: Den Weglot-Umschalter nur auf /widget Seiten

html:has(head link[rel="alternate"][hreflang="en"][href*="/widget"]) .weglot-container {  display: none; }

Dadurch wird der Weglot-Sprachumschalter nur auf Seiten ausgeblendet, die /widget , während es überall sonst sichtbar bleibt.

5. Weitere 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: