Página de Opciones para Tema en WordPress

Saludos, en el transcurso de estos pequeños tutos trataré de mostrar como personalizar un poco el área de administración dedicada específicamente a nuestro tema en wordpress. Este es el primero de una serie que iré publicando y lo que pretendo no es ser excesivamente específico si no más bien, brindar una guía fácil y práctica del proceso entendiendo la lógica e incentivar la construcción personalizada de las opciones.

Cuando trabajamos desarrollando temas ya sea para ser implementados por terceros o simplemente para facilitarnos la vida a la hora de modificar partes específicas de nuestro tema, necesitamos un medio amigable desde donde se puedan editar estas partes sin mucho esfuerzo ni tocar el código del tema.

En este ejercicio lo que haremos será agregar una página de opciones en nuestro menú de administración de wordpress desde donde modificaremos el logo de nuestro encabezado. Todo esto lo trabajaremos dentro de nuestro tema, así, solo cuando lo activemos aparecerán dichas opciones y nos evitaremos la engorrosa tarea de tocar el Core de nuestro WP.

En el transcurso iré dejando los enlaces para algunas funciones específicas de wordpress y otras, así no tener que explicaré línea a línea.

Lo primero que haremos será crear nuestro archivo functions.php el cual a grandes rasgos nos permite incluir funciones específicas en nuestro wordpress desde el tema que estamos desarrollando. Si ya tenemos creado el archivo agreguemos esta líneas al código.


require_once(TEMPLATEPATH . '/panel/control-panel.php');

Lo que hace esta línea de código es incluir un archivo de configuración en el functions de nuestro theme usando TEMPLATEPATH. el cual indica la dirección de nuestro tema en el sitio y la ruta del archivo, que en este caso está dentro de un directorio que he llamado panel en donde iré incluyendo todos los archivos para ser un poco más ordenados.

En este caso yo usaré el archivo control-panel.php del que hablaremos a continuación. Ustedes pueden usar o no la carpeta panel y el nombre del archivo a incluir podría ser distinto, en todo caso, lo importante es entender la lógica del asunto.

Vamos ahora a crear en la administración de wordpress nuestro panel, para esto creamos un directorio llamado panel y dentro nuestro archivo control-panel.php

Agregamos el siguiente código a nuestro archivo:

<?php function ed_options(){ $themename = "Mimer"; $shortname = "ed"; $options = array ( array( "name" =--> "Configuración del encabezado",
"type" => "heading",
"desc" => "En esta sección se podrá configurar el área del encabezado de su sitio.",
),

array("name" => "Imagen del Logotipo",
"desc" => "Ingrese la url completa de la imagen.",
"id" => $shortname."_logoimg",
"std" => "URL de la Imagen",
"type" => "text"),
);
update_option('ed_template',$options);update_option('ed_themename',$themename);update_option('ed_shortname',$shortname);
}

add_action('init','ed_options');

function mytheme_add_admin() {
$options = get_option('ed_template'); $themename = get_option('ed_themename');$shortname = get_option('ed_shortname');
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=control-panel.php&amp;amp;amp;amp;amp;amp;amp;amp;saved=true");
die;

} else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
delete_option( $value['id'] );
update_option( $value['id'], $value['std'] );}

header("Location: themes.php?page=control-panel.php&amp;amp;amp;amp;amp;amp;amp;amp;reset=true");
die;
}
}
add_theme_page($themename." Options", "$themename Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}

function my_admin_head() {
echo '';
}

add_action('admin_head', 'my_admin_head');

function mytheme_admin() {
$options = get_option('ed_template');$themename = get_option('ed_themename');$shortname = get_option('ed_shortname');
if ( $_REQUEST['saved'] ) echo '
<div class="updated fade">

<strong>'.$themename.' settings saved.</strong>

</div>
';
if ( $_REQUEST['reset'] ) echo '
<div class="updated fade">

<strong>'.$themename.' settings reset.</strong>

</div>
';
?>
<div class="panel">
<h1><!--?php echo $themename; ?--> || Panel de Opciones</h1>
<form method="post">&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;
<div class="toggle_container">
<div class="block"><label><!--?php echo $value['name']; ?-->:</label></div>
</div>
</form></div>
<input id="" type="" name="" value="" />" size="60" />

&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;

&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;
<div class="box grid_8">
<h2 class="box_head grad_colour round_top"></h2>
&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;

&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;
<p class="submit">
</p>

<form method="post">
<p class="submit">
</p>

</form>
<h1>Vista Previa (Se actualiza cuando se guardan los cambios)</h1>

Theme desarrollado para <a href="http://www.wpguate.com/">Wordpress Guatemala</a> | Diseño por <a href="mailto:mimer@epcidesigngt.com"> Mimer </a>

</div>
&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;

Bien, lo primero que hacemos es crear una función para nuestras opciones, en este caso la llamamos ed_options. Luego agregamos dos variables $themename y $shortname que nos serviran en el transcurso de nuestro tuto

$themename define el nombre del tema

$shortname da un nombre corto para las funciones

Ahora viene una parte indispensable para nuestro panel, se trata de las opciones que contendrá. Las definimos con una varible llama $options que contendrá varios arreglos (arrays), uno para cada opción.

En este ejemplo en específico crearemos dos arreglos, uno para definir el título de un grupo de opciones y otro para agregar en un campo de texto la url de nuestra imagen (logo) para que posteriormente aparezca en nuestro tema.

Aquí el arreglo del Título


array( "name" => "Configuración del encabezado",
"type" => "heading",
"desc" => "En esta sección se podrá configurar el área del encabezado de su sitio.",
),

Como vemos dentro de este arreglo utilizamos las variables “name” , “type”, “desc” que posteriormente nos servirán para mostrar los datos en nuestro panel.

Aquí el arreglo del campo de texto para la url de la imagen


array("name" => "Imagen del Logotipo",
"desc" => "Ingrese la url completa de la imagen.",
"id" => $shortname."_logoimg",
"std" => "URL de la Imagen",
"type" => "text"),

En este caso, tenemos las variables extras “id” y “std”.

Para cada opción se debe de agregar un array, no se pueden definir dos opciones en un mismo array.

Definición array

Luego de esto creamos una línea con la función de wordpress update_option, a grandes rasgos lo que hace es actualizar valores en una tabla de nuestra base de datos.

update_option('ed_template',$options);update_option('ed_themename',$themename);update_option('ed_shortname',$shortname);

En este caso lo que hacemos será tomar las variables que definimos al inicio de nuestro archivo, luego agregamos nuestra función como una acción a wordpress.


add_action('init','ed_options');

add_action Wp reference, update_option Wp reference

Ahora creamos una función que definirá el Nombre de nuestro Panel en el área de menú, el título de la página y la ruta, además agregaremos al header del wp-admin un archivo css. También, agregamos las acciones que se ejecutarán cuando guardemos la configuración y una que resetea las mismas y pone los valores por defecto.

Primero obtenemos los parámetros de los arrays que hayamos incluido en $options y si se elige guardad ‘save’ actualizamos en nuestra base de datos con la info de cada valor tomando como base el ‘id’ o bien, si elegimos ‘reset‘ se agregarán los datos de ‘std‘ a cada opción.


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=control-panel.php&amp;amp;amp;amp;amp;amp;amp;amp;saved=true");
die;

} else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
delete_option( $value['id'] );
update_option( $value['id'], $value['std'] );}

header("Location: themes.php?page=control-panel.php&amp;amp;amp;amp;amp;amp;amp;amp;reset=true");
die;
}
}

Definición de $_GET, $_REQUEST, foreach

Ahora con add_theme_page agregamos una sub-página en el área de Apariencia de nuestro wp-admin. El primer parámetro no es tan importante ya que solo define el Nombre de nuestra página $themename. “ Options”, el segundo define el título en nuestra página de opciones $themename. “ Options”, el tercero siempre debe de ser ‘edit_themes’, El cuarto parámetro corresponde al nombre de la página en la barra de direcciones en este caso le dejaremos el nombre del archivo con basename(__FILE__).


add_theme_page($themename." Options", "$themename Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

 

Luego tenemos la línea en donde agregamos acciones o archivos al head del wp-admin. En este caso, vamos a agregar un archivo css llamado controlpanel.css usando la función de wordpress .get_bloginfo para obtener la url completa del directorio de nuestro tema.


function my_admin_head() {
echo '<link rel="stylesheet" href="'.get_bloginfo('template_url').'/panel/controlpanel.css" type="text/css" media="screen" />';
}
add_action('admin_head', 'my_admin_head');

Antes de terminar esta parte vamos a crear una última función que creará un mensaje cuando guardemos nuestra configuración o la reiniciemos.


function mytheme_admin() {
$options = get_option('ed_template');$themename = get_option('ed_themename');$shortname = get_option('ed_shortname');
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>';

De nuevo obtenemos todos los parámetros de nuestro $options, si se selecciona ‘saved’ creará un div con el id “message” y la clase “updated fade” de wordpress. Además mostrará el $themename y un texto según la acción seleccionada.

Muy Bien :) hasta aqui todo va perfecto, con esto último prácticamente terminamos la parte más enredada del asunto. Ahora vamos a trabajar un poco el área visual de nuestro panel de administración.

Yo he trabajado en base a mi archivo css para maquetar pero ustedes pueden usar los estilos que deseen.

Empezaremos agregando un título tomando como base la varibles que hemos definido y queda así…


<h1><!--?php echo $themename; ?--> || Panel de Opciones</h1>

El resultado será “Mimer || Panel de Opciones

Ahora lo que haremos será un constructor en donde daremos un estilo a cada grupo de opciones o arrays que definimos en el inicio de nuestro tema en la variable $options

Como dije, yo usé divs y clases específicos de mi archivo controlpanel.css, estos pueden variar o incluso eliminarlos si se desea. Este fragmento queda así:


if ($value['type'] == "text") { ?>

<div>
<div>
<label><?php echo $value['name']; ?>:</label>

<input 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']; } ?>" size="60" />

<p><?php echo $value['desc']; ?></p>
</div>
</div>
</div>
<?php } elseif ($value['type'] == "heading") { ?>

<div>

<h2><?php echo $value['name']; ?></h2>

<?php } ?>

Podemos ver que el primer fragmento inicia con un if


if ($value['type'] == "text") { ?>

<div>
<div>
<label><?php echo $value['name']; ?>:</label>

<input 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']; } ?>" size="60" />

<p><?php echo $value['desc']; ?></p>
</div>
</div>
</div>

Los demás se deben de definir como elseif uno bajo el otro.


<?php } elseif ($value['type'] == "heading") { ?>

<div>

<h2><?php echo $value['name']; ?></h2>

 

Despues de esto, agregamos los botones de guardar y resetear quedando así:


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

Ahora una parte Opcional, se trata de un iframe en donde se nos mostrará el frontend del sitio sin necesidad de cargar otra página. El código para agregar eso es el siguiente:

<h1>Vista Previa (Se actualiza cuando se guardan los cambios)</h1>
<iframe src="../?preview=true" width="100%" height="600" ></iframe>

El iframe lo que hace es cargar la url del sitio cuando se guarden las opciones “?preview=true“. Después y casi para finalizar agregamos créditos e info

 <p> Theme desarrollado para <a href="http://www.wpguate.com/" >Wordpress Guatemala</a> | Diseño por <a href="mailto:mimer@epcidesigngt.com" > Mimer </a> </p>

Y ahora si… terminamos agregando una acción a nuestro wordpress que cargue la página en el área de menú y administración.


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

El resultado de la página de administración estilizada con mi archivo css es el siguiente:

 

Ok, hasta aquí tendríamos nuestro backend listo pero aún nos falta incluir los parámetros en nuestro Tema. En este ejemplo yo hice una sola variable, que agregará el logo a nuestro temea..

En mi tema, tengo definido en el archivo head.php el área del logo que cambiaré, obviando los divs y resto de estilos, lo que tenemos que incluir en el theme es básicamente el siguiente:

 <? if (get_option('ed_logoimg') == '') { ?>

<div><a href="#"><img src="<?php $logo = get_option('ed_logoimg'); echo ($logo); ?>" alt="" id="logo" /></a>

<?

} else { ?>

<div id="header"> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" id="logo" /></a>

<? } ?>

Como vemos, yo lo que hice fue verificar, si existe algún valor en la opción ed_logoimg
 <? if (get_option('ed_logoimg') == '') { ?>
de ser así que obtenga los datos introducidos en las opciones y lo incluya dentro de nuestro código;

<div><a href="#"><img src="<?php $logo = get_option('ed_logoimg'); echo ($logo); ?>" alt="" id="logo" /></a>

si no, pues que muestre un valor por defecto que en este caso es una imagen que tengo en la carpeta imagenes de mi tema.
 else { ?>

<div id="header"> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" id="logo" /></a>
De esta forma aún cuando no tengamos nada en nuestra página de opciones se mostrará el valor predeterminado.
Bueno, ahora tendremos ya prácticamente todo lo necesario para poder crear opciones que configuren nuestro theme desde el área de administración. Las limitaciones para agregar cuantas opciones, estilos, archivos js y demás las defines tu y tu conocimiento. Así que “Pilas” y esten pendientes que seguiré agregandole opciones a nuestra página con otros tutos.
Éxitos y hasta que el tiempo sea grato!

Archivos de Apoyo