Hinzufügen von Feldern zu den WordPress-Menüelementen – Die Einstellungsseite des Plugins

Veröffentlicht: 2021-07-08

Bei der Verwendung von WordPress-Plugins haben Sie wahrscheinlich bemerkt, dass der Autor einige Einstellungen bereitgestellt hat, mit denen Sie die Funktionalität des Plugins anpassen können. Technisch gesehen hat der Autor einen Menüpunkt und eine Einstellungsseite erstellt, auf die Sie dieser Menüpunkt weiterleitet. In diesem Artikel gehen Sie die Schritte durch, die Sie befolgen müssen, um dasselbe für Ihr eigenes Plugin zu tun.

Der Artikel erfordert, dass Sie den im Beispiel im Artikel Hinzufügen von Feldern zu den WordPress-Menüelementen – Benutzerdefiniertes Plugin bereitgestellten Code bereits angewendet haben. Wir werden von dort aus weitermachen und sehen, wie wir unser Plugin benutzerfreundlicher machen können, indem wir seine Einstellungsseite im Admin-Bereich hinzufügen, damit Sie Admin-Benutzern erlauben, ihre Einstellungen für die Funktionsweise des Plugins festzulegen.

Erste Schritte

Für den Zweck dieses Artikels erstellen wir ein nettes einfaches Einstellungsmenü. Wie wir in unserem vorherigen Artikel gesehen haben, kann der Admin-Benutzer mit unserem Plugin jedem Menüpunkt einen Untertitel hinzufügen. In den nächsten Schritten stellen wir eine Option bereit, mit der der Benutzer den Typ des HTML-Elements auswählen kann, in das das Untertitelfeld eingeschlossen wird.

Zu diesem Zeitpunkt sieht unsere Haupt-PHP-Datei unseres Plugins so aus:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

Als nächstes werden wir fortfahren und einen Menüpunkt für die Einstellungsseite unseres Plugins sowie ein einfaches Beispiel dafür erstellen, was Sie in die Einstellungsseite als Inhalt aufnehmen könnten.

Wir müssen mit zwei WordPress-Hooks arbeiten. Der admin_menu Hook zum Registrieren der Admin-Menüelemente und der admin_init Hook zum Registrieren der Plugin-Optionen später, wenn wir die Plugin-Einstellungsseite mit ihren Formularen hinzufügen werden. Natürlich werden wir auch das Beste aus den von WordPress bereitgestellten APIs machen und einige eingebaute Funktionen verwenden. Tauchen wir tiefer ein.

Erstellen Sie das Optionsseiten-Menüelement

Um den Menüpunkt hinzuzufügen, fügen wir den entsprechenden admin_menu Hook innerhalb der __construct() Methode unter den aktuell hinzugefügten Hooks hinzu.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

Wir haben den Hook admin_menu verwendet und die Methode plugin_settings_menu_page() (die wir weiter unten beschreiben werden) definiert, um die Informationen für das Menüelement und die Einstellungsseite des Plugins anzugeben.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Die Methode sollte auch in die Haupt-Plugin-Klasse eingefügt werden. Beachten Sie, dass wir in unserer Methode add_menu_page() die von WordPress bereitgestellte Funktion add_menu_page( plugin_settings_menu_page() verwendet haben. Diese Funktion akzeptiert die folgenden Argumente:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )

Der $page_title muss definiert werden und ist im Grunde der erste Teil der Title-Tags der Seite, auf die Sie umgeleitet werden, wenn Sie diesen Menüpunkt auswählen.
Der $menu_title erforderlich- ist der Text, der für das Menü verwendet werden soll.
$capability ist die Fähigkeit, die erforderlich ist, damit dieses Menü vom Benutzer angezeigt wird. In unserem Fall haben wir die manage_options , da sie nur Super Usern und Administratoren erteilt wird. Wenn Sie verstehen möchten, welche Rolle oder Funktion Ihren Anforderungen entspricht, können Sie die zugehörige offizielle Dokumentation konsultieren.
Der $menu_slug ist ebenfalls erforderlich und sollte eindeutig sein. Es ist der Slug-Name, mit dem auf dieses Menü verwiesen wird. Vergessen Sie nicht, dass Sie nur alphanumerische Kleinbuchstaben, Bindestriche und Unterstriche verwenden dürfen, die mit sanitize_key() kompatibel sind.
Die $icon_url ist ein optionales Argument und ist die URL, die auf die Symboldatei verweist, die für das Menüelement verwendet wird.
Im Argument $function definieren Sie die Callback-Funktion, die den Inhalt der Einstellungsseite erstellt. In unserem Fall ist es das plugin_settings_page_content() , das noch keine Funktionalität hat. Wir haben es mit der Methode plugin_settings_menu_page() zu unserem Code hinzugefügt.

 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

An dieser Stelle sollten Sie den Menüpunkt „Menu Item Field Creator“ und den Testinhalt der Inhaltsseite sehen und die Menü-URL erkennen, die Sie in den Argumenten definiert haben.

Wir möchten auch darauf hinweisen, dass Sie, wenn Sie die Option Ihres Plugins unter das integrierte Einstellungsmenü und nicht als separates Menüelement der obersten Ebene aufnehmen möchten, dies einfach tun können, indem Sie stattdessen die Funktion add_options_page() verwenden. In diesem Fall sollten Sie dies ersetzen:

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

mit diesem:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Dies führt zu einer Menüposition hier:

In unserem nächsten Abschnitt werden wir einige einfache Inhalte auf der Einstellungsseite einfügen, mit denen der Administratorbenutzer das Verhalten des Plugins festlegen kann.

Fügen Sie unserer Einstellungsseite Funktionen hinzu

Bisher haben wir unseren Menüpunkt hinzugefügt und die Funktion definiert, die die Inhaltsseite der Einstellungen anzeigt. Wenn wir Funktionalität auf unserer Einstellungsseite wünschen, müssen wir einige Felder registrieren und sie dann auf der Einstellungsseite des Plugins anzeigen. Als Beispiel erstellen wir ein Formular, in dem der Benutzer den Typ des HTML-Elements definieren kann, mit dem das Untertitelfeld umbrochen werden soll.

Die Ausgabe

Ersetzen Sie den Code plugin_settings_page_content durch diesen:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

In diesen Zeilen verwenden wir die Funktionen do_settings_sections() und settings_fields() . do_settings_sections() druckt alle registrierten Einstellungsabschnitte und -felder. Die settings_fields() geben die versteckten Eingabefelder nonce, action und option_page für die Einstellungsseite aus.

Lassen Sie uns nun fortfahren und unsere Einstellungen registrieren.

Registrieren Sie Ihre Einstellungen

Um die erforderlichen Felder zu registrieren, verwenden wir den admin_init Hook, da er ausgelöst wird, wenn ein Admin-Bildschirm initialisiert wird.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

Wir fügen die Methode plugin_register_settings() wie folgt in unsere Klasse ein:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

Lassen Sie uns jetzt einen Schritt zurücktreten und einen Blick auf das werfen, was wir bisher getan haben.

Um eine Einstellung und ihre Daten zu registrieren, haben wir die Funktion register_setting () verwendet, die laut Dokumentation wie folgt aufgebaut ist:

 register_setting( $option_group, $option_name, $args )

Die $option_group ist ein erforderlicher Parameter und sollte mit dem in settings_fields() verwendeten Gruppennamen übereinstimmen.
Der $option_name ist ebenfalls erforderlich und ist der Name der Option, die bereinigt und gespeichert werden soll. Dies ist der Wert unter der Spalte option_name in der Optionsdatenbanktabelle.
Die $args werden hier nicht benötigt. Es ist ein optionales Datenarray, das die Einstellung bei der Registrierung beschreibt. Was Sie hier angeben können, ist der Typ, die Beschreibung, eine sanitize_callback() Funktion für den Wert der Option, eine „ show_in_rest “-Option, die definiert, ob die aktuellen Daten in die REST-API aufgenommen werden sollen, und eine Standardoption, in der Sie den Standardwert definieren können beim Aufruf get_option() .
Wir haben auch die Funktionen add_settings_section() und add_settings_field() eingeführt, die uns bei der Durchführung dieses Schritts helfen werden.
Die Funktion add_settings_section() wird verwendet, um einen Abschnitt mit einem bestimmten Slug-Namen bei WordPress zu registrieren. Hier ist die $id der Slug-Name zur Identifizierung des Abschnitts und wird im 'id'-Attribut von Tags verwendet.

 add_settings_section( $id, $title, $callback, $page )

$title ist der formatierte Titel des Abschnitts, der als Überschrift für den Abschnitt angezeigt wird, $callback ist die Funktion, die den Inhalt oben im Abschnitt wiedergibt, und $page ist der Slug-Name der Seite, die angezeigt werden soll dem Argument $page von do_settings_sections() , das in unserem Fall „options_page“ ist.

Alle oben genannten Parameter sind erforderlich.

Mit der von WordPress bereitgestellten Funktion add_settings_field () können Sie einem Abschnitt ein neues Feld hinzufügen.

 add_settings_field( $id, $title, $callback, $page, $section, $args )

Die $id , $title , $callback und $page werden wie zuvor erklärt verwendet. Der $section ist der Slug-Name des Abschnitts der Einstellungsseite, in dem das Feld angezeigt werden soll, und die $args werden bei der Ausgabe des Felds verwendet. Sowohl $section als auch $args sind optional.

Für die Zwecke dieses Artikels werden wir keine zusätzliche Funktion einführen, um unsere Werte zu bereinigen. Wir weisen jedoch darauf hin, dass es dringend empfohlen wird, dass Sie Ihre Formularfelder immer bereinigen.

Jetzt haben wir zwei öffentliche Methoden, die eingeführt werden müssen, die render_section() und die render_field() .

Für die Methode render_section() wir nur eine Überschrift für unseren Abschnitt aus:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

Für die Methode render_field() wir 3 Optionsfelder mit unseren Auswahlmöglichkeiten für das HTML-Element aus:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

Dies sollte das Ergebnis sein, das Sie jetzt sehen:

Wenn Sie ein anderes Element auswählen, wie zum Beispiel span, und speichern, sollte es auch korrekt funktionieren.

Spiegeln Sie die Änderungen der Optionsseite auf Ihrer Website wider

Der letzte Schritt, der noch erklärt werden muss, ist, wie das HTML-Element angewendet wird, das die Administratorbenutzer auf das Untertitelelement unter dem Menüelement am Frontend der Website auswählen.

Dieser Schritt ist wirklich einfach, da wir lediglich das ausgewählte Feld aus der Datenbankoptionstabelle abrufen und die Klasse „ My_Custom_Nav_Walker “ in unserem Code ändern müssen. Insbesondere müssen wir den Teil des Codes ersetzen, in dem wir den Eintrag menu_item_sub zur Variablen $output hinzufügen.

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

Zuerst holen wir uns das Element mit get_option( 'option_name' )['html_element']; und behalte es in einer $stored_option Variablen und wende es dann auf die obige Zeile an. Die letzte Klasse sollte so aussehen:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

Manchmal hilft es, sich vorzustellen, wie die WordPress-Funktionen funktionieren, wenn man eine Einstellungsseite erstellt, während man sich den Code unseres Plugins ansieht. So sieht es in unserem Beispiel aus:

Fazit

Wie Sie hoffentlich erkannt haben, ist die WP-Einstellungs-API hier das Hauptwerkzeug, mit dem wir die Knochen für die Optionsseite unseres Plugins erstellen können. Abgesehen davon ist es Ihre Entscheidung, ob Sie einen eher objektorientierten Ansatz mit Klassen verwenden oder den einfacheren Weg wählen, bei dem Sie einfach die Funktionen und Hooks in die PHP-Hauptdatei des Plugins einfügen.

Lassen Sie uns hier darauf hinweisen, dass der Weg, dem wir gefolgt sind, um das Plugin zu rekonstruieren, nicht wirklich OOP ist, aber definitiv einen Schritt in diese Richtung gegangen ist. In einer kommenden Artikelserie über OOP werden wir uns eingehender mit den anderen Funktionen befassen, die die Verwaltung unseres Plugins verbessern können.

Das Erstellen einer Einstellungsseite für unser benutzerdefiniertes Plugin kann etwas verwirrend werden, aber hoffentlich verstehen Sie nach dem Lesen dieses Artikels, was erforderlich ist. Viel Spaß beim Codieren!

Lesen Sie auch

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