Guia basica para Theme Customization API



Para mi esta es una de las apuestas del futuro de WordPress poder cambiar tu tema en tiempo real y ver como va quedando de manera visual sin necesidad de plugins, no todos los temas están orientados y adaptados para esto pero empieza a haber un gran interés por esto y en la nueva versión 4.5 WordPress sacara nuevas opciones para poder ver como queda y muchas mejoras para los desarrolladores.

 

Como decía el que un tema este o no desarrollado para Theme Customization dependerá de la persona que lo desarrolla. Aun le falta mucho para poder hacer lo que hacen los grandes temas solo con Theme Customization pero poco a poco van mejorando.

Elementos que tenemos en nuestra API para trabajar con el personalizador de temas:

  • Panels
  • Sections
  • Settings
  • Controls

 

customizer

Los Panels son el primer nivel y sirven para agrupar Sections. Podríamos decir que son las categorías de secciones que tenemos o la primera linea a mostrar, así que dentro de un Panel tenemos varias Sections.

Las Sections nos sirven para agrupar Settings o variables.

Las Settings son las variables que queremos guardar o modificar en nuestros Sections. Esto es lo realmente interesante poder cambiar cosas como el  titulo del sitio , código css personalizado, con sidebar o sin sidebar, forma de mostrar el contenido y que lo veas en tiempo real.

Y los Controls la forma de representarlos.

 

 

Introdución

Lo mejor para empezar es crearte un php e incluirlo en functions.php  porque el codigo para generar opciones en la parte de customizer es bastante amplio.

 

Ejemplo de Panels

Para crear un panel usamos la funcion add_panel

panel_id es nuestro identificador de panel que luego usaremos en secciones y en otros sitios de esta forma cuando añadamos una sección tendremos que indicarle donde vamos a agruparlo.

Una cosa importante los paneles, secciones no se ven hasta que tengáis campos añadidos.

 

Ejemplo de Sections

Ahora vamos a crear una nueva seccion para ello como antes tenemos que indicarle un id_section.  Tambien debemos indicarle el panel donde debe añadirse.

 

Ejemplo de Settings y Control

En este ejemplo añadimos un settings y un control.

 

 

Ejemplo básico completo.

 

ejemplo-panel-control

 

Esta captura corresponde con el codigo de abajo. En este ejemplo creamos :

  • Un panel
  • Una sección
  • Dos campos un tipo text y un textarea