Advertisement
  1. Code
  2. Theme Development

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

Scroll to top
Read Time: 21 min
This post is part of a series called The Complete Guide to the WordPress Settings API.
The WordPress Settings API, Part 1: What It Is, Why It Matters
The WordPress Settings API, Part 3: All About Menus

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

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

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

Im ersten Artikel dieser Serie haben wir uns ausführlich mit der Einstellungs-API befasst und erklärt, warum sie wichtig ist. Hier tauchen wir in die API ein und erfahren, wie Sie alle Vorteile nutzen kö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 einfü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.

  1. Felder sind einzelne Optionen, die auf Menüseiten angezeigt werden. Felder entsprechen tatsächlichen Elementen auf dem Bildschirm. Das heißt, ein Feld wird durch ein Textfeld, ein Optionsfeld, ein Kontrollkästchen usw. verwaltet. Felder repräsentieren einen Wert, der in der WordPress-Datenbank gespeichert ist.
  2. Abschnitte sind eine logische Gruppierung von Feldern. Wenn Sie mit mehreren Feldern arbeiten, werden Sie wahrscheinlich verwandte Optionen zusammen gruppieren - Abschnitte repräsentieren diese Gruppierung. Wenn Ihre Arbeit mehrere Verwaltungsseiten umfasst, entspricht außerdem jeder Abschnitt oft einer eigenen Menüseite (Sie können sie jedoch auch zu bestehenden Abschnitten hinzufügen).
  3. 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 gehört.

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


Eine Sandbox für unsere Einstellungen

Um mit der Programmierung fü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 verfü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“. Fügen Sie die folgenden drei Dateien hinzu:

  • style.css – Dies ist das Stylesheet für das Theme. Es enthält alle Metainformationen zum Thema. Es wird von WordPress benötigt
  • index.php – Dies ist die Standardvorlage für das Thema. Es kann zunächst leer sein. Es wird von WordPress benötigt
  • functions.php – Hier werden wir die meiste Arbeit erledigen. Wir werden dies während des Tutorials ausfüllen

Fügen Sie style.css den folgenden Code hinzu:

1
/*

2
Theme Name: WordPress Settings Sandbox

3
Theme URI: YOUR URI

4
Description: A simple theme used to showcase the WordPress Settings API.

5
Author: YOUR NAME

6
Author URI: YOUR WEBSITE

7
Version: 0.1

8


9
License:

10


11
 Copyright 2012 YOUR NAME (YOUR EMAIL ADDRESS)

12


13
  This program is free software; you can redistribute it and/or modify

14
  it under the terms of the GNU General Public License, version 2, as 

15
  published by the Free Software Foundation.

16


17
  This program is distributed in the hope that it will be useful,

18
  but WITHOUT ANY WARRANTY; without even the implied warranty of

19
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

20
  GNU General Public License for more details.

21


22
  You should have received a copy of the GNU General Public License

23
  along with this program; if not, write to the Free Software

24
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

25
  

26
*/

Als nächstes fügen Sie der index.php den folgenden Code hinzu:

1
<!DOCTYPE html>
2
<html>
3
	<head>	
4
		<title>The Complete Guide To The Settings API | Sandbox Theme</title>
5
	</head>
6
	<body>
7
	
8
		<div id="header">
9
			<h1>Sandbox Header</h1>
10
		</div><!-- /#header -->
11
12
		<div id="content">
13
			<p>This is theme content.</p>
14
		</div><!-- /#content -->
15
16
		<div id="footer">
17
			<p>&copy; <?php echo date('Y'); ?> All Rights Reserved.</p>
18
		</div><!-- /#footer -->
19
	
20
	</body>
21
</html>

Beachten Sie, dass das obige Markup außergewöhnlich einfach ist und ich nicht empfehle, es als Grundlage für die Themenentwicklung zu verwenden. Es ist auf diese Artikelserie zugeschnitten und bietet lediglich die Mö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.

Theme Selection

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 müssen wir Folgendes tun:

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

Um massive Codeblöcke zu vermeiden und sicherzustellen, dass wir alle unsere Grundlagen abdecken, werden wir jeden der oben genannten Punkte Punkt für Punkt betrachten.

Abschnitt erstellen

Um unseren Abschnitt "Allgemein" mit Optionen zu finden, mü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 für diesen bestimmten Abschnitt. Beachten Sie, dass dies der Wert ist, der verwendet wird, um jedes Feld in diesem Abschnitt zu registrieren. Fühlen Sie sich frei, es zu benennen, wie Sie möchten, aber ich empfehle, es aus Grü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 für die Funktion rendert. Es kann für eine Vielzahl von Funktionen verwendet werden. Im einfachsten Fall kann es verwendet werden, um eine Anleitung oder Beschreibung für Ihre Optionsseite bereitzustellen.
  • Seite – Dieser Wert wird verwendet, um WordPress mitzuteilen, auf welcher Seite Ihre Optionen angezeigt werden sollen. In einem zukünftigen Artikel werden wir dies verwenden, um unseren eigenen benutzerdefinierten Seiten Optionen hinzuzufügen. Vorerst fü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 fügen dies unserer Datei functions.php hinzu.

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

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
} // end sandbox_initialize_theme_options

24
25
/* ------------------------------------------------------------------------ *

26
 * Section Callbacks

27
 * ------------------------------------------------------------------------ */ 
28
29
/**

30
 * This function provides a simple description for the General Options page. 

31
 *

32
 * It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter

33
 * in the add_settings_section function.

34
 */
35
function sandbox_general_options_callback() {
36
	echo '<p>Select which areas of content you wish to display.</p>';
37
} // end sandbox_general_options_callback

38
 
39
?>

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

General SettingsGeneral SettingsGeneral Settings

Sie können diesen Abschnitt zu jeder der Seiten im Menü Einstellungen hinzufügen. Im obigen Beispiel haben wir "general" als letzten Parameter an den add_settings_section übergeben, aber wenn Sie ihn zu einer anderen Seite hinzufügen möchten, können Sie einen anderen Seitentitel angeben. Hier ist eine Referenz für jede der Einstellungsseiten und ihre entsprechenden Tasten:

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

Felder hinzufügen

Nachdem wir nun einen Abschnitt definiert haben, können wir einige Optionen einfü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 einführen werden, werden wir heute eine Möglichkeit vorstellen, die Sichtbarkeit jedes der oben genannten Elemente umzuschalten.

Ähnlich wie im Abschnitt "Einstellungen" möchte ich genau auflisten, was wir tun müssen, bevor wir Code schreiben. Da wir jeden der Inhaltsbereiche umschalten werden...

  • Wir brauchen drei Optionen – eine für jeden Inhaltsbereich
  • Da wir die Sichtbarkeit umschalten, können wir ein Kontrollkästchen als Oberflächenelement verwenden use

An dieser Stelle sind wir bereit, das erste Einstellungsfeld vorzustellen. Dazu verwenden wir die Funktion add_settings_field. Diese Funktion benö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.
  • Rückruf – Dies ist der Name der Funktion, die verwendet wird, um das eigentliche Oberflächenelement zu rendern, mit dem Benutzer interagieren.
  • Seite – Ä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 einführen, können Sie sie einer vorhandenen Seite anstelle eines von Ihnen definierten Abschnitts hinzufü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 übergeben werden. Dies ist nützlich, wenn es zusätzliche Informationen gibt, die Sie in das Rendern Ihres Optionselements einbeziehen mö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 einfü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. Überprüfen Sie jede Zeile und die Kommentare für jede Option:

1
// Next, we will introduce the fields for toggling the visibility of content elements.

2
add_settings_field(	
3
	'show_header',						// ID used to identify the field throughout the theme

4
	'Header',							// The label to the left of the option interface element

5
	'sandbox_toggle_header_callback',	// The name of the function responsible for rendering the option interface

6
	'general',							// The page on which this option will be displayed

7
	'general_settings_section',			// The name of the section to which this field belongs

8
	array(								// The array of arguments to pass to the callback. In this case, just a description.

9
		'Activate this setting to display the header.'
10
	)
11
);

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

1
/**

2
 * This function renders the interface elements for toggling the visibility of the header element.

3
 * 

4
 * It accepts an array of arguments and expects the first element in the array to be the description

5
 * to be displayed next to the checkbox.

6
 */
7
function sandbox_toggle_header_callback($args) {
8
	
9
	// Note the ID and the name attribute of the element should match that of the ID in the call to add_settings_field

10
	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>';
11
	
12
	// Here, we will take the first argument of the array and add it to a label next to the checkbox

13
	$html .= '<label for="show_header"> '  . $args[0] . '</label>';
14
	
15
	echo $html;
16
	
17
} // end sandbox_toggle_header_callback

Was das Kontrollkä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()). Später in dieser Serie werden wir uns die einzelnen Eingabeelemente und ihre entsprechenden Hilfsfunktionen ansehen.

Ihre Datei functions.php sollte jetzt so aussehen:

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
} // end sandbox_initialize_theme_options

37
38
/* ------------------------------------------------------------------------ *

39
 * Section Callbacks

40
 * ------------------------------------------------------------------------ */ 
41
42
/**

43
 * This function provides a simple description for the General Options page. 

44
 *

45
 * It is called from the 'sandbox_initialize_theme_options' function by being passed as a parameter

46
 * in the add_settings_section function.

47
 */
48
function sandbox_general_options_callback() {
49
	echo '<p>Select which areas of content you wish to display.</p>';
50
} // end sandbox_general_options_callback

51
52
/* ------------------------------------------------------------------------ *

53
 * Field Callbacks

54
 * ------------------------------------------------------------------------ */ 
55
56
/**

57
 * This function renders the interface elements for toggling the visibility of the header element.

58
 * 

59
 * It accepts an array of arguments and expects the first element in the array to be the description

60
 * to be displayed next to the checkbox.

61
 */
62
function sandbox_toggle_header_callback($args) {
63
	
64
	// Note the ID and the name attribute of the element match that of the ID in the call to add_settings_field

65
	$html = '<input type="checkbox" id="show_header" name="show_header" value="1" ' . checked(1, get_option('show_header'), false) . '/>'; 
66
	
67
	// Here, we will take the first argument of the array and add it to a label next to the checkbox

68
	$html .= '<label for="show_header"> '  . $args[0] . '</label>'; 
69
	
70
	echo $html;
71
	
72
} // end sandbox_toggle_header_callback

73
74
?>

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

First OptionFirst OptionFirst Option

Leider wird der Wert noch nicht in der Datenbank gespeichert.

Registrieren unserer Einstellungen

Damit unsere Felder tatsächlich in der Datenbank gespeichert werden, 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):

  • 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, müssen wir diese Funktion fü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. Fü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:

1
// Finally, we register the fields with WordPress

2
register_setting(
3
	'general',
4
	'show_header'
5
);

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

Saved OptionSaved OptionSaved Option

Einfach genug, oder?

Hinzufügen der letzten beiden Optionen

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

Zunächst definieren wir das Feld für die Anzeige des Inhaltsbereichs. Dies geht unter den ersten Aufruf von add_settings_field:

1
add_settings_field(
2
	'show_content',
3
	'Content',
4
	'sandbox_toggle_content_callback',
5
	'general',
6
	'general_settings_section',
7
	array(
8
		'Activate this setting to display the content.'
9
	)
10
);

Und lassen Sie uns die Callback-Funktion einrichten:

1
function sandbox_toggle_content_callback($args) {
2
3
	$html = '<input type="checkbox" id="show_content" name="show_content" value="1" ' . checked(1, get_option('show_content'), false) . '/>'; 
4
	$html .= '<label for="show_content"> '  . $args[0] . '</label>'; 
5
	
6
	echo $html;
7
	
8
} // end sandbox_toggle_content_callback

Als nächstes definieren wir das Feld für die Anzeige des Fußzeilenbereichs:

1
add_settings_field(	
2
	'show_footer',						
3
	'Footer',				
4
	'sandbox_toggle_footer_callback',	
5
	'general',							
6
	'general_settings_section',			
7
	array(								
8
		'Activate this setting to display the footer.'
9
	)
10
);

Und richten Sie auch den Rückruf für dieses Feld ein:

1
function sandbox_toggle_footer_callback($args) {
2
	
3
	$html = '<input type="checkbox" id="show_footer" name="show_footer" value="1" ' . checked(1, get_option('show_footer'), false) . '/>'; 
4
	$html .= '<label for="show_footer"> '  . $args[0] . '</label>'; 
5
	
6
	echo $html;
7
	
8
} // 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.

1
register_setting(
2
	'general',
3
	'show_content'
4
);
5
6
register_setting(
7
	'general',
8
	'show_footer'
9
);

Die endgültige Version von functions.php sollte wie folgt aussehen:

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
?>

Aktualisieren Sie nun die Seite Allgemeine Einstellungen und stellen Sie fest, dass alle drei Kontrollkästchen voll funktionsfähig sind.

Final OptionsFinal OptionsFinal Options

Lesen der API

Was nützen Optionen, wenn wir sie nicht in unserem gesamten Theme oder unserem Plugin nutzen können? Wir müssen in der Lage sein, die Werte zu lesen, um unsere neuen Optionen richtig verwalten zu können.

Dazu mü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 für den Wert, den Sie abrufen möchten. Dieses Argument ist erforderlich.
  • Standardoption – Dies ist der Wert, den die Funktion zurückgibt, wenn die Funktion einen leeren Wert zurückgibt (z. B. wenn die Option nicht in der Datenbank gefunden wird). Dieses Argument ist optional.

Versuchen wir zunä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 Nä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.

1
<?php if(get_option('show_header')) { ?>
2
	<div id="header">
3
		<h1>Sandbox Header</h1>
4
	</div><!-- /#header -->
5
<?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 für das Inhalts- und Fußzeilenelement zu wiederholen. Wir müssen die Inhalts- und Fußzeilenelemente mit Bedingungen umschließen, die das Ergebnis von get_option-Aufrufen auswerten.

Schau mal:

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

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

Rufen Sie die Seite Allgemeine Einstellungen erneut auf, aktivieren Sie jedes Kontrollkästchen und aktualisieren Sie die Themenseite. Ihre Elemente sollten jeweils unabhängig voneinander umschalten.


Als nächstes, Menüseiten

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

Im nächsten Artikel werfen wir einen Blick darauf, wie wir benutzerdefinierte Menüelemente zum WordPress-Menü hinzufügen und wie wir unsere eigenen Seiten in das WordPress-Dashboard einführen können.


Ähnliche Resourcen

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.