Navigation-Block beim Full Site Editing (FSE) – Anleitung

Der Navigation-Block beim Full Site Editing (FSE) – eine Anleitung

Die Erstellung der Navigation beim Full Site Editing (FSE) auf WordPress-Websites ist eines der meist diskutierten Dinge. Auf Basis des Beitrags zur Erstellung eines speziellen Kategorie-Templates erläutere ich im Rahmen einer Anleitung, wie man den Navigations-Block bei einem Block Theme wie z. B. Twenty Twenty-Two mit Untermenüs einsetzt.

Zukünftige Aktualisierungen betreffen u. a. auch den Navigation-Block

Es gibt noch viele Probleme zu lösen, Funktionen zu verbessern und neue Funktionen zur vollständigen Bearbeitung der Website hinzuzufügen. Insofern stellt diese Anleitung sozusagen den aktuellen Stand (10/2022) dar. Sollten sich Änderungen und/oder Ergänzungen in der Zukunft ergeben, werde ich diesen Beitrag entsprechend aktualisieren.

Navigation erstellen

Zunächst müssen wir den Editor über Design > Editor (Beta) starten. Um ein Template-Teil (und dazu gehört der Header) zu bearbeiten, muss man oben links auf das Icon klicken. Das kann durchaus auch das WordPress-Logo sein.

Achtung

Der Editor (Beta) steht allerdings nur zur Verfügung, wenn ein entsprechendes Block Theme wie z. B. Twenty Twenty-Two aktiviert ist. In WordPress 6.1 wird als neues Standard-Theme das Block Theme Twenty Twenty-Three zur Verfügung stehen.

Templates und Template-Teile bearbeiten
Templates und Template-Teile bearbeiten

Bei Twenty Twenty-Two gibt es (stadardmäßig z. Zt.) vier Template-Teile, darunter ein Footer und drei Header-Vorlagen.

Wenn man von Grund auf einen neuen Header mit Navigation erstellen möchte, dann kann man das oben rechts über „Hinzufügen“ machen. Um einen bestehenden Header zu bearbeiten, klickt man einfach auf das Template, das man bearbeiten möchte.

In unserem Fall wollen wir einen komplett neuen Header mit Navigation erstellen:

  1. Button „Hinzufügen“
  2. Eingabe des Namen für das Template-Teil: „Mein neuer Header“
  3. Auswahl „Header“
  4. Bestätigung mit dem Button „Erstellen“
Einen neuen Header "mein neuer Header" mit Navigation erstellen
Einen neuen Header „mein neuer Header“ mit Navigation erstellen

Die Navigation, die im folgenden Screenshot zu sehen ist, soll jetzt erstellt und so erweitert werden, dass unter dem Oberpunkt „Beitragsübersichten“ die Unterpunkte „Städtetour“, „Wanderungen“ und „Allgemein“ mit den entsprechenden Beiträgen zu sehen sind.

Navigation und Verlinkung der Kategorien erstellen
Navigation und Verlinkung der Kategorien erstellen

(Haupt-)Menüpunkte erstellen

Das Menü soll aber zunächst aus den Menüpunkten „Beispiel-Seite“, „Home“, „Blog“, „Portfolio“ und „Service“ bestehen. Bei „Blog“ sollen die Beiträge in der Übersicht erscheinen (Archive), „Home“ ist die Startseite, die unter Einstellungen > Lesen festgelegt wurde. Der Menüpunkt „Blog“ soll dann im nächsten Schritt umbenannt werden und Untermenüpunkte enthalten. Aber der Reihe nach:

Einstellungen unter Einstellungen > Lesen
Einstellungen unter Einstellungen > Lesen

Wenn bereits Seiten und Beiträge angelegt wurden, dann erscheinen diese bei der Erstellung der Navigation zumindest teilweise automatisch. Hier wäre eine Option „Leere Navigation“ oder ähnlich wünschenswert. In unserem Fall wollen wir mit einer leeren Navigation starten und löschen dementsprechend die evtl. bereits vorhandenen Menüpunkte.

Achtung

Übrigens: wenn man bereits eine Navigation mit dem Namen vorher mal erstellt hatte, diese gelöscht hat und dann unter dem gleichen Namen die Navigation nochmals erstellt, dann sind die Einstellungen für diesen Navigations-Block weiterhin vorhanden. Insofern ist offensichtlich, dass diese Einstellungen auch nach Löschen noch in der Datenbank gespeichert sind.

In dem folgenden Screenshot ist bereits der Menüpunkt „Home“ eingefügt. Wie ich diesen Menüpunkt eingefügt habe, zeige ich anhand eines weiteren Menüpunkts: Um den Menüpunkt mit der Seite „Service“ anzulegen, muss man zunächst auf „+“ (1) klicken. In dem Fall wird ein Dialog geöffnet, bei dem unterhalb des Suchfeldes auch einige Seiten oder Beiträge als Vorschläge aufgelistet werden. Weitere Seiten oder Beiträge kann man durch entsprechende Eingabe in dem Suchfeld als Vorschläge erhalten.

Menüpunkte bei der Navigation anlegen
Menüpunkte bei der Navigation anlegen

Auf die oben geschilderte Art kann man dann die weiteren Menüpunkte anlegen, so dass zunächst die Navigation vollständig ist. Wenn man die Reihenfolge der Menüpunkte ändern möchte, kann man das über die Pfeile links und rechts (3) erreichen.

Untermenü erstellen

Navigation beim Full Site Editing (FSE) in WordPress 6.1
Navigation beim Full Site Editing (FSE) mit der Kategorie einfügen

Über Design > Editor (Beta) starten wir die Bearbeitung. Die Listenansicht (1) ist in jedem Fall ein hilfreiches Werkzeug beim Full Site Editing, um die richtige Stelle zu erwischen. Anschließend klickt man auf das Icon für Link (2). Dann wird ein Dialog für die Bezeichnung und den Link geöffnet, wo der Text für den Menüpunkt „Blog“ zunächst in „Beitragsübersichten“ geändert wird (3). Da das ein Oberpunkt mit weiteren Untermenüpunkten werden soll, ändern wir den Link auf „#“ (4). Damit wird verhindert, dass bei Anklicken des Menüpunktes eine Verlinkung geöffnet wird.

Schließlich klicken wir auf das Icon (5), um einen Untermenüpunkt einzufügen. Unter „Beitragsübersichten“ erscheint jetzt ein Rahmen mit einem „+“. Wenn man auf „+“ klickt, erscheint „Link hinzufügen“. In dem folgenden Dialog kann man bei dem Eingabefeld „Suchen oder URL eingeben“ „Städtetour“ eingeben. Dann erscheint automatisch als Vorschlag die richtige Kategorie mit dem Template, das wir bereits erstellt haben.

Erstellung eines Untermenüs beim Full Site Editing (FSE)
Erstellung eines Untermenüs beim Full Site Editing (FSE)

Auf die genannte Art kann man das Untermenü vervollständigen und das das Menü ist damit komplett.

Neue Optionen beim Navigation-Block in WordPress 6.1

Eine der am häufigsten nachgefragten Funktionen, die nicht rechtzeitig für WordPress 6.0 fertiggestellt wurden, war u. a. eine Seitenleiste zum Verwalten des Inhalts des Navigationsblocks bei Block Themes. Das ist allerdings in der kommenden Version WordPress 6.1 vorgesehen. Dadurch hat man eine bessere Übersicht bezogen auf die bereits erstellten Navigations-Blöcke.

Verwaltung der Navigation in WordPress 6.1
Verwaltung der Navigation

Die Auswahl der gewünschten Navigation erfolgt über die Eigenschaften des Navigations-Blocks:

Auswahl Navigation in WordPress 6.1
Auswahl Navigation

Über den Link „Menü verwalten“ kann man sich zusätzlich alle Navigations-Blöcke ansehen, aber z. Zt. nur die Beschreibung ändern. Da ist mir noch nicht klar, warum man an der Stelle nicht auch noch die Navigation bearbeiten kann. Aber evtl. wird das ja noch entsprechend in zukünftigen Versionen ergänzt.

Ab WordPress 6.1 wird für den Navigation-Block ein Fallback-Verhalten unterstützt:

  • Wenn keine Blockmenüs oder klassischen Menüs vorhanden sind, zeigt der Block eine Liste der verfügbaren Seiten mithilfe des Seitenlistenblocks an.
  • Wenn mehrere Blockmenüs vorhanden sind, zeigt der Navigation-Block das zuletzt erstellte Blockmenü an.

Außerdem wurde die Bedienung des Navigation-Block in WordPress 6.1 verbessert, die Farben verschiedener Elemente im Navigationsmenü lassen sich besser anpassen und die Gestaltungsoptionen für Untermenüs wurden erweitert.

Link Website: http://localhost/fse_testing/ auf Laptop

Fazit

Ich halte die Bedienung des Navigations-Blocks immer noch für verbesserungswürdig. Das ist meines Erachtens eine Schwachstelle beim Full Site Editing, Diese Anleitung stellt im Grunde eine Momentaufnahme kurz vor der Veröffentlichung von WordPress 6.1 dar. Man darf gespannt sein, welche Verbesserungen an dieser Stelle noch durchgeführt werden.

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress findest du hier

Schreibe einen Kommentar