La API de Configuración de WordPress, Parte 2: Secciones, Campos y Ajustes

Cuando se trata de desarrollar Temas y Plugins para WordPress, existen varias formas distintas en la que los desarrolladores están creando sus menús, sus opciones y validando la funcionalidad. Lo cierto es, que sólo existe un método adecuado para hacerlo en WordPress: la API de Configuración.

Esta serie pretende ser una guía definitiva sobre cómo aprovechar la API de Configuración de WordPress de manera que te proporcione un único punto de referencia para desarrollar adecuadamente tus temas y tus plugins.

En el primer artículo de esta serie echamos un vistazo amplio a la API de Configuración y también vimos cuál era su importancia. Aquí, vamos a empezar a profundizar en la API y en cómo sacar ventaja de todo lo que nos puede ofrecer.

Echaremos un vistazo a las unidades fundacionales de las opciones de WordPress - secciones, campos, y ajustes - y a cómo incluirlas en el escritorio nativo de WordPress.

Sobre las Secciones, los Campos y los Ajustes

Antes que empecemos a escribir código, es importante que entiendas los tres principales componentes de la API de Configuración de WordPress.

1. Los campos son opciones individuales que aparecen en las páginas de los menús. Los campos se corresponden con los elementos reales que aparecen en la pantalla. Es decir, este campo es gestionado por una caja de texto, un botón de radio, una casilla de verificación, etc. Los campos representan un valor que es almacenado en la base de datos de WordPress.
2. Las secciones son una agrupación lógica de campos. Siempre que trabajes con varios campos, probablemente agruparás juntas aquellas opciones que tengan alguna relación entre sí. Más aún, si tu trabajo incluye múltiples páginas de administración, cada sección se corresponderá probablemente con su propia página de menú (aunque puedes añadirlas también a secciones ya existentes).
3. Las configuraciones se registran después de que hayas definido tanto los Campos como las Secciones. Concibe las Configuraciones como una combinación del Campo y la Sección a la cual pertenece.

En este momento, no te preocupes si todavía no tienes claro ninguno de sus componentes. Vamos a ver en profundidad cada uno de sus componentes junto con un ejemplo del código fuente que lo une todo.

Un Sandbox para Nuestras Configuraciones

Para empezar a programar con la API de Configuración, vamos a configurar un tema básico utilizarlo en este artículo y en el resto de la serie. Todo el código fuente está también disponible en GitHub.

En tu instalación WordPress local, navega hasta el directorio "themes" y crea un nuevo directorio vacío y llámalo "WordPress-Settings-Sandbox". Añade los tres siguientes archivos:

• style.css – Esta es la hoja de estilos para el tema. Incluye todos la información de metadatos para el tema. Es necesario para WordPress
• index.php – Esta es la plantilla predeterminada para el tema. Puede estar vacío al principio. Es necesario para WordPress
• functions.php – Aquí es donde vamos a estar realizando la mayor parte de nuestro trabajo. Iremos rellenándolo a lo largo de este tutorial

Añade el siguiente código al archivo style.css:

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

*/

Después, añade el siguiente código al archivo index.php:

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>

Observa como el código de arriba es extraordinariamente sencillo, yo no recomiendo su uso como base para el desarrollo de un tema. Está elaborado a propósito para esta serie de artículos y simplemente proporciona los medios por los que vamos a estar leyendo los valores de la API de Configuración.

En la pantalla de administración de los Temas, refresca la página y si está todo bien, deberías ver ahora el nuevo tema Sandbox. Avanza y actívalo.

En este momento, ya estamos preparados para empezar.

Nuestro Primer Conjunto de Opciones

Observa como en la plantilla index de arriba, hemos definido tres regiones concretas de contenido: header, content, y footer. Usando la API de Configuración, creemos una sección "General" que contenga tres campos, cada uno de los cuales se corresponde con una de las regiones de contenido que acabamos de definir.

Antes de escribir ningún código, siempre encuentro útil crear una lista que enumere exactamente todo lo que tenemos que hacer. En este caso, necesitamos hacer lo siguiente:

• Definir una sección que usaremos para agrupar cada campo.
• Añade tres campos - uno para cada región del contenido - en la sección que hemos definido arriba.
• Registra la configuración con la API de WordPress.

Para evitar cualquier bloque masivo de código y asegurarte de que estamos cubriendo todas nuestras bases, tomaremos uno a uno cada uno de los anteriores elementos.

Crear la Sección

Para encontrar nuestra sección de opciones "General", vamos a necesitar usar la función add_settings_section de la API de Configuración. Según el Codex de WordPress, add_settings_section necesita tres argumentos:

• ID – Este es el único identificador para esta sección concreta. Advierte que este es el valor que se usará para registrar cada uno de los campos dentro de la sección. Puedes nombrarlo como más te guste, pero yo te recomiendo que uses un nombre claro para mejorar la legibilidad.
• Title – este valor se mostrará en la parte superior de la página dentro del Escritorio de WordPress cuando los usuarios estén trabajando con tus opciones.
• Callback – Este es el nombre de la función que definiremos y que mostrará el texto en la pantalla de la función. Puede usarse para distintas funcionalidades. En el caso más sencillo, puede usarse para proporcionar un conjunto de instrucciones o una descripción para tu página de opciones.
• Page – Este valor se usa para indicarle a WordPress en qué página deberían mostrarse tus opciones. En un próximo artículo, usaremos esto para añadir opciones a nuestras propias páginas personalizadas. Por ahora, lo añadiremos a la existente página General Options.

Dicho esto, avancemos y definamos nuestra sección. Echa un vistazo al siguiente código comentado. Estamos añadiendo esto a nuestro archivo functions.php.

Una palabra sobre los fragmentos de código de esta serie: no los copies y los pegues sin más. Tómate el tiempo necesario para leer cada línea, observa la correspondencia de cada argumento con cada función de la API que hemos cubierto, y sigue los comentarios relacionados para asegurarte de que estás siguiendo la pista a lo que estamos haciendo:

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

?>

¿Tiene sentido? En términos generales, basta con navegar hasta tu menú Ajustes y pulsar el submenú General. Desplázate hasta el final de la página, deberías ver tu nueva sección para las opciones.

Puedes añadir esta sección en cualquier página que pertenezca al menú Ajustes. En el ejemplo de arriba, hemos pasado "general" como último parámetro para add_settings_section, pero si quieres añadirlo a una página distinta, puedes indicar un título de página distinto. Aquí tienes referenciadas cada una de las páginas incluídas en los Ajustes y su correspondiente clave:

• General, "general"
• Escritura, "writing"
• Lectura, "reading"
• Comentarios, "discussion"
• Medios, "media"
• Privacidad, "privacy"
• Enlaces permanentes, "permalinks"

Añadir Campos

Ahora que tenemos una sección definida, podemos introducir algunas opciones. Recuerda que en nuestra plantilla index definimos tres elementos contenedores específicos: header, content y footer.

Aunque estaremos introduciendo más opciones a lo largo de esta serie, hoy vamos a introducir una forma de de activar y desactivar la visibilidad de cada uno de los anteriores elementos.

Al igual que como lo hicimos en la sección de ajustes, me gustaría enumerar exactamente todo lo que tenemos que hacer antes de escribir nada de código. Puesto que vamos a alternar cada una de las áreas de contenido...

• Vamos a necesitar tres opciones - una para cada área de contenido.
• Como vamos a alternar la visibilidad, podemos usar una casilla de verificación como elemento para nuestra interfaz.

En este momento, estamos preparados para introducir el primer campo de ajustes. Para hacer esto, usaremos la función add_settings_field. Esta función tiene seis parámetros (cuatro requeridos, y dos opcionales). Son los siguientes:

• ID – el ID del campo actual. Esto se usará para guardar y recuperar el valor a través del tema. Te recomiendo que le asignes un nombre significativo para mejorar la legibilidad de tu código.
• Title – Este valor se aplica al título del campo de la opción en la página de administración. Esto debería quedar claro ya que será leído por los usuarios finales.
• Callback – Este es el nombre de la función que se usa para renderizar el elemento real de la interfaz con el cual interactuarán los usuarios.
• Page – Este parámetro se parece al que hemos descrito para la sección, identifica en qué página debería residir esta opción. Si sólo estás introduciendo una sóla opción, puedes añadirla en una página existente en lugar de en una sección que hayas definido.
• Section – Hace referencia a la sección que hayas creado usando la función add_settings_section. Este valor es el ID que especificaste cuando creaste tu sección. Es un parámetro opcional.
• Argumentos – Esta es una cadena de argumentos que se pasan a la función que devuelve la llamada. Esto es útil si existe información adicional que quieras incluir en el renderizado del elemento de tu opción. Este es un parámetro opcional.

Dicho esto, avancemos y definamos nuestro primer campo de ajuste. Específicamente, vamos a estar introduciendo una opción para alternar la visibilidad del header.

Primero, hacemos una llamada a add_settings_field justo bajo la función de llamada add_settings_section en la función de inicialización que hemos escrito en la primera parte del tutorial. Revisa cada línea y los comentarios de cada opción.

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

);

A continuación, definimos la devolución de la llamada a la que nos referimos en la función anterior. Esta devolución de llamada o callback se usa para renderizar la casilla de verificación y la descripción en la página de la administración:

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

En lo que respecta a la casilla de verificación, presta atención a los comentarios, pero no te preocupes demasiado por los atributos que no reconozcas, por ejemplo la llamada a la función checked(). Más tarde en esta serie, vamos a echar un vistazo a cada elemento de entrada y a sus correspondientes funciones de ayuda.

Ahora, tu archivo functions.php debería tener el siguiente aspecto:

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

?>

En este momento, refresca la página de los Ajustes Generales. Deberías ver tu casilla de verificación con la etiqueta "Header" y una descripción junto a ella.

Por desgracia, aún no guarda el valor en la base de datos.

Registrando Nuestros Ajustes

Para que nuestros campos se guarden realmente en la base de datos, tenemos que registrarlos con WordPress. Hacerlo es relativamente fácil - solo necesitamos usar la función register_setting.

Esta función acepta tres argumentos (dos necesarios, y uno opcional):

• Option Group – Esto es el nombre del grupo de opciones. Esto puede ser un existente grupo de opciones proporcionadas por WordPress o un ID que nosotros especifiquemos cuando creemos nuestras propia sección de ajustes. Este argumento es obligatorio.
• Option Name – Este es el ID del campo que estamos registrando. En nuestro caso, estamos registrando un único campo, pero si tuviésemos que registrar múltiples campos, necesitaríamos invocar esta función para cada campo que registremos. Veremos más de esto en un momento. Este argumento es obligatorio.
• Callback – Este argumento requiere el nombre de una función que será llamada antes de guardar los datos en la base de datos. Explicar este argumento queda fuera del ámbito de este artículo pero lo veremos antes de terminar esta serie. Este argumento es opcional.

Ahora, registremos los ajustes que acabamos de crear. Echa un vistazo al siguiente código. Añade esta línea de código directamente bajo la llamada add_settings_field en la función de inicialización que hemos definido con anterioridad en este artículo. Es lógicamente la forma más sencilla de seguir todos los fragmentos de código de este artículo:

1

// Finally, we register the fields with WordPress

2

register_setting(

3

	'general',

4

	'show_header'

5

);

Pruébalo - marca la casilla de verificación, pulsa 'Guardar Cambios', y observa que cuando la página se refresca, la opción haya cambiado. Desmarca la casilla de verificación, guarda, y observa cómo guarda.

Fácil, ¿no?

Añadir las Dos Últimas Opciones

Todavía necesitamos introducir las opciones para alternar la visibilidad del área de contenido y del footer. Es casi igual a como hemos configurado la opción para alternar el header.

Primero, definamos el campo para mostrar el área de contenido. Esto irá bajo la primera llamada a 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

);

Y vamos a configurar la función de callback:

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

Después, definimos el campo para mostrar el área del footer:

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

);

Y configuramos la llamada para este campo también:

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

Por último, registramos estos dos nuevos campos con WordPress. Estas dos llamadas de la función irán al final de la función de inicialización que hemos definido en el artículo.

1

register_setting(

2

	'general',

3

	'show_content'

4

);

5

6

register_setting(

7

	'general',

8

	'show_footer'

9

);

La versión final de functions.php debería tener el siguiente aspecto:

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

?>

Ahora refresca la página de los Ajustes Generales y observa como ahora tienes tres casillas de verificación que funcionan completamente.

Leyendo la API

¿Para qué nos sirven las opciones si no podemos usarlas a lo largo de nuestro tema o nuestro plugin? Necesitamos ser capaces de leer los valores para gestionar nuestras opciones adecuadamente.

Para conseguirlo, necesitamos usar la función get_option. Esta función acepta dos argumentos (uno obligatorio, y otro opcional):

• Option ID – Este argumento es el ID del campo para el valor que estás intentando recuperar. Este argumento es obligatorio.
• Default Option – Este es el valor que la función que devolverá si ésta devuelve un valor vacío (por ejemplo como ocurre en el caso de que la opción no sea encontrada en la base de datos). Este argumento es obligatorio.

Primero, intentemos cambiar la visibilidad del header. En la plantilla del index que hemos creado anteriormente en este mismo artículo, localiza el elemento con el ID del header. Debería tener el siguiente aspecto:

1

<div id="header">

2

	<h1>Sandbox Header</h1>

3

</div><!-- /#header -->

A continuación, vamos a hacer una llamada a get_option en el contexto de un condicional. Si la condición se evalúa como verdadera (es decir, la opción ha sido marcada en la página de Ajustes Generales), entonces se mostrará el elemento; de lo contrario, no se mostrará.

1

<?php if(get_option('show_header')) { ?>

2

	<div id="header">

3

		<h1>Sandbox Header</h1>

4

	</div><!-- /#header -->

5

<?php } // end if ?>

Después de esto, volvemos a la página de Ajustes Generales, marcamos la opción para ocultar el elemento header, y refresca tu página de inicio. El elemento header no debería aparecer más.

En este momento, se trata de repetir también el mismo proceso para los elementos contenido y footer. Tenemos que envolver los elementos contenido y footer con condicionales que evalúen el resultado de las llamadas get_option.

Echa un vistazo:

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

Visita de nuevo la página de los Ajustes Generales, cambia el estado de cada casilla de verificación, y refresca la página del tema. Tus elementos deberían poder cambiarse de forma independiente.

Qué Viene Después, Los Menús de Página

Esto es todo, ¡por ahora! Hemos echado un vistazo a las funciones necesarias para introducir nuevas secciones, campos y ajustes en WordPress. Por supuesto, tenemos que ver mucho más.

En el siguiente artículo, veremos cómo añadir elementos de menú personalizados al menú de WordPress, y cómo introducir nuestras propias páginas en el Escritorio de WordPress.

Recursos Relacionados

Hemos visto muchas cosas en este artículo. Aquí tienes una referencia de todo lo que hemos usado a lo largo del artículo.

• Introducción A la API de Configuración
• add_settings_section
• add_settings_field
• register_setting
• get_option
• Un Ejemplo en GitHub