Crear un panel de opciones para un template de Wordpress

En este tutorial vamos a aprender a crear un menú de opciones para nuestro Theme de WordPress. Esto va a diferenciar nuestra plantilla de las demás porque estaremos más cerca de tener una plantilla o tema más profesional. Al principio parecerá complicado pero nos facilitará la tarea entender dos cosas; por un lado la utilización de arrays en PHP y por otro lado la utilización de una serie de funciones y variables que utilizaremos para trabajar con las opciones que deseamos incluir en nuestro theme.

Comenzando

Si bien es cierto que puede crearse un archivo de opciones, en este ejemplo el menú lo crearemos sobre el functions.php.

Nos topamos entonces con las siguientes líneas:

Código :

<?php
$themename = "Classic Theme";
$shortname = "ct";

Como se puede notar son dos variables. Una almacenará el nombre del Theme y la otra veremos más adelante que función cumple. Continuamos con el código poniendo debajo de las líneas antes citadas lo siguiente:

Código :

$options = array (
array( "name" => $themename." Options",
"type" => "title"),
array( "type" => "open"),
array( "name" => "Color Scheme",
"desc" => "Select the color scheme for the theme",
"id" => $shortname."_color_scheme",
"type" => "select",
"options" => array("blue", "red", "green"),
"std" => "blue"),
array( "name" => "Logo URL",
"desc" => "Enter the link to your logo image",
"id" => $shortname."_logo",
"type" => "text",
"std" => ""),
array( "name" => "Homepage header image",
"desc" => "Enter the link to an image used for the homepage header.",
"id" => $shortname."_header_img",
"type" => "text",
"std" => ""),
array( "name" => "Footer copyright text",
"desc" => "Enter text used in the right side of the footer. It can be HTML",
"id" => $shortname."_footer_text",
"type" => "text",
"std" => ""),
array( "name" => "Google Analytics Code",
"desc" => "Paste your Google Analytics or other tracking code in this box.",
"id" => $shortname."_ga_code",
"type" => "textarea",
"std" => ""),
array( "name" => "Feedburner URL",
"desc" => "Paste your Feedburner URL here to let readers see it in your website",
"id" => $shortname."_feedburner",
"type" => "text",
"std" => get_bloginfo('rss2_url')),
array( "type" => "close"));

Aquí es donde hace su aparición el array. El mismo tiene cinco valores que debemos tener en cuenta:

• name: Que es donde ponemos el nombre de nuestra opción. Por ejemplo “Usuario de Twitter”.
  
• id: donde le asignamos un identificador que luego utilizaremos combinándolo con la variable $shortname
  
  
• desc: que es nada más y nada menos que una simple descripción de lo que estamos creando. Por ejemplo: “Aquí va el usuario de Twitter”.
  
  
• type: la más importante es el tipo de dato que irá en ese campo. ¿Un texto? ¿Una casilla de verificación? Si fuera un campo de texto para insertar código de Google Analytics por ejemplo, usaríamos textarea. Si quisiéramos utilizar un campo de texto para un id (perfil de usuario) de Facebook o Twitter, podríamos usar text o select para seleccionar diversas opciones.
  
  A estos valores los recuperaremos con posterioridad.
  
  
• std: suele utilizarse para pasar parámetros o funciones por defecto como por ejemplo: get_bloginfo(‘rss2_url’))
  

En resumidas cuentas, debemos tener en claro que hemos definido un nombre, una descripción, un identificador, un tipo de dato y un valor por defecto que suele dejarse en blanco. Todos estos se guardan en $options. Seguiremos agregando lo siguiente:

Código :

function mytheme_add_admin() {
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
header("Location: themes.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: themes.php?page=functions.php&reset=true");
die;
}
}
add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}

Aquí lo primero que se hace es definir la función: mytheme_add_admin
Contiene dentro las variables antes definidas (de alcance global) $themename, $shortname y $options. Y se le dice que: si todo lo que viene por $GET (de “page”) es igual a basename(__FILE__), haga una iteración del array $options punto por punto y lo almacene en $value.

El objetivo de esta función es que los valores que se introducen en las opciones puedan actualizarse o guardarse. Estas también pueden resetearse eliminándose todas las opciones. Luego mediante la función add_theme_page se agrega una página en el menú de “Apariencia” con el nombre del Theme. Puede reemplazarse a esta última con add_menu_page para crearla con una caja externa.

Código :

function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>

Aquí tenemos algunas condiciones: si la configuración se guarda, WordPress mostrará “settings saved”, o en su defecto “Settings Reset”.

Crear el contenido de la página de opciones

El código que debe insertarse a continuación es sin duda una de las partes más importantes:

Código :

<div>
<h2><?php echo $themename; ?> Settings</h2>
<form method="post">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case "open":
?>
<table width="100%" border="0" style="background-color:#cdcdcd; padding:10px;">
<?php break;
case "close":
?>
</table><br />
<?php break;
case "title":
?>
<table width="100%" border="0" style="background-color:#868686; padding:5px 10px;"><tr>
<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
<?php break;
case 'text':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
<?php
break;
case 'textarea':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
<?php
break;
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
<?php
break;
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked="checked""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
<?php break;
}
}
?>
<p>
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p>
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>

Con este código creamos nuestro contenido de la página de opciones. Se usa case para evaluar qué tipo de dato hemos seteado con anterioridad. Si nosotros pusimos en el array un campo de texto, se pondrá eso. Si pusimos un checkbox, como tipo de dato, también.



Con esto, la página de opciones queda lista. Resta añadir:

Código :

<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

...que le dice a WordPress que agregue el menu correspondiente.

Resumiendo

En rasgos generales vemos que el asunto se divide en tres partes:

• Definir las variables $themename y $shorname, junto con el array $options.
  
  
• Definir la función mytheme_add_admin(), update_option, y delete_option para todo lo que implica guardar, borrar y resetear los campos o datos.
  
  
• Definir las tablas, campos y formularios para que el usuario final introduzca los datos. Que son enviados, almacenados y obtenidos mediante $_GET y $_REQUEST
  

El paso final y en mi precario entender de la cosa, el que más dolores de cabeza puede traer es hacer uso de estos datos en nuestro index o en cualquier lugar del blog en donde queramos hacerlo.

Primero deberemos introducir el siguiente código para recuperar los valores de $options de manera global.

Código :

<?
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>

Y aquí es donde se ve la utilidad la variable $shortname que la utilizamos concatenada con algún id del array.

Véase el siguiente ejemplo:

Código :

array( "name" => "Feedburner URL",
 "desc" => "Introduzca en este campo su url de Feed Burner",
 "id" => $shortname."_feedburner",
 "type" => "text",
 "std" => get_bloginfo('rss2_url')),

Aquí se ve que $shortname.”feedburner” es el id para tomar los datos de la dirección RSS del blog.
Para hacer uso de ésta en nuestro home deberíamos poner:

Código :

<?php echo $ct_feedburner; ?>

…que no por casualidad es el valor que le asignamos a $shortname.
No es algo que a simple vista destaque por su simpleza. Pero lo mejor para entenderlo es familiarizarse con funciones y arrays principalmente.

Este panel puede estilizarse de forma simple, pero esto quedará para más adelante.

Este tutorial es de mi autoría. Y el mismo fue tomado de mi blog. Pueden pasar por el mismo cuando deseen. O seguirme en Twitter.

Saludos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.