Featured Image: Navigation-Block - neue Navigation oder Auswahl

Navigation-Block in WordPress: Neue Navigation – Responsive Navigation

Beitragsdatum:

Letztes Update am:

Autor:

hgg

Kategorien: , , , ,

Geschätzte Lesezeit:

3–5 Minuten

Navigation-Block in WordPress: Neue Navigation

Wer den Blog auf unserer Website verfolgt, hat sicher schon mitbekommen, dass ich schon häufiger über den Navigation-Block bei Block Themes geschrieben habe. Jetzt ist es mal wieder so weit: Verzweifelt habe ich vor ein paar Tagen versucht, auf einer Website eine komplett leere oder eine bereits vorhandene Navigation einzurichten. Erst mit dem Hinweis von Peter Müller konnte ich das Problem lösen. Außerdem stelle ich hier noch das sehr interessante und leichtgewichtige Plugin „Responsive Navigation Block“ vor.

In diesem Beitrag erläutere ich drei verschiedene Probleme, die sich beim Navigation-Block ergeben:

  • Wie erstelle ich eine neue Navigation oder wähle eine vorhandene Navigation
  • Wie kann ich dafür sorgen, dass Untermenüs mobil aufklappbar sind
  • Wie kann ich dafür sorgen, dass die Navigation responsive ist bzw. ein anderer Breakpoint ermöglicht wird

Erstellung einer neuen leeren Navigation oder Auswahl einer vorhandenen Navigation

Das Problem bestand darin, dass ich eine neue leere Navigation erstellen wollte. Ich kann mich erinnern, dass vor einiger Zeit bei dem Menü (drei waagerechte Punkte) z. B. in der Werkzeugleiste des Navigation-Block möglich war. Da habe ich diese Option allerdings nicht mehr gefunden.

Eine andere Option hatte ich außerdem noch in Erinnerung: Wenn man über Design > Website-Editor und dann „Navigation“ wählt. Dort konnte man meines Wissens ebenfalls eine neue Navigation erstellen oder eine bereits vorhandene Navigation wählen.

Erstellung bzw. Bearbeitung der Navigation
Erstellung bzw. Bearbeitung der Navigation
Erstellung bzw. Bearbeitung der Navigation
Erstellung bzw. Bearbeitung der Navigation

Nun, wie kann man eine leere Navigation erstellen? – Die Option ist recht versteckt (danke an Peter Müller für den Hinweis auf die richtige Stelle), so dass ich mich entschlossen habe, dazu einen Issue auf github zu erstellen.

Da die Vorgehensweise m. E. doch sehr umständlich ist, zeige ich das in dem folgenden kurzen Video:

Info

„Dynamic Header & Navigation for Block Themes“ (vorheriger Name: „Shrinking Logo Sticky Header“) ist ein leichtgewichtiges WordPress-Plugin, das speziell für Block-Themes entwickelt wurde.
Es fügt einen modernen Sticky Header mit sanften, animierten Schrumpfeffekten für Header und Logo hinzu. Außerdem besteht die Möglichkeit, einen Breakpoint für das mobile Menü zu definieren und ab der Version 1.2 besteht eine Option für Off-Canvas.

Zur Info: Das Plugin ist bereits hier auf haurand.com im Einsatz (siehe Header mit Navigation).

Responsiver Navigation-Block mit dem Plugin „Responsive Navigation Block“

Ein sehr interessantes Plugin, das auch neben Options for Block Themes die Funktionalität sehr sinnvoll erweitert ist das Plugin Responsive Navigation Block von Dave Smith. Das Plugin ist erst vor kurzer Zeit veröffentlicht worden und beinhaltet folgende Features:

  • Zwei neue Navigationsblöcke (Varianten) für Mobile und Desktop:
    Beim Navigation-Block kann man bei den Eigenschaften oberhalb der Einstellungen eine Variation sowohl für Desktop als auch für Mobil wählen und anschließend jeweils flexibel und unabhängig voneinander gestalten.
  • Für jede Bildschirmbreite kann ein anderes Menü z. B. mit untersdhiedlichen Menüpunkten verwendet werden.
  • Man kann den „Haltepunkt“ (breakpoint) indviduell anpassen (wo die Ansicht zwischen Mobilgerät und Desktop wechselt).
  • Beim Bearbeiten der mobilen Navigation wird der Editor automatisch auf die Vorschau „mobil“ umgestellt.
Responsive Navigation Block Settings
Responsive Navigation Block Settings
Customize Responsive Navigation Block
Customize Navigation Block
Mobile Navigation
Mobile Navigation
Responsive Mobile Navigation
Responsive mobile Navigation
Responsive Desktop Navigation
Responsive Desktop Navigation

Jamie Marsland hat das Plugin in einem kurzen Video vorgestellt. Auf der Seite des Plugins stellt Dave Smith, der Entwickler des Plugins, die Möglichkeiten ebenfalls in einem umfangreicheren Video dar. Hier auf haurand.com setzen wir das leichtgewichtige Plugin übrigens ebenfalls sein.

Info

7.11.2024: Bei dem Plugin gab es ein kleines Problem, das ich auf Github mit einem kleinen Video gemeldet habe: Wenn man den Breakpoint setzte, wurden die Angaben unter Einstellungen > Lesen (Startseite und Blog) gelöscht. Das Problem habe ich am 5.11.2024 gemeldet und Dave Smith hat das Problem am 7.11. gelöst. Die aktuelle fehlerbereinigte Version ist jetzt im WordPress Repository.

Fazit

Im #outreach Channel im internationalen Slack wurden beide Probleme diskutiert. Ich würde mich freuen, wenn diese Dinge in einer der nächsten WordPress-Versionen gelöst werden. Um diesen Problemen mehr Gewicht zu geben, ist es wichtig, dass ihr euch an den Diskussionen auf Github beteiligt. Hilfreich ist schon, wenn man den jeweiligen Issue mit „Daumen hoch“ oder ähnlich markiert. Nur bei einer entsprechenden Beteiligung ist zu erwarten, dass diese Probleme (Issues) priorisiert bearbeitet werden.
Außerdem kann ich das Plugin von Dave Smith empfehlen, weil damit ohne Verwendung von CSS eine responsive Darstellung ermöglicht wird. Allerdings solltet ihr die nächste Version des Plugins noch abwarten.

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

Icon Telefon

02722-6577725

Icon Mail

info@haurand.com

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.

Du kennst unseren Newsletter noch nicht? – Hier findest du eine Übersicht über die bisher versendeten Newsletter. Wenn du keine neuen Beiträge und WordPress-News verpassen möchtest, melde dich jetzt kostenlos für unseren Newsletter an. Den Newsletter bekommst du dann einmal am Anfang des Monats.

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.

Kategorien:

, , , ,

3 Kommentare zu „Navigation-Block in WordPress: Neue Navigation – Responsive Navigation“

  1. Hans-Gerd Gerhards

    @hgg@haurand.com Und nach dem Relaunch von haurand.com funktioniert auch Activitypub. Sehr schön 😊Jetzt müssen nur noch ein paar Einstellungen geprüft werden.#wordrpess #activitypub

  2. Felix

    Mein Ansatz ist es, mit ein paar Zeilen JavaScript das DIV mit der Klasse wp-block-navigation__responsive-container gegen ein beliebiges DIV mit einer benutzerdefinierten Klasse zu tauschen. Dies erlaubt, die Inhalte, Hintergründe und deren Layout nach Belieben zu gestalten.

    Felix hat noch folgende Info dazu gesendet. Den Kommentar ergänze ich daher mit seiner Genehmigung:

    Füge folgendes Script in dein Theme ein, am besten als enqueue. kannst aber auch mal versuchen den js code in tags in einem HTML block im header zu platzieren:

    document.addEventListener("DOMContentLoaded", function () {
    // Wichtige Elemente auswählen
    const modal = document.querySelector('.extrawurst-modal');
    const responsiveContainer = document.querySelector('.extrawurst-header .wp-block-navigation__responsive-container-content');
    const closeButton = document.querySelector('.wp-block-navigation__responsive-close');

    // Überprüfen, ob .extrawurst-modal innerhalb der .extrawurst-header vorhanden ist
    if (modal && responsiveContainer) {
    // Ersetzt .wp-block-navigation__responsive-container-content durch .extrawurst-modal
    responsiveContainer.replaceWith(modal);

    // Setzt max-width: 100% für den Schließen-Button, falls vorhanden
    if (closeButton) {
    closeButton.style.maxWidth = '100%';
    }
    }
    });

    Felix

    Antworten
    1. hgg

      Herzlichen Dank für den Hinweis.
      das hört ich interessant an. Ich muss gestehen, dass ich mich mit Javascript nur sehr begrenzt auskenne und insofern darauf hoffe, dass vielleicht die doch sehr „magere“ Darstellung insbesondere der mobilen Navigation in einer nächsten WordPress-Version aufgepimpt wird.

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert