Tomando la base del theme Mimbo, uno de los mas populares themes gratuitos de estilo revista, vamos a ver como configurarlo para que tenga un panel de opciones desde el que configurar varias personalizaciones sin tener que tocar el código a posteriori.

Aunque se toma como ejemplo la estructura de Mimbo se puede aplicar, y trasladar a cualquier theme de tu elección.

1 - Creando el fichero functions.php

Busca en la carpeta de tu theme el archivo ‘functions.php‘, y si no estuviera créalo para poder empezar esta tarea. Lo creas en blanco para incluir el código del siguiente paso.

2 - Creando la función de inicialización

La siguiente función, que incluiremos en el fichero ‘functions.php’ inicializa todas las variables en caso de que no exista un valor definido (se ejecuta primero en el panel de opciones)

function mimic_init() {
// add_option(’variable name’,'default value’
// Categoría a mostrar en el menú superior //
add_option(‘mimic_menu_cat’, ‘1,2,3′);
// Categoría de destacados//
add_option(‘mimic_featured_cat’, 0);
}

3 - Creando la función que obtiene/guarda los datos

Aquí se establecen las variables con los datos guardados y donde deben guardarse…

function mimic_add_theme_page()
{
// si las variables están vacías llamamos a la función mimic_init para establecer los valores por defecto
if((get_option(‘mimic_featured_cat’) == ”)||(get_option(‘mimic_menu_cat’) == ”))
	{mimic_init();}
if ($_GET['page'] == basename(__FILE__)) {
	//si el formulario se envia guardamos los cambios
	if ( ’save’ == $_REQUEST['action'] )
	{
		//—–
		if(isset($_REQUEST['mimic_featured_cat']))
			{update_option(‘mimic_featured_cat’, $_REQUEST['mimic_featured_cat']);}
		else
			{update_option(‘mimic_featured_cat’, ‘Fill this field please’);}
		if(isset($_REQUEST['mimic_menu_cat']))
			{update_option(‘mimic_menu_cat’, $_REQUEST['mimic_menu_cat']);}
		else
			{update_option(‘mimic_menu_cat’, ‘Fill this field please’);}
		header(“Location: themes.php?page=functions.php&saved=true”);die;
	}
// Agrega la cabecera (css + script) al panel de opciones
add_action(‘admin_head’, ‘mimic_theme_page_head’);}
//add_menu_page(page_title, menu_title, access_level/capability,file,[function]);
add_theme_page(‘Opciones del Theme’, ‘Opciones del Theme’, ‘edit_themes’, basename(__FILE__), ‘mimic_theme_page’);
}

4 - Creando el formulario y la cabecera

Aquí diseñamos el formulario …

Código para el formulario

function mimic_theme_page()
{
	if ( $_REQUEST['saved'] ) echo ‘<div id=”message” class=”updated fade”><p><strong>Options Saved</strong></p></div>’;
?>
<div class=“wrap”>
	<div id=“mimic”>
	<h2>Opciones del Theme</h2>
	<form name=“mimic” method=“post” action=“<?php $_SERVER['REQUEST_URI']; ?>”>
		<input type=“hidden” name=“action” value=“save” />
		<table class=“optiontable”>
		<tbody>
		<tr>
		<th>IDs de categoría del <em>menú de navegación</em>:</th>
		<td><input name=“mimic_menu_cat” id=“mimic_menu_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_menu_cat’); ?/>” /><br /></td>
		</tr>
		<tr>
		<th>ID de la categoría de destacados :</th>
		<td><input name=“mimic_featured_cat” id=“mimic_featured_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_featured_cat’); ?/>” /><br /></td>
		</tr>
		</tbody>
		</table>
		<p class=“submit”><input type=“submit” name=“Guardar” value=“Aplicar »” /></p>
	</form>
	</div>
</div>
< ?php }?

Esta función crea el formulario para entrar los valores personalizados

Código para la Cabecera

function mimic_theme_page_head()
{   // header Css+Script …?>
	<style type=“text/css”>
	p {margin-left:4px;}
	#mimic {margin:5px;padding:10px;}
	</style>
< ?php}

Ya casi hemos terminado, ahora solo queda una cosa por hacer, tenemos que conseguir los valores Guardados en nuestro theme.

5 - Editando tu archivo index.php (o el que quieras)
Aquí es donde sucede la magia

Simplemente añade este pequeño código en tu fichero index.php

< ?php
	/* Obteniendo los valores de opcioness*/
	/* Obteniendo el ID de la categoría de destacados */
	$fcat = get_option(‘mimic_featured_cat’);
?>

El siguiente código es específico para el theme mimbo pero también otros themes usan la misma función para mostrar posts, así que puedes adaptarlo a tu propio theme.

En mimbo este código sirve para mostrar el último post de la categoría de destacados.

query_posts(’showposts=1&cat=1′);

remplázalo por este otro código

query_posts(’showposts=1&cat=’.$fcat);

remplaza también esta línea

wp_list_categories(‘include=1&title_li=&style=none’); ?>

por

wp_list_categories(‘include=’.$fcat.‘&title_li=&style=none’); ?>

y eso es todo, ahora puedes gestionar tu theme desde el panel de administración.

Gracias a CatsWhoCode.

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    4 comentarios en “Hacer un Panel de Opciones para un Theme”

  1. Omar (7 comentarios) dijo:

    muy buena traduccion :D

    Gracias por hacernoslo conocer!

  2. [...] How to: Make a control panel for your wordpress theme (En español por Ayuda WordPress) 5 Pasos hacia la victoria, simple y comentado para poder entender exactamente lo que estas [...]

  3. AnGeL (14 comentarios) dijo:

    Hola! muy bueno el articulo la verdad, me ha sido de mucho ayuda!.

    Una consulta: ustedes han autorizado esto:
    http://planetawordpress.org/2008/07/08/hacer-un-panel-de-opciones-para-un-theme

    Me parecio muy copy&paste :S.

    Salu2 y sigan con este tipo de trabajo.

  4. Gracias por el aviso AnGeL, si que está autorizado. En realidad es un Planeta, como el planetwordpress.org pero en español, de sitios con información sobre WP ;)

Escribe un Comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Subir

Expertos en WordPress
Euribor
Hardware. Software. Ocio & Multimedia. Humor. Internet. Videojuegos.Noticias
Participa en el Debate
  • Felix Roman: Gracias por ser agradecido ;-)
  • Dani: Yo uso el panel de escritura de Wordpress, sin él me vería raro la verdad. Suelo usar...
  • eNedimensiones: ¡Por fin! ¡Cuánto tiempo esperando que se tomaran en serio bbPress!
  • Cuélebre: Uso Marsedit y desde el trabajo si tengo que escribir alguna entrada desde el propio...
  • Fernando Tellado: Se actualiza mas o menos como WordPress con alguna salvedad. Vale, preparo un...
Noticias Breves
  • Si quieres aprender como hacer multitud de diseños distintos para WordPress no te pierdas esta estupenda recopilación de 26 tutoriales de diseño de blogs WordPress.

    [#3]

  • Acaba de salir a la luz la nueva versión de WordPress para iPhone 1.3, con soporte completo para el firmware de iPhone 3.0. Va de cojones estupendamente. Altamente recomendable esta actualización, que tienes en iTunes.

    [#1]

  • Me avisa Kike Alonso de un nuevo plugin que permite que los comentarios que dejen tus amigos de Friendfeed al respecto de un post de tu sitio WordPress aparezcan también en tu post como comentarios normales, algo realmente interesante pues permite, con algunos clientes de escritorio e iPhone, comentar en blogs sin dejar de usar la aplicación de mensajería.

    [#6]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H