WordPress-Tutorial: Benutzerdefiniertes Menü für Beiträge oder Seiten in der Seitenleiste

Dieser Beitrag richtet sich an Sie, die eine WordPress-Site mit vielen Inhalten und möglicherweise vielen hierarchisch strukturierten Seiten verwalten und sich eine bessere Navigation außerhalb des Hauptmenüs wünschen. Um die Navigation auf der Website zu erleichtern, hilft ein benutzerdefiniertes Menü, das sich auf den aktuellen Beitrag bezieht, enorm. Das Problem beim Platzieren eines Menü-Widgets in der Seitenleiste (oder wo immer Sie möchten) besteht darin, dass die Seitenleiste üblich ist. In diesem Beitrag erfahren Sie, wie Sie ein zusätzliches benutzerdefiniertes Menü in der Seitenleiste anzeigen, indem Sie Beiträgen, Seiten oder benutzerdefinierten Beitragstypen erlauben, ein Menü auszuwählen.

Fügen Sie den unten stehenden Code in Ihren Themes functions.phpoder in Ihren Plugin-Code ein.

Posts oder Seiten erlauben, ein Menü auszuwählen

Das Erstellen von Menüs in WordPress ist einfach, und Sie können das Menü-Widget verwenden, um ein Menü in der Seitenleiste anzuzeigen. Das Problem ist, dass die Seitenleiste global ist und überall dasselbe Menü angezeigt wird. Was ist, wenn Sie möchten, dass bestimmte Menüs auf bestimmten Seiten angezeigt werden? Außerdem erfahren Sie, wie Sie sicherstellen können, dass das ausgewählte Menü von den untergeordneten Seiten übernommen wird. Auf diese Weise müssen Sie nur das Menü auf der übergeordneten Seite auswählen. Alle Unterseiten zeigen auch dasselbe Menü, ohne dass sie alle bearbeitet werden müssen.

Hinzufügen einer Metabox zum Auswählen des Menüs

Der erste Schritt ist das Erstellen einer Metabox auf Beiträgen oder Seiten, in der wir die Option haben, ein Menü auszuwählen. Wir verwenden die Funktion add_meta_box()und entscheiden, für welche Beitragstypen wir sie anzeigen möchten.

add_action('add_meta_boxes', function() {
    add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});

Passen Sie den obigen Code an die gewünschten Titel- und Beitragstypen an. Das obige Beispiel fügt die Metabox sowohl zu Beiträgen als auch zu Seiten hinzu. Der dritte Parameter, den ich genannt habe awp_sidebar_menu_metabox_callback, ist die Funktion, die für das Rendern des Inhalts der Metabox verantwortlich ist. Lassen Sie uns das als nächstes definieren. Folgendes müssen wir in unserer Metabox tun:

function awp_sidebar_menu_metabox_callback($post) {
    // Get all menus
 
    // Get the current saved menu, if set
 
    // Output HTML with a select showing all menus, and mark the currently saved one as selected
}

Wir können ein Array mit allen gespeicherten Menüs in WordPress mit erhalten wp_get_nav_menus(). Zum Abrufen des aktuell ausgewählten Menüs speichern wir das ausgewählte Menü als Post-Meta in awp_sidebar_menu(nennen Sie es, wie Sie möchten), und wir holen einfach den Wert basierend auf dem Strom $post, der uns in der Metabox-Funktion bereitgestellt wird. Wir werden Menü-IDs speichern, weil das alles ist, was wir brauchen, um ein Menü anzuzeigen. Und dann geben wir HTML für eine Auswahl aus, die die Menüs durchläuft. Die HTML-Ausgabe der Metabox liegt wirklich bei Ihnen, das Folgende ist ein Beispiel. Ich habe auch die Nonce-Funktionalität für die Sicherheit aufgenommen.

In der HTML-Ausgabe drucke ich ein Etikett aus. Wenn es überhaupt keine gespeicherten Menüs in WordPress gibt, wird einfach ein Absatz angezeigt. Andernfalls wird eine Auswahl mit Menü-IDs als Werte und Menünamen als Label generiert. Ich füge auch eine leere Auswahl hinzu, damit Posts kein Menü anzeigen können. Ich verwende die Hilfsfunktion von WordPress, [selected](https://developer.wordpress.org/reference/functions/selected/)()um die aktuell gespeicherte Option als ausgewählt zu markieren.

Wenn Sie einen Beitrag oder eine Seite bearbeiten, sollte die Metabox unten erscheinen und Ihre Auswahl anzeigen. Genial! An dieser Stelle wird Ihre Menüauswahl jedoch derzeit nicht gespeichert, wenn Sie den Beitrag speichern. Das ist der nächste Schritt.

Speichern der Menüauswahl

Wir verwenden den Hook save_post, um eine Funktion zu erstellen, die jede Auswahl speichert, die wir in unserer Metabox hinzugefügt haben. Der save_postHook wird jedes Mal ausgelöst, wenn ein Beitrag gespeichert oder aktualisiert wird. Wir prüfen zuerst Nonce (wenn Sie sich nicht sicher sind, was Nonces sind, sehen Sie sich diesen WordPress-Leitfaden über Nonces an ). Wir überprüfen dann noch einmal, ob der Benutzer Beiträge aktualisieren darf, und aktualisieren unser Beitrags-Meta mit der Auswahl.

add_action('save_post', function($post_id) {
    if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
        return;
    }
 
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
 
    update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});

Wenn Sie jetzt Beiträge aktualisieren, wird auch Ihre Menüauswahl gespeichert.

Und das war’s für den Post-Choice-Teil. Der nächste Schritt ist tatsächlich die Ausgabe des Menüs, wenn ein Menü ausgewählt wurde.

Auswählen einer Position für das benutzerdefinierte Menü

Ich füge die Ausgabe in der Seitenleiste hinzu, aber Sie können sie überall in den Vorlagen Ihres Designs ausgeben. Wir brauchen nur entweder einen vordefinierten Hook oder definieren unseren eigenen. Als Beispiel füge ich oben in der Seitenleiste einen benutzerdefinierten Haken hinzu, damit ich eine damit verbundene Funktion erstellen kann.

Sie könnten einfach wp_nav_menu()direkt in der Vorlage aufrufen, aber ich empfehle, stattdessen einen benutzerdefinierten Hook zu erstellen, da wir ziemlich viel Code hinzufügen und es chaotisch erscheinen kann.

In meinem Theme bearbeite ich sidebar.phpund kurz bevor dynamic_sidebar()die Seitenleiste aufgerufen wird (wo Widgets hinzugefügt werden), füge ich meinen benutzerdefinierten Haken mit do_action()und einem bestimmten Namen hinzu. Sie können es nennen, wie Sie möchten, aber es muss innerhalb von WordPress eindeutig sein. Stellen Sie ihm also zumindest etwas Einzigartiges für Sie voran.

Rendern des Menüs

Jetzt können wir zurück zu gehen functions.php, eine Funktion definieren, die mit verbunden ist, awp_before_sidebarund ihre Ausgabe wird in der Seitenleiste vor den Widgets angezeigt. Die Funktion verwendet bedingte WordPress-Tags, um zu prüfen, ob wir gerade einen einzelnen Beitrag oder eine einzelne Seite anzeigen. Und wenn ja, hole ich unser Post-Meta. Wenn das Post-Meta gesetzt wurde, geben wir das Menü aus, indem wir [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()die gespeicherte Menü-ID als menuParameter aufrufen und bereitstellen.

Sie sollten den HTML-Code um das Menü herum anpassen, damit er zum Rest des Inhalts passt. Im obigen Code verpacke ich das Menü in denselben HTML-Code wie alle Widgets in der Seitenleiste, sodass das Widget-Design des Designs auf unser benutzerdefiniertes Menü angewendet wird.

Das ist es! Immer wenn Sie ein Menü in einem Beitrag oder einer Seite auswählen, wird das Menü über der Seitenleiste ausgegeben, wenn Sie diesen Beitrag oder diese Seite anzeigen.

Wir können aber noch einen Schritt weiter gehen. Wenn Sie möchten, dass untergeordnete Seiten das gleiche Seitenleisten-Menüset in allen übergeordneten Seiten anzeigen, lesen Sie weiter.

Erlauben Sie untergeordneten Seiten, das Menü der übergeordneten Seite zu erben

Diese zusätzliche Funktion ist sinnvoll, wenn Sie viele Seiten in einer Hierarchie oder einen benutzerdefinierten Beitragstyp mit aktivierter Hierarchie haben. Es wäre zu umständlich, jede einzelne untergeordnete Seite zu bearbeiten und das gleiche Menü auszuwählen. In diesem Fall ist es besser, das Menü auf der übergeordneten Seite auszuwählen und alle Unterseiten automatisch diese Menüauswahl „erben” zu lassen. Wenn eine Unterseite ein anderes Menü auswählt, wird dieses Menü einmal anstelle des „geerbten” Menüs angezeigt.

In unserer Funktion, die mit verknüpft ist awp_before_sidebar, fügen wir einen Code hinzu, der überprüft, ob wir einen einzelnen Beitrag oder eine einzelne Seite anzeigen:

Was der obige Code tut, wenn auf der aktuellen Seite kein Menü gefunden wurde, ist das Abrufen aller Eltern mit [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Diese Funktion gibt ein Array von übergeordneten Beitrags-IDs zurück, sortiert nach dem nächstgelegenen übergeordneten Element zuerst. Wenn die Seite keine Eltern hat (z. B. wenn es sich um einen Beitrag handelt), wird ein leeres Array zurückgegeben. Und wenn es Eltern gibt, durchlaufen wir jeden Elternteil einzeln und prüfen, ob sie unser Post-Meta festgelegt haben. Wenn einer gefunden wurde brechen wir das Traversieren der Eltern ab und $sidebar_menuwerden gesetzt und das Menü wird später mit ausgegeben wp_nav_menu().

Und das ist es für die „Vererbung”-Funktionalität!