WPML bietet einen benutzerfreundlichen Sprachumschalter, aber manchmal möchten Sie nicht, dass er auf allen Seiten angezeigt wird. Erfahren Sie, wie Sie ihn nur auf bestimmten Seiten anzeigen oder verbergen können.
Das lässt sich ganz einfach mit ein paar Zeilen CSS erledigen.
Den Sprachumschalter nur auf bestimmten Seiten anzeigen
Schritt 1: Den Sprachumschalter auf allen Seiten verbergen
Zuerst müssen Sie überprüfen, welche Klasse unser Sprachumschalter verwendet.
Sie können dies über die Entwicklertools des Browsers überprüfen:
- Rufen Sie Ihre Website im Frontend auf und drücken Sie die Taste F12 auf Ihrer Tastatur.
- Verwenden Sie das „Untersuchen“-Werkzeug, um den Sprachumschalter auszuwählen, und das zugehörige HTML-Markup wird angezeigt.
Zwei Klassen kommen bei einem Sprachumschalter besonders häufig vor:
- Klasse wpml-ls-menu-item, wenn der Umschalter in einem Menü erscheint
- Klasse wpml-ls, wenn der Umschalter in der Fußzeile erscheint
Sobald Sie die richtige Klasse kennen, gehen Sie zur Seite Design → Anpassen , klicken Sie auf Zusätzliches CSS und fügen Sie das folgende CSS zu Ihrer Website hinzu.
Menü-Sprachumschalter verbergen
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Dadurch wird der Sprachumschalter auf allen Seiten verborgen.
Alternativ können Sie diese Styling-Regeln zur Datei style.css Ihres Themes hinzufügen, aber stellen Sie sicher, dass Sie ein Child-Theme verwenden. Andernfalls gehen Ihre eigenen Styling-Anpassungen verloren, wenn Sie das Theme aktualisieren.
Detaillierte Informationen zu den CSS-Klassen des Sprachumschalters finden Sie auf unserer Seite über CSS-Styling für Sprachumschalter.
Schritt 2: Den Sprachumschalter auf einer bestimmten Seite anzeigen
Im nächsten Schritt müssen Sie ein weiteres CSS-Snippet hinzufügen, um den Sprachumschalter nur auf den gewünschten Seiten anzuzeigen.
WordPress fügt dem body-Tag jeder Seite automatisch bestimmte Klassen hinzu. Dadurch können Sie den Sprachumschalter auf einer bestimmten Seite gezielt ansprechen.
Um die Klasse zu finden, öffnen Sie die Seite, auf der Sie den Sprachumschalter im Frontend anzeigen möchten. Verwenden Sie erneut das Inspektor-Werkzeug des Browsers und suchen Sie nach dem body-Tag.
Sie sehen dann etwa Folgendes:
Die ID-Klasse finden
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
In diesem Fall wird die Klasse page-id-2 nur bei dieser bestimmten Seite hinzugefügt. Die Zahl steht für die ID dieser Seite, und Sie können sie für Ihr Snippet verwenden.
Das komplette Snippet sollte so aussehen:
Menü-Sprachumschalter verbergen – komplett
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}Denken Sie daran, die Klasse page-id-2 durch die Klasse Ihrer Seite zu ersetzen.
Hier einige der spezifischen Klassen, die Sie verwenden können:
- page-id-X: Wird für Seiten verwendet (ersetzen Sie X durch die ID der Seite)
- postid-X: Wird für Beiträge verwendet (ersetzen Sie X durch die ID des Beitrags)
- home: Wird für die Startseite verwendet
- single-post: Wird für alle Beiträge verwendet (nicht für einen bestimmten)
- page: Wird für alle Seiten verwendet (nicht für eine bestimmte)
Den Sprachumschalter nur auf bestimmten Seiten verbergen
Das Verbergen des Sprachumschalters auf bestimmten Seiten ist den vorherigen Schritten sehr ähnlich. Aber anstatt ihn auf allen Seiten zu verbergen, verbergen Sie ihn nur auf einer bestimmten Seite.
Dafür müssen Sie nur die spezifische Klasse der Seite herausfinden und diese dann verwenden, um den Sprachumschalter dieser Seite zu verbergen.
Ihr CSS-Snippet sollte so aussehen:
Sprachumschalter nur auf der Seite mit der ID 2 verbergen
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}Denken Sie daran, die Klasse page-id-2 durch Ihre spezifische Klasse zu ersetzen.