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:

Mit dem Navigation-Block (den es noch 2019 geben soll) im neuen WordPress-Gutenberg-Editor, 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 anlegen und verwalten kann.

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 in WordPress Gutenberg 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-Gutenberg lesen Sie meinen Artikel Schreiben in WordPress Gutenberg, einfach erklärt). Und wie es aussieht, bin ich mit dieser Ansicht nicht alleine.

Die WordPress-Community arbeitet bereits an so einem Block. Es gibt ihn also noch nicht, aber er ist zumindest 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.

Wenn es mal soweit ist, dann wird man Navigationsmenüs direkt als Block in WordPress Gutenberg einfügen können, also genau jene Funktionalität haben, um die es hier geht. Bis dahin müssen wir uns jedoch noch mit kleineren Umwegen behelfen. Hier kommen sie.

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 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 einfach meinen Artikel Shortcodes in WordPress, einfach erklärt.

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.

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

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ü:

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. Noch dazu soll es für alle Nutzer des neuen WordPress-Editors Gutenberg schon bald noch einfacher werden. Aber auch inzwischen gibt es mehrere Möglichkeiten, dieses Problem je nach eigenen Vorzügen zu Lösen.

Übrigens: Falls Sie wissen möchten, wie man solche Code-Schnipsel wie oben auf einer WordPress-Website einbauen kann, dann empfehle ich Ihnen meinen Artikel So geht’s: Code-Beispiele auf der WordPress-Website.

Pin It on Pinterest