Der WordPress-Block-Editor bietet ständig neue Möglichkeiten zur Anpassung deiner Website. In diesem Tutorial erfährst du, wie du mithilfe von Blöcken Website-Menüs in zwei Sprachen erstellen kannst. Außerdem lernst du, wie du einen Sprach-Umschalter erstellst, mit dem deine Besucher die Anzeigesprache deiner Website ändern können.
Hier kannst du dir eine Demo dazu ansehen:
In diesem Ratgeber
- Notizen und Referenzen
- Methode
- 1. Seiten und Seiten-Titelformen einrichten
- 2. Das Layout für dein Menü und deinen Sprach-Umschalter auswählen
- 3. Den Sprach-Umschalter erstellen
- 4. Ein Navigationsmenü für deine ersten Sprachseiten hinzufügen
- 5. Dein neues Menü und deinen neuen Sprach-Umschalter speichern
- 6. Zweites Sprachmenü
- 7. Deine neuen Menüs zu anderen Seiten hinzufügen
- 8. Hinzufügen weiterer Seiten
- Dieser Sprach-Umschalter übersetzt deine Seiten nicht, sondern ermöglicht es dir, Besuchern deine Website in zwei oder mehr Sprachen zu präsentieren. Du musst deine Seiten selbst übersetzen!
- Dieser Sprach-Umschalter leitet Benutzer nur zur Startseite der jeweiligen Sprache weiter.
- Du musst auch deine Menüs aktualisieren, wenn du zusätzliche Seiten zu deiner Website hinzufügst.
- Die Ersteinrichtung dauert einige Zeit, aber spätere Anpassungen und Aktualisierungen sind schnell möglich.
Bei diesem Tutorial werden die folgenden Funktionen verwendet:
- Seiten-Titelformen
- Über- und untergeordnete Seiten
- Statische Startseite
- Spaltenblock
- Absatzblock
- (Optional) Inline-Bilder (über die Toolbar des Absatzblocks verfügbar)
- Navigationsblock
- Wiederverwendbare Blöcke
1. Seiten und Seiten-Titelformen einrichten
2. Das Layout für dein Menü und deinen Sprach-Umschalter auswählen
3. Den Sprach-Umschalter erstellen
4. Ein Navigationsmenü hinzufügen
5. Dein neues Menü und deinen neuen Sprach-Umschalter speichern
6. Zweites Sprachmenü
7. Deine neuen Menüs zu anderen Seiten hinzufügen
8. Hinzufügen weiterer Seiten
Damit dieses Tutorial optimal funktioniert, empfehlen wir, eines unserer hier aufgelisteten Themes zu verwenden, die mit dem Block-Editor kompatibel sind.
Gehe zu Meine Website > Website > Seiten. Erstelle zunächst je eine Startseite für jede Sprache, die du auf deiner Website haben möchtest. Du musst noch nicht viel Inhalt hinzufügen; ein Seitentitel reicht erst einmal aus.
Veröffentliche jede Seite, damit sie aktualisiert wird, und ändere dann die Seiten- Titelform jeder Seite so, dass sie auf die entsprechende Sprache verweist. In diesem Beispiel hat die französische Startseite den Titel Accueil und die Seiten-Titelform /fr/:
Weise die Startseite in deiner bevorzugten Sprache als die statische Startseite für deine Website zu. So wird sichergestellt, dass Besucher deiner Website die Website zuerst in einer Sprache sehen und dann zur anderen wechseln können.
Wenn du alle benötigten Startseiten hast, erstelle weitere Inhaltsseiten für die verschiedenen Sprachen. Du musst nach wie vor keine Inhalte hinzufügen. Du kannst erst einmal nur die Seite ohne Titel veröffentlichen.
Wenn du diese Seiten erstellst, weise sie als untergeordnete Seiten deiner Sprach-Startseiten zu. Verwende dazu den Abschnitt „Seitenattribute“:
Beispiel: Überblick über die Seitenstruktur
Klicke unter Meine Website > Website > Seiten auf den Titel der Startseite in deiner Hauptsprache, um sie im WordPress-Editor zu öffnen.
Füge unter dem Seitentitel im Editor einen Spaltenblock hinzu und wähle ein zweispaltiges Layout aus. Wenn du dich für ein anderes Layout entscheidest, ist das kein Problem: Du kannst es in den Blockeinstellungen ändern. Im Leitfaden Spalten-Block findest du weitere Informationen dazu.
Wir empfehlen, ein Layout mit einer größeren und einer kleineren Spalte zu verwenden. Die kleinere Spalte enthält deinen Sprach-Umschalter und die größere Spalte enthält dein Menü.
Lege den Spaltenblock auf weite oder volle Breite fest:
Je nachdem, wie du deinen Sprach-Umschalter gestalten möchtest, gibt es zwei Methoden: Du kannst entweder die Sprachnamen eintippen oder mithilfe von Inline-Bildern Flaggen anzeigen.
Hinweis: Wir raten aus zwei Gründen davon ab, Flaggen zur Darstellung von Sprachen zu verwenden:
1. Für Besucher, die die Flaggenbilder möglicherweise nicht sehen können, ist die Zugänglichkeit eingeschränkt.
2. Je nachdem, welche Flaggen deine Besucher mit einer bestimmten Sprache assoziieren, kann das zu Verwirrung führen. Nicht jeder denkt gleich!
Der Einfachheit halber empfehlen wir, Textlinks zu verwenden (Methode 1 oder 2).
Methode 1: Textlinks in einem Navigationsblock
Du kannst dann den Text jedes Eintrags so ändern, dass er den Namen der jeweiligen Sprache (oder die Kurzversion) enthält:
Methode 2: Textlinks in einem Absatzblock
Gib die Namen der Sprachen in deinem bevorzugten Format ein, z. B. „EN“ und „FR“ oder „Englisch“ und „Französisch“.
Markiere jeden Sprachnamen und klicke auf den Button Hyperlink einfügen, um diesen Sprachnamen mit der entsprechenden Startseite zu verknüpfen. Beispiel:
Methode 3: Inline-Bilder
Wenn das Bild hinzugefügt wurde, kannst du darauf klicken, um dessen Größe zu ändern:
In der Spalte, die deinem neuen Sprach-Umschalter gegenüberliegt, fügst du nun einen Navigationsblock hinzu. Klicke auf die leere Spalte, um das Blockmenü zu öffnen, und suche entweder nach Navigation oder sieh im Abschnitt Layout-Elemente nach:
Der Block wird mit zwei Optionen angezeigt: Wähle Leeres Menü aus. Nun kannst du deine Bilder zum Block hinzufügen:
Füge für jede Seite in deiner Muttersprache einen Link hinzu. Klicke auf den Button „Block hinzufügen“ (der schwarze „+“-Button) rechts neben dem Navigationsblock, um einen zusätzlichen Link hinzuzufügen:
Verwende den Button Block-Navigation oben im Editor, um deine Spalten auszuwählen:
Zeige über die Toolbar des Spaltenblocks weitere Optionen an und wähle Zu wiederverwendbaren Blöcken hinzufügen aus:
Gib deinem neuen wiederverwendbaren Block einen leicht verständlichen Namen, wie z. B. Menü – Deutsch. In diesem Leitfaden erfährst du mehr zur Funktionsweise wiederverwendbarer Blöcke.
Vergiss nicht, deine Seite zu aktualisieren, um auch die Änderungen an der Seite zu speichern. Herzlichen Glückwunsch: Dein erstes Menü und der Sprach-Umschalter sind fertig!
Um das Menü für die zweite Sprache zu erstellen, kannst du die Schritte 1 – 5 erneut ausführen oder eine schnellere Variante wählen:
Öffne im WordPress-Editor eine der Seiten in deiner Zweitsprache. Klicke auf den Button „Block hinzufügen“ (der schwarze „+“-Button), um der Seite einen neuen Block hinzuzufügen. Scrolle in der Liste der Blöcke ganz nach unten: Hier findest du die Kategorie für wiederverwendbare Blöcke, in der dein Menü gespeichert ist. Alternativ kannst du es über das Suchfeld finden.
Sobald der Menüblock zu dieser Seite hinzugefügt wurde, kannst du die Option In normale Blöcke umwandeln im Menü „Weitere Optionen“ verwenden:
Sobald die Blöcke als normale Blöcke und nicht mehr als wiederverwendbare Blöcke angezeigt werden, kannst du den Navigationsblock so aktualisieren, dass er stattdessen die Seiten deiner zweiten Sprache verlinkt.
Methode 1: Navigationsblock entfernen und einen neuen hinzufügen
Methode 2: Navigationselemente ändern
Wenn du die Änderungen vorgenommen hast, speicherst du diesen neuen Spaltenblock als neuen wiederverwendbaren Block wie in Schritt 5 oben und gibst ihm einen eindeutigen Namen, der angibt, dass dies das Menü für deine zweite Sprache ist.
Vergiss nicht, deine Seite zu aktualisieren, um auch die Änderungen an der Seite zu speichern. Herzlichen Glückwunsch: Dein zweites Menü und der Sprach-Umschalter sind fertig!
Deine Menüs und dein Sprach-Umschalter sind fertig. Du kannst jetzt deine beiden Sprachmenüs zu den anderen Seiten für die jeweiligen Sprachen hinzufügen, wie in Schritt 6 oben beschrieben. Beachte bitte Folgendes: Sobald die wiederverwendbaren Blöcke gespeichert wurden, kannst du sie einfach auf anderen Seiten einfügen, musst sie aber nicht in normale Blöcke umwandeln.
Hast du weitere Seiten für jede Sprache erstellt und möchtest sie zu deinem Menü hinzufügen? Keine Sorge! Du kannst deine wiederverwendbaren Blöcke bearbeiten und sie werden auf jeder Seite aktualisiert, auf der sie hinzugefügt wurden. Hier findest du nähere Details.
Support 