Die WordPress-Einstellungs-API, Teil 8 Validierung, Desinfektion und Eingabe I

Wir haben den letzten Artikel der Serie erreicht. Im letzten Post haben wir uns mit der Einführung von Validierung, Desinfektion und einigen grundlegenden Eingabeelementen beschäftigt, die wir beim Erstellen von Optionsseiten nutzen können.

In diesem Artikel werfen wir einen Blick auf die letzten drei Optionen und darauf, wie sie an das Frontend des Themas angeschlossen werden.

Bevor wir loslegen: Wie in den letzten Jahren wird in diesem Artikel davon ausgegangen, dass Sie den Rest der Serie mitverfolgt haben, eine Arbeitskopie des Beispielcodes installiert haben und nun mit den Einstellungen-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.

Die Elementtypen, Fortsetzung

Ankreuzfeld

Früher in dieser Serie haben wir Kontrollkästchen hinzugefügt. Wir könnten zurückgehen und sie noch einmal besuchen, aber bleiben wir konsequent bei dem, was wir bisher getan haben, und führen wir neue Optionen ein. Sobald wir fertig sind, können Sie den Code, den wir zu Beginn der Serie hinzugefügt haben, zur Überprüfung erneut aufrufen.

Lassen Sie uns zunächst das Kontrollkästchenelement in das Element einführen sandbox_theme_initialize_input_examples Funktion:

add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section');

Als Nächstes müssen wir den oben beschriebenen Rückruf definieren. Fügen Sie Ihrem Projekt die folgende Funktion hinzu:

function sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = 'Dies ist ein Beispiel für ein Kontrollkästchen'; echo $ html;  // end sandbox_checkbox_element_callback

Wir werden diese Funktion für einen Moment noch einmal besuchen, aber zuerst muss ein Label-Element neben dem Kontrollkästchen hinzugefügt werden. In Kontrollkästchen ist häufig ein Element zugeordnet, das auch die Möglichkeit bietet, das Kontrollkästchen auszulösen. Dies macht es Benutzern einfacher, eine Option umzuschalten, ohne genau in das Kontrollkästchen klicken zu müssen.

Um ein Label mit einem Kontrollkästchen zu verknüpfen, müssen Sie das Label angeben zum Attribut den Wert von ICH WÜRDE Attribut des Kontrollkästchens, an das es gebunden ist. Leicht genug, richtig?

Aktualisieren Sie nun Ihre Optionsseite, und das neue Element sollte auf Ihrer Optionsseite sichtbar sein. Im Moment wird jedoch kein Wert gespeichert oder abgerufen. Lassen Sie uns zunächst a einführen Wert Attribut in der Checkbox. Dies ist etwas willkürlich, es ist jedoch üblich, einem geprüften Element den Wert '1' zu geben. Lass uns das jetzt machen:

$ html = '';

Als Nächstes wollen wir uns genau überlegen, was passieren muss, wenn wir einen Wert speichern. Im Idealfall:

Der Benutzer überprüft das Element und speichert den Wert
Die Seite wird aktualisiert und das Kontrollkästchen ist markiert
Der Benutzer überprüft das Element, um es zu deaktivieren, und speichert den Wert
Die Seite wird aktualisiert und das Kontrollkästchen wird nicht markiert

Relativ klar, richtig? Anstatt die Option zu lesen, eine Bedingung festzulegen und auf das Vorhandensein oder Fehlen eines Werts zu prüfen, können wir die Vorteile von WordPress nutzen. geprüft Funktion.

Die Funktion akzeptiert drei Argumente, von denen nur das erste erforderlich ist:

Der erste Wert ist einer der zu vergleichenden Werte
Der zweite zu vergleichende Wert, wenn der erste Wert nicht wahr ist
Ob Echo oder nicht check = "checked" an den Browser

Lassen Sie uns also unseren Code aktualisieren, um diese Funktion zu verwenden:

$ html = '';

Aktualisieren Sie die Seite, markieren Sie die Option, speichern Sie und wiederholen Sie die Auswahl.

Wenn dies etwas verwirrend erscheint, lesen Sie den vorherigen Artikel, in dem wir die Bedeutung jedes Attributs eines Optionselements behandeln.

Schließlich aktualisieren wir das Front-End des Designs, um diese Option zu aktivieren und eine Textzeichenfolge basierend auf der Option zu rendern. Erinnern wir uns daran, als wir das Element erstellt haben, gaben wir ihm den Wert von '1'. Das bedeutet, wenn das Kontrollkästchen aktiviert und serialisiert wird, wird der Wert 1 beibehalten. Einfach ausgedrückt, müssen wir eine Bedingung schreiben, die den Wert der Option überprüft und dann den Text entsprechend darstellt. Im index.php, Fügen Sie diesen Codeblock hinzu:

Das Kontrollkästchen wurde markiert.

Das Kontrollkästchen wurde nicht markiert.

Gehen Sie jetzt zurück zu Ihrer Einstellungsseite, aktivieren Sie das Kontrollkästchen und aktualisieren Sie Ihre Seite.

Wie am Anfang dieses Abschnitts erwähnt, schauen Sie sich die 'Anzeigeoptionen' an, die wir zuvor in dieser Serie vorgestellt haben, und sehen, ob es jetzt viel klarer ist, als wir untersucht haben, wie Sie Kontrollkästchenelemente einführen und verwalten.

Radio Knöpfe

Optionsfelder sind Elemente, die in Gruppen nützlich sind - schließlich werden Sie niemals ein einzelnes Optionsfeld verwenden. Bei Radio-Elementen besteht die Möglichkeit, dass Benutzer aus einem sich gegenseitig ausschließenden Satz von Optionen auswählen können.

Aus irgendeinem Grund sind Optionsfelder für WordPress-Entwickler oft eine Herausforderung. Hoffentlich machen wir es uns so leicht wie möglich, in unsere Projekte einzubeziehen. Wie bei den restlichen Beispielen in dieser Serie, beschreiben Sie genau, was wir tun werden:

Wir möchten zwei Optionen vorstellen, aus denen der Benutzer auswählen muss. Wir geben ihnen sehr allgemeine Labels.
Die erste Option ist ein Funkelement mit der Bezeichnung 'Option Eins' und hat den Wert '1'..
Die zweite Option ist ein Funkelement mit der Bezeichnung 'Option Zwei' und hat den Wert '2'..

Scheint klar genug - fügen wir das Feldelement unserer Optionsseite hinzu:

add_settings_field ('Optionsfeldelemente', 'Optionsfeldelemente', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section');

Und lassen Sie uns den Rückruf des Funkelements implementieren. Zuerst geben wir den Code an, dann überprüfen wir ihn:

function sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = 'Option eins'; $ html. = ''; $ html. = 'Option zwei'; echo $ html;  // end sandbox_radio_element_callback

Beim Arbeiten mit Optionsschaltflächen ist zu beachten, dass sie dies tun nicht Folgen Sie den typischen Beispielen für die Einstellung von ICH WÜRDE und Name Attribute. Beachten Sie, dass die ICH WÜRDE Das Attribut ist eindeutig und hat keine Beziehung zu den übrigen Attributen des Elements. Beachten Sie auch, dass jedes zugeordnete Label das Element verwendet ICH WÜRDE denn es ist zum Attribut. Dadurch wird die Beschriftung an das Optionsfeld gebunden, sodass Benutzer auf die Beschriftung klicken können, um das Funkelement auszuwählen.

Beachten Sie als Nächstes, dass die Name Die Attribute sind für jedes Funkelement gleich, jedoch das Werte sind anders. Das ist der Grund, warum sich Radiobuttons gegenseitig ausschließen - jedes Funkelement muss dasselbe haben Name Die Werte müssen jedoch eindeutig sein.

Schließlich können wir eine Bedingung für die Homepage festlegen, indem Sie den Wert des Elements prüfen. In deinem Motto Functions.php, Fügen Sie den folgenden Code-Block hinzu:

Die erste Option wurde ausgewählt.

Die zweite Option wurde ausgewählt.

Laden Sie die Startseite Ihres Themas, wechseln Sie die Optionen und aktualisieren Sie sie. Die beiden Sätze sollten sich je nach Wert der Optionselemente ändern.

Box auswählen

Das letzte Element, das wir überprüfen werden, ist das select-Element. Dieses Element bietet Benutzern ein Dropdown-Menü mit Optionen zur Auswahl. Lassen Sie uns genau planen, was wir für dieses Element einführen müssen:

Definieren Sie ein Auswahlelement. In unserem Beispiel behandeln wir es als drei Optionen für die Zeit.
Wir geben die Optionen für "Nie", "Manchmal" und "Immer" an..
Wir füllen eine Standardoption auf, die beim Laden der Seite festgelegt wird.

An diesem Punkt der Serie sollte dies durchaus Routine sein. Fangen wir an - zuerst führen wir das Einstellungsfeld ein:

add_settings_field ('Element auswählen', 'Element auswählen', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section');

Als Nächstes definieren wir die Rückruffunktion. Überprüfen Sie den Code und besprechen Sie ihn anschließend nach dem Beispiel:

function sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html;  // end sandbox_radio_element_callback

Aktualisieren Sie zunächst Ihre Optionsseite, um sicherzustellen, dass das ausgewählte Element angezeigt wird. Nehmen wir an, dass dies der Fall ist, lassen Sie uns den obigen Code überprüfen.

Bei der Definition des select-Elements haben wir ihm eine gegeben ICH WÜRDE Attribut und a Name schreiben Sie so viel wie wir mit den übrigen Elementen, die wir demonstriert haben. Als Nächstes verfügt jede Option über einen eindeutigen Wert und Text, der dem Wert entspricht. Obwohl Sie dies nicht tun müssen, habe ich es normalerweise als hilfreich empfunden, wenn Sie in meinen Projekten arbeiten. Schließlich haben wir das ausgenutzt ausgewählt Helfer, den WordPress bietet. Das ist sehr ähnlich geprüft Funktion, die wir im vorherigen Beispiel verwendet haben, außer dass sie auf Auswahloptionen ausgerichtet ist.

Der letzte Schritt besteht darin, das Frontend des Designs so zu aktualisieren, dass der Wert des Auswahlelements nach dem Speichern überprüft wird. Fügen Sie den folgenden Code-Code zu Ihrem hinzu index.php:

Zeigen Sie das niemals an. Etwas ironisch, um dies sogar zu zeigen.

Zeigen Sie dies manchmal an.

Immer anzeigen.

Besuchen Sie die Homepage Ihres Themes erneut, ändern Sie die Optionen und aktualisieren Sie die Seite. Sie sollten die Textaktualisierung basierend auf der ausgewählten Option feststellen.

Fazit

Damit sind wir endlich am Ende dieser Serie angelangt. Die Einstellungs-API ist eine leistungsstarke Funktion von WordPress und bietet uns die Möglichkeit, gut konzipierte, sichere Optionsseiten zu implementieren, erfordert jedoch eine ordnungsgemäße Verwendung. Leider ist dies wahrscheinlich eine der meist ignorierten Funktionen der Plattform von vielen Entwicklern.

Letztendlich war es mein Ziel, die Entwickler durch die API zu begleiten, von Anfang an zu verstehen, warum es wichtig ist, über Einstellungen, von Menüseiten bis zur Registernavigation und wie mit den einzelnen Elementtypen gearbeitet wird.

Denken Sie schließlich daran, dass Sie den Beispielcode auf GitHub finden können. Bitte tragen Sie dazu bei, wenn Sie mit der Einstellungs-API weiterarbeiten oder eine unklare Funktion finden. Ich würde mich freuen, wenn diese Serie und der Beispielcode der WordPress-Community weiterhin eine Quelle der Bildung bieten.