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. 

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:
  • 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. 

Veröffentlicht am: 3. März 2023
Letztes Update am: 15. August 2026

2 comments

  • Michael Baierl - Website Heroes
    Vor 4 Jahren Antworten

    Lieber Harry,
    wie immer eine super Anleitung.
    Eine Anmerkung von meiner Seite: wenn man das ganze wie von dir vorgeschlagen umsetzt, dann sollte man das Caching (WP Rocket, Nitropack, W3 Total Cache oder ähnliches) für diese Seite deaktivieren… sonst wird es (leider) nicht funkionieren.
    lg
    Michael

    • A
      Harry Martin
      Vor 4 Jahren Antworten

      Ausprobieren, im Falle des Falles lässt sich das Caching sicher auch für die eine Seite rausnehmen. Und während der Entwicklung wird man Caching ohnehin deaktivieren.

Hinterlasse deinen Kommentar