Hinzufügen von benutzerdefinierten Feldern zu WordPress-Menüelementen

Das Menü einer Website wird bei der Gestaltung einer Seite oft vernachlässigt. Dies könnte daran liegen, dass die Anpassung traditionell technisch schwierig war. Dies hat sich nun mit WordPress 5.4 geändert, das einige neue Hooks eingeführt hat, mit denen Sie relativ einfach benutzerdefinierte Felder für ein WordPress-Menü hinzufügen können.

Die fraglichen Hooks sind die Aktions-Hooks wp_nav_menu_item_custom_fields und wp_nav_menu_item_custom_fields_customize_template . Mit diesen können Sie jetzt ganz einfach Ihre eigenen benutzerdefinierten Felder zu Menüelementen sowohl auf der Bearbeitungsseite des Admin-Menüs als auch im Optionsfeld des Customizers hinzufügen.

In diesem Artikel werden wir uns einige einfache Möglichkeiten ansehen, wie Sie den wp_nav_menu_item_custom_fields Hook verwenden können, um Ihre eigenen benutzerdefinierten Felder zu Menüelementen hinzuzufügen, sowie einen Blick auf zwei Plugins werfen, die auch verwendet werden können, um benutzerdefinierte Felder hinzuzufügen, ohne dass Sie codieren müssen .

Lasst uns anfangen.

Der WordPress-Menü-Hook für benutzerdefinierte Felder

Der Hook wp_nav_menu_item_custom_fields ist spezifisch für den Menübildschirm und wird wie folgt beschrieben:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• Die ganze Zahl $id ist die Menüpunkt-ID
• Das $menu_item Objekt ist das Menüelement-Datenobjekt
• Die ganze Zahl $depth ist die Tiefe des Menüpunkts
• $args ist das Objekt von Menüpunktargumenten

Der Hook wird direkt vor den Move-Buttons eines Navigationsmenüelements im Menüeditor ausgelöst und in der Datei wp-admin/includes/class-walker-nav-menu-edit.php um Zeile 242 eingeführt.

Sie können dies in der Praxis an einem sehr einfachen Beispiel demonstrieren. Öffnen Sie die Datei functions.php Ihres aktiven Designs und fügen Sie diesen Code hinzu:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Wenn Sie nun auf die Admin-Seite zum Bearbeiten des Menüs gehen, sehen Sie die wiederholte Zeichenfolge unter jedem Menüpunkt, wie im folgenden Screenshot gezeigt.

Natürlich hat dies überhaupt keine Funktionalität, zeigt aber, wie es möglich ist, das Menü zu bearbeiten. Versuchen wir nun etwas Nützlicheres, indem wir einige einfache Funktionen in Form eines benutzerdefinierten Felds hinzufügen.

Fügen Sie ein benutzerdefiniertes Feld für WordPress-Menüelemente mithilfe von Code hinzu

In diesem Beispiel erstellen wir ein benutzerdefiniertes WordPress-Menüfeld, mit dem wir eine Beschreibung in jeden Menüpunkt einfügen können.

Schritt eins: Hinzufügen der Ausgabe

Zunächst erstellen wir zunächst die Callback-Funktion, die das Eingabefeld anzeigt, in das der Administrator die Beschreibung eingeben kann. Hier ist der Code dafür:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Fügen Sie diesen Code zu Ihrer Datei functions.php hinzu und speichern Sie ihn. Wenn Sie sich jetzt wieder in den Admin-Bereich Ihrer WordPress-Website einloggen und den Bildschirm „Menüs“ öffnen, sollte Ihr Feld angezeigt werden. In unserem Fall haben wir dies „Artikelbeschreibung“ genannt. Es steht Ihnen natürlich frei, den obigen Code zu bearbeiten, um Ihr Feld nach Belieben zu benennen. Denken Sie nur daran, dass es sich um einen eindeutigen Namen handeln muss.

Schritt Zwei: Speichern Sie Ihre Eingabe

Als Nächstes fügen wir den folgenden Codeabschnitt ein, der den Feldwert in der Post-Meta-Tabelle der Datenbank aktualisiert, was bedeutet, dass unsere Eingabe gespeichert wird.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Mit diesem Code, der in deiner functions.php -Datei gespeichert ist, kannst du zurück in deinen WordPress-Admin gehen, einen Menüpunkt öffnen und eine Beschreibung zum Feld hinzufügen. Als nächstes gehen Sie zu Ihrer phpMyAdmin-Datenbank und Sie sollten den Eintrag in der Post-Meta-Datenbanktabelle sehen können.

Wenn Sie den Wert im Menü Admin ändern, sollte er in der Datenbank widergespiegelt werden. Wenn Sie den Wert löschen, sollte er ebenfalls vollständig verschwinden.

Schritt drei: Zeigen Sie den Menüfeldwert an

Als Nächstes zeigen wir, wie wir unsere gespeicherten Menüfelddaten abrufen und im Frontend-Menü anzeigen können, indem wir die get_post_meta Funktion und den nav_menu_item_title Hook verwenden. Fügen Sie den folgenden Code unten zu Ihrer Datei functions.php hinzu.

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

Der Hook nav_menu_item_title filtert den Titel eines Menüpunkts und ist in der Datei wp-includes/class-walker-nav-menu.php um Zeile 225 herum zu finden.

Es akzeptiert 4 Parameter, die Titelzeichenfolge des Menüelements, das aktuelle Menüelement, ein Objekt mit wp_nav_menu() -Argumenten und eine Ganzzahl, die die Tiefe des Menüelements darstellt.

Unter dem Titel des Menüpunktes sollten Sie nun die Beschreibung sehen, die Sie natürlich mit entsprechendem CSS passend zu Ihrer Website gestalten können.

Fügen Sie ein benutzerdefiniertes Feld für WordPress-Menüelemente mithilfe eines Plugins hinzu

Wenn Sie sich nicht mit dem Schreiben von Code verwickeln wollen, um ein benutzerdefiniertes Feld zu Ihrem WordPress-Menü hinzuzufügen, dann gute Nachrichten … es gibt Plugins, die dies für Sie tun können.

Erweiterte benutzerdefinierte Felder

Das äußerst beliebte und vielseitige Advanced Custom Fields-Plugin demonstriert hier erneut seine Leistungsfähigkeit mit der Möglichkeit, dem WordPress-Menü benutzerdefinierte Felder hinzuzufügen.

Nachdem Sie es installiert und aktiviert haben, öffnen Sie das Plugin und klicken Sie dann auf die Schaltfläche „Neu hinzufügen“, um Ihre Felder hinzuzufügen. Wählen Sie unter den Standortregeln „Menüpunkt“ aus. Befolgen Sie die Anweisungen und aktualisieren Sie die Felder nach Bedarf.

Sobald Sie das Feld veröffentlicht haben, können Sie im Admin-Bereich zu Ihrem WordPress-Menü gehen, um das neue Feld zu sehen, das Sie erstellt haben. Ziemlich einfach!

Benutzerdefinierte Felder des WP-Menüs

Das Plugin WP Menu Custom Fields ist ein relativ neues Plugin, das Ihnen, wie der Name schon sagt, dabei hilft, benutzerdefinierte Felder zu Ihren Menüpunkten hinzuzufügen. Sie können einen benutzerdefinierten Text, ein Bild, einen Shortcode oder einen benutzerdefinierten HTML-Code hinzufügen.

Anstatt benutzerdefinierte Menüelemente über eine dedizierte Plugin-Oberfläche zu erstellen (wie Sie es mit erweiterten benutzerdefinierten Feldern tun), fügt WP Menu Custom Fields stattdessen bearbeitbare Optionen direkt zu jedem Menüelement im Bearbeitungsbereich des Admin-Menüs hinzu.

Die Verwendung ist ziemlich selbsterklärend und eine schöne einfache Möglichkeit, benutzerdefinierte Felder und andere Inhalte zu Ihren Menüelementen hinzuzufügen. Die Plugin-Dokumentation enthält auch die Hooks des Plugins, die Sie verwenden können, um das HTML, das für jede Funktion generiert wird, weiter anzupassen.

Fazit

Das Hinzufügen von benutzerdefinierten Feldern zu WordPress-Menüs kann sehr nützlich sein und Ihnen helfen, diesen oft vernachlässigten Bereich Ihrer Website zu verbessern. Wenn Sie ein überzeugter Programmierer sind, sollte sich die Verwendung der neuen Hooks in WordPress 5.4 als relativ einfach erweisen, während Nicht-Programmierer das Beste aus den verfügbaren Plugins machen können, um diese Aufgabe zu erfüllen.

Siehe auch

• Hinzufügen von Feldern zu den WordPress-Menüelementen – Benutzerdefiniertes Plugin