Introducción al personalizador de temas de WordPress

Una cosa que siempre me disgustó de las páginas de configuración de temas fue lo enormemente diferentes que se volverían. Imagine que cada fabricante de automóviles intenta agregar su propio toque al tener una ubicación de rueda única y verá por qué eso es algo malo para los editores de WordPress.

Por suerte, desde 3.4 y gracias a API de personalizador de temas no necesitamos páginas de configuración en absoluto.

@slobodanmanic el Personalizador hizo que mi blog fuera inútil, lo cual también es algo bueno 🙂

– Konstantin Kovshenin (@kovshenin) 19 de diciembre de 2012

El blog en cuestión es la Galería de opciones de temas, un escaparate de “las mejores (y las peores) pantallas de opciones de temas de la ciudad”. Sobre todo lo peor, pero supongo que eso es lo que lo hizo popular. Según Konstantin, es Theme Customizer lo que lo hará obsoleto.

A lo largo de esta serie de publicaciones, echaremos un vistazo a los beneficios de usar Theme Customizer en las páginas de configuración “antiguas”, veremos cómo funciona Theme Customizer, veremos cómo puede extenderlo y finalmente crearemos el texto estándar del Theme Customizer que se puede usar con cualquier tema de WordPress. .

Beneficios del personalizador de temas

Ahora, no estoy diciendo que las páginas de configuración del tema sean (¿eran?) Todas malas; si se hacen bien, se sienten como una extensión natural del panel de WordPress, solo que hay algo mejor ahora. Lo que hace el Personalizador, en comparación con una página de configuración, es facilitar el proceso de configuración del tema quitando la venda de los ojos de la cabeza del usuario.

Si nunca lo vio en acción, este video de Otto es imprescindible:

Entonces, ¿qué es exactamente Theme Customizer? Según Codex:

La pantalla de personalización de temas (es decir, “Personalizador de temas”) permite a los administradores del sitio modificar la configuración de un tema y ver una vista previa de esos cambios en tiempo real.

Personalizador de temas en pocas palabras

Personalizador de temas tiene tres componentes principales: secciones, configuraciones y controles. Si Theme Customizer fuera una casa, su sala de estar sería una de las secciones, cada luz en ella sería un escenario y cada interruptor de luz un control. Es así de simple.

Para interactuar con el Personalizador de temas, debe conectarse a la acción personalizar_registro. Al hacer eso, cargarás $ wp_customize objeto, una instancia de WP_Customize_Manager clase que hace todo el trabajo pesado. Más sobre eso en la Parte 2 de esta serie.

Ya esta ahí

Si no desea interactuar con el Personalizador de temas y solo necesita dejar que lo haga en su tema, se vuelve aún más fácil. Cuando crea un tema desde cero, Theme Customizer ya estará allí, mostrando sus secciones integradas. De hecho, esto es lo que le llevará un index.php en blanco y un style.css sin nada más que líneas de encabezado de comentarios:

Personalizador de temas en un tema en blanco

Personalizador de temas en un tema en blanco

Claro, no hay nada para obtener una vista previa en esa captura de pantalla, porque index.php no hace nada, pero ese es el punto: si eres un desarrollador de temas, Theme Customizer simplemente grita “¡Siempre que estés listo!” así que no hay razón para no usarlo en su tema de WordPress.

Hay más secciones predeterminadas, pero solo aparecen si su tema las admite, aquí está la lista completa de secciones integradas:

  • Título y lema del sitio
  • Colores*
  • Imagen de cabecera*
  • Imagen de fondo*
  • Navegación*
  • Portada estática

Marcado las secciones aparecerán solo si su tema admite sus respectivas características, si desea que aparezca la sección Imagen de encabezado, todo lo que necesita es add_theme_support (‘encabezado personalizado’)

en algún lugar de su archivo functions.php.

Controles existentes

  • Con todas esas secciones integradas, debe haber algunos controles existentes (interruptores de luz, ¿recuerdas?) Para llenarlos. Esto es lo que WordPress le ofrece, listo para usar:
  • Campo de texto
  • Caja
  • Radio
  • Seleccione
  • Selector de color
  • Subir archivo
  • Carga de imagen
  • Imagen de fondo

Imagen de cabecera

Probablemente lo suficientemente bueno para la mayoría de los temas, pero si tu tema es especial (déjame adivinar, lo es, ¿no?) Y necesita algunos controles personalizados, también puedes hacerlo. La creación de controles personalizados es una de las cosas que cubriremos en esta serie, así que estad atentos.

Eso es todo por ahora

WordPress tiene actualmente dieciséis API (¡intente nombrarlas todas!) Y si las juzga por lo fáciles de usar que son y lo fácil que es saltar y comenzar a usarlas, ninguna se acerca a la API de personalización de temas.

¿Ya les hiciste un favor a tus usuarios y cambiaste de las páginas de configuración al Personalizador de temas? Si no es así, me encantaría saber por qué y si es así, ¿qué opinas hasta ahora?