Share
Crear temas para regalar o vender es genial, pero no todos los que usan tu tema tendrán una comprensión sólida de HTML / CSS. Proporcionar a su tema una página de opciones facilita a los usuarios no técnicos hacer cambios de tema sin ensuciarse las manos con el código. Te mostraré cómo hacer uno desde cero.!
Antes de comenzar, ¿qué es lo que realmente estamos luchando? ¿Qué vamos a hacer personalizable sobre nuestro tema? Bueno, este tutorial se centrará principalmente en el lado programático, pero para cambiar algo sobre el diseño, también necesitaremos tener algunas ideas de diseño bajo la manga. Esto es lo que tenemos:
Podríamos agregar muchos elementos editables a un tema, pero después del tutorial de hoy que ilustra cómo implementar las cinco funciones enumeradas anteriormente, debe tener una idea general de cómo crear su propia página de opciones..
Vamos a concentrarnos por completo en la página de opciones antes de comenzar a cambiar el tema. Primero, necesitamos un lugar donde colocar todo nuestro código que va a administrar la página de opciones. Todo este código va a residir en un archivo llamado funciones.php, Que irá dentro de nuestra carpeta de temas. Entonces, si nuestro tema se llama 'ejemplo', entonces la ruta a nuestro archivo de funciones sería wp-content / themes / example / functions.php.
No necesitamos decirle a WordPress que incluya nuestra funciones.php archivo, se llama automáticamente durante el ciclo de ejecución de WordPress.
Así que primero debemos crear la página de opciones en blanco, el lienzo para nuestro trabajo. Para hacerlo, debemos informar a WordPress sobre la nueva página de opciones que deseamos crear. Logramos esta tarea mediante el uso de acciones. Las acciones se llaman en un momento específico en la ejecución de WordPress; Así, por ejemplo, cuando se crea el menú en el panel de control, la acción admin_menu se llama. Podemos vincular funciones a estas acciones; Así podemos ejecutar nuestras funciones en momentos específicos. Aquí están las funciones básicas que necesitamos para crear nuestra página de opciones..
Nuestra primera funcion, themeoptions_admin_menu simplemente está ahí para agregar un enlace a nuestra página en la barra lateral de administración, también le dice a WordPress a qué función llamar para mostrar la página que, en nuestro caso, es themeoptions_page ().
Los parámetros para el add_theme_page () Las funciones son las siguientes:
Si tienes el tema activado, entonces, en el Temas En el menú desplegable, debería ver su nuevo enlace a una página de opciones que actualmente está en blanco. Ahora tenemos el lienzo para nuestra página de opciones, y podemos comenzar a implementar los formularios, campos y back-end de nuestra funcionalidad de opciones.
Ok, entonces esa página se ve un poco solitaria; agreguemos el formulario y los campos con los que el usuario interactuará para realizar cambios en el tema. Es importante tener en cuenta que puede diseñar esta página como desee, incluso agregar cuadros de diálogo con pestañas si lo desea; pero para nuestro tutorial, vamos a hacer uso de las clases predeterminadas utilizadas por WordPress. De esta manera, nos ahorra el tiempo de reinventar la rueda y hace que nuestra página de opciones se combine con el resto del panel..
El código de nuestra página debe residir en nuestra themeoptions_page () función, así que vamos a agregar nuestro código de esta manera;
function themeoptions_page () // aquí está la función principal que generará nuestra página de opciones?>Opciones de tema
Primero creamos lo predefinido. envolver clase para la pagina Luego, agregamos un encabezado rápido con un icono predeterminado. Finalmente, nuestra forma; Necesitamos un valor oculto para poder verificar si se ha enviado. También necesitamos un botón que va a enviar el formulario y, nuevamente, usamos una clase predefinida para esto. Esto es lo que tenemos hasta ahora:
Ahora tenemos nuestra estructura básica. Entonces, si volvemos al principio de este tutorial, planeamos implementar cinco opciones.
function themeoptions_page () // aquí está la función principal que generará nuestra página de opciones?>Opciones de tema
4. Actualizando la base de datos
Hasta ahora, tenemos una página de opciones con un formulario que envía datos a sí mismo, a través de POST. El siguiente paso lógico es tomar los datos enviados e insertarlos en la base de datos de WordPress. Para ello, vamos a crear una nueva función llamada themeoptions_update (). Esta función será llamada por themeoptions_page (); así que agregue este código a la parte superior de themeoptions_page ();
if ($ _POST ['update_themeoptions'] == 'true') themeoptions_update ();Por supuesto, el siguiente paso es crear la función de actualización.. Recuerda, Por el bien de este tutorial, no estoy agregando validación o desinfección a mi código. Al crear un plugin, deberías siempre Compruebe la entrada de sus usuarios. Sin embargo, está fuera del alcance de este tutorial. Ahora puede confiar en WordPress para validar su entrada, pero es mejor hacerlo usted mismo, para asegurarse.
En cualquier lugar del funciones.php Archivo, agregue este bloque de código:
function themeoptions_update () // aquí es donde la validación iría update_option ('mytheme_colour', $ _POST ['color']); update_option ('mytheme_ad1image', $ _POST ['ad1image']); update_option ('mytheme_ad1url', $ _POST ['ad1url']); update_option ('mytheme_ad2image', $ _POST ['ad2image']); update_option ('mytheme_ad2url', $ _POST ['ad2url']); if ($ _POST ['display_sidebar'] == 'on') $ display = 'check'; else $ display = "; update_option ('mytheme_display_sidebar', $ display); if ($ _POST ['display_search'] == 'on') $ display = 'checked'; else $ display ="; update_option ('mytheme_display_search', $ display); if ($ _POST ['display_twitter'] == 'on') $ display = 'check'; else $ display = "; update_option ('mytheme_display_twitter', $ display); update_option ('mytheme_twitter_username', $ _POST ['twitter_username']);La función de actualización, como su nombre indica, actualiza una opción que puede almacenar en la base de datos. Si la opción no existe, entonces WordPress la crea. Hemos agregado todas nuestras opciones con mi tema_, solo para asegurarnos de que no sobrescribamos las opciones que otro plugin / tema podría estar usando.
Hasta ahora, tenemos una página de configuración que puede guardar nuestras opciones, sin embargo, cuando presionamos enviar, y nuestras opciones están almacenadas, nuestro formulario está en blanco cuando lo volvemos a visitar. Esto se debe a que necesitamos volver a cargar nuestros valores desde la base de datos..
5. Opciones de captura
Ahora debemos obtener nuestras opciones para poder rellenar el formulario de configuración. Esto es fácil, y lo haremos usando el get_option () función. Podríamos usar variables, pero para este ejemplo, simplemente haremos eco de la salida de la función donde debería ir en el formulario. Nuestro nuevo código se ve así;
function themeoptions_page () // aquí está la función principal que generará nuestra página de opciones si ($ _POST ['update_themeoptions'] == 'true') themeoptions_update (); // if (get_option () == "marcada"?>Opciones de tema
Así que ahí lo tienen. El back-end ahora se ha completado. Podemos actualizar nuestras opciones en la base de datos, por lo que todo lo que queda por hacer es hacer que el tema reaccione a estos cambios en la página de opciones. Esto funciona de manera similar a como actualizamos los campos de opciones: buscamos la opción y luego la mostramos o la usamos como un condicional para hacer otra cosa. Vamos a empezar con la parte delantera.
6. Cambiando el tema
Cambiando el esquema de color
Esto va a tratar con CSS y eso, que no es de lo que trata este tutorial. Así que vamos a repasar cómo te acercarías a esto. Una de las mejores maneras de hacerlo es tener una hoja de estilo predeterminada que use un esquema de color como el negro, y luego una serie de esquemas de color alternativos. Por ejemplo style.css Podría diseñar su diseño en negro, pero incluyendo red.css Después de incluir style.css.
Un consejo CSS útil es usar el !importante etiqueta. Use esta etiqueta en las hojas de estilo que cambian los colores del diseño para asegurarse de que esas propiedades, de hecho, serán utilizadas. Para cambiar realmente las hojas de estilo, agregue este código a la header.php archivo de su diseño donde se incluiría la hoja de estilo:
Añadiendo spots publicitarios.
Esta sección pretende mostrarte la teoría. En la vida real, probablemente utilizarías un complemento o algo así como "Comprar anuncios de venta". Entonces, digamos que tenemos dos espacios para que entren nuestros anuncios. Al igual que en el ejemplo anterior, simplemente mostramos la opción donde tiene que ir, así:
">">
Barra lateral opcional
Esta vez, usaremos la opción como condicional para decidir si debemos generar un bloque de código o no, que en este caso mostraría una barra lateral. Por supuesto, su diseño debería poder mostrarse correctamente si no se ve una barra lateral; Así que uno depende de ti. El siguiente código se agregará a donde quiera que normalmente llames a tu barra lateral, generalmente el mío se llama desde header.php.
if (get_option ('mytheme_display_sidebar') == 'marcado') get_sidebar (); // o alternativamente ... if (get_option ('mytheme_display_sidebar') == 'marcado') get_sidebar (); else / * mostrar otra cosa * /Tweets recientes opcionales
Para esta pequeña opción, tendremos que hacer dos cosas. Si los tweets están habilitados, primero tendremos que mostrar el área donde deberían aparecer los tweets, también tendremos que insertar un bloque de JavaScript antes de
Necesitamos colocar lo siguiente donde realmente queremos que aparezcan los tweets:
A continuación tenemos que colocar este código antes de la etiqueta, que probablemente reside en footer.php;
Propina: ¿por qué no intenta agregar su propia opción para cambiar la cantidad de tweets que se encuentran arriba??
Finalmente, llegamos a nuestro cuadro de búsqueda opcional, que funciona como lo hizo nuestra barra lateral. Usamos la opción como un código condicional y de pantalla dependiendo de la elección del usuario.
Accentsconagua
; ?>)
">; ?>)
if (get_option ('mytheme_display_search') == 'marcado') ?> Espero que hayas aprendido los conceptos básicos de cómo crear una página de opciones para tu tema y hacer que funcione correctamente. He intentado omitir algunos de los tediosos bits, como el CSS real y la validación que debería estar en su lugar, principalmente porque estaba fuera del alcance de este tutorial..
Como de costumbre, si tiene alguna pregunta, ¡deje un comentario a continuación! Gracias por leer!
