Suche
Suche
Close this search box.
Inhalte nach Browsersprache

Inhalte nach Browsersprache einblenden

tl;dr: Mit der Erweiterung Dynamic Visibility kann man bestimmen unter welchen Voraussetzungen Inhalte im Elementor ein- oder ausgeblendet werden. Wie man diese Funktion dafür verwenden kann abhängig von der Browsersprache Content einzublenden steht in diesem Artikel. 

Inhalt

Die Anforderung

Immer öfter werden Websites – besonders im technischen Umfeld – nur mehr in English angeboten, auch wenn die Betreiber der Site im deutschen Sprachraum zu Hause sind. Auch im wissenschaftlichen Umfeld sind englischsprachige Websites üblich. Das ist auch gar kein Problem – denn abgesehen von der in diesem Bereich verbreiteten Sprachkenntnissen erfreuen sich Übersetzungdienste aller Art immer größerer Beliebtheit. 

Kostenlose Browser-Erweiterungen wie Google Translate, DeepL oder Quick Translate verbreiten sich zusehends.  Trotzdem kann es nicht schaden Webusern eine kleine Info anzuzeigen, dass eine Seite nicht in der (vom User gewählten) Browsersprache vorliegt und sie doch eine Erweiterung installieren mögen, so ferne sie eine automatische Übersetzung benötigen.

Google Translate Languages
Die Browsererweiterung Google Translate erlaubt automatische Übersetzungen in viele Sprachen.

Die Werkzeuge für die Umsetzung

Die Werkzeuge diesem Beispiel sind:

Den Sprachencontainer erstellen

Zuerst erstellt man den Container, der angezeigt werden soll, so ferne der Webuser eine bestimmte Browsersprache eingestellt hatt. Der Gestaltung sind keine Grenzen gesetzt, es muss nur beachtet werden, dass alle Teile innerhalb eines Containers liegen. 

 

Hinweis Deutsch
So könnte ein Hinweis für deutschsprachige Besucher aussehen

Dynamic Visibility - Custom Condition

Um nun diesen Container nur für deutschsprachige User sichtbar zu machen wird die Erweiterung Dynamic Content for Elementor verwendet. Im Unterschied zur kostenlosen Version kann man in der Pro-Version Custom Conditions erstellen. 

Dynamic Conditions
Für den Container muss zuerst die Dynamische Sichtbarkeit aktiviert werden

Bei aktivem Container wird zuerst die Option Visibility auf ON gesetzt, der Display Mode wird auf Show gestellt. Nun stehen eine Reihe von Triggern zur Verfügung: 

  • Basierend auf Datum und Uhrzeit:
    • Start und End-Datum;
    • Tage der Woche;
    • Zeitraum;
  • Anzeige nur wenn User eingeloggt ist;
  • Anzeige nur, wenn der User eine bestimmte Rolle hat;
  • Anzeige nur bei bestimmter IP;
  • Anzeige nur bei einem bestimmten Browser;
  • Kontext: CPT, Seite, Beitrag, Term, Meta;
  • Konditionale Logik: Conditional Tags für Beiträge, Conditional Tags für Seiten und Archive.

Das ist alles wunderbar, aber in diesem Anwendungsfall nicht ausreichend. Was man hier benötigt ist eine Custom Condition.

				
					$lang = locale_accept_from_http($_SERVER['HTTP_ACCEPT_LANGUAGE']);	
$lang = substr($lang, 0, 2);
if ($lang =='de') { return true; };	
				
			

In der ersten Zeile wird die Browsersprache ermittelt. Da von manchen Sprachen mehrere Versionen gibt (de_DE, de_CH, de_AT, …) aber die alle deutsch sind, werden nur die ersten beiden Zeichen zum Vergleich herangezogen, ob diese eben de lauten. Wenn ja, wird wahr zurückgegeben.

Damit ist die Überprüfung auch schon abgeschlossen. Nun kann man überprüfen, ob das auch funktioniert:

Die Sprache des Browsers läßt sich übrigens leicht ändern. Der Screenshot zeigt Google Chrome, aber auch in Firefox ist das über die Einstellungen möglich. Safari und Co gehen ev. den Umweg über die Systemeinstellungen.

Google Chrome Sprache Einstellen
Die Browsersprache lässt sich (hier am Beispiel Google Chrome) in den Einstellungen des Browsers anpassen.

Fazit

Es ist gar nicht kompliziert eine sprachenabhängige Anzeige umzusetzen. Mit den richtigen Tools wie Dynamic Content for Elementor und ganz wenig PHP lassen sich solche Kleinigkeiten gut verwirklichen. Und jede gute Website besteht aus sehr vielen solcher Kleinigkeiten.