Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
Sácale partido al personalizador

Sácale partido al personalizador de WordPress

Con este título he tenido el honor y el privilegio de participar como ponente en la WordCamp Santander 2016.

El personalizador de WordPress apareció en la versión 3.4. Es un framework que permite previsualizar configuraciones de nuestro sitio. En el personalizador encontramos por defecto opciones de configuración como:

  • Identidad del sitio (título, descripción, logo…)
  • Gestión de Menús
  • Gestión de Widgets
  • Portada

 

Muchos temas y plugins utilizan el personalizador para ofrecer al usuario opciones de configuración propias como pueden ser:

  • Colores y estilos
  • API keys
  • Layouts
  • Claims

 

Consta de 4 Objetos:

  • Panels: son elementos contenedores de Sections. Un nivel adicional de jerarquía
  • Sections: son contenedores (UI) para Controls
  • Controls: son elementos (UI) para establecer datos. Inputs de diferentes tipos
  • Settings: son la asociación del Control con el dato que se almacena en BBDD.

 

objetos personalizador

 

¿Cómo empezamos?

Necesitamos crear una función en el archivo functions.php de nuestro tema o en nuestro plugin, y añadirla al hook customize_register

Importante

Es recomendable el uso de prefijos para cualquier ID de los objetos que vamos a crear a continuación para evitar conflictos

Cada objeto dispone de 3 métodos: add_, get_ y remove_

Podremos establecer el orden de nuestros elementos teniendo en cuenta que por defecto:

prioridad

 

Lo siguiente es pensar que tipo de configuración queremos utilizar: theme_mod u option. La primera es para almacenar datos de configuración inherentes al tema. Es decir, todo lo que guardemos ahí servirá sólo para el tema que tenemos activo. Si mañana cambiamos de tema no podremos acceder a esta información.

Por el contrario, si lo que estamos haciendo es un plugin, es conveniente guardar nuestros datos en options, de este modo estarán disponibles sea cual sea el tema que esté activo.

theme mods options

 

Añadiendo un Panel

Usando el método add_panel

 

Añadiendo un Section

Usando el método add_section

 

Añadiendo un Setting

Usando el método add_setting. Estableceremos el nombre y el tipo de dato que guardaremos en BBDD. Podremos establecer un valor por defecto y además validar y sanitizar el dato antes de guardarlo

 

Añadiendo un Control

Usando el método add_control. Al añadir el control lo asociamos al Setting. También indicamos a que Section pertenece, así como el tipo, título, descripción, etc…

 

Tipos de Controls

Podemos usar los siguientes tipos de controles:

  • HTML inputs: text, hidden, number, range, url, tel, email, search, time, date, datetime, y week (Dependiendo de la compatibilidad del navegador)
  • checkbox
  • textarea
  • radio (las opciones las pasaremos por el parámetro choices)
  • select (las opciones las pasaremos por el parámetro choices)
  • dropdown-pages
  • controles personalizados

 

 

Controles personalizados

Podemos crear Panels, Sections, Controls y Settings personalizados extendiendo las clases asociadas con cada objeto: WP_Customize_Panel, WP_Customize_Section, WP_Customize_Control y WP_Customize_Setting:

 

Validaciones

El personalizador nos permite validar y sanitizar nuestras opciones antes de guardar en base de datos

 

Multi Idioma

Tanto WPML como Polylang (dos de los plugins más usados para multi-idioma en WordPress) disponen de la función icl_get_languages para obtener los idiomas activos de un sitio:

Teniendo un array de idiomas, crearemos nuestras opciones recorriendo el array y añadiendo dinámicamente nuestros IDs el sujijo _{$language_code}

Aquí tienes las Slides:

Aquí tienes el vídeo de la ponencia:

Puede que también te interese

Cómo solucionar el error al establecer una conexión con la base de datos en WordPress
Cómo solucionar el error al establecer una conexión con la base de datos en WordPress
En alguna ocasión podemos obtener en pantalla el mensaje de Error al establecer una conexión con la base de datos. Este mensaje es bastante explícito…
Seguridad WordPress: cambiar el prefijo wp_ de la base de datos
Seguridad WordPress: cambiar el prefijo wp_ de la base de datos
Siguiendo la máxima de no dar facilidades a un posible atacante, una recomendación antes de instalar un WordPress es cambiar el prefijo de la base…
WP-CLI Parte 10, crea tus propios comandos
WP-CLI Parte 10, crea tus propios comandos
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…
Hacer una migración de dominio en WordPress sin perder posicionamiento
Hacer una migración de dominio en WordPress sin perder posicionamiento
En el artículo anterior vimos cómo migrar WordPress de hosting y de dominio. Puede darse el caso de que tu dominioantiguo.com estuviera bien posicionado y…