Recursos
Como crear una pagina de opciones en WordPress
Recientemente para un proyecto bastante importante que he tenido en los últimos meses, he necesitado crear una página de opciones para diferentes tareas internas en WordPress, básicamente lo que voy a explicar en este post, es como crear una página interna de opciones que te permita mayor dinamismo y versatilidad en los datos que necesites introducir en tus páginas, en este caso yo lo he necesito para un sistema multipágina que permita a los usuarios introducir datos diferentes en varias páginas que no comparten información entre sí, además te será realmente fácil introducir nuevos campos dinámicos en tan solo unos minutos.
Vamos al lio del asunto comenzando por el archivo functions.php, si tu theme no lo tiene tan solo debes crearlo e ir introduciendo los siguientes datos, en el caso de que ya exista (algo muy probable, ignora el contenido actual del mismo e introduce los siguientes códigos en la parte inferior del mismo, no deberías tener ningún problema en conjugar la información actual con la que introduciremos a continuación.
Introducimos el siguiente código en el final de nuestro archivo functions.php, este código nos permitirá crear nuestra primera página de opciones con algunos ejemplos ya creados como, titulo, mensaje y botón de radio para desactivar dicho mensaje:
[codesyntax lang=»php»]
<?php
$themename = "WordPress Classic";
$shortname = "wpc";
$options = array (
array( "name" => "Welcome Message",
"type" => "title"),
array( "type" => "open"),
array( "name" => "Title",
"desc" => "Enter a title to display for your welcome message.",
"id" => $shortname."_welcome_title",
"std" => "",
"type" => "text"),
array( "name" => "Message",
"desc" => "Text to display as welcome message.",
"id" => $shortname."_welcome_message",
"type" => "textarea"),
array( "name" => "Disable Welcome Message?",
"desc" => "Check this box if you would like to DISABLE the welcome message.",
"id" => $shortname."_welcome_disable",
"type" => "checkbox",
"std" => "false"),
array( "type" => "close")
);
[/codesyntax]
Qué significa cada parte de nuestro array?
name – Este es el nombre que aparecerá en nuestra opción.
desc – Descripción de nuestra función (aparece en la página de opciones.
id – Esta es una de las partes más importantes, es el identificador que junto con nuestro. $shortname se reemplazará con el contenido de nuestra caja de contenido (en este caso el shotname es: wpc).
std – Esta es la opción por defecto que aparecerá marcada o escrita en el caso de que no esté rellenado el campo
type – El tipo de contenido que vamos a introducir, text, textarea, checkbox etc.
Ahora que ya tenemos nuestras primeras funciones en marcha, necesitamos realizar algunas llamadas a los contenidos de wordpress para que se hagan efectivas a la hora de mostrarlas en nuestra página, para ello, a continuación, introduciremos el siguiente código:
[codesyntax lang=»php»]
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_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
<div class="wrap">
<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:#eef5fb; padding:10px;">
<?php break;
case "close":
?>
</table><br />
<?php break;
case "title":
?>
<table width="100%" border="0" style="background-color:#dceefc; 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;"> </td></tr><tr><td colspan="2"> </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;"> </td></tr><tr><td colspan="2"> </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;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><? if(get_settings($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;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php break;
}
}
?>
[/codesyntax]
Hemos creado algunas tablas y representado algunas funciones de wordpress para diferentes funcionalidades, creo que probando algunas modificaciones sobre este código serás capaz de personalizar aún más los estilos que necesites cambiar para tus propósitos sobre esta página de opción, ahora que ya tenemos las partes fundamentales de nuestro código vamos a continuar con el código que nos permitirá mostrar un botón de guardado y otro de reseteo:
[codesyntax lang=»php»]
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<?php
}
add_action('admin_menu', 'mytheme_add_admin'); ?>
[/codesyntax]
Ahora pasaremos a explicar cómo representar esto en nuestras propias páginas.
Lo principal es insertar este código dentro de nuestro header.php en la parte inferior de Body:
[codesyntax lang=»php»]
<?
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $value['id'] = $value['std']; } else { $value['id'] = get_settings( $value['id'] ); }
}
?>
[/codesyntax]
Con este último código permitiremos interconectar nuestra página de opciones con nuestro propio theme, solo nos falta saber cómo realizar las llamadas oportunas para mostrar nuestro contenido dinámico:
[codesyntax lang=»php»]
<? echo $wpc_welcome_title; ?>
[/codesyntax]
Como veréis, lo único que hemos hecho es un echo con nuestro código por defecto shortcode (siempre es el mismo) y nuestro ID de cada array, ahora, si necesitas crear más campos, lo único que necesites es duplicar uno de los arrays y poner tus propios datos, para reproducirlo en tu página solo necesitas reproducir de nuevo el código echo con el shortcode por defecto que es wpc_TUID.
Si lo prefieres descargar el codigo de ejemplo Functions y header Aqui
Si tienes cualquier tipo de duda o necesitas ayuda, deja tus comentarios y estoy seguro de que entre todos podremos ayudarte.
