Die WordPress-Einstellungs-API, Teil 7 Validierung, Desinfektion und Eingabe

Wenn Sie gerade erst zu uns kommen, haben wir in dieser Serie viele Themen behandelt - wir haben versucht, einen vollständigen Überblick über die WordPress-Einstellungs-API sowie die zugehörigen Funktionen zu geben. Wir haben Einstellungen, Optionen, Navigation und Menüs besprochen. Wir haben auch praktische Beispiele erarbeitet, bei denen jedes der behandelten Themen eingesetzt wurde.

Wir sind fast fertig. In den letzten beiden Artikeln dieser Serie werden wir uns die Desinfektion, Validierung und die grundlegenden Eingabeelemente ansehen, die wir in unseren WordPress-Plugins und -Designs verwenden können.

Bevor wir loslegen: In diesem Artikel wird davon ausgegangen, dass Sie den Rest der Serie mitverfolgt haben, eine Arbeitskopie des Beispielcodes installiert haben und nun mit den Einstellungs-API und den Designoptionen relativ vertraut sind. Wenn Sie sich bezüglich eines der oben genannten Punkte nicht sicher sind, empfehle ich Ihnen dringend, den Rest der Artikel zu lesen, bevor Sie in diesen Beitrag einsteigen.

Validierung und Desinfektion verstehen

Bevor wir mit dem Schreiben von Code beginnen, müssen wir genau wissen, was wir erreichen werden - Validierung und Desinfektion. Einfach ausgedrückt sind dies die beiden Aspekte des sicheren Schreibens und Lesens von Daten von einer WordPress-Optionsseite und der zugrunde liegenden Datenbank.

Wir werden noch tiefer in diese Sache eintauchen, wenn wir uns die einzelnen Eingabetypen ansehen und die Beispiele durcharbeiten, aber lassen Sie uns einen Überblick über das geben, was wir tatsächlich tun werden:

Validierung ist der Prozess, bei dem wir die Daten prüfen, die von der Optionsseite oder der Benutzereingabe eingehen, und bestimmen, ob das Speichern zulässig ist.
Desinfektion ist der Vorgang, durch den sichergestellt wird, dass aus der Datenbank kommende Daten sauber und für das Rendern auf der Seite ordnungsgemäß formatiert sind.

Die vielleicht knappste Zusammenfassung ist, dass die Validierung vor dem Schreiben der Daten in die Datenbank durchgeführt werden sollte und dass zwischen dem Lesen der Daten aus der Datenbank und dem Senden an den Browser eine Bereinigung vorgenommen werden sollte.

Die Validierung bezieht sich oft auf das Speichern von Daten und die Bereinigung bezieht sich auf das Abrufen von Daten. Es ist jedoch auch möglich, die Daten nach der Validierung zu bereinigen, um sicherzustellen, dass nur saubere Daten in der Datenbank gespeichert werden. Wenn wir mit unserem eigenen Code arbeiten, ist das einfacher. Wir können jedoch nicht immer darauf vertrauen, dass andere Entwickler ihre Daten bereinigt haben, sodass die Verantwortung für die Bereinigung aller Daten, die aus der Datenbank kommen, bei uns liegt.

Aktualisierung unseres Projekts

Um es einfacher zu machen, Validierung und Desinfektion vollständig zu verstehen, führen wir eine neue Registerkarte auf unserer Optionsseite ein. Wenn Sie ein neues Menü auf oberster Ebene eingeführt haben, müssen Sie außerdem ein neues Untermenüelement hinzufügen und die Registerkarte für die Anzeige der Optionen aktualisieren. Kümmern wir uns jetzt darum.

Suchen Sie zuerst die sandbox_example_theme_menu Funktion und fügen Sie den folgenden Untermenüpunkt hinzu:

add_submenu_page ('sandbox_theme_menu', 'Eingabebeispiele', 'Eingabebeispiele', 'administrator', 'sandbox_theme_input_examples', create_function (null, 'sandbox_theme_display ("input_examples");'));

Als Nächstes müssen wir eine Funktion auslichten, die die Optionsgruppe für unsere neue Registerkarte Einstellungen erstellt. Vorausgesetzt, Sie haben die Serie mitverfolgt, sollte dies leicht zu folgen sein:

Funktion sandbox_theme_initialize_input_examples () if (false == get_option ('sandbox_theme_input_examples')) add_option ('sandbox_theme_input_examples');  // end if // end sandbox_theme_initialize_input_examples add_action ('admin_init', 'sandbox_theme_initialize_input_examples');

Schließlich müssen wir das aktualisieren sandbox_theme_display Funktion, um die Registerkarte zu rendern und sie richtig auszuwählen, wenn auf sie entweder über die Registerkarten oder das Untermenüelement zugegriffen wird. Zuerst aktualisieren wir die Bedingung, die die Abfragezeichenfolge und die Argumente der Funktion untersucht. Insbesondere muss der Fall für die Eingabebeispiele behandelt werden. Aktualisieren Sie die Bedingung, um so auszusehen:

if (isset ($ _GET ['tab'])) $ active_tab = $ _GET ['tab'];  else if ($ active_tab == 'social_options') $ active_tab = 'social_options';  else if ($ active_tab == 'input_examples') $ active_tab = 'input_examples';  else $ active_tab = 'display_options';  // Ende wenn / else

Als Nächstes müssen wir der Navigation eine neue Registerkarte hinzufügen. Aktualisieren Sie die Nav-Tab-Wrapper Container, um diesen neuen Anker aufzunehmen:

"> Eingabebeispiele

Schließlich müssen wir dem Formularelement, das für die Anzeige der Optionen verantwortlich ist, eine weitere Bedingung hinzufügen. Aktualisieren Sie die Bedingung, um so auszusehen:

if ($ active_tab == 'display_options') einstellungsfelder ('sandbox_theme_display_options'); do_settings_sections ('sandbox_theme_display_options');  elseif ($ active_tab == 'social_options') settings_fields ('sandbox_theme_social_options'); do_settings_sections ('sandbox_theme_social_options');  else settings_fields ('sandbox_theme_input_examples'); do_settings_sections ('sandbox_theme_input_examples');  // Ende wenn / else

Wenn Sie angenommen haben, dass Sie den gesamten Code richtig eingegeben haben, sollte Ihr Administrationsbereich jetzt so aussehen:

Jetzt können wir mit der Einführung neuer Optionselemente und der Validierungs- und Desinfektionsfunktion beginnen. Wenn der obige Code unklar erscheint, sollten Sie die Artikel früher in der Serie auschecken, da alle Einstellungen, Menüseiten und Registerkarten behandelt wurden.

Die Elementtypen

Es gibt fünf grundlegende Elementtypen, die wir zur Eingabe auf unseren WordPress-Optionsseiten verwenden können. Dies sind Eingänge, Textbereiche, Kontrollkästchen, Optionsfelder und Auswahlfelder. Im Rest dieses Artikels werden wir uns die Eingabeelemente und Textbereiche ansehen und die letzten drei im letzten Artikel der Serie besprechen.

Eingang

Eingabeelemente sind ideal für Situationen, in denen eine kleine Textmenge von einem Benutzer erfasst werden muss. Dies kann etwa der Name oder die Telefonnummer sein oder etwas komplexer, wie eine URL, ihre E-Mail-Adresse oder ein API-Schlüssel. Tatsächlich verwenden wir bereits Eingabefelder auf der Seite "Soziale Optionen", wenn wir nach den Adressen der Profile des sozialen Netzwerks des Benutzers fragen.

Die Überprüfung der Texteingabe kann ein komplexer Vorgang sein, insbesondere wenn bestimmte Einschränkungen durchgesetzt werden sollen. Beispielsweise folgen Telefonnummern einem bestimmten Format. Wenn Sie einen Benutzer nach seiner / ihrer Telefonnummer fragen, können Sie eine Funktion einrichten, die festlegt, ob die Telefonnummer dem strengen Format entspricht. Offensichtlich können wir nicht alle Anwendungsfälle in unseren Beispielen hier erfassen, da dies einfach zu weit ist.

Stattdessen stellen wir sicher, dass kein schädlicher Code in die Datenbank geschrieben wird. Das bedeutet, wenn ein Benutzer Text in unser Textfeld eingibt, werden alle HTML-Tags und möglicherweise problematischen Zeichen entfernt. Aber bevor wir das tun, lass uns eine neue Option einführen, das Markup verstehen und dann sehen, was passiert, wenn wir nicht jede Art von Validierung durchsetzen.

Fahren Sie fort und führen Sie den neuen Abschnitt und das neue Feld mit der ein sandbox_theme_initialize_input_examples Funktion:

add_settings_section ('input_examples_section', 'Eingabebeispiele', 'sandbox_input_examples_callback', 'sandbox_theme_input_examples'); add_settings_field ('Eingabeelement', 'Eingabeelement', 'sandbox_input_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples');

Als Nächstes definieren Sie den Rückruf für den Abschnitt:

Funktion sandbox_input_examples_callback () echo 'Bietet Beispiele für die fünf grundlegenden Elementtypen.
';

Als letztes stellen Sie das eigentliche Eingabeelement vor, das wir zur Erfassung der Eingabe verwenden werden:

function sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Rendere das Ausgabe-Echo '';

Ihre Optionsseite sollte jetzt wie folgt aussehen:

Den Markup verstehen

Bis zu diesem Punkt haben wir unsere Optionselemente erstellt und ich habe erwähnt, dass wir später in der Serie jedes der Attribute besprechen würden. Dies ist der Artikel, in dem wir uns mit der Bedeutung der Ich würde und Name Attribute.

Beachten Sie, dass wir zu Beginn der Funktion die Optionen für diese bestimmte Registerkarte mit WordPress 'gelesen haben. get_option Funktion. Diese Funktion gibt die Optionen in einem Array zurück. Das Ich würde Das Attribut des Eingabeelements gibt den Wert dieses Elements im Array an. Das Name Attribut ist der Name des Arrays mit der ID. Sinn ergeben?

Um es vollständig zu machen, stellen Sie sich das so vor:

WordPress erstellt ein Array basierend auf dem Namen des Abschnitts, den Sie definiert haben. In diesem Fall ist es sandbox_theme_input_examples
Jedes Element wird durch das gekennzeichnet Ich würde Attribut. In diesem Beispiel ist es "input_example"
Sie können den Wert dieses Arrays mit lesen sandbox_theme_input_examples [input_example]

Also die Ich würde des Elements stellt den Schlüssel des Werts im Optionsarray dar Name Das Attribut steht für den Namen des Arrays mit dem Schlüssel des Werts im Array.

Validierung und Desinfektion hinzufügen

An dieser Stelle ist es absolut möglich, Werte in das Eingabeelement einzugeben und die Option zu speichern. Probieren Sie es aus - legen Sie einen Wert fest und klicken Sie auf "Änderungen speichern". Das Eingabeelement sollte den gerade erstellten Wert anzeigen. Aber hier ist das Problem: Versuchen Sie, etwas in das Eingabefeld einzufügen:

Springen Sie als nächstes zu index.php und fügen Sie den folgenden Code-Block hinzu:

Aktualisieren Sie die Startseite, und Sie sollten einen Iframe in der Mitte der Startseite Ihres Themas sehen:

Scheint ein relativ unbedeutendes Thema zu sein, aber genau das müssen wir verhindern. Wir möchten nicht, dass Benutzer diese Art der Kontrolle über die Datenbank, die Seitenseiten usw. haben. Das Speichern eines einfachen Iframes ist natürlich ein kleines Beispiel. Wenn Benutzer JavaScript einfügen können, können sie bestimmte Aspekte Ihrer gesamten Website beeinflussen. Noch schwerwiegender: Wenn Benutzer schädliches SQL einfügen können, kann Ihre Datenbank gefährdet werden.

Lassen Sie uns also eine Bestätigung einführen. Wie oben erwähnt, möchten wir alle Markup- und problematischen Zeichen entfernen. Dazu müssen wir zunächst einen Validierungs-Callback für unseren Eingabeelementabschnitt definieren. Um dies zu tun, lasst uns die register_setting rufen Sie es an und aktualisieren Sie es so, dass es so aussieht:

register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples');

Als nächstes definieren wir diese Funktion:

Funktion sandbox_theme_validate_input_examples ($ input)  // end sandbox_theme_validate_input_examples

Beachten Sie, dass diese Funktion einen einzigen von uns genannten Parameter akzeptiert Eingang. Dieses Argument steht für die nicht validierten Optionen, die WordPress von der gerade gespeicherten Optionsseite an diese Funktion sendet. Beachten Sie auch, dass wir beim Hinzufügen zusätzlicher Optionselemente dieselbe Funktion verwenden.

Das Erstellen einer Validierungsfunktion umfasst normalerweise drei Schritte:

Erstellen Sie ein Array, in dem die überprüften Optionen gespeichert werden
Alle eingehenden Optionen überprüfen (und bei Bedarf bereinigen)
Gibt das zuvor erstellte Array zurück

Lass uns das jetzt machen. Sehen Sie sich die folgende Implementierung an und beachten Sie dabei die Kommentare:

function sandbox_theme_validate_input_examples ($ input) // Erstelle unser Array zum Speichern der validierten Optionen $ output = array (); // Durchlaufen Sie jede der ankommenden Optionen foreach ($ input as $ key => $ value) // Prüfen Sie, ob die aktuelle Option einen Wert hat. Wenn ja, verarbeite es. if (isset ($ input [$ key])) // Alle HTML- und PHP-Tags entfernen und Zitate in Anführungszeichen richtig behandeln $ output [$ key] = strip_tags (striplashes ($ input [$ key]));  // end if // end foreach // Gibt das Array zurück, das zusätzliche durch diese Aktion gefilterte Funktionen verarbeitet. return apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input);

Der größte Teil des Codes sollte relativ unkompliziert sein, aber die zwei wichtigsten Aspekte betreffen die Anweisung innerhalb der Bedingungs- und der Rückgabeanweisung.

Wir benutzen die strip_tags Funktion, die in PHP nativ ist, zum Entfernen aller HTML- und PHP-Tags
Wir benutzen die Streifenwimpern function, eine andere native PHP-Funktion, die Anführungszeichen um einen String herum korrekt verarbeitet.

Endlich hätten wir das einfach zurückgeben können $ ausgabe array am Ende der Funktion, gibt jedoch das Ergebnis des Aufrufs an zurück apply_filters ist eine bewährte Praxis. Obwohl es den Rahmen dieses Artikels übersteigt, ist es erwähnenswert, dass diese Anweisung grundsätzlich alle anderen Funktionen aufruft, die von dieser bestimmten Funktion gefiltert werden, bevor der Wert zurückgegeben wird.

Versuchen Sie nun, einige Eingabedaten in das Eingabeelement einzugeben. Geben Sie eine einfache Zeichenfolge, eine Telefonnummer, eine E-Mail-Adresse, eine URL, einen HTML-Block, eine JavaScript-Zeile usw. an. Ordentlich, huh?

Zum Schluss noch einmal index.php und führen Sie eine letzte Änderung aus, um zu zeigen, wie wir eine Output-Bereinigung durchführen können. Denken Sie daran, es ist eine gute Praxis, Optionen zu sanieren, auch wenn Sie mit Werten arbeiten, die nicht aus Ihrer eigenen Arbeit stammen.

Suchen Sie die Zeile, die lautet:

Und aktualisieren Sie es so, dass es liest:

Das sanitize_text_field Funktion ist eine weitere native WordPress-Funktion, die speziell dazu dient, Benutzereingaben aus Textfeldern oder aus der Datenbank zu bereinigen.

Wir werden uns in diesem und im nächsten Artikel ausführlicher umschauen, aber es gibt eine vollständige Liste dieser Funktionen im WordPress-Codex.

Textbereich

Beim Betrachten von Eingabeelementen haben wir darauf eingegangen viel von Boden. Glücklicherweise gelten viele der gleichen Prinzipien nicht nur für Textbereiche, sondern auch für die übrigen Elemente. Daher sollten wir nicht mit jedem Element so viel Zeit verbringen müssen. Dies gibt uns die Freiheit, einige der Eigenheiten der einzelnen Elementtypen zu betrachten.

Lassen Sie uns zunächst ein Textbereichselement einführen. In unserem Beispiel können Benutzer mit diesem Element ein paar Sätze über sich selbst eingeben - betrachten Sie es als eine kurze Biografie. Fügen Sie zunächst den folgenden Aufruf zum hinzu sandbox_theme_initialize_input_examples Funktion:

 add_settings_field ('Textarea-Element', 'Textarea-Element', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section');

Als Nächstes definieren wir den für das Rendern des Textbereichs erforderlichen Rückruf:

function sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Rendere das Ausgabe-Echo ''. $ options ['textarea_example']. '';

Beachten Sie, dass dieser Aufruf dem oben definierten Eingabeelement sehr ähnlich ist. Speziell haben wir eine geliefert Ich würde Attribut, um diesem Wert einen Schlüssel im Options-Array zu geben, und wir haben den genauen Namen und den Schlüssel im Element angegeben Name Attribut. Wir haben dem Textbereich auch eine bestimmte Größe gegeben, obwohl dies rein willkürlich ist.

Denken Sie daran, dass dieses Element zum selben Abschnitt gehört wie das Eingabeelement. Es wird mit derselben Validierungsfunktion verarbeitet. Als solches erhalten wir das gleiche Validierungsniveau kostenlos. Probieren Sie es aus - versuchen Sie, Markup, Skripts und andere Arten von Code mithilfe des Textbereichs zu speichern.

Zuletzt aktualisieren wir die öffentlich zugängliche Seite unseres Designs, um diesen Wert abzurufen und ihn ordnungsgemäß für die Anzeige zu bereinigen. Im index.php, Fügen Sie den folgenden Code-Block hinzu:

Obwohl es praktisch das gleiche ist wie das Eingabefeld, müssen wir sicherstellen, dass unsere Validierung und Desinfektion vollständig ist.

Fazit

Obwohl wir nur zwei Arten von Elementen betrachteten, haben wir eine Menge Boden bedeckt. Neben der Aktualisierung unseres Themes haben wir auch eine grundlegende Validierung implementiert und mit den Desinfektionsfunktionen von WordPress begonnen.

Im letzten Artikel werden die drei verbleibenden Elementtypen sowie deren Verwaltung mithilfe von Validierung und Bereinigung beschrieben. Experimentieren Sie in der Zwischenzeit mit einigen der hier behandelten Themen und denken Sie daran, die zugehörigen Quellartikel unten im Beitrag zu überprüfen.