Menüs sind in WordPress gut und einfach zu verwalten. Einsetzen kann man sie allerdings in erster Linie nur an vorgegebenen Stellen im Theme bzw. in Widget-Bereichen. Was tun, wenn man ein Menü mitten im Text einer Seite oder eines Beitrags einbauen möchte? Dafür gibt es mehrere Möglichkeiten:

Menüs kann man in WordPress mitten im Text folgendermaßen unterbringen: Mit dem Navigation-Block (den es im Gutenberg-Plugin bereits gibt und im Block-Editor in WordPress bald geben soll), mit einem Plugin oder mit einem selbst-programmierten Shortcode. Menü-im-Text-Plugins benutzen im Wesentlichen auch Shortcodes, sind aber wesentlich einfacher zu handhaben.

Da es für alle drei Möglichkeiten mehr zu sagen gibt, hier die wesentlichen Details:

Wozu braucht man ein Menü in WordPress auf einer Seite oder in einem Beitrag?

So geht’s: WordPress Menü in Seite oder Beitrag einfügen

Wer schon ein Bisschen WordPress-Erfahrung hat, der kennt WordPress-Menüs vermutlich bereits ganz gut. Für alle, die gerade erst mit WordPress beginnen oder mit WordPress-Menüs noch kaum Bekanntschaft gemacht haben, gibt es hier auf WebsiteBerater.com eine gründliche Einführung in das Thema: WordPress Menüs richtig erstellen und bearbeiten. Dort beschreibe ich im Detail, wie man in WordPress Menüs anlegt und verwaltet.

WordPress Menüs haben normalerweise einen oder zwei (oder vielleicht auch etwas mehr) feste Plätze im Design der Website. Wie viele es letztlich sind, das bestimmt in WordPress das Theme der Website. Dort gibt es immer einen Platz für das Hauptmenü, aber eben meist auch einen Platz für ein Sekundärmenü, das z.B. in der Fußzeile verankert sein kann.

Wenn eins der verwalteten WordPress-Menüs also einem dieser Standard-Plätze zugewiesen wurde, dann wird es dort angezeigt, z.B. als Hauptmenü. Manchmal möchte man aber bei der Platzierung der angelegten Menüs etwas mehr Freiheit haben. Dann kann man sich eventuell noch mit den Widget-Bereichen behelfen, z.B. dem Sidebar.

Sidebar und Footer (Fußzeile) sind Standard-Widget-Bereiche in WordPress. Lesen Sie meinen Artikel WordPress-Widgets, einfach erklärt, wenn Sie mehr über WordPress-Widgets wissen wollen oder noch nicht sicher sind, was man damit alles machen kann und wie. Auch ein Navigationsmenü ist ein Standard-WordPress Widget und kann in den verfügbaren Bereichen platziert werden.

Wenn das aber auch nicht hilft, weil man das Menü eben im Text oder mitten auf einer Seite einsetzen will, dann braucht man eine andere Lösung. Aber warum sollte so etwas überhaupt sinnvoll oder erwünscht sein? Hier ein paar mögliche Gründe:

Ein WordPress-Menü als Sitemap irgendwo im Text einsetzen

Ein WordPress-Menü kann sehr flexibel gestaltet werden. Seiten, Beiträge, Kategorien, etc. sowie beliebige Links können dort je nach Bedarf und in beliebiger Hierarchie angeordnet werden. So eine Konstruktion kann man perfekt als (per Hand adjustierbare) Sitemap einsetzen.

Eine Sitemap findet man einerseits im Sidebar oder Footer (also in über Widgets zugänglichen Bereichen). Man kann so etwas aber auch im Text eines Artikels oder einer Seite präsentieren wollen. In so einem Fall braucht man eine andere Lösung.

Ein WordPress-Menü als zentral verwaltete Liste verwenden, die an mehreren Stellen eingesetzt werden kann

Jeder WordPress-Website-Betreiber hat schon einmal eine Liste erstellt. Listen sind übersichtlich, bringen Abwechslung in den Lesefluss und haben sogar ein paar gestalterische Elemente. Wer aber eine Liste hat, die an mehreren Stellen vorkommt und öfter aktualisiert werden muss, der muss die Liste auch jedesmal mehrfach anpassen.

Für so einen Fall kann man ebenfalls ein Menü verwenden, das dann an jeder Stelle eingebaut wird. Aktualisiert wird es dann jedoch nur noch in der Menü-Verwaltung im WordPress-Dashboard. Klingt sehr praktisch, vorausgesetzt, man bekommt so ein Menü eben auch mitten in den Text eines WordPress-Artikels hinein.

Ein WordPress-Menü als gestalterisches Element einsetzen, das auch wie ein Menü aussieht

Schließlich und endlich ist es praktisch, und macht auch was her, ein Menü einfach so im Text an einer beliebigen Stelle einfügen zu können. Das kann man zwischen Abschnitten tun, oder um auf ein paar besondere Punkte hinzuweisen.

Gründe für Menüs im Text von WordPress-Beiträgen oder -Seiten lassen sich jedenfalls einige finden, aber wie geht das nun genau?

Der neue Navigations-Block im WordPress Block-Editor (auch Gutenberg genannt) für Menüs mitten im Text

Zunächst habe ich mir gedacht, dass im neuen WordPress-Editor Gutenberg eigentlich einen eigenen Block für ein Navigationsmenü geben sollte (für eine Einführung zu WordPress-Block-Editor lesen Sie meinen Artikel Schreiben im WordPress Block-Editor, einfach erklärt). Und wie es aussieht, bin ich mit dieser Ansicht nicht alleine.

Die WordPress-Community hat die Arbeit an so einem Block bereits vor einiger Zeit begonnen. Er wurde damals als eine der höchsten Prioritäten für 2019 eingestuft, siehe z.B. diese Diskussion auf github oder den ursprünglichen Post von Matt Mullenweg auf Make WordPress Core.

Inzwischen (Stand WordPress 5.8.1) gibt es den Block zwar noch nicht in WordPress selbst, aber bereits im Gutenberg-Plugin, in dem einige zukünftige Features des neuen Block-Editors vorab verfügbar sind (und dort quasi etwas breiter getestet werden). So sieht das Plugin in der Übersicht für das Installieren eines neuen Plugins aus (geben Sie einfach ins Suchfenster „gutenberg“ ein und scrollen Sie runter, bis Sie das sehen:Das Gutenberg-Plugin in WordPress installieren

Ich habe das Gutenberg-Plugin installiert, um hier bereits einmal die Funktionsweise dieses Blocks beschreiben zu können. In späteren WordPress-Versionen könnte die eine oder andere Funktion daher ein wenig abweichen oder anders aussehen. Bitte nicht wundern – der Block sollte trotzdem einfach zu bedienen sein.

Sobald diese Funktion es dann in die Release-Version von WordPress geschafft hat, wird man Navigationsmenüs direkt als Block im WordPress Block-Editor einfügen können, auch ohne das Gutenberg-Plugin. Wenn Sie dieses Plugin allerdings aus Stabilitätsgründen nicht installieren wollen, dann gibt es noch andere Möglichkeiten, die ich weiter unten beschreibe. Zunächst jedoch einmal die Funktion des Navigation-Blocks im Detail:

Wo finde ich den Navigations-Block im WordPress Block-Editor?

Ein neuer Navigationsblock kann im WordPress Block-Editor über den Button „Block hinzufügen“ erstellt werden. Der Navigationsblock findet sich in der Block-Kategorie „Theme“. Voraussetzung dafür ist derzeit noch die Installation des Gutenberg-Plugins.

Nach dem Klicken des Buttons „Block hinzufügen“ erhält man eine Liste aller verfügbarer Blöcke zur Auswahl. Die Liste ist in Rubriken oder Kategorien eingeteilt, und bei „Theme“ findet man in etwa folgendes:

Wo finde ich den Navigations-Block in WordPress Block Editor?

„In etwa“ schreibe ich übrigens deshalb, weil sich die Reihenfolge der Blöcke je nach Verwendung mit der Zeit verändern kann. Also bitte nicht wundern, falls der Block nicht unten in der Mitte ist, sondern an einer anderen Stelle. Durch einen Klick auf das Symbol mit dem Text „Navigation“ wird der entsprechende Block eingefügt.

Dem Navigations-Block im WordPress Block-Editor ein Menü zuweisen

Nach dem Einfügen des Navigationsblocks erscheint er an der gewünschten Stelle im Artikel. Dort kann man unmittelbar diesem Block eines der vorhandenen WordPress-Menüs zuweisen oder ein Menü speziell für diesen Block zusammenstellen.

Im folgenden Screenshot habe ich auf den Button „Vorhandenes Menü hinzufügen“ geklickt. Dadurch erscheinen die auf der Website von mir bereits vorher konfigurierten Menüs in einem Dropdown zur Auswahl.

Dem Navigationsblock im WordPress Block-Editor ein Menü zuweisen

Wenn Sie noch keine Menüs eingerichtet haben, dann lesen Sie jetzt unbedingt den entsprechenden Abschnitt zur manuellen Erstellung eines Menüs in WordPress in meinem ausführlichen Artikel über WordPress Menüs (beide Links öffnen sich in einem neuen Tab/Fenster, sodass Sie nacher bequem hier weiterlesen können).

Durch den Klick auf eines der Menüs wird es in den Block eingefügt und an der Stelle des Blocks erscheinen nun die im ausgewählten Menü vorhandenen Menüpunkte.

Einstellungen für den Navigation-Block in WordPress

Block-Einstellungen des Navigation-Blocks im WordPress Block-Editor GutenbergDer Navigation-Block in WordPress hat eine Reihe von Block-Einstellungen, die in der rechten Seitenleiste bei aktivem Block angezeigt werden, indem man auf den Reiter „Block“ klickt (anstatt „Beitrag“). Die wichtigsten sind die Orientierung des Menüs (horizontal oder vertikal) und, ob das Menü als Overlay (also über den Inhalt geblendet) angezeigt wird oder nicht.

Ansonsten finden sich noch weitere Einstellungen zu Schriftgröße, Groß- bzw. Klein-Schreibung der Buchstaben in den Menüpunkten, Farben für Schrift und Hintergrund, Stil-Eigenschaften (durchgestrichener oder unterstrichener Text), aber auch (weiter unten) z.B. die Möglichkeit, einen HTML-Anker zu setzen, mit dessen Hilfe man direkt zur Stelle des Menüs auf der Seite springen kann.

Eine weitere praktische Einstellung legt fest, ob sich Untermenüs bei Maus-over (das ist der übliche Fall) oder erst bei einem Klick auf das Untermenü öffnen sollen.

Insgesamt ist das bereits ein recht ausgefeilter und auch ausführlicher Satz von Einstellungen und Möglichkeiten, die man hier zur Gestaltung sowohl des Aussehens als auch der Funktionsweise des eingefügten Menüs hat.

Ein Menü im Navigation-Block in WordPress zusammenstellen

Ein Menü lässt sich in einem Navigation-Block im WordPress Block-Editor direkt zusammenstellen. Das passiert nach dem Grundsatz, dass ein Menü im Wesentlichen aus Links besteht, die recht beliebig zusammengesetzt werden können.

Zunächst fügt man (wie gerade beschrieben) einen Navigation-Block an der gewünschten Stelle in den Text ein.

Im WordPress Block-Editor mit einem leeren Navigation Block beginnen

Dann muss man auf den Button „Leer anfangen“ klicken, und dadurch wird der Platzhalter-Inhalt durch Leere ersetzt. Einzig ein Plus-Symbol ist zu sehen. Dort kann man mit dem Einfügen von Links beginnen. Das sieht in etwa so aus:

Ein leerer Navigation-Block im WordPress Editor

Durch einen Klick auf das Plus-Symbol öffnet sich ein Fenster mit vorgeschlagenen Links (z.B. Seiten oder Beiträgen), die man dann Einfügen kann. Man kann allerdings auch die angebotene Suchfunktion verwenden, um den gewünschten Link zu finden. Durch einen Klick darauf wird er an dieser Stelle eingefügt. Ein Schalter sorgt dafür, dass man den Link in einem neuen Fenster öffnen lassen kann.

Diese Vorgehensweise ist nun für den gesamten Aufbau des Menüs aus Links immer die gleiche: Plus-Symbol klicken, geeigneten Inhalt finden, einfügen, dann den nächsten Link, usw.

Die Anordnung der Links in einem Navigation-Block in WordPress verändern

Die Anordnung der Links in einem Navigation-Block in WordPress kann jederzeit mit den oberhalb des Blocks angezeigten Pfeiltasten verändert werden. Der gerade markierte Link im Menü wird durch einen Klick auf einen der Pfeile in die entsprechende Richtung verschoben.

Hier ist der entsprechende Screenshot:

Elemente in einem Navigation-Block im WordPress Editor verschieben

Ein Untermenü in einem Navigation-Block in WordPress einfügen

Ein Untermenü kann in einem Navigation-Block in WordPress über einen Klick auf das Symbol „Untermenü“, das über dem aktiven Block angezeigt wird, an der aktuellen Stelle eingefügt werden. Im Untermenü können dann über Klicks auf das dort erschienene Plus-Symbol die einzelnen Links eingefügt werden.

Der Button für das Untermenü ist jener mit den drei Strichen und dem kleinen Halbkreis-Pfeil links davon, hier ist der entsprechende Screenshot:

Ein Untermenü in einem Navigation-Block in WordPress einfügen

Der Navigation-Block in WordPress Gutenberg: Zusammenfassung und mein Fazit

Nachdem ich den neuen Navigation-Block also im Gutenberg-Plugin des WordPress Block-Editors ausprobiert habe, muss ich sagen, dass die Benutzung recht intuitiv und einfach ist. Die Gestaltungsmöglichkeiten bieten soweit alles, was man braucht. Wer ganz einfach nur eins der bereits existierenden Menüs mitten auf einer Seite einfügen möchte, ist damit in wenigen Augenblicken fertig.

Wie bereits oben vor der Diskussion des Navigation-Blocks im neuen WordPress-Editor erwähnt, ist dieser Block allerdings noch nicht in der aktuellen WordPress Version (5.8.1) verfügbar. Daher (und auch, falls jemand lieber mit dem Classic Editor arbeitet) ist es nach wie vor wichtig, sich die Alternativen anzusehen.

Menüs als Module in WordPress Page-Buildern

Wer einen Page-Builder in WordPress nutzt, z.B. den Divi-Builder, BeaverBuilder, etc., der hat bereits in verschiedenem Ausmaß die Möglichkeit, ein Menü an beliebigen Stellen im Text einzubauen.

Im Divi-Builder, den ich auch hier auf WebsiteBerater.com über das mächtige Divi-WordPress-Theme verwende, gibt es standardmäßig ein vollbreites Menü-Modul. Ein Modul, das an beliebigen (auch nicht-vollbreiten) Stellen eingesetzt werden kann, erhält man z.B. von Elegant Marketplace oder Divi Plugins.

Für BeaverBuilder gibt es die Möglichkeit, ein Menü als Shortcode zu speichern und dann an beliebiger Stelle in den Text einzufügen. Das ist im Prinzip ein Vorgriff auf die folgenden Abschnitte.

Wer keinen Page-Builder zur Verfügung hat (und das sind vermutlich die meisten von uns), der muss sich etwas anders behelfen. Beide der folgenden Möglichkeiten nutzen ebenfalls WordPress-Shortcodes, um Menüs im Text zu platzieren. Wenn Sie noch nicht wissen, was das ist, oder mehr über Shortcodes in WordPress erfahren wollen, lesen Sie unbedingt meinen Artikel Shortcodes in WordPress, einfach erklärt, bevor Sie hier weiterlesen.

Plugins, mit denen man Navigations-Menüs überall einfügen kann, auch im Text

Eine naheliegende Möglichkeit, fehlende Funktionalität in WordPress einzubauen, sind immer WordPress-Plugins. Was solche Plugins sind und können und wie man sie installiert und wartet, das habe ich in meinem Artikel WordPress Plugins einfach erklärt im Detail beschrieben (z.B. auch Plugin-Installation, Aktivierung, Auswahl, Einstellungen, etc.).

Um also Shortcodes für Menüs in WordPress generell zur Verfügung zu haben, kann man ein Plugin verwenden. Wie auch in jenem Artikel über Plugins beschrieben, sollte man sich Kandidaten immer genau ansehen: Wann wurden sie das letzte mal aktualisiert? Wie viele aktive Installationen des Plugins gibt es? Wie sehen die Bewertungen im WordPress-Plugin-Repository aus?

Der beste Kandidat dafür ist das WordPress Plugin Shortcodes Ultimate, das auch einen Shortcode für Menüs beinhaltet. Dort findet man allerdings auch noch einige andere Shortcodes, die weitere Funktionen bereitstellen.

Es gibt zwar auch spezifische Lösungen mit Shortcodes nur für Menüs, diese überzeugen allerdings nicht unbedingt bzw. noch nicht. Als empfohlene Kandidaten findet man anderswo z.B. Menu Shortcode oder Menu in Post, jedoch sollte man sich auf jeden Fall selbst eine Meinung bilden, was davon in Frage kommt.

Wie man selbst einen Shortcode zum Einbauen von Menüs in Artikeln oder Seiten in WordPress aktiviert

Wer sich nicht noch ein Plugin an Bord holen will, der kann die Sache mit dem Shortcode auch selbst erledigen. Wenn man sich diese Lösung auf verschiedenen Seiten im Internet ansieht, stellt man fest, dass sie meist auf einen kurzen Artikel von Stephanie Leary zurückgeht (manchmal mit Quellenangabe, manchmal auch ohne).

Dort beschreibt sie sehr knapp ein kurzes Codeschnipsel in PHP, dass das Gewünschte leistet, nämlich einen Shortcode für ein Menü in WordPress zu registrieren. Anderswo findet man dann noch den Hinweis, wo dieses Code-Schnipsel hingehört, nämlich z.B. in die Datei functions.php des verwendeten Themes. Das hört sich einfach an, ist aber eher tricky.

Zunächst muss man wissen, wo diese Datei genau ist. Die Antwort lautet: Wenn z.B. das Divi-Theme verwendet wird, dann muss man das auf dem Webserver in die Datei wp-content/themes/Divi/functions.php einfügen. Dabei gibt es zwei Probleme:

  • Erstens muss man Zugriff auf den Server bzw. auf die Quelldateien der WordPress-Installation haben. Das hat man zwar meistens, aber bei der Manipulation von Dateien direkt auf dem Webserver können leicht Fehler passieren, ob per FTP-Transfer oder beim Editieren in einem WordPress-Code-Editor. Daher ist diese Methode vor allem für nicht so erfahrene Website-Betreiber nicht zu empfehlen.
  • Zweitens wird beim nächsten Theme-Update (und die gibt es ja öfter) die Änderung wieder überschrieben. Deshalb müsste man sich zum Zweck dauerhafter Veränderungsmöglichkeiten ein sogenanntes Child-Theme des verwendeten Themes anlegen. Das ist meiner Meinung nach etwas zuviel des Guten.

Es gibt nämlich eine Alternative, die einfacher und sauberer zu bewältigen ist:

Wie man PHP-code für einen Shortcode zum Einbauen von Menüs in Artikeln oder Seiten in WordPress in einem eigenen Plugin hochlädt

Ja, ein eigenes Plugin. Das klingt vielleicht schrecklich kompliziert, es ist aber sehr einfach. Noch einfacher wird es mit dem vollständigen Code, den ich hier gleich zeige. Zuvor noch die Vorteile dieser Methode:

Alles, was Sie vorher tun müssen, ist die eigene Plugin-Datei zu erzeugen. Dafür brauchen Sie eigentlich nur einen Text-Editor oder ein Programm, das Dateien als einfachen Text speichern kann. Also, hier sind die Schritte, die Sie – natürlich auf eigene Gefahr (Link zu meinem Haftungsausschluss) – unternehmen können:

1. Öffnen Sie in Ihrem Text-Editor eine neue Datei.

2. Kopieren Sie folgenden Code in diese Datei (ersetzen Sie die Metadaten nach Belieben):

<?php
/*
* Plugin Name: Menus in the text
* Plugin URI: http://www.ihre-eigene-website-einsetzen.com
* Description: Eine coole Beschreibung!
* Author: Ihr Name
* Version: 1.0
* Author URI: http://www.nochmal-ihre-eigene-website-einsetzen.com
*/

// create and register a shortcode for putting navigation menus right into the text
// code snippet by Stephanie Leary
function print_menu_shortcode($atts, $content = null) {
    extract(shortcode_atts(array( 'name' => null, ), $atts));
    return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) );
}

add_shortcode('menu', 'print_menu_shortcode');

3. Speichern Sie die Datei unter einem Namen Ihrer Wahl mit der Endung .php ab, z.B. menues-in-the-text.php.

4. Komprimieren Sie Diese Datei mit zip, sodass Sie eine Datei menues-in-the-text.zip bekommen. Wenn die Datei menues-in-the-text.php.zip heißt, ist das auch kein Problem.

5. Gehen Sie ins WordPress-Dashboard Ihrer Website und suchen Sie im linken Seitenmenü den Punkt Plugins -> Installieren.

6. Klicken Sie ganz oben auf Plugin hochladen, wählen Sie Ihre zip-Datei aus und installieren und aktivieren Sie das Plugin.

7. Platzieren Sie Ihr Menü irgendwo im WordPress-Text mit dem Shortcode Ein WordPress Shortcode für ein Menüdort, wo Sie es haben wollen und ersetzen Sie „main-menu“ durch den Slug jenes Menüs, das eingefügt werden soll. Den Slug bilden Sie in der Ansicht beim Verwalten des jeweiligen Menüs aus dem Namen des Menüs. Aus z.B. Main Menu wird dabei main-menu.

Zum Beweis dafür, dass das wirklich funktioniert, habe ich das auch hier auf WebsiteBerater.com genau so eingebaut. Hier ist, nochmal per Shortcode eingebunden, das Hauptmenü:

Übrigens: Sehen diese eingebundenen Code-Schnipsel nicht super aus? Wollen Sie wissen, wie ich das gemacht habe? Dann lesen Sie als nächstes unbedingt meinen Artikel So geht’s: Code-Beispiele auf der WordPress-Website und dann auch noch die Details zum Plugin meiner Wahl: Das Enlighter WordPress-Plugin: Installation, Einstellungen, Vorteile!

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich, z.B. welche der vorgestellten Methoden Sie ausgewählt haben, was Ihr Ziel war und ob alles nach Wunsch geklappt hat, ob mit Hilfe dieses Artikels oder ohne. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu Ihrem konkreten Problem. Ich werde versuchen, der Sache auf den Grund zu gehen.

Oder lassen Sie unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Menüs auf Seiten oder Beiträgen in WordPress einbauen: Mein Fazit

Insgesamt haben wir gesehen, dass es nicht allzu schwierig ist, ein Navigationsmenü irgendwo auf einer WordPress-Website einzubauen. Insbesondere für alle Nutzer des neuen WordPress-Block-Editors (Gutenberg), wo der neue Navigations-Block Abhilfe schafft. Aber auch ohne die neuen WordPress-Blöcke gibt es mehrere Möglichkeiten, dieses Problem je nach eigenen Vorzügen zu Lösen.

Übrigens: Falls Sie Probleme mit WordPress-Menüs haben, dann habe ich auch einen Artikel für Sie, der Ihnen sagt, wie man Probleme mit WordPress-Menüs löst. Und noch einen Artikel gibt es, falls Sie konkrete Problemen mit WordPress Untermenüs haben.

Bauen Sie gerade Ihre eigene WordPress-Website auf? Dann klicken Sie unbedingt noch zu meiner Übersicht der wesentlichen Schritte beim WordPress-Website-Erstellen hinüber. Haben Sie an alle diese Schritte gedacht? Hier ist die Übersicht: 19 Schritte zur fertigen WordPress-Website: Alle Details.

Andreas Krassnigg