Die WordPress-Einstellungs-API, Teil 2: Abschnitte, Felder und Einstellungen

() translation by (you can also view the original English article)

Wenn es um die Entwicklung von WordPress-Themes und -Plugins geht, gibt es verschiedene Möglichkeiten, wie Entwickler ihre Menüs, Optionen und Validierungsfunktionen erstellen können. Die Sache ist die, es gibt wirklich nur eine Möglichkeit, dies in WordPress richtig zu tun: die Einstellungs-API.

Diese Serie soll der endgültige Leitfaden für die Nutzung der WordPress-Einstellungs-API sein, damit Sie einen einzigen Bezugspunkt für die richtige Entwicklung Ihrer Themes und Plugins haben.

Im ersten Artikel dieser Serie haben wir uns ausführlich mit der Einstellungs-API befasst und erklärt, warum sie wichtig ist. Hier tauchen wir in die API ein und erfahren, wie Sie alle Vorteile nutzen können, die sie bietet.

Wir werfen einen Blick auf die grundlegenden Einheiten der WordPress-Optionen – Abschnitte, Felder und Einstellungen – und wie man sie in das native WordPress-Dashboard einfügt.

In Abschnitten, Feldern und Einstellungen

Bevor wir mit dem Schreiben von Code beginnen, ist es wichtig, die drei Hauptkomponenten der WordPress-Einstellungs-API zu verstehen.

Felder sind einzelne Optionen, die auf Menüseiten angezeigt werden. Felder entsprechen tatsächlichen Elementen auf dem Bildschirm. Das heißt, ein Feld wird durch ein Textfeld, ein Optionsfeld, ein Kontrollkästchen usw. verwaltet. Felder repräsentieren einen Wert, der in der WordPress-Datenbank gespeichert ist.
Abschnitte sind eine logische Gruppierung von Feldern. Wenn Sie mit mehreren Feldern arbeiten, werden Sie wahrscheinlich verwandte Optionen zusammen gruppieren - Abschnitte repräsentieren diese Gruppierung. Wenn Ihre Arbeit mehrere Verwaltungsseiten umfasst, entspricht außerdem jeder Abschnitt oft einer eigenen Menüseite (Sie können sie jedoch auch zu bestehenden Abschnitten hinzufügen).
Die Einstellungen werden registriert, nachdem Sie sowohl Felder als auch Abschnitte definiert haben. Stellen Sie sich Einstellungen als eine Kombination aus dem Feld und dem Abschnitt vor, zu dem es gehört.

Machen Sie sich an dieser Stelle keine Sorgen, wenn Sie sich über eine der Hauptkomponenten noch nicht sicher sind. Wir werden uns jede Komponente eingehend ansehen, zusammen mit Beispielquellcode, der alles miteinander verbindet.

Eine Sandbox für unsere Einstellungen

Um mit der Programmierung für die Einstellungs-API zu beginnen, richten wir ein grundlegendes Thema ein, das in diesem Artikel und im Rest der Serie verwendet werden kann. Der gesamte Quellcode ist auch auf GitHub verfügbar.

Navigieren Sie in Ihrer lokalen Installation von WordPress zum Verzeichnis „themes“ und erstellen Sie ein neues, leeres Verzeichnis und nennen Sie es „WordPress-Settings-Sandbox“. Fügen Sie die folgenden drei Dateien hinzu:

style.css – Dies ist das Stylesheet für das Theme. Es enthält alle Metainformationen zum Thema. Es wird von WordPress benötigt
index.php – Dies ist die Standardvorlage für das Thema. Es kann zunächst leer sein. Es wird von WordPress benötigt
functions.php – Hier werden wir die meiste Arbeit erledigen. Wir werden dies während des Tutorials ausfüllen

Fügen Sie style.css den folgenden Code hinzu:

/*
Theme Name: WordPress Settings Sandbox
Theme URI: YOUR URI
Description: A simple theme used to showcase the WordPress Settings API.
Author: YOUR NAME
Author URI: YOUR WEBSITE
Version: 0.1

License:

 Copyright 2012 YOUR NAME (YOUR EMAIL ADDRESS)

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License, version 2, as 
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  
*/

Als nächstes fügen Sie der index.php den folgenden Code hinzu:

<!DOCTYPE html>
<html>
	<head>	
		<title>The Complete Guide To The Settings API | Sandbox Theme</title>
	</head>
	<body>
	
		<div id="header">
			<h1>Sandbox Header</h1>
		</div><!-- /#header -->

		<div id="content">
			<p>This is theme content.</p>
		</div><!-- /#content -->

		<div id="footer">
			<p>&copy; <?php echo date('Y'); ?> All Rights Reserved.</p>
		</div><!-- /#footer -->
	
	</body>
</html>

Beachten Sie, dass das obige Markup außergewöhnlich einfach ist und ich nicht empfehle, es als Grundlage für die Themenentwicklung zu verwenden. Es ist auf diese Artikelserie zugeschnitten und bietet lediglich die Möglichkeit, Werte aus der Einstellungs-API zu lesen.

Aktualisieren Sie auf dem Bildschirm zur Verwaltung von Designs die Seite und Sie sollten sehen, dass das neue Sandbox-Design angezeigt wird. Fahren Sie fort und aktivieren Sie es.

An diesem Punkt sind wir bereit, loszulegen.

Unsere ersten Optionen

Beachten Sie, dass wir in der obigen Indexvorlage drei spezifische Inhaltsbereiche definiert haben: Kopfzeile, Inhalt und Fußzeile. Lassen Sie uns mit der Einstellungs-API einen Abschnitt "Allgemein" mit drei Feldern erstellen, von denen jedes einem der spezifischen Inhaltsbereiche entspricht, die wir gerade definiert haben.

Bevor ich Code schreibe, finde ich es immer hilfreich, genau aufzulisten, was ich tun muss. In diesem Fall müssen wir Folgendes tun:

Definieren Sie einen Abschnitt, der verwendet wird, um jedes Feld zu gruppieren
Fügen Sie dem oben definierten Abschnitt drei Felder hinzu – eines für jeden Inhaltsbereich.
Registrieren Sie die Einstellungen mit der WordPress-API.

Um massive Codeblöcke zu vermeiden und sicherzustellen, dass wir alle unsere Grundlagen abdecken, werden wir jeden der oben genannten Punkte Punkt für Punkt betrachten.

Abschnitt erstellen

Um unseren Abschnitt "Allgemein" mit Optionen zu finden, müssen wir die Funktion add_settings_section der Einstellungs-API verwenden. Laut WordPress-Codex erfordert add_settings_section drei Argumente:

ID – Dies ist die eindeutige Kennung für diesen bestimmten Abschnitt. Beachten Sie, dass dies der Wert ist, der verwendet wird, um jedes Feld in diesem Abschnitt zu registrieren. Fühlen Sie sich frei, es zu benennen, wie Sie möchten, aber ich empfehle, es aus Gründen der Lesbarkeit klar zu machen.
Titel – Dieser Wert wird oben auf der Seite im WordPress-Dashboard angezeigt, wenn Benutzer mit Ihren Optionen arbeiten.
Callback – Dies ist der Name einer Funktion, die wir definieren, die Text auf dem Bildschirm für die Funktion rendert. Es kann für eine Vielzahl von Funktionen verwendet werden. Im einfachsten Fall kann es verwendet werden, um eine Anleitung oder Beschreibung für Ihre Optionsseite bereitzustellen.
Seite – Dieser Wert wird verwendet, um WordPress mitzuteilen, auf welcher Seite Ihre Optionen angezeigt werden sollen. In einem zukünftigen Artikel werden wir dies verwenden, um unseren eigenen benutzerdefinierten Seiten Optionen hinzuzufügen. Vorerst fügen wir dies der vorhandenen Seite Allgemeine Optionen hinzu.

Lassen Sie uns damit fortfahren und unseren Abschnitt definieren. Sehen Sie sich den folgenden, kommentierten Code an. Wir fügen dies unserer Datei functions.php hinzu.

Ein Wort zu den Code-Snippets in dieser Serie: Kopieren Sie diesen Code nicht einfach und fügen Sie ihn ein. Nehmen Sie sich die Zeit, jede Zeile zu lesen, sehen Sie, wie die Argumente mit den einzelnen API-Funktionen übereinstimmen, die wir behandeln, und folgen Sie den entsprechenden Kommentaren, um sicherzustellen, dass Sie verstehen, was wir tun:

<?php

/* ------------------------------------------------------------------------ *
 * Setting Registration
 * ------------------------------------------------------------------------ */ 

/**
 * Initializes the theme options page by registering the Sections,
 * Fields, and Settings.
 *
 * This function is registered with the 'admin_init' hook.
 */
add_action('admin_init', 'sandbox_initialize_theme_options');
function sandbox_initialize_theme_options() {

	// First, we register a section. This is necessary since all future options must belong to one.
	add_settings_section(
		'general_settings_section',			// ID used to identify this section and with which to register options
		'Sandbox Options',					// Title to be displayed on the administration page
		'sandbox_general_options_callback',	// Callback used to render the description of the section
		'general'							// Page on which to add this section of options
	);
} // end sandbox_initialize_theme_options

/* ------------------------------------------------------------------------ *
 * Section Callbacks
 * ------------------------------------------------------------------------ */ 

/**
 * This function provides a simple description for the General Options page. 
 *
 * It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
function sandbox_general_options_callback() {
	echo '<p>Select which areas of content you wish to display.</p>';
} // end sandbox_general_options_callback
 
?>

Sinn ergeben? Im Allgemeinen sieht es nicht nach viel aus, aber navigieren Sie zu Ihrem Einstellungsmenü und klicken Sie auf Allgemein. Scrollen Sie zum Ende der Seite und Sie sollten Ihren neuen Abschnitt mit Optionen sehen.

Sie können diesen Abschnitt zu jeder der Seiten im Menü Einstellungen hinzufügen. Im obigen Beispiel haben wir "general" als letzten Parameter an den add_settings_section übergeben, aber wenn Sie ihn zu einer anderen Seite hinzufügen möchten, können Sie einen anderen Seitentitel angeben. Hier ist eine Referenz für jede der Einstellungsseiten und ihre entsprechenden Tasten:

Allgemein, "allgemein"
Schreiben, "schreiben"
Lesen, "lesen"
Diskussion, "Diskussion"
Medien, "Medien"
Datenschutz, "Datenschutz"
Permalinks, "Permalink"

Felder hinzufügen

Nachdem wir nun einen Abschnitt definiert haben, können wir einige Optionen einführen. Denken Sie daran, dass wir in unserer Indexvorlage drei spezifische Containerelemente definiert haben: Kopfzeile, Inhalt und Fußzeile.

Obwohl wir im Laufe dieser Serie weitere Optionen einführen werden, werden wir heute eine Möglichkeit vorstellen, die Sichtbarkeit jedes der oben genannten Elemente umzuschalten.

Ähnlich wie im Abschnitt "Einstellungen" möchte ich genau auflisten, was wir tun müssen, bevor wir Code schreiben. Da wir jeden der Inhaltsbereiche umschalten werden...

Wir brauchen drei Optionen – eine für jeden Inhaltsbereich
Da wir die Sichtbarkeit umschalten, können wir ein Kontrollkästchen als Oberflächenelement verwenden use

An dieser Stelle sind wir bereit, das erste Einstellungsfeld vorzustellen. Dazu verwenden wir die Funktion add_settings_field. Diese Funktion benötigt sechs Parameter (vier erforderlich, zwei optional). Sie sind wie folgt:

ID – Die ID des aktuellen Felds. Dies wird verwendet, um den Wert im gesamten Design zu speichern und abzurufen. Ich empfehle, dies sinnvoll zu benennen, um die Lesbarkeit Ihres Codes zu verbessern.
Titel – Dieser Wert wendet einen Titel auf die Feldoption auf der Verwaltungsseite an. Dies sollte klar sein, da es von Endbenutzern gelesen wird.
Rückruf – Dies ist der Name der Funktion, die verwendet wird, um das eigentliche Oberflächenelement zu rendern, mit dem Benutzer interagieren.
Seite – Ähnlich wie im Abschnitt, den wir umrissen haben, gibt dieser Parameter an, auf welcher Seite sich diese Option befinden soll. Wenn Sie nur eine einzelne Option einführen, können Sie sie einer vorhandenen Seite anstelle eines von Ihnen definierten Abschnitts hinzufügen.
Abschnitt – Dies bezieht sich auf den Abschnitt, den Sie mit der Funktion add_settings_section erstellt haben. Dieser Wert ist die ID, die Sie beim Erstellen Ihres Abschnitts angegeben haben. Dies ist ein optionaler Parameter.
Argumente – Dies ist ein Array von Argumenten, die an die Callback-Funktion übergeben werden. Dies ist nützlich, wenn es zusätzliche Informationen gibt, die Sie in das Rendern Ihres Optionselements einbeziehen möchten. Dies ist ein optionaler Parameter.

Lassen Sie uns damit fortfahren und unser erstes Einstellungsfeld definieren. Insbesondere werden wir eine Option zum Umschalten der Sichtbarkeit des Headers einführen.

Zuerst rufen wir add_settings_field direkt unter dem Funktionsaufruf add_settings_section in der Initialisierungsfunktion auf, die wir im ersten Teil des Tutorials geschrieben haben. Überprüfen Sie jede Zeile und die Kommentare für jede Option:

// Next, we will introduce the fields for toggling the visibility of content elements.
add_settings_field(	
	'show_header',						// ID used to identify the field throughout the theme
	'Header',							// The label to the left of the option interface element
	'sandbox_toggle_header_callback',	// The name of the function responsible for rendering the option interface
	'general',							// The page on which this option will be displayed
	'general_settings_section',			// The name of the section to which this field belongs
	array(								// The array of arguments to pass to the callback. In this case, just a description.
		'Activate this setting to display the header.'
	)
);

Als nächstes definieren wir den Callback, auf den sich die obige Funktion bezieht. Dieser Callback wird verwendet, um das Kontrollkästchen und die Beschreibung auf der Administrationsseite zu rendern:

/**
 * This function renders the interface elements for toggling the visibility of the header element.
 * 
 * It accepts an array of arguments and expects the first element in the array to be the description
 * to be displayed next to the checkbox.
 */
function sandbox_toggle_header_callback($args) {
	
	// Note the ID and the name attribute of the element should match that of the ID in the call to add_settings_field
	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>';
	
	// Here, we will take the first argument of the array and add it to a label next to the checkbox
	$html .= '<label for="show_header"> '  . $args[0] . '</label>';
	
	echo $html;
	
} // end sandbox_toggle_header_callback

Was das Kontrollkästchen betrifft, achten Sie auf die Kommentare, aber machen Sie sich keine Sorgen um einige der Attribute, die Sie nicht kennen (wie zum Beispiel einen Aufruf der Funktion checked()). Später in dieser Serie werden wir uns die einzelnen Eingabeelemente und ihre entsprechenden Hilfsfunktionen ansehen.

Ihre Datei functions.php sollte jetzt so aussehen:

<?php

/* ------------------------------------------------------------------------ *
 * Setting Registration
 * ------------------------------------------------------------------------ */

/**
 * Initializes the theme options page by registering the Sections,
 * Fields, and Settings.
 *
 * This function is registered with the 'admin_init' hook.
 */
add_action('admin_init', 'sandbox_initialize_theme_options');
function sandbox_initialize_theme_options() {

	// First, we register a section. This is necessary since all future options must belong to one.
	add_settings_section(
		'general_settings_section',			// ID used to identify this section and with which to register options
		'Sandbox Options',					// Title to be displayed on the administration page
		'sandbox_general_options_callback',	// Callback used to render the description of the section
		'general'							// Page on which to add this section of options
	);
	
	// Next, we will introduce the fields for toggling the visibility of content elements.
	add_settings_field(	
		'show_header',						// ID used to identify the field throughout the theme
		'Header',							// The label to the left of the option interface element
		'sandbox_toggle_header_callback',	// The name of the function responsible for rendering the option interface
		'general',							// The page on which this option will be displayed
		'general_settings_section',			// The name of the section to which this field belongs
		array(								// The array of arguments to pass to the callback. In this case, just a description.
			'Activate this setting to display the header.'
		)
	);
	
} // end sandbox_initialize_theme_options

/* ------------------------------------------------------------------------ *
 * Section Callbacks
 * ------------------------------------------------------------------------ */ 

/**
 * This function provides a simple description for the General Options page. 
 *
 * It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
function sandbox_general_options_callback() {
	echo '<p>Select which areas of content you wish to display.</p>';
} // end sandbox_general_options_callback

/* ------------------------------------------------------------------------ *
 * Field Callbacks
 * ------------------------------------------------------------------------ */ 

/**
 * This function renders the interface elements for toggling the visibility of the header element.
 * 
 * It accepts an array of arguments and expects the first element in the array to be the description
 * to be displayed next to the checkbox.
 */
function sandbox_toggle_header_callback($args) {
	
	// Note the ID and the name attribute of the element match that of the ID in the call to add_settings_field
	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>'; 
	
	// Here, we will take the first argument of the array and add it to a label next to the checkbox
	$html .= '<label for="show_header"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_header_callback

?>

Aktualisieren Sie an dieser Stelle die Seite Allgemeine Einstellungen. Sie sollten Ihr Kontrollkästchen mit dem Label "Header" und einer Beschreibung neben dem Kontrollkästchen sehen.

Leider wird der Wert noch nicht in der Datenbank gespeichert.

Registrieren unserer Einstellungen

Damit unsere Felder tatsächlich in der Datenbank gespeichert werden, müssen wir sie bei WordPress registrieren. Dies ist relativ einfach - wir müssen nur die Funktion register_setting nutzen.

Diese Funktion akzeptiert drei Argumente (zwei erforderlich, eines optional):

Optionsgruppe – Dies ist eigentlich der Name der Optionsgruppe. Dies kann entweder eine vorhandene Gruppe von Optionen sein, die von WordPress bereitgestellt werden, oder eine ID, die wir beim Erstellen unseres eigenen Einstellungsbereichs angegeben haben. Dieses Argument ist erforderlich.
Optionsname – Dies ist die ID des Felds, das wir registrieren. In unserem Fall registrieren wir nur ein einzelnes Feld, aber wenn wir mehrere Felder registrieren, müssen wir diese Funktion für jedes registrierte Feld aufrufen. Wir werden gleich mehr dazu sehen. Dieses Argument ist erforderlich.
Callback – Dieses Argument erfordert den Namen einer Funktion, die vor dem Speichern der Daten in der Datenbank aufgerufen wird. Dieses Argument ist außerhalb des Rahmens dieses Artikels, aber wir werden es besuchen, bevor die Serie zu Ende ist. Dieses Argument ist optional.

Lassen Sie uns an dieser Stelle die Einstellung registrieren, die wir gerade erstellt haben. Schauen Sie sich den Code unten an. Fügen Sie diese Codezeile direkt unter dem Aufruf von add_settings_field in der Initialisierungsfunktion hinzu, die wir weiter oben im Artikel definiert haben. Es ist wohl der einfachste von allen Ausschnitten in diesem Artikel:

// Finally, we register the fields with WordPress
register_setting(
	'general',
	'show_header'
);

Probieren Sie es aus - aktivieren Sie das Kontrollkästchen, klicken Sie auf "Änderungen speichern" und beachten Sie, dass sich die Option beim Aktualisieren der Seite geändert hat. Deaktivieren Sie das Kontrollkästchen, speichern Sie und sehen Sie zu, wie es gespeichert wird.

Einfach genug, oder?

Hinzufügen der letzten beiden Optionen

Wir müssen noch die Optionen zum Umschalten der Sichtbarkeit des Inhaltsbereichs und des Fußbereichs einführen. Es ist fast genauso, wie wir die Option zum Umschalten des Headers einrichten.

Zunächst definieren wir das Feld für die Anzeige des Inhaltsbereichs. Dies geht unter den ersten Aufruf von add_settings_field:

add_settings_field(
	'show_content',
	'Content',
	'sandbox_toggle_content_callback',
	'general',
	'general_settings_section',
	array(
		'Activate this setting to display the content.'
	)
);

Und lassen Sie uns die Callback-Funktion einrichten:

function sandbox_toggle_content_callback($args) {

	$html = '<input type="checkbox" id="show_content" name="show_content" value="1" ' . checked(1, get_option('show_content'), false) . '/>'; 
	$html .= '<label for="show_content"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_content_callback

Als nächstes definieren wir das Feld für die Anzeige des Fußzeilenbereichs:

add_settings_field(	
	'show_footer',						
	'Footer',				
	'sandbox_toggle_footer_callback',	
	'general',							
	'general_settings_section',			
	array(								
		'Activate this setting to display the footer.'
	)
);

Und richten Sie auch den Rückruf für dieses Feld ein:

function sandbox_toggle_footer_callback($args) {
	
	$html = '<input type="checkbox" id="show_footer" name="show_footer" value="1" ' . checked(1, get_option('show_footer'), false) . '/>'; 
	$html .= '<label for="show_footer"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_footer_callback

Zum Schluss registrieren wir diese beiden neuen Felder bei WordPress. Diese beiden Funktionsaufrufe stehen am Ende der Initialisierungsfunktion, die wir zuvor in diesem Artikel definiert haben.

register_setting(
	'general',
	'show_content'
);

register_setting(
	'general',
	'show_footer'
);

Die endgültige Version von functions.php sollte wie folgt aussehen:

<?php

/* ------------------------------------------------------------------------ *
 * Setting Registration
 * ------------------------------------------------------------------------ */ 

/**
 * Initializes the theme options page by registering the Sections,
 * Fields, and Settings.
 *
 * This function is registered with the 'admin_init' hook.
 */ 
add_action('admin_init', 'sandbox_initialize_theme_options');
function sandbox_initialize_theme_options() {

	// First, we register a section. This is necessary since all future options must belong to one. 
	add_settings_section(
		'general_settings_section',			// ID used to identify this section and with which to register options
		'Sandbox Options',					// Title to be displayed on the administration page
		'sandbox_general_options_callback',	// Callback used to render the description of the section
		'general'							// Page on which to add this section of options
	);
	
	// Next, we will introduce the fields for toggling the visibility of content elements.
	add_settings_field(	
		'show_header',						// ID used to identify the field throughout the theme
		'Header',							// The label to the left of the option interface element
		'sandbox_toggle_header_callback',	// The name of the function responsible for rendering the option interface
		'general',							// The page on which this option will be displayed
		'general_settings_section',			// The name of the section to which this field belongs
		array(								// The array of arguments to pass to the callback. In this case, just a description.
			'Activate this setting to display the header.'
		)
	);
	
	add_settings_field(	
		'show_content',						
		'Content',				
		'sandbox_toggle_content_callback',	
		'general',							
		'general_settings_section',			
		array(								
			'Activate this setting to display the content.'
		)
	);
	
	add_settings_field(	
		'show_footer',						
		'Footer',				
		'sandbox_toggle_footer_callback',	
		'general',							
		'general_settings_section',			
		array(								
			'Activate this setting to display the footer.'
		)
	);
	
	// Finally, we register the fields with WordPress
	register_setting(
		'general',
		'show_header'
	);
	
	register_setting(
		'general',
		'show_content'
	);
	
	register_setting(
		'general',
		'show_footer'
	);
	
} // end sandbox_initialize_theme_options

/* ------------------------------------------------------------------------ *
 * Section Callbacks
 * ------------------------------------------------------------------------ */ 

/**
 * This function provides a simple description for the General Options page. 
 *
 * It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
function sandbox_general_options_callback() {
	echo '<p>Select which areas of content you wish to display.</p>';
} // end sandbox_general_options_callback

/* ------------------------------------------------------------------------ *
 * Field Callbacks
 * ------------------------------------------------------------------------ */ 

/**
 * This function renders the interface elements for toggling the visibility of the header element.
 * 
 * It accepts an array of arguments and expects the first element in the array to be the description
 * to be displayed next to the checkbox.
 */
function sandbox_toggle_header_callback($args) {
	
	// Note the ID and the name attribute of the element match that of the ID in the call to add_settings_field
	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>'; 
	
	// Here, we will take the first argument of the array and add it to a label next to the checkbox
	$html .= '<label for="show_header"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_header_callback

function sandbox_toggle_content_callback($args) {

	$html = '<input type="checkbox" id="show_content" name="show_content" value="1" ' . checked(1, get_option('show_content'), false) . '/>'; 
	$html .= '<label for="show_content"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_content_callback

function sandbox_toggle_footer_callback($args) {
	
	$html = '<input type="checkbox" id="show_footer" name="show_footer" value="1" ' . checked(1, get_option('show_footer'), false) . '/>'; 
	$html .= '<label for="show_footer"> '  . $args[0] . '</label>'; 
	
	echo $html;
	
} // end sandbox_toggle_footer_callback

?>

Aktualisieren Sie nun die Seite Allgemeine Einstellungen und stellen Sie fest, dass alle drei Kontrollkästchen voll funktionsfähig sind.

Lesen der API

Was nützen Optionen, wenn wir sie nicht in unserem gesamten Theme oder unserem Plugin nutzen können? Wir müssen in der Lage sein, die Werte zu lesen, um unsere neuen Optionen richtig verwalten zu können.

Dazu müssen wir die Funktion get_option verwenden. Diese Funktion akzeptiert zwei Argumente (eines erforderlich, eines optional):

Options-ID – Dieses Argument ist die ID des Felds für den Wert, den Sie abrufen möchten. Dieses Argument ist erforderlich.
Standardoption – Dies ist der Wert, den die Funktion zurückgibt, wenn die Funktion einen leeren Wert zurückgibt (z. B. wenn die Option nicht in der Datenbank gefunden wird). Dieses Argument ist optional.

Versuchen wir zunächst, die Sichtbarkeit des Headers umzuschalten. Suchen Sie in der Indexvorlage, die wir weiter oben in diesem Artikel erstellt haben, das Element mit der ID von header. Es sollte so aussehen:

1	<div id="header">
2	<h1>Sandbox Header</h1>
3	</div><!-- /#header -->

Als Nächstes rufen wir get_option im Kontext einer Bedingung auf. Wenn die Bedingung wahr ist (dh die Option wurde auf der Seite Allgemeine Einstellungen aktiviert), wird das Element angezeigt; Andernfalls wird das Element nicht angezeigt.

<?php if(get_option('show_header')) { ?>
	<div id="header">
		<h1>Sandbox Header</h1>
	</div><!-- /#header -->
<?php } // end if ?>

Gehen Sie danach zur Seite Allgemeine Einstellungen, aktivieren Sie die Option zum Ausblenden des Kopfzeilenelements und aktualisieren Sie Ihre Homepage. Das Kopfelement sollte nicht mehr erscheinen.

An dieser Stelle ist es einfach, den Vorgang auch für das Inhalts- und Fußzeilenelement zu wiederholen. Wir müssen die Inhalts- und Fußzeilenelemente mit Bedingungen umschließen, die das Ergebnis von get_option-Aufrufen auswerten.

Schau mal:

<?php if(get_option('show_content')) { ?>
	<div id="content">
		<p>This is theme content.</p>
	</div><!-- /#content -->
<?php } // end if ?>

<?php if(get_option('show_footer')) { ?>
	<div id="footer">
		<p>&copy; <?php echo date('Y'); ?> All Rights Reserved.</p>
	</div><!-- /#footer -->
<?php } // end if ?>

Rufen Sie die Seite Allgemeine Einstellungen erneut auf, aktivieren Sie jedes Kontrollkästchen und aktualisieren Sie die Themenseite. Ihre Elemente sollten jeweils unabhängig voneinander umschalten.

Als nächstes, Menüseiten

Das war es fürs Erste! Wir haben uns alle Funktionen angeschaut, die erforderlich sind, um neue Abschnitte, Felder und Einstellungen in WordPress einzuführen. Natürlich gibt es noch viel mehr abzudecken.

Im nächsten Artikel werfen wir einen Blick darauf, wie wir benutzerdefinierte Menüelemente zum WordPress-Menü hinzufügen und wie wir unsere eigenen Seiten in das WordPress-Dashboard einführen können.

Ähnliche Resourcen

Wir haben in diesem Artikel viel Material behandelt. Hier ist eine Referenz für alles, was wir in diesem Artikel verwendet haben.

1	<?php
2
3	/* ------------------------------------------------------------------------ *
4	* Setting Registration
5	* ------------------------------------------------------------------------ */
6
7	/**
8	* Initializes the theme options page by registering the Sections,
9	* Fields, and Settings.
10	*
11	* This function is registered with the 'admin_init' hook.
12	*/
13	add_action('admin_init', 'sandbox_initialize_theme_options');
14	function sandbox_initialize_theme_options() {
15
16	// First, we register a section. This is necessary since all future options must belong to one.
17	add_settings_section(
18	'general_settings_section', // ID used to identify this section and with which to register options
19	'Sandbox Options', // Title to be displayed on the administration page
20	'sandbox_general_options_callback', // Callback used to render the description of the section
21	'general' // Page on which to add this section of options
22	);
23
24	// Next, we will introduce the fields for toggling the visibility of content elements.
25	add_settings_field(
26	'show_header', // ID used to identify the field throughout the theme
27	'Header', // The label to the left of the option interface element
28	'sandbox_toggle_header_callback', // The name of the function responsible for rendering the option interface
29	'general', // The page on which this option will be displayed
30	'general_settings_section', // The name of the section to which this field belongs
31	array( // The array of arguments to pass to the callback. In this case, just a description.
32	'Activate this setting to display the header.'
33	)
34	);
35
36	add_settings_field(
37	'show_content',
38	'Content',
39	'sandbox_toggle_content_callback',
40	'general',
41	'general_settings_section',
42	array(
43	'Activate this setting to display the content.'
44	)
45	);
46
47	add_settings_field(
48	'show_footer',
49	'Footer',
50	'sandbox_toggle_footer_callback',
51	'general',
52	'general_settings_section',
53	array(
54	'Activate this setting to display the footer.'
55	)
56	);
57
58	// Finally, we register the fields with WordPress
59	register_setting(
60	'general',
61	'show_header'
62	);
63
64	register_setting(
65	'general',
66	'show_content'
67	);
68
69	register_setting(
70	'general',
71	'show_footer'
72	);
73
74	} // end sandbox_initialize_theme_options
75
76	/* ------------------------------------------------------------------------ *
77	* Section Callbacks
78	* ------------------------------------------------------------------------ */
79
80	/**
81	* This function provides a simple description for the General Options page.
82	*
83	* It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter
84	* in the add_settings_section function.
85	*/
86	function sandbox_general_options_callback() {
87	echo '<p>Select which areas of content you wish to display.</p>';
88	} // end sandbox_general_options_callback
89
90	/* ------------------------------------------------------------------------ *
91	* Field Callbacks
92	* ------------------------------------------------------------------------ */
93
94	/**
95	* This function renders the interface elements for toggling the visibility of the header element.
96	*
97	* It accepts an array of arguments and expects the first element in the array to be the description
98	* to be displayed next to the checkbox.
99	*/
100	function sandbox_toggle_header_callback($args) {
101
102	// Note the ID and the name attribute of the element match that of the ID in the call to add_settings_field
103	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>';
104
105	// Here, we will take the first argument of the array and add it to a label next to the checkbox
106	$html .= '<label for="show_header"> ' . $args[0] . '</label>';
107
108	echo $html;
109
110	} // end sandbox_toggle_header_callback
111
112	function sandbox_toggle_content_callback($args) {
113
114	$html = '<input type="checkbox" id="show_content" name="show_content" value="1" ' . checked(1, get_option('show_content'), false) . '/>';
115	$html .= '<label for="show_content"> ' . $args[0] . '</label>';
116
117	echo $html;
118
119	} // end sandbox_toggle_content_callback
120
121	function sandbox_toggle_footer_callback($args) {
122
123	$html = '<input type="checkbox" id="show_footer" name="show_footer" value="1" ' . checked(1, get_option('show_footer'), false) . '/>';
124	$html .= '<label for="show_footer"> ' . $args[0] . '</label>';
125
126	echo $html;
127
128	} // end sandbox_toggle_footer_callback
129
130	?>