7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Cómo crear un mejor panel de opciones de WordPress

Scroll to top
Read Time: 15 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Hoy, repasaremos todo el proceso de creación de un panel de opciones de administración para un tema de WordPress, utilizando el excelente WooFramework como ejemplo. Luego, llevaremos las cosas un paso más allá, a medida que implementemos jQuery para mejorar parte de la funcionalidad.

Detalles del tutorial

  • Programa: WordPress
  • Versión: 2.7, 2.8, 2.9 en adelante
  • Dificultad: Intermedia
  • Tiempo estimado de finalización: 1.5 horas
Final ProductFinal ProductFinal Product

WordPress es uno de los sistemas de software de gestión de contenido (CMS) más populares que existen. Ya sea para un proyecto de cliente o para vender temas en ThemeForest, WordPress está emergiendo rápidamente como un CMS de elección para muchos desarrolladores web. Es relativamente fácil de usar, pero se puede hacer aún más simple cuando incluyes un panel de administración para los usuarios. En lugar de tener que abrir los archivos de plantilla PHP y jugar con el código, los usuarios pueden usar directamente el panel de opciones para interactuar con tu tema de WordPress.

Por ejemplo, si tu tema tiene esquemas de color rojo, azul y verde, y cada uno tiene un archivo CSS correspondiente, sería mucho más fácil para un usuario seleccionar su color preferido de una lista desplegable. Así que hoy, déjame guiarte a través de todo el proceso de creación y mejora de una página del panel de administración de WordPress inspirada en Woo.

Paso 1

Antes de comenzar a crear el panel de administración, necesitamos tener un tema, ¿verdad? Así que descarga los archivos de origen proporcionados con el tutorial. Modifiqué ligeramente el tema clásico de WordPress. Coloca la carpeta 'nettuts' (llamé al tema 'Nettuts') en tu carpeta wp-content/themes. Deberías ver los siguientes archivos:

  • functions.php (en blanco)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • Una carpeta de imágenes con dos archivos

La mayor parte de nuestro trabajo se va a realizar dentro del archivo functions.php.

Un tema puede usar opcionalmente un archivo de funciones, que reside en el subdirectorio del tema y se llama functions.php. Este archivo básicamente actúa como un plugin, y si está presente en el tema que estás utilizando, se carga automáticamente durante la inicialización de WordPress (tanto para las páginas de administración como para las páginas externas).

Usos sugeridos para este archivo:

  • Define las funciones utilizadas en varios archivos de plantilla de tu tema
  • Configura una pantalla de administración, dándole a los usuarios opciones para colores, estilos y otros aspectos de tu tema.

(Del WP Codex)

Paso 2

Ya que tenemos nuestro tema de WordPress configurado, ve a Apariencia>Temas y activa el tema nettuts.

¿Activado? Ok, genial. Ahora tenemos que pensar en un diseño para nuestra página del panel de administración. Esta es la estructura que decidí:

Déjame explicarte todo eso. El conjunto de opciones se agrupará en un div llamado "rm_wrap" y luego "rm_opts" para las opciones. Luego comenzamos un formulario, con todas las entradas dentro de él. Cada sección de opciones (configuración general, configuración de página de inicio, configuración de blog, entre otros) tiene un div separado con una clase de "rm_section". Este div tiene un título (para el nombre), así como varios divs de entrada dentro de él. Mediante el uso de clases como <div class="rm_input rm_select">, podemos aplicarle estilos a los menús desplegables, las entradas de texto y las áreas de texto de manera diferente.

Ahora, lo más importante es que la codificación de esto no debe hacerse manualmente, debemos usar la flexibilidad de PHP tanto como sea posible. Eso significa eficiencia: ¡no codifiques manualmente cuando tengas bucles para ti!

Paso 3

Comienza abriendo functions.php en tu editor de código favorito (yo uso Notepad++). Ingresa el siguiente código:

Las dos variables PHP contienen el nombre de tu tema (Nettuts en nuestro caso), y un nombre corto que definiste (nt en nuestro caso). El nombre corto se usa para prefijar todos los nombres de nuestras opciones de tema, y generalmente es exclusivo de un tema en particular. Continuando, escribiremos un poco de código para generar automáticamente una lista de categorías de WordPress, en lugar de que los usuarios escriban números de identificación. Ingresa el siguiente código bajo el código ya escrito:

Este fragmento usa la función get_categories incorporada de WordPress para buscar todas las categorías, y luego usa un bucle foreach para almacenarlas en la variable $wp_cats. Las opciones "Elegir una categoría" se agregan a la parte superior de la matriz.

Paso 4

Ahora comenzamos a ingresar una lista de opciones para el tema. Mira a continuación y pégala en tu archivo functions.php:

Ese fue un gran fragmento de código, que seguramente merece alguna explicación. Así que, aquí vamos:

  • La variable PHP $options almacena la lista completa de opciones para el tema.
  • Se compone de una serie de matrices, cada una con una clave "tipo" para indicar cómo se mostrará y qué hace.
  • Comenzamos con una matriz "type" => "title", que se utilizará para mostrar el nombre del tema y un título en la parte superior de la página.
  • Cada sección (General, Página de inicio y Pie de página) tiene una lista separada de opciones.
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer "type" => "section") y abrir una nueva sección.
  • Cada opción puede tener las opciones que se especifican a continuación: nombre: el nombre del campo de entrada.desc: Una breve descripción que explica lo que es para el usuario.id: el identificador del campo, prefijado por el nombre corto. Se utilizará para almacenar y acceder a las opciones.tipo: el tipo de entrada; seleccionar, texto o área de textoopciones: se utiliza para declarar una matriz de opciones para una entrada de tipo seleccionado.std: el valor de entrada predeterminado, que se utiliza si no se proporciona ninguna otra entrada.

Paso 5

Intenta navegar a WordPress. Verás que no hay ninguna opción en ningún lugar para ver realmente la página del panel de administración; entonces, ¿cómo podemos verlo? Agrega los siguientes fragmentos de código al archivo functions.php:

Esta función está pensada para actualizar opciones, así como para agregar una página de menú. Si las opciones se están guardando (indicado por una variable oculta guardar), todas las opciones se actualizan con sus nuevos valores. Si las opciones se están restableciendo (indicadas por otra variable oculta con un restablecimiento de valor), todas las opciones se eliminan. La última línea agrega una página de menú: los parámetros son, respectivamente, nombre y título, el nivel de autorización del usuario requerido para ver la página, la página de guardado y la función utilizada para mostrar/guardar (llamada mytheme_admin en nuestro caso). ¿Ves mytheme_add_init, una función en blanco? Déjala ser, la veremos más tarde.

Paso 6

Todavía no hay una página de opciones de tema, ¿verdad? Bueno, ¿recuerdas la función mytheme_admim de la que hablamos hace unas líneas? Todavía no hemos escrito esa función. Entonces, usa el código de los pasos 6, 7 y 8 para escribir esa función. Comenzando:

Bastante simple, ¿verdad? Si las opciones se guardaron, escribe un mensaje que lo indique. Lo mismo para los reinicios. Notarás un class="updated fade". WordPress automáticamente lo atenuará en algunas secciones. Genial, ¿verdad? Continuando, comenzamos el div "rm_wrap".

Paso 7

Continuando desde arriba, pega el siguiente código:

¡Esa es una gran pieza de código! Explicación: utilizando un bucle php foreach, cada tipo de opción se evalúa caso por caso. Usamos una técnica de cambio de caja para esto. La variable de cambio son las opciones: los casos se comparan y evalúan. ¿Observas la declaración de 'ruptura' después de cada caso? Esto es para evitar algo conocido como propiedad de "caída". Cuando un caso es emparejado, todos los casos sucesivos también se ejecutan. Esto significa que si coincidimos con el caso 3, los casos 4,5, así sucesivamente también se ejecutan. No queremos eso, ¿verdad? Así que usa un descanso para detener el caso del interruptor.

Si hay una opción de tipo "abrir", no se hace nada. Si hay opciones de tipo "cerrar", se cierran dos divs. La opción "título" solo se usa una vez; es una introducción a las opciones del tema. Para cada uno de los tipos "text" (input type="text"), "select" (dropdowns), "checkbox" y "textarea" (es obvio lo que significan), se muestra la entrada correspondiente. Observa el <div class="clearfix">: se utiliza para despejar floats, lo que haremos más adelante.

Paso 8

Estamos llegando al final de esa función bastante masiva. Pega el siguiente código:

Para una opción de tipo "sección", usé una variable de contador $i. Esto realiza un seguimiento del número de las secciones y lo conecta al nombre del botón de envío, para tener botones de envío únicos. También hay un último formulario al final para restablecer todas las opciones. La imagen utilizada será una imagen transparente utilizada en nuestra jQuery-fication. Usa este último fragmento de código para poner en juego nuestras funciones:

Eso le dice a WordPress que agregue el menú de administración.

Paso 9

¡Y listo! Tenemos nuestra propia página de panel de administración impresionante con una posición de menú separada para sí mismo. Así que echémosle un vistazo: haz clic en el enlace. Y qué asco. Tiene que ser la página del panel de administración más fea de la historia. ¡Así que llamemos a nuestro buen amigo CSS! Crea una nueva carpeta en el directorio nettuts/ y asígnale el nombre "funciones". Crea un nuevo archivo CSS allí: functions.css. Pega el siguiente código:

No explicaré nada aquí; está bastante claro lo que hace cada declaración de CSS, y puedes personalizar el diseño para tu propio tema.

Paso 10

Así que ahora tenemos un buen archivo CSS. Pero, ¿cómo lo añadimos a la página? Después de todo, no tenemos acceso directo al <head> del documento. ¿Recuerdas la función mytheme_add_init () en blanco que escribimos en el paso 4? Será util. Cámbiala a esto:

Eso agrega el archivo functions.css al encabezado. La ubicación del archivo está determinada por el directorio de la plantilla.

Paso 11

Ve a mirar la página ahora. Bastante bonita, ¿no? Pero luego te preguntas, ¿para qué sirve el icono '+'? Bueno, ¡ahí es donde entra jQuery! Crea un nuevo archivo rm_script.js en la carpeta nettuts/functions/. Pega el siguiente código:

Lo que hace esto es: una vez que se carga el DOM, todas las rm_options se deslizan hacia arriba. Cuando se hace clic en el icono '+', la clase inactiva se elimina de la imagen y se agrega la clase activa, convirtiéndola en un icono '-'. Lo contrario se hace cuando se hace clic en el icono '-'. Luego, rm_options se desliza hacia arriba o hacia abajo (determinado por el estado actual de CSS) usando la función slideToggle, bastante simple. Para agregar este script, se usa la misma función mytheme_add_init(). Cámbiala a:

El script jQuery ahora estará activo. Gp compruébalo. Personalmente, ¡creo que es hermoso!

Paso 12

Ahora que tenemos nuestra página de opciones de tema configurada, simplemente la ejecutaré usando las opciones. El código para utilizar las opciones es el siguiente:

Eso buscará las opciones nt_color_scheme. Mira los siguientes ejemplos:

La variedad de usos está limitada solo por tu imaginación.

Conclusión

Espero que hayas aprendido algo en este tutorial. Este no es tu panel de opciones estándar. Este no usa tablas, está mejorado con jQuery, usa CSS impresionante y es extremadamente fácil de usar. El objetivo de este tutorial es aprender: siempre puedes reemplazar los paneles plegables con pestañas, por ejemplo, o incluso algo más avanzado. ¡Usa tu creatividad! ¡Siéntete libre de discutir o hacer preguntas en los comentarios!

Desde entonces, WooThemes ha lanzado la versión dos de su framework. Puedes revisar los detalles aquí.

  • Síguenos en Twitter, o suscríbete al Nettuts+ RSS Feed para obtener los mejores tutoriales de desarrollo web en la web.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.