So erstellen Sie eine Einstellungsseite in WordPress

Wenn Sie ein WordPress-Plugin erstellen, fragen Sie sich vielleicht, wie Sie eine Einstellungsseite dafür erstellen. Bietet WordPress dafür eine Art „Standard“-Mechanismus? Gibt es neue Tools oder Frameworks, mit denen sich moderne Einstellungsseiten erstellen lassen? Ist es eine gute Idee, eine Einstellungsseite zu erstellen? Nun, heute werden wir über all dies sprechen und ich werde Ihre Fragen beantworten.

Entscheidungen, keine Optionen

WordPress ist eine Plattform, die darauf abzielt, das Web zu demokratisieren. Diese Aussage, die sehr schön klingt, aber gleichzeitig sehr abstrakt ist, ist eine Art zu sagen: „Wir wollen, dass jeder WordPress benutzen kann.“ Und ob Sie es glauben oder nicht, Einstellungsseiten können und sind in vielen Fällen ein Hindernis dafür. Glauben Sie mir nicht? Nun, WordPress selbst sagt es:

Wenn wir Entscheidungen treffen, ziehen wir diese Benutzer zuerst in Betracht. Ein gutes Beispiel für diese Überlegung sind Softwareoptionen. Jedes Mal, wenn Sie einem Benutzer eine Option geben, bitten Sie ihn, eine Entscheidung zu treffen. Wenn ein Benutzer die Option nicht interessiert oder versteht, führt dies letztendlich zu Frustration. Als Entwickler haben wir manchmal das Gefühl, dass es eine gute Sache ist, Optionen für alles anzubieten, man kann nie genug Auswahl haben, oder? Letztendlich sind diese Entscheidungen technische Entscheidungen, Entscheidungen, an denen der durchschnittliche Endbenutzer kein Interesse hat. Es ist unsere Pflicht als Entwickler, intelligente Designentscheidungen zu treffen und zu vermeiden, das Gewicht technischer Entscheidungen auf unsere Endbenutzer zu legen.

WordPress-Philosophie

Denken Sie also vor dem Erstellen einer Einstellungsseite sorgfältig über die Optionen nach, die Sie Ihren Benutzern bieten möchten, warum Sie möchten, dass sie Zugriff auf diese Optionen haben, und ob dies notwendig oder nützlich ist.

Filter als Alternative

Auch wenn ich weiß, dass ich meinen Benutzern nicht zu viele Optionen bieten soll, muss ich gestehen, dass es mir als Entwickler nicht immer leicht fällt, eine Entscheidung zu treffen, anstatt eine Option anzubieten. Es gibt Zeiten, in denen ich möchte, dass meine Benutzer die Möglichkeit haben, auszuwählen , obwohl mir bewusst ist, dass die Optionen, die ich darstelle, komplex sind. Was mache ich also in diesen Fällen? Folge ich der Empfehlung von WordPress und schränke meine fortgeschrittenen Benutzer ein?

Glücklicherweise bietet WordPress eine perfekte Lösung für dieses Dilemma: Filter . Wenn Sie ein Plugin entwerfen und möchten, dass Ihre (fortgeschrittenen) Benutzer sein Verhalten anpassen können, erstellen Sie keine Einstellungsseite oder ähnliches. Machen Sie Ihr Plugin stattdessen über den Filtermechanismus von WordPress anpassbar.

Wenn Sie Filter verwenden, werden die meisten Ihrer Benutzer ein Standardverhalten („Entscheidungen“, erinnern Sie sich?) genießen, da sie das Plugin mit den in Ihren Filtern festgelegten Standardwerten verwenden, während fortgeschrittene Benutzer die Möglichkeit haben, diese zu ändern Entscheidungen durch Haken (und so hat man auch „Optionen“). Das Beste aus beiden Welten!

WordPress-Einstellungen

Ok, jetzt, da wir uns bewusst sind, wie wichtig es ist, Entscheidungen für unsere Benutzer zu treffen, und gesehen haben, wie wir diese Einschränkung (falls erforderlich) durch Filter umgehen können, ist es an der Zeit zu sehen, wie wir eine Einstellungsseite in WordPress erstellen können. Denn, ja: Es gibt Zeiten, in denen wir unseren Benutzern wirklich die Möglichkeit geben müssen, Entscheidungen nach ihren Vorlieben zu treffen.

Einstellungs-API in WordPress

Die Einstellungs-API wurde in WordPress Version 2.7 hinzugefügt. Dies ist eine Reihe von Funktionen, die die Erstellung von Einstellungsseiten standardisieren und es Ihnen ermöglichen, zu definieren, welche Optionen verfügbar sind, wie die Benutzeroberfläche zum Bearbeiten jeder dieser Optionen aussehen soll (im Wesentlichen Felder in einem Formular) und wie sie validiert und gespeichert werden , und rufen Sie ihre Werte ab.

Ich denke, der beste Weg, um zu lernen, ist anhand von Beispielen, also erstellen wir Schritt für Schritt unsere erste Einstellungsseite mit der Einstellungs-API.

Erstellen einer neuen Einstellungsseite

Das erste, was Sie tun müssen, um eine Einstellungsseite zu erstellen, ist (Überraschung, Überraschung!), eine Seite zu erstellen, auf der die Einstellungen angezeigt werden. Verwenden Sie dazu einfach die Funktion add_options_page während der Aktion admin_menu und registrieren Sie die Seite:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

Wie Sie sehen können, ist das einzige, was wir mit dieser Funktion tun, eine neue Seite zu registrieren, die unter dem Menü WordPress- Einstellungen erscheint, mit ihrem Titel, dem Namen im Menü, den Berechtigungen, die der Benutzer haben muss, um darauf zugreifen zu können , und os an. Das letzte Argument, nelio_render_settings_page , ist der Name der Funktion, die für das Rendern dieser Seite zuständig ist:

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

Die Einstellungsseite selbst ist relativ einfach zu erstellen. Wir müssen lediglich ein form hinzufügen, dessen Inhalt halbautomatisch von WordPress generiert wird. Einerseits rufen wir die Funktion settings_fields auf, die im Grunde eine Nonce in das Formular einfügt, um es „sicher“ zu machen. Als nächstes bitten wir WordPress, alle Einstellungen, die wir für unser Plugin erstellt haben, mit der Funktion do_settings_sections zu rendern. Und schließlich fügen wir einfach die Schaltfläche zum Absenden des Formulars hinzu.

Aktuelle Einstellungen auf unserer Einstellungsseite

Als nächstes müssen wir jede der Optionen registrieren, die Teil unserer Einstellungsseite sein werden. Dazu verwenden wir zwei Funktionen: register_setting , mit der wir den Namen angeben können, unter dem wir die Einstellungen in der Datenbank speichern, und add_settings_field , mit der jede einzelne Option hinzugefügt wird:

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

Das vorherige Code-Snippet enthält einige Dinge, die besondere Aufmerksamkeit verdienen. Beachten Sie einerseits, dass die Funktion register_setting als drittes Argument hat: nelio_validate_example_plugin_settings . Dies ist der Name der Rückruffunktion, die aufgerufen wird, um die vom Benutzer ausgewählten Werte zu validieren (denken Sie daran, dass Sie Ihre Formularfelder immer validieren und bereinigen müssen). Diese Funktion ist in etwa so:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

wo wir jedes übermittelte Feld von $input abrufen und es in $output bereinigen, damit wir sicher wissen, dass alles, was wir am Ende in der Datenbank speichern, gültig und korrekt ist.

Das zweite, worauf ich Sie fokussieren wollte, ist die Tatsache, dass jedes der von uns definierten Felder auch eine Funktionsreferenz enthält, die WordPress mitteilt, wie jedes Feld gerendert werden soll. Die Callbacks der Felder in unserem Beispiel könnten beispielsweise so aussehen:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

Im Wesentlichen rufen diese Callbacks lediglich den aktuellen Wert des Felds ab, das sie rendern sollen (mit get_option ), und rendern den HTML-Code, der es dem Benutzer ermöglicht, den einen oder anderen Wert festzulegen (in diesem Beispiel ein input von geben Sie text oder number ein ).

Was ist das Endergebnis, fragen Sie? Dies:

Abschließende Gedanken

Wie Sie sehen können, ist das Erstellen einer Einstellungsseite relativ einfach. Ich persönlich mag den ganzen Prozess nicht sehr, da er ziemlich repetitiv ist und wir immer wieder den gleichen Boilerplate-Code schreiben müssen … aber es ist trotzdem einfach.

Um diesen Prozess weiter zu vereinfachen, gibt es jedoch einige Online-Codegeneratoren, mit denen Sie über eine einfache Benutzeroberfläche die verschiedenen gewünschten Felder auf Ihrer Einstellungsseite definieren können. Ein paar Beispiele sind:

• WP-Einstellungs-API
• WordPressOption Seitengenerator

Und natürlich gibt es immer die Möglichkeit, eine Einstellungsseite mit Technologien wie React zu erstellen … aber das ist eine andere Geschichte, finden Sie nicht?

Beitragsbild von Rima Kruciene auf Unsplash.