WordPress Menü in Beiträgen und Seiten einbauen

In diesem Beitrag zeige ich dir, wie du ein zusätzliches WordPress-Menü in einem Beitrag oder auf einer Unterseite im Text einbauen kannst. Denn standardmäßig gibt es dafür aktuell weder beim alten klassischen Editor noch dem neuen Gutenberg-Editor eine Lösung.

Außerdem findest du auch das CSS, mit dem du dieses Menü dann zusätzlich verschönern kannst.

WordPress Menü in Beitrag & Seite einbinden: Verschiedene Möglichkeiten

1 | Kategorien und Schlagworte als Menüersatz nutzen

Nehmen wir an, du möchtest die wichtigsten Seiten oder Beiträge zu einem bestimmten Thema in einem Beitrag anzeigen. Dann könntest du

• allen relevanten Beiträgen ein bestimmtes Schlagwort oder eine Kategorie zuweisen
• diese über ein Widget an einer bestimmten Stelle im Beitrag ausführen

Bei Seiten funktioniert dies leider weniger gut. Das heißt, du könntest dir an dieser Stelle überlegen, ob du mit einem Plugin wie dem Post Type Switcher deine Seite in einen Beitrag verwandelst, damit du auf Kategorien und Schlagworte zugreifen kannst.

Oder du nutzt ein Plugin wie Post Tags and Categories for Pages, damit du Seiten die Möglichkeit gibst, auch Kategorien und Tags zu vergeben. Leider wurde diese Plugin Stand November 2020 seit drei Jahren nicht aktualisiert, daher würde ich diese Lösung aktuell nicht empfehlen.

2 | Menüs händisch erstellen und überall einzeln einfügen

Manchmal reicht auch die Variante, die so einfach wie möglich ist. Du kannst natürlich einfach in WordPress im Editor beliebige Punkte aufzählen und diese verlinken.

Ein Beispiel zum Thema „Diese WordPress Beiträge könnten dich auch interessieren“:

• WordPress über FTP installieren bei IONOS
• WordPress in Unterverzeichnis installieren: So geht’s
• Sprungmarken / Ankerlinks in WordPress anlegen

Diese drei Artikel habe ich händisch eingefügt und verlinkt. Theoretisch könnte ich diese jetzt auch in eine Infobox packen und in allen Beiträgen einzeln fügen, wo ich das für sinnvoll erachte.

Oder du kannst mit „Hooks“ arbeiten und diese Box dann standardmäßig an einer bestimmten Stelle (z.B. nach dem Hauptinhalt) auf ausgewählten Seiten / Beiträgen anzeigen lassen. Das wäre dann schon ein erstes „Level up“ bei den Automatisierungsmöglichkeiten.

Hierfür gibt es unterschiedliche Plugins. Mit dem Theme GeneratePress und der Premium-Erweiterung geht das zum Beispiel sehr schön.

3 | WordPress Menü Funktion nutzen und per Shortcode einbauen

Eine Variante, die mir auch sehr gut gefällt, ist die folgende: Du nutzt die Standard-Menüfunktion von WordPress unter Design > Menüs und erstellst ein neues Menü. Diesem gibts du einen Namen und fügst alle Beiträge / Seiten ein, die dort berücksichtigt werden sollen. Dieses speicherst du natürlich ab.

Wenn du dieses nun zum Beispiel in der Sidebar nutzen möchtest, kannst du es ganz einfach unter Design > Widgets hinzufügen.

Um es in einem Beitrag zu nutzen, kannst du zum Beispiel auf die Variante mit einem Shortcode zurückgreifen. Hierfür bietet sich das Plugin Menu Shortcode an.

Alternative ohne Plugin:

Wenn du auf ein weiteres Plugin lieber verzichten möchtest, kann den Shortcode auch via einer Anpassung in der functions.php vornehmen (bitte nur mit Vorerfahrung und mit Vorsicht). Dazu bitte ein Child Theme oder eine andere Möglichkeit nutzen, damit der Code beim nächsten Theme Update nicht überschrieben wird.

/* Shortcode für Menü */

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');

Danach kopiert du den Namen des Menüs und fügst den Shortcode an einer beliebigen Stelle im Beitrag ein:

[menu name="WordPress Beiträge Menü"]

Das Ergebnis sollte ungefähr Folgendes sein und mehr oder weniger genau so wie das Beispiel oben aussehen:

Vorschläge für CSS-Anpassungen

Ihr könntet das Menü in eine Flexbox verwandeln und anstelle der klassischen Liste ein paar Buttons zaubern. Dazu müsst ihr die ID des Menüs heraus finden und jedem Menüpunkt eine zusätzliche CSS-Klasse geben.

In meinem Beispiel hat das Menü die ID:

• #menu-wordpress-beitraege-menue-2

Um CSS-Klassen in einem WordPress Menü hinzufügen zu können, musst du unter Design > Menüs zuerst oben auf Ansicht anpassen klicken und das Feld CSS-Klassen aktivieren.

Danach kannst du bei jedem Menü-Item eine CSS-Klasse hinzufügen. Dafür habe ich die Klasse „flex-item“ gewählt.

Danach ist erstmal alles vorbereitet und du kannst z.B. in der style.css des Child-Themes oder unter Design > Customizer > Zusätzliches CSS weitere CSS-Anweisungen hinzufügen.

Bei mir sieht das wie folgt aus:

/* Anpassungen Menü in Beitrag*/

#menu-wordpress-beitraege-menue-2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin: 0px 0px 30px 0px;
	list-style: none;
}

.flex-item a,
flex-item a:visited {
	color: white !important;
	padding: 20px;
	background: #777;
	width: 370px;
	height: 40px;
	margin-top: 10px;
	line-height: 20px;
	padding: 20px;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
	display: inline-block;
}

.flex-item a:hover {
	background: #ccc;
}

.inside-article .current-menu-item a {
	color: #7c7c7c;
	background: #ccc;
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

.inside-article .current-menu-item a:before {
	content: "➜ ";
}

Das Ergebnis seht ihr hier:

Mit den  genauen Werten etc. müsst ihr natürlich noch etwas herumspielen, bis es bei euch passt. Aber das ist auch nur ein Vorschlag.

Der große Vorteil bei dieser Lösung ist – nachdem sie einmal eingerichtet wurde – folgender: Du kannst jetzt die Menüpunkte einfach im Menü verändern und sie werden dann automatisch überall dort angepasst, wo du den Shortcode eingefügt hast.

Wahlweise Hooks nutzen

Ihr könnt den Shortcode jetzt natürlich an beliebigen Stellen auf der Website einbauen. Sehr hilfreich können hier auch Hooks sein. So könnt ihr das Menü zum Beispiel nur auf bestimmten Unterseiten wie einer Online-Kurs-Reihe automatisch unter oder über dem Hauptinhalt anzeigen lassen.

Hierfür gibt es wieder verschiedene Möglichkeiten. Bei meinem Theme geht das über eine integrierte Funktion.

Fazit

In diesem Post habe ich ein paar Möglichkeiten gezeigt, wie du WordPress-Menüs oder vereinfachte Navigationshilfen auch in Beiträgen und Seiten einbauen kannst.

Falls du weitere Ideen hast, die noch praktikabler sind, dann schreib doch gern einen Kommentar.