So beheben Sie Styling- und CSS-Probleme bei Sprachumschaltern

Bestimmte Themes, die über benutzerdefinierte Menü-Generatoren verfügen, zeigen WPML-Sprachumschalter möglicherweise nicht korrekt an. Hier finden Sie Schritte zur Fehlerbehebung für Probleme im Zusammenhang mit dem Styling von Sprachumschaltern.

Zusätzlich bieten wir Ihnen eine detaillierte Beschreibung des CSS, das im Menü-Sprachumschalter von WPML verwendet wird, falls Sie nach erweiterten Anpassungsmöglichkeiten suchen.

So beheben Sie Anzeigeprobleme bei Dropdown- und Menü-Sprachumschaltern

Wie bei jedem Debugging-Prozess gibt es einige erste Schritte, um herauszufinden, ob etwas das korrekte Rendern Ihres Sprachumschalters stört.

1. Fügen Sie vorübergehend einen Sprachumschalter in der Fußzeile hinzu, der über ein sehr einfaches CSS verfügt und auf fast jeder Website funktioniert.
2. Entfernen Sie vorübergehend jegliches benutzerdefinierte CSS und verwenden Sie den Sprachumschalter von WPML mit seinen Standardeinstellungen
3. Verwenden Sie den CSS-Debugger Ihres Browsers und prüfen Sie, ob offensichtliche CSS-Konflikte vorliegen. Wenn Sie die Ursache finden, können Sie das CSS-Styling auf der Seite WPML → Sprachen im Abschnitt Sprachumschalter-Optionen überschreiben. Klicken Sie dort auf den Link Zusätzliches CSS.

Wenn es Probleme zwischen dem Theme und WPML gibt, wird das WPML-Support-Team mit unserem Kompatibilitätsteam und dem Theme-Autor zusammenarbeiten, um Ihnen eine geeignete Lösung anzubieten.

CSS-Klassen pro Sprache

Im Folgenden finden Sie die Liste der CSS-Klassen für jede Sprache:

• wpml-ls-slot-{slug}: z. B. „wpml-ls-slot-sidebar-1“.
• wpml-ls-item.
• wpml-ls-item-{language_code}: z. B. „wpml-ls-item-en“.
• wpml-ls-current-language: nur für das Element der aktuellen Sprache.
• wpml-ls-menu-item: nur für Sprachumschalter in Menüs.
• wpml-ls-first-item: um das erste Sprachelement der Liste anzusprechen.
• wpml-ls-last-item: um das letzte Sprachelement der Liste anzusprechen)

Wenn das Ändern von CSS-Klassen für jede Sprache erforderlich ist, bietet WPML den Filter-Hook wpml_ls_model_language_css_classes an.

Nehmen wir beispielsweise an, Sie müssen für jede Sprache eine Klasse my-custom-item-class hinzufügen. In diesem Fall können Sie einen Code wie den folgenden zur Datei functions.php Ihres Themes hinzufügen:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

CSS-Klassen für den Sprachumschalter-Wrapper

Im Folgenden finden Sie die Liste der CSS-Klassen für den Sprachumschalter-Wrapper:

• wpml-ls
• wpml-ls-{group}-{slug}: z. B. „wpml-ls-statics-footer“.
• wpml-ls-{template-slug}: z. B. „wpml-ls-legacy-dropdown-click“.
• wpml-ls-rtl: für RTL-Sprachen.
• wpml-ls-touch-device: diese Klasse wird für Mobil- und Tablet-Geräte hinzugefügt.

In der folgenden Tabelle zeigen wir, wie CSS-Klassen abhängig von {group} und {slug} aufgebaut sind:

Wie zuvor können Sie unseren Filter-Hook wpml_ls_model_css_classes verwenden, wenn Sie eine benutzerdefinierte CSS-Klasse für Ihren Sprachumschalter-Wrapper hinzufügen müssen. Ein Code wie der folgende in der Datei functions.php Ihres Themes fügt eine CSS-Klasse my-custom-wrapper-class hinzu:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Hinweis: WPML fügt nur einige Elemente für die Sprachumschalter-Option in Menüs ein. Infolgedessen verfügt sie über keine Wrapper-Klasse.

Anpassen eines Sprachumschalters mit CSS

Wir können ganz einfach einige benutzerdefinierte CSS-Stile auf der Seite WPML → Sprachen im Abschnitt Sprachumschalter-Optionen hinzufügen. Klicken Sie dort auf den Link Zusätzliches CSS.

Beispiel 1: Die aktuelle Sprache fett anzeigen

.wpml-ls-current-language {
font-weight: bold;
}

Beispiel 2: Die Schriftgröße nur für den Sprachumschalter in der Fußzeile ändern

.wpml-ls-statics-footer {
    font-size: 18px;
}

Beispiel 3: Einen rechten Rand nach dem letzten Sprachelement hinzufügen

.wpml-ls-last-item {
    margin-right: 10px;
}

Sie können Selektoren auch kombinieren, um Elemente gezielter anzusprechen.

Beispiel 4: Fetten Text für die aktuelle Sprache des Sprachumschalters in der Fußzeile hinzufügen

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Beispiel 5: Die Breite eines Sprachumschalters in einem Menü festlegen

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}