WordPress kann nur über Plugins mehrsprachig umgesetzt werden. WPML und Polylang sind dabei die bekanntesten. Leider wird die Darstellung der Sprachen im Menü nur notdürftig unterstützt. Ohne gute Kenntnisse von CSS, hat man keine Chance!
Genauso ist es mir bei den letzten Projekten gegangen. Es kamen die Themes Divi und Avada sowie das Plugin Polylang zum Einsatz. In allen Kombinationen sah das Design vor, die Sprachen in Kurzform mit Trennstrich (DE | EN) in die Navigation einzubinden.
Nebeneinander ist unproblematisch, doch der Trennstrich und die farbliche Hervorhebung der aktiven Sprache wird nicht angeboten.
Trennstrich mit CSS einbauen (Avada und Polylang)
Bei der Konfiguration von Polylang ist wichtig, den Namen der Sprache verkürzt zu vergeben (ansonsten wird der komplette bzw. keine Abkürzung im Menü angezeigt).
Im Menü erstellt man (falls noch nicht geschehen) einen Sprachumschalter fest.
In den Details des Menüeintrags stellt man auf „Darstellung der Sprach-Namen“ um.
Im Ergebnis erscheinen die Sprachen neben einander, aber ohne Trennstrich:
Um es so aussehen zu lassen wie im folgenden Bild, benötigen wir ein paar Zeilen CSS-Code
Zuerst möchten wir einen Abstand zum Hauptmenü haben:
/* Abstand nach links */
#menu-item-1555-de {margin-left:150px;}Bitte nicht einfach kopieren! Vorher müssen Sie noch die Menü-Item-Zahl herausfinden. Klicken Sie dafür mit der rechten Maustaste auf „DE“ und lassen sich den Code dafür anzeigen (in Firefox heißt es „Element untersuchen“).
Im Code schauen Sie nach dem übergeordneteten Listenpunkt. Dort ist die menu-item-Nummer hinterlegt:
Als nächstes fügen wir den Trennstrich mit CSS ein:
#menu-hauptnavigation li#menu-item-1555-de .menu-text::after
{
content:' |';
color:#000;
}Damit etwas mehr Abstand ist bzw. der Abstand zwischen Strich und den Sprachnamen gleich ist, benutzt man folgendes CSS:
/* Sprachumschalter mehr Abstand */
.fusion-main-menu ul li.lang-item
{padding-right:8px !important;}Wer sich an dem Unterstrich stört, kann mit diesem CSS eingreifen:
/* Unterstrich entfernen */
.fusion-header-layout-v1.fusion-top-header .fusion-main-menu a.fusion-bottombar-highlight::after
{
border-top-style:none !important;
}Die inaktive Sprache kann man auch anders darstellen; hier in grau:
.fusion-body .fusion-main-menu ul li.lang-item.current-lang a {
color:#ccc;
}Sprachumschalter mit Trennstrich mit DIVI und Polylang
Genauso wie Avada benutzt auch DIVI mehrere Designvorlagen für die Darstellung des Menüs. In diesem Beispiel ist das Menü mit mobiler Ansicht gewählt. Dies hat natürlich Auswirkungen auf die genutzten HTML-Anweisungen bzw. CSS-Auszeichnungen.
Also bitte nicht blind kopieren!
.et_header_style_fullscreen ul#mobile_menu_slide>li#menu-item-3938-de>a::before {
content: "| ";
margin-left: 5px;
position: relative;
top: -1px;
font-weight: bold;
}
Wer mit WPML arbeitet oder ein anderes Theme benutzt, sollte mit den CSS-Grundbausteinen und etwas ausprobieren auch eine Lösung finden 🙂