Share
Bei der Entwicklung von WordPress-Themes und Plugins gibt es verschiedene Möglichkeiten, wie Entwickler Menüs, Optionen und Überprüfungsfunktionen erstellen. Die Sache ist, dass es wirklich nur eine Möglichkeit gibt, dies in WordPress richtig zu machen: die Einstellungs-API.
Diese Serie soll der endgültige Leitfaden sein, um die Vorteile der WordPress-Einstellungs-API zu nutzen, damit Sie einen einzigen Bezugspunkt für die ordnungsgemäße Entwicklung Ihrer Designs und Plugins haben.
Im ersten Artikel dieser Serie haben wir uns eingehend mit der Einstellungs-API beschäftigt und warum dies wichtig ist. Hier werden wir uns näher mit der API beschäftigen und erfahren, wie wir alles nutzen können, was sie bietet.
Wir werden einen Blick auf die grundlegenden Einheiten der WordPress-Optionen - Abschnitte, Felder und Einstellungen - sowie auf die Einbindung in das native WordPress-Dashboard werfen.
Bevor wir mit dem Schreiben von Code beginnen, ist es wichtig, die drei Hauptkomponenten der WordPress-Einstellungs-API zu verstehen.
Machen Sie sich an diesem Punkt keine Sorgen, wenn Sie sich bezüglich der Hauptkomponenten noch nicht klar sind. Wir werden uns jede Komponente eingehend ansehen und einen Beispiel-Quellcode verwenden, der alles miteinander verbindet.
Um mit der Programmierung der Einstellungen-API zu beginnen, richten Sie ein grundlegendes Design ein, das in diesem Artikel und in der restlichen Serie verwendet werden kann. Der gesamte Quellcode ist auch auf GitHub verfügbar.
Navigieren Sie in Ihrer lokalen Installation von WordPress zum Verzeichnis "themes", erstellen Sie ein neues leeres Verzeichnis und nennen Sie es "WordPress-Settings-Sandbox". Fügen Sie die folgenden drei Dateien hinzu:
Fügen Sie style.css den folgenden Code hinzu:
/ * Name des Themas: WordPress-Einstellungen Sandbox-Design-URI: YOUR URI Beschreibung: Ein einfaches Design zum Präsentieren der WordPress-Einstellungs-API. Autor: YOUR NAME Autor URI: YOUR WEBSITE Version: 0.1 Lizenz: Copyright 2012 IHR NAME (IHRE EMAIL-ADRESSE) Dieses Programm ist freie Software. Sie können es unter den Bedingungen der GNU General Public License, Version 2, wie von der Free Software Foundation veröffentlicht, weitergeben und / oder ändern. Dieses Programm wird in der Hoffnung verteilt, dass es nützlich ist, jedoch OHNE JEDE GARANTIE; sogar ohne die implizite Garantie der MARKTFÄHIGKEIT oder EIGNUNG FÜR EINEN BESTIMMTEN ZWECK. Weitere Informationen finden Sie in der GNU General Public License. Sie sollten eine Kopie der GNU General Public License zusammen mit diesem Programm erhalten haben. Wenn nicht, schreiben Sie an die Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA * /
Fügen Sie anschließend folgenden Code zu index.php hinzu:
Das vollständige Handbuch zur Einstellungs-API | Sandkasten-Thema Sandkasten-Header
Dies ist ein Themeninhalt.
© Alle Rechte vorbehalten.
Beachten Sie, dass das obige Markup außerordentlich einfach ist nicht empfehlen, dies als Grundlage für die Themenentwicklung zu verwenden. Es ist auf diese Artikelserie zugeschnitten und stellt lediglich die Mittel bereit, mit denen wir Werte aus der Einstellungs-API lesen können.
In dem Themes Wenn Sie im Administrationsbildschirm die Seite aktualisieren, wird das neue Sandbox-Design angezeigt. Fahren Sie fort und aktivieren Sie es.
An diesem Punkt können wir loslegen.
In der Indexvorlage oben haben wir drei spezifische Inhaltsbereiche definiert: Kopfzeile, Inhalt und Fußzeile. Erstellen Sie mithilfe der Einstellungs-API einen Abschnitt "Allgemein" mit drei Feldern, von denen jedes einem der gerade definierten Inhaltsbereiche entspricht.
Bevor ich einen Code schreibe, finde ich es immer hilfreich, genau aufzuschreiben, was ich tun muss. In diesem Fall müssen wir Folgendes tun:
Um massive Codeblöcke zu vermeiden und um sicherzustellen, dass wir alle unsere Grundlagen abdecken, werden wir jeden der oben genannten Punkte Punkt für Punkt betrachten.
Um den Abschnitt "Allgemein" zu finden, müssen Sie die Funktion add_settings_section der Einstellungs-API verwenden. Gemäß dem WordPress-Codex sind für add_settings_section drei Argumente erforderlich:
Lasst uns damit fortfahren und unseren Abschnitt definieren. Schauen Sie sich den folgenden kommentierten Code an. Wir fügen dies in unsere Datei "functions.php" ein.
Ein Wort zu den Codeausschnitten dieser Serie: Kopieren Sie diesen Code nicht einfach. Nehmen Sie sich Zeit, um jede Zeile zu lesen, um zu sehen, wie die Argumente mit jeder API-Funktion übereinstimmen, die wir behandeln, und folgen Sie den entsprechenden Kommentaren, um sicherzustellen, dass Sie den Überblick über das bekommen, was wir tun:
Wählen Sie aus, welche Inhaltsbereiche Sie anzeigen möchten.'; // end sandbox_general_options_callback?>
Sinn ergeben? Im Allgemeinen sieht es nicht nach viel aus, sondern navigiert zu Ihrem die Einstellungen Menü und klicken Sie auf Allgemeines. Scrollen Sie zum Ende der Seite und Sie sollten den neuen Abschnitt mit den Optionen sehen.
Sie können diesen Abschnitt zu jeder der Seiten unter hinzufügen die Einstellungen Speisekarte. Im obigen Beispiel haben wir "general" als letzten Parameter an add_settings_section übergeben. Wenn Sie ihn jedoch einer anderen Seite hinzufügen möchten, können Sie einen anderen Seitentitel angeben. Hier ist eine Referenz für jeden die Einstellungen Seiten und den entsprechenden Schlüssel:
Nachdem wir nun einen Abschnitt definiert haben, können wir einige Optionen einführen. Wir möchten Sie daran erinnern, dass wir in unserer Indexvorlage drei spezifische Containerelemente definiert haben: Kopfzeile, Inhalt und Fußzeile.
Obwohl wir im Laufe dieser Serie weitere Optionen einführen werden, werden wir heute eine Möglichkeit vorstellen, die Sichtbarkeit jedes der oben genannten Elemente zu ändern.
Ähnlich wie bei den Einstellungen möchte ich genau auflisten, was wir tun müssen, bevor wir Code schreiben. Da werden wir jeden Inhaltsbereich umschalten…
An dieser Stelle können wir das erste Einstellungsfeld einführen. Dazu verwenden wir die Funktion add_settings_field. Diese Funktion benötigt sechs Parameter (vier erforderlich, zwei optional). Sie sind wie folgt:
Nachdem dies gesagt ist, wollen wir unser erstes Einstellfeld definieren. Insbesondere wird eine Option eingeführt, um die Sichtbarkeit der Kopfzeile umzuschalten.
Zuerst rufen wir add_settings_field direkt unter dem Funktionsaufruf add_settings_section in der Initialisierungsfunktion auf, die wir im ersten Teil des Lernprogramms geschrieben haben. Überprüfen Sie jede Zeile und die Kommentare für jede Option:
Accentsconagua
// Als Nächstes werden wir die Felder zum Umschalten der Sichtbarkeit von Inhaltselementen einführen. add_settings_field ('show_header', // ID, mit der das Feld im gesamten Thema 'Header' identifiziert wird, // die Bezeichnung links vom Optionsschnittstellenelement 'sandbox_toggle_header_callback') // der Name der Funktion, die für die Wiedergabe der Optionsschnittstelle verantwortlich ist 'general', // Die Seite, auf der diese Option angezeigt wird 'general_settings_section', // Der Name des Abschnitts, zu dem dieses Feld gehört (// Das Array von Argumenten, die an den Rückruf übergeben werden sollen. In diesem Fall eine Beschreibung. 'Aktivieren Sie diese Einstellung, um die Kopfzeile anzuzeigen.')); Als Nächstes definieren wir den Rückruf, auf den in der obigen Funktion verwiesen wird. Dieser Rückruf wird zum Rendern des Kontrollkästchens und der Beschreibung auf der Verwaltungsseite verwendet:
/ ** * Diese Funktion rendert die Oberflächenelemente zum Umschalten der Sichtbarkeit des Kopfelements. * * Es akzeptiert ein Array von Argumenten und erwartet, dass das erste Element im Array die Beschreibung * ist, die neben dem Kontrollkästchen angezeigt wird. * / function sandbox_toggle_header_callback ($ args) // Beachten Sie, dass die ID und das Namensattribut des Elements mit der ID im Aufruf von add_settings_field $ html = 'übereinstimmen sollten.'; // Hier nehmen wir das erste Argument des Arrays und fügen es einem Label neben der Checkbox $ html. = 'Hinzu.'; echo $ html; // end sandbox_toggle_header_callback
Beachten Sie bei den Ankreuzfeldern die Kommentare, machen Sie sich jedoch nicht zu viele Gedanken über einige Attribute, die Sie nicht kennen (z. B. einen Aufruf der Funktion checked ()). Später in dieser Serie werden wir uns jedes Eingabeelement und die entsprechenden Hilfsfunktionen ansehen.
Inzwischen sollte Ihre functions.php-Datei so aussehen:
Wählen Sie aus, welche Inhaltsbereiche Sie anzeigen möchten.'; // end sandbox_general_options_callback / * ----------------------------------- ----------------------------- * * Feldrückrufe * ---------------- -------------------------------------------------- ------ * / / ** * Diese Funktion rendert die Oberflächenelemente zum Umschalten der Sichtbarkeit des Headerelements. * * Es akzeptiert ein Array von Argumenten und erwartet, dass das erste Element im Array die Beschreibung * ist, die neben dem Kontrollkästchen angezeigt wird. * / function sandbox_toggle_header_callback ($ args) // Beachten Sie, dass die ID und das Namensattribut des Elements mit denen der ID im Aufruf von add_settings_field $ html = 'übereinstimmen.'; // Hier nehmen wir das erste Argument des Arrays und fügen es einem Label neben der Checkbox $ html. = 'Hinzu.'; echo $ html; // end sandbox_toggle_header_callback?>
Aktualisieren Sie an dieser Stelle die Allgemeine Einstellungen Seite. Sie sollten Ihre Checkbox mit der Bezeichnung "Header" und einer Beschreibung neben der Checkbox sehen.
Leider wird der Wert noch nicht in der Datenbank gespeichert.
Damit unsere Felder tatsächlich in der Datenbank gespeichert werden können, müssen wir sie bei WordPress registrieren. Dies ist relativ einfach - wir müssen nur die Funktion register_setting nutzen.
Diese Funktion akzeptiert drei Argumente (zwei erforderlich, eines optional):
An dieser Stelle registrieren wir die gerade erstellte Einstellung. Schauen Sie sich den Code unten an. Fügen Sie diese Codezeile direkt unter dem Aufruf add_settings_field in der Initialisierungsfunktion hinzu, die wir zuvor im Artikel definiert haben. Es ist wohl am einfachsten, aus allen Ausschnitten in diesem Artikel zu folgen:
// Zum Schluss registrieren wir die Felder mit WordPress. Register_setting ('general', 'show_header'); Probieren Sie es aus - Aktivieren Sie das Kontrollkästchen, klicken Sie auf "Änderungen speichern" und beachten Sie, dass sich die Option geändert hat, wenn die Seite aktualisiert wird. Deaktivieren Sie das Kontrollkästchen, speichern Sie und sehen Sie, wie es gespeichert wird.
Leicht genug, richtig?
Wir müssen noch die Optionen zum Umschalten der Sichtbarkeit des Inhaltsbereichs und des Fußzeilenbereichs einführen. Es ist fast genauso, wie wir die Option zum Umschalten des Headers einrichten.
Definieren wir zunächst das Feld für die Anzeige des Inhaltsbereichs. Dies erfolgt unter dem ersten Aufruf von add_settings_field:
add_settings_field ('show_content', 'content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Aktivieren Sie diese Einstellung, um den Inhalt anzuzeigen.')); Und lass uns die Callback-Funktion einrichten:
Funktion sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback
Als Nächstes definieren wir das Feld für die Anzeige des Fußzeilenbereichs:
add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Aktivieren Sie diese Einstellung, um die Fußzeile anzuzeigen.')); Und richten Sie auch den Rückruf für dieses Feld ein:
Funktion sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback
Schließlich lassen Sie uns diese beiden neuen Felder mit WordPress registrieren. Diese beiden Funktionsaufrufe befinden sich am Ende der Initialisierungsfunktion, die wir zuvor im Artikel definiert haben.
register_setting ('general', 'show_content'); register_setting ('general', 'show_footer'); Die endgültige Version von functions.php sollte folgendermaßen aussehen:
Wählen Sie aus, welche Inhaltsbereiche Sie anzeigen möchten.'; // end sandbox_general_options_callback / * ----------------------------------- ----------------------------- * * Feldrückrufe * ---------------- -------------------------------------------------- ------ * / / ** * Diese Funktion rendert die Oberflächenelemente zum Umschalten der Sichtbarkeit des Headerelements. * * Es akzeptiert ein Array von Argumenten und erwartet, dass das erste Element im Array die Beschreibung * ist, die neben dem Kontrollkästchen angezeigt wird. * / function sandbox_toggle_header_callback ($ args) // Beachten Sie, dass die ID und das Namensattribut des Elements mit denen der ID im Aufruf von add_settings_field $ html = 'übereinstimmen.'; // Hier nehmen wir das erste Argument des Arrays und fügen es einem Label neben der Checkbox $ html. = 'Hinzu.'; echo $ html; // end sandbox_toggle_header_callback-Funktion sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback-Funktion sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback?>
Aktualisieren Sie jetzt die Allgemeine Einstellungen Seite und beachten Sie, dass Sie alle drei voll funktionsfähigen Kontrollkästchen haben.
Was nützen die Optionen, wenn wir sie während unseres Themas oder unseres Plugins nicht nutzen können? Wir müssen die Werte lesen können, um unsere neuen Optionen richtig verwalten zu können.
Dazu müssen wir die Funktion get_option verwenden. Diese Funktion akzeptiert zwei Argumente (eins erforderlich, eins optional):
Versuchen wir zunächst, die Sichtbarkeit der Kopfzeile zu ändern. Suchen Sie in der Indexvorlage, die wir zuvor in diesem Artikel erstellt haben, das Element mit der ID der Kopfzeile. Es sollte so aussehen:
Sandkasten-Header
Als Nächstes rufen wir get_option im Kontext einer Bedingung auf. Wenn die Bedingung als wahr ausgewertet wird (dh, die Option wurde in der Option aktiviert.) Allgemeine Einstellungen Seite), dann wird das Element angezeigt; Andernfalls wird das Element nicht angezeigt.
Sandkasten-Header
Danach hoffe ich auf die Allgemeine Einstellungen Aktivieren Sie auf dieser Seite die Option zum Ausblenden des Header-Elements und aktualisieren Sie die Startseite. Das Header-Element sollte nicht mehr angezeigt werden.
An dieser Stelle müssen Sie den Vorgang auch für das Inhalts- und das Fußzeilenelement wiederholen. Wir müssen die Inhalts- und Fußzeilenelemente mit Bedingungen umschließen, die das Ergebnis von get_option-Aufrufen auswerten.
Schau mal:
Dies ist ein Themeninhalt.
© Alle Rechte vorbehalten.
Besuchen Sie die Allgemeine Einstellungen Umschalten der Kontrollkästchen und Aktualisieren der Designseite. Ihre Elemente sollten unabhängig voneinander umschalten.
Das war es fürs Erste! Wir haben uns alle Funktionen angesehen, die zum Einfügen neuer Abschnitte, Felder und Einstellungen in WordPress erforderlich sind. Natürlich gibt es noch viel mehr zu berichten.
Im nächsten Artikel erfahren Sie, wie Sie benutzerdefinierte Menüelemente zum WordPress-Menü hinzufügen und wie wir unsere eigenen Seiten in das WordPress-Dashboard einführen können.
Wir haben in diesem Artikel viel Material behandelt. Hier finden Sie eine Referenz für alles, was wir in diesem Artikel verwendet haben.
