Fügen Sie benutzerfreundliche benutzerdefinierte Meta-Einstellungen zu WordPress-Menüelementen hinzu

In einem kürzlich erschienenen WordPress-Update ist es jetzt möglich und ziemlich einfach, benutzerdefinierte Metafelder zu Menüpunkten hinzuzufügen. In diesem Beitrag erfahren wir, wie Sie unsere benutzerdefinierten Einstellungen zu Menüpunkten hinzufügen, ihre Einstellungen aktualisieren und schließlich die verwendeten Metadaten übernehmen.

Vor kurzem hat WordPress die Unterstützung für das Hinzufügen benutzerdefinierter Felder zu Menüelementen in Version 5.4 angekündigt. Zwei neue Aktionen wurden hinzugefügt, die es Entwicklern ermöglichen, benutzerdefinierte Felder auf der WordPress-Menü-Administrationsseite und im Menü-Editor des Customizers hinzuzufügen. In diesem Beitrag konzentrieren wir uns auf eine davon, die für die WordPress-Menü-Administrationsseite.

Mit dieser Änderung ist es nicht mehr nötig, Theme- oder Plugin-Benutzer zu zwingen, sich Klassennamen zu merken und sie einzugeben, um den Menüpunkt „Einstellungen” zu aktivieren. Dies war bisher ein üblicher Prozess, um beispielsweise einen Menüpunkt wie eine Schaltfläche oder einen Schalter aussehen zu lassen zwischen verschiedenen Dropdown-Designs, oft in Kombination mit einem benutzerdefinierten Menü-Walker.

Denken Sie daran, dass für diesen Code mindestens die WordPress-Version 5.4.0 erforderlich ist.

Was wir in diesem Tutorial machen werden

Mit dem neuen Hook zu Menüpunkten und der WordPress-Unterstützung zum Hinzufügen von Metadaten zu Menüpunkten gibt es wirklich keine Grenzen, welche Art von Einstellungen Sie wünschen. Der Prozess hängt davon ab, was Ihr Endergebnis ist. In den meisten Fällen reicht es aus, dem Menüpunkt eine benutzerdefinierte CSS-Klasse hinzuzufügen.

Um es einfach zu halten, fügen wir in diesem Beitrag ein Kontrollkästchen mit der Bezeichnung „Als Schaltfläche anzeigen” hinzu. In unserem Design haben wir CSS, das ein Menüelement so gestaltet, dass es wie eine (Call-to-Action)-Schaltfläche aussieht, wenn das Element eine bestimmte Klasse hat. Anstatt den Theme-Benutzer zu zwingen, die CSS-Klasse „Menüelement-Schaltfläche” in das CSS-Klassenfeld des Menüelements in der Verwaltung einzutippen, bieten wir ihm eine benutzerfreundliche Checkbox.

Am Ende dieses Beitrags finden Sie einige Ideen für andere Aktionen und Filter, die Sie verwenden können, wenn Sie mehr tun möchten, als nur eine CSS-Klasse hinzuzufügen.

Lasst uns beginnen!

Hinzufügen von benutzerdefinierten Feldern zu Menüpunkten

Der kürzlich hinzugefügte neue Haken ist [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Es ist ein Haken, der direkt über den Schaltflächen zum Verschieben eines Menüelements ausgelöst wird.

Der Haken kommt mit nicht weniger als fünf Parametern. In diesem Beitrag werden wir Dinge tun, die zuerst nur die beiden erfordern.

• item_id: Die aktuelle Menüpunkt-ID
• item: Menüpunktdatenobjekt
• depth: Die Tiefe des Menüelements innerhalb des Menüs, angegeben als Ganzzahl
• args: Ein Objekt von Menüpunktargumenten
• nav_id: Die Navigationsmenü-ID

Alle in diesem Hook hinzugefügten Eingaben müssen ein nameAttribut haben (da der Menüeditor ein Formular ist). Das Namensattribut kann beliebig benannt werden, aber es muss eindeutig sein, und Sie müssen die Menüelement-ID (erster Parameter) in Klammern hinzufügen. Bsp name="my-custom-field[<item ID>]„. So machen es die anderen Standardmenüpunkteinstellungen.

Beginnen wir mit einem Beispiel für das Hinzufügen eines Kontrollkästchens, um das Menüelement wie eine Schaltfläche aussehen zu lassen, wenn das Menü als Hauptmenü platziert wird. Wir werden wp_nav_menu_item_custom_fieldsnur mit den beiden ersten Parametern einhaken und Folgendes tun:

In Zeile #2holen wir den aktuellen Wert unseres Menüpunkts Meta. Menüpunkte verwenden Post-Meta, daher verwenden wir Elemente, mit [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()denen Sie wahrscheinlich bereits vertraut sind. Wir speichern die Menüpunkt-Metadaten durch den Schlüssel ‘ _show-as-button‘.

Dann geht es darum, gutes HTML auszugeben. Der obige Code verwendet einige der Klassen, die bereits für Menüelemente verwendet werden, damit es gut aussieht, ohne benutzerdefiniertes Styling hinzuzufügen (ein pTag mit den Klassen „ description description-wide“).

Die wichtigen Teile passieren in Zeile #8und #9. Wir folgen der Regel des Namensattributs, fügen die $item_idKlammern hinzu und stellen sicher, dass der aktuell gespeicherte Wert im Kontrollkästchen widergespiegelt wird. Sie können hier jede Art von Eingängen und sogar mehrere Eingänge hinzufügen. Denken Sie nur daran, das entsprechende nameAttribut anzugeben und den aktuellen Wert korrekt festzulegen.

Mit diesem Code im Code Ihres Themes functions.phpoder Plugins sollten Sie nun ein neues Kontrollkästchen für alle Menüpunkte erhalten:

Derzeit speichert es unser Feld nicht. Das ist der nächste Schritt.

Aktualisieren der benutzerdefinierten Felder

Um benutzerdefinierte Felder auf Menüpunkte zu aktualisieren, verwenden wir den Haken [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Es kommt mit drei Argumenten, aber wir brauchen nur das zweite, das die Menüeintrags-ID ist.

Wie Sie mit dem Speichern des Werts Ihrer Eingaben umgehen, liegt bei Ihnen. Ich habe mich dafür entschieden, ” einfach _show-as-buttonentweder als wahr oder falsch zu speichern. Verwenden Sie einfach [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()und/oder [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().

add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);

Im obigen Code rufe ich den Wert des benutzerdefinierten Felds anhand seines Namens im $_POSTArray ab. Da es sich um ein Kontrollkästchen handelt, existiert es entweder nicht im $_POSTArray (nicht markiert) oder es wird als ‘ on‘ zurückgegeben. Ich aktualisiere dann den Metaschlüssel „ _show-as-button” entweder als wahr oder falsch.

Mit dem obigen Code sollten Sie sehen, dass Ihr Feld beim Speichern des Menüs korrekt aktualisiert wird.

Der nächste Schritt besteht darin, etwas mit unseren benutzerdefinierten Metadaten zu tun. Und wie Sie vorgehen, hängt davon ab, was Ihr Endergebnis ist. In unserem Beispiel müssen wir dem Menüelement lediglich eine benutzerdefinierte Klasse hinzufügen.

CSS-Klasse des Menüpunkts aktualisieren

WordPress bietet einen Filter für die Klassen des Menüpunkts: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Alles, was wir tun müssen, ist, dem Array durch diesen Filter eine benutzerdefinierte Klasse hinzuzufügen, wenn unser benutzerdefiniertes Meta true. Wir verwenden [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)(), um den Wert von „ _show-as-button” zu erhalten, und wenn er wahr ist, fügen wir die CSS-Klasse „ menu-item-button” hinzu:

Der nav_menu_css_classFilter verfügt über insgesamt vier Argumente, einschließlich der Menüargumente und der Tiefe des Menüelements. Bei Bedarf können Sie die Klassennamen von diesen Werten beeinflussen lassen. Zum Beispiel wäre es normalerweise nicht sinnvoll, ein Menüelement in eine Schaltfläche umzuwandeln, es sei denn, es befindet sich auf der obersten Ebene (und nicht in einem Dropdown-Menü).

Mit dem obigen Code sollten Sie jetzt sehen, dass jeder Menüpunkt, der für „Als Schaltfläche anzeigen” aktiviert ist, die Klasse „ ” erhält menu-item-button.

Denken Sie daran: Es kann vorkommen, dass der nav_menu_css_classFilter nicht angewendet wird, wenn das Menü einen benutzerdefinierten Menü-Walker verwendet, der beispielsweise die Methode enthält start_el(). Der Wanderer muss den nav_menu_css_classFilter auf die Klassen des Menüpunkts anwenden (mit apply_filters()), damit der obige Filter funktioniert!

Andere Verwendungen von benutzerdefinierten Metafeldern für Menüelemente

Wie bereits erwähnt, hängt der Prozess der Verwendung der benutzerdefinierten Felder vom Endergebnis ab. Es ist schwer, einen Beitrag zu erstellen, der alle Möglichkeiten abdeckt. Aber zumindest sollte dies Ihnen einige Ideen geben. Das obige Beispiel hat gezeigt, wie man dem Menüpunkt einfach eine benutzerdefinierte Klasse hinzufügt.

In anderen Fällen möchten Sie vielleicht die Metadaten in einen Menü-Walker übernehmen. Bei den meisten Funktionen in einem Menü-Walker haben Sie Zugriff auf die Menüpunkt-ID und können so die Metadaten einfach abrufen.

Als Alternative zur Verwendung eines benutzerdefinierten Menü-Walkers können Sie den Filter verwenden, [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)um mehr Kontrolle über das Menüelementobjekt zu erhalten.

Oder Sie können den Filter verwenden [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/), um beispielsweise Menüpunkte auszuschließen, wenn Ihre Einstellung die Sichtbarkeit der Menüpunkte einschränken soll.