Cerrar
z

Cómo sacar partido al personalizador de temas de WordPress

Con WordPress 3.4 ha llegado una nueva característica que puede dar mucho de sí, dependiendo del tema que estemos desarrollando: El personalizador de temas de WordPress.

Vamos a ver primero de qué se trata.

Nuevo en WordPress: El personalizador de temas

Si tenéis WordPress actualizado a la versión 3.4 veréis que si hacéis click en el menú de la izquierda del Administrador en Apariencia/Temas aparecerá debajo de la descripción del tema que estéis usando un enlace nuevo: Personalizar.

Personalizar temas en WordPress

Si hacemos click en «Personalizar» veremos nuestro tema a la derecha y a la izquierda unas cuantas opciones de personalización. Dependerá de cómo esté creado nuestro tema para que se soporten las opciones. Podéis probar con el tema Twenty Eleven para ver cómo funcionan. También os recomiendo que leais el excelente artículo de Otto, que me ha servido de inspiración para hacer este.

Opciones de personalización de temas en WordPress

Por ejemplo, en Twenty Eleven, si hacemos click en «Colores» y seleccionamos en «Combinación de colores» la opción «Oscuro», vemos que a nuestra derecha cambia el estilo de nuestra web en tiempo real, para ver cómo queda antes de grabarlo. Hasta que no hagamos click en «Guardar y publicar» no se publicarán los cambios.

Combinación de colores en la personalización de temas de WordPress

¿Podemos incluir opciones personalizadas?

La gran noticia es que sí. Vamos a suponer que estamos creando un medio online en el que los usuarios pueden crear su blog (un caso real en el que estoy trabajando en estos momentos). Si queremos que los usuarios puedan personalizar su blog de una manera sencilla podemos aprovecharnos de esta nueva característica de WordPress.

El código que gestiona la personalización de los temas gira en torno a la variable $wp_customize y tres de sus métodos:

  • add_section, para añadir una nueva sección en las opciones de personalización que hay en el menú de la izquierda (las existentes por defecto son «Título del sitio y descripción corta», «Colores», «Layout», «Imagen de cabecera», «Imagen de fondo» y «Portada estática», tal y como vemos en la parte izquierda de la imagen anterior.
  • add_setting, que añade una nueva característica a personalizar (por ejemplo el color de los títulos, o el color de fondo de la página, etc..)
  • add_control, que muestra la nueva característica en el menú de opciones de personalización.

Vamos a suponer que queremos incluir diversas opciones para que el usuario pueda cambiar áreas y colores de la web. Empezamos por añadir la función que va a crear las opciones al action hook «customize_register» (todo lo que vamos a hacer irá en el archivo functions.php de tu tema):

Ahora comenzamos con la función principal:

A continuación, si queremos crear una nueva sección (supongamos que la llamamos «Nueva Sección»), hacemos :

Fijaos que en «nombredeltema» iría el nombre de vuestro tema. La prioridad (priority) es el orden en el que queréis que aparezca, donde 1 es arriba de todo y 120 es abajo de todo.

Si no queremos crear ninguna sección nos lo podemos saltar lo anterior, y así incluir la opción u opciones en una sección ya existente.

A continuación tenemos que añadir la nueva característica que queremos personalizar. Vamos a empezar suponiendo la opción mas sencilla: un texto que vamos luego a incluir en algún sitio del tema.

Como vemos, el método add_setting tiene dos parámetros, el ID único que le queramos dar (en nuestro caso «nombretema_theme_options[prueba_texto]») y un array con distintas opciones de configuración: un valor por defecto (en nuestro caso «Hola Mundo!«), el tipo es una opción (option) que se grabará en la tabla wp_options de la base de datos con la clave «nombretema_theme_options». Hay que tener en cuenta que se grabará de forma serializada en la base de datos, de tal manera que todas las opciones estarán en una sola entrada en la misma y se obtendrán en un array en el tema (tal y como veremos al final del artículo), lo cual es muy positivo para no hacer una llamada a la base de datos por cada dato que haya que recuperar. Si vemos en la base de datos en la tabla wp_options, veremos:

Pantalla de la tabla wp-options

A continuación vamos a añadir el «control»:

El control nos permite mostrar la nueva característica en el menú de opciones de personalización del tema. Se pasa de nuevo un ID único (que se añade al ID del HTML del menú, no sé si tiene alguna otra utilidad) y un array de opciones, que pueden ser:

  • label: La etiqueta o nombre que aparecerá en el menú.
  • section: La sección en la que queremos que aparezca., que puede ser una nueva (como hemos visto antes, hay que crearla con add_section), o una ya existente. Más abajo vemos las que hay.
  • type: Tipo de entrada, puede ser de texto (text), radio, checkbox y select. No se soporta áreas de texto (textarea).
  • settings: A qué característica corresponde (la que hayamos añadido con add_setting). Hay que poner el ID único de dicha característica.
  • choices: Sólo se usan en botones de radio y desplegables, como veremos más adelante.

Antes hemos visto que podemos usar una de las secciones ya existentes en lugar de crear una. Estas son:

  • Título del sitio y descripción corta: title_tagline
  • Colores: Pon en «section» colors
  • Layout: layout
  • Imagen de cabecera: header_image
  • Imagen de fondo: background_image
  • Portada estática: static_front_page

Vemos lo que sale:

Nueva sección en el área de personalización del tema de wordpress

Vamos a incluir más opciones, por ejemplo un color para el texto de las entradas del blog, y lo vamos a añadir a la sección de Colores (colors). Esta opción va a ser un poco más complicada, porque vamos a querer que nos salga la rueda de colores y que el texto cambie de color en tiempo real:

Cambio de color en la personalización de temas de wordpress

Comenzamos con el add_setting:

Como podéis ver, aquí el valor por defecto es un color (#8F8775). La última línea en el array (transport) es la que va a permitir que podamos ver los cambios en tiempo real.

Ahora añadimos el control:

Con la primera línea obtenemos la rueda de colores. En la sección vemos que elegimos una ya existente (colors).

Pero para poder ver los cambios en tiempo real vamos a necesitar un poco de Javascript, que vamos a situar en el hook del footer. Añadimos a continuación (todavía dentro de la función mitema_customize_register):

Como veis estamos llamando a la función styleblogs_customize_preview y la asigna al hook wp_footer. Vemos la función, que va ya fuera de mitema_customize_register:

Con esta función asignamos a todos los párrafos (etiqueta p) el color que estemos seleccionando con la rueda de colores.

Como podéis ver en este artículo de Abban podemos tener también checkboxes, desplegables, etc.

Cómo recuperar los valores

Estos están grabados, como ya comentamos, en la tabla options (wp_options si no habéis cambiado el prefijo) de vuestra base de datos.

Si queremos obtener todos los valores a la vez:

Esto último estaría en la plantilla de vuestro tema en la que necesitéis los datos. También puede ser que los necesitéis dentro de functions.php, por ejemplo para cambiar los estilos de la web. Podéis hacer una función que añada los nuevos estilos que habéis creado en el header de la web:

Simplemente hemos añadido en el header el nuevo estilo que hemos grabado para «p» en el menú de personalización del tema.

Moviendo el acceso al personalizador de temas

Es probable que el personalizador de temas esté demasiado escondido para nuestros clientes, ya que hay que acceder a Apariencia/Temas y encontrar ahí el mensaje. Podemos si queremos ponerlo como una opción más de la opción Apariencia. Para ello añadimos en functions.php sa siguiente función:

Comentarios

  • Luis

    Y como hago para que se restablescan todos los estilo como yo los diseño al principio? muchas gracias

    25 septiembre, 2012
    contestar
    • Luis

      Ya lo resolvi muchas gracias, estaba en las opcines de personalizar en una opción que dice fondo. Muchas gracias 🙂

      25 septiembre, 2012
      contestar
  • Rafa

    Colega se te olvidó poner la llave de cierre en el functions, lo digo por si a alguien más le ha pasado que no le funcione de primeras.

    22 diciembre, 2012
    contestar
  • Rafa

    Pero vamos muy buen tuto amigo 😀

    22 diciembre, 2012
    contestar
  • Marcelo Robledo

    Justo lo que estaba buscando!!!

    13 septiembre, 2013
    contestar
  • Daniel

    Tengo un problema con el personalizador, no actualiza lo que edito.

    27 octubre, 2015
    contestar
  • Marco

    Muy buen aporte , sabes necesito que no se muestre el «Theme» y eliminar la barra de «Widget» en el Personalizador. Saludos.

    24 noviembre, 2015
    contestar

Escribe un comentario