Crear un panel de opciones para un theme

Hacer un Panel de Opciones para un Theme

Posted by planetawordpress on julio 8, 2008 Leave a comment (0) Go to comments

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)

Clic para ver Texto Plano

PHP:

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

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

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

Clic para ver Texto Plano

PHP:

1. function mimic_add_theme_page()
2. {
3. // si las variables están vacías llamamos a la función mimic_init para establecer los valores por defecto
4. if((get_option(‘mimic_featured_cat’) == ”)||(get_option(‘mimic_menu_cat’) == ”))
5.     {mimic_init();}
6. if ($_GET[‘page’] == basename(__FILE__)) {
7.     //si el formulario se envia guardamos los cambios
8.     if ( ’save’ == $_REQUEST[‘action’] )
9.     {
10.         //—–
11.         if(isset($_REQUEST[‘mimic_featured_cat’]))
12.             {update_option(‘mimic_featured_cat’, $_REQUEST[‘mimic_featured_cat’]);}
13.         else
14.             {update_option(‘mimic_featured_cat’, ‘Fill this field please’);}
15.         if(isset($_REQUEST[‘mimic_menu_cat’]))
16.             {update_option(‘mimic_menu_cat’, $_REQUEST[‘mimic_menu_cat’]);}
17.         else
18.             {update_option(‘mimic_menu_cat’, ‘Fill this field please’);}
19.         header(“Location: themes.php?page=functions.php&saved=true”);die;
20.     }
21. // Agrega la cabecera (css + script) al panel de opciones
22. add_action(‘admin_head’, ‘mimic_theme_page_head’);}
23. //add_menu_page(page_title, menu_title, access_level/capability,file,[function]);
24. add_theme_page(‘Opciones del Theme’, ‘Opciones del Theme’, ‘edit_themes’, basename(__FILE__), ‘mimic_theme_page’);
25. }

4 – Creando el formulario y la cabecera

Aquí diseñamos el formulario …
Código para el formulario

Clic para ver Texto Plano

PHP:

1. function mimic_theme_page()
2. {
3.     if ( $_REQUEST[‘saved’] ) echo ‘<div id=”message” class=”updated fade”><p><strong>Options Saved</strong></p></div>’;
4. ?>
5. <div class=“wrap”>
6.     <div id=“mimic”>
7.     <h2>Opciones del Theme</h2>
8.     <form name=“mimic” method=“post” action=“<?php $_SERVER[‘REQUEST_URI’]; ?>”>
9.         <input type=“hidden” name=“action” value=“save” />
10.         <table class=“optiontable”>
11.         <tbody>
12.         <tr>
13.         <th>IDs de categoría del <em>menú de navegación</em>:</th>
14.         <td><input name=“mimic_menu_cat” id=“mimic_menu_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_menu_cat’); ?/>” /><br /></td>
15.         </tr>
16.         <tr>
17.         <th>ID de la categoría de destacados :</th>
18.         <td><input name=“mimic_featured_cat” id=“mimic_featured_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_featured_cat’); ?/>” /><br /></td>
19.         </tr>
20.         </tbody>
21.         </table>
22.         <p class=“submit”><input type=“submit” name=“Guardar” value=“Aplicar »” /></p>
23.     </form>
24.     </div>
25. </div>
26. <?php }?

Esta función crea el formulario para entrar los valores personalizados
Código para la Cabecera

Clic para ver Texto Plano

PHP:

1. function mimic_theme_page_head()
2. {   // header Css+Script …?>
3.     <style type=“text/css”>
4.     p {margin-left:4px;}
5.     #mimic {margin:5px;padding:10px;}
6.     </style>
7. <?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

Clic para ver Texto Plano

PHP:

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

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.

Clic para ver Texto Plano

PHP:

1. query_posts(’showposts=1&cat=1?);

remplázalo por este otro código

Clic para ver Texto Plano

PHP:

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

remplaza también esta línea

Clic para ver Texto Plano

PHP:

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

por

Clic para ver Texto Plano

PHP:

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

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