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

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 zunächst zwei verschiedene Elemente auf Ihrer ursprünglichen Website. Ein Element wird für Ihre Originalsprache sein und das zweite für die Sprache, in die Sie sie übersetzen möchten. Diese beiden Elemente sind in der Originalversion vorhanden, werden aber aufgrund einer CSS-Umgehung nie gleichzeitig angezeigt (weitere Informationen unten).

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

Sie müssen für jedes Element einen spezifischen CSS-Selektor (Klasse oder ID) hinzufügen. Zum Beispiel "link-en" für das Symbol, das mit der englischen URL verknüpft werden soll, und "link-es" für das Symbol, das mit der spanischen URL verknüpft werden soll. Wenn Sie nicht wissen, was ein CSS-Selektor ist, finden Sie unten weitere Informationen.

3. Hinzufügen einiger benutzerdefinierter CSS

Gehen Sie dann zu Ihrem Weglot Dashboard > Wählen Sie Ihr Projekt aus > Einstellungen > Language Switcher und geben Sie diesen Code in das Feld "Custom CSS" ein:

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

In diesem Fall ist die Eigenschaft :not() eine Negations-Pseudoklasse, die auf ein Element passt, das nicht dargestellt wird.

Zum Beispiel, die Bedingung html:not([lang="es"]) bedeutet einfach "wenn die Sprache nicht Spanisch ist". Das bedeutet, dass der Code Ihre Website anweisen wird ausblenden dieses besondere Element, wenn die Sprache nicht Spanisch ist.

Vergessen Sie nicht, die richtigen Sprachen und die richtigen Klassen im obigen Code durch Ihre jeweiligen Sprachen zu ersetzen. Stellen Sie außerdem sicher, dass die Abkürzungen "en" und "es" die von Ihnen verwendeten sind.

Um den Sprachcode Ihrer Originalsprache zu finden, müssen Sie Ihren Quellcode aufrufen. Der Code wird ganz oben angezeigt:

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, müssen Sie den folgenden Code verwenden:

html:not([lang="en-US"]) .link-en,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,html:not([lang="es"]) .link-es, html:not([lang="de"]) .link-de, {
  display: none!important;
}

4. Zusätzliche Informationen

Was ist ein CSS-Selektor?

CSS-Selektoren werden verwendet, um die Elemente 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:

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: