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 tema', 'Opciones del tema', '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 '</pre> <div id="”message”" class="updated"><strong>Options Saved</strong></div> <pre> ’; ?></pre> <div class="wrap"> <div id="mimic"> <h2>Opciones del tema</h2> <form action=""<?php" method="post" name="mimic">”> <input name="action" type="hidden" value="save" /> <table class="optiontable"> <tbody> <tr> <th>IDs de categoría del <em>menú de navegación</em>:</th> <td><input id="2mimic_menu_cat" class="code" name="mimic_menu_cat" type="text" value="<?php />" /></td> </tr> <tr> <th>ID de la categoría de destacados :</th> <td><input id="mimic_featured_cat" class="code" name="mimic_featured_cat" type="text" value="<?php" />" /></td> </tr> </tbody> </table> <input name="Guardar" type="submit" value="Aplicar" /></form></div> </div> <pre> < ?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 …?>< ?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
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.
remplázalo por este otro código
remplaza también esta línea
por
y eso es todo, ahora puedes gestionar tu theme desde el panel de administración.
Gracias a CatsWhoCode.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
muy buena traduccion 😀
Gracias por hacernoslo conocer!
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.
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 😉
Pues se va a favoritos Fernando, muchas gracias, ahorita lo que ando buscando es como hacer un panel de opciones pero para un Widget
Yel contenido donde ha quedado??
Aviso al administrador: no se ve el artículo.
Coño, es verdad, ahora miro a ver que le pasa. Gracias por avisar
Ya está, he tenido que separarlo en 2 páginas y sustituir códigos por capturas pero ya está todo
Ya está, he tenido que separarlo en 2 páginas y sustituir códigos por capturas pero ya está todo
No se ve nada .s
Ya, no sé que puede haber pasado
Ya está, he tenido que separarlo en 2 páginas y sustituir códigos por capturas pero ya está todo
Ya está, he tenido que separarlo en 2 páginas y sustituir códigos por capturas pero ya está todo
Gran artículo Fernando. realmente a muchas personas nos interesa. Pero, humildemente, y tras probar el codigo, encuentro tres errores que señalo para ayudar a los interesados, y agradeceria si alguien encuentra la solucion:
1 – hay etiquetas de php mal colocadas
2- cuando guardas el formulario la pantalla se queda en blanco. Como si no se enviara la cabecera saved=true, aunque si guarda los datos nuevos
3- Falta add_action(‘admin_menu’, ‘mimic_add_theme_page’); para que se incluya la funcion en la administracion.
Un saludo y muchas gracias por el tutorial