Theme Customization de WordPress III

Theme customization de WordPressCon este tutorial finalizamos la serie que trata el desarrollo con la API theme customization de WordPress. Hasta ahora hemos aprendido a crear parámetros, controles y secciones para la página de personalización. En esta ocasión veremos los métodos de previsualización.

Recordemos que la página de personalización muestra dos apartados:

  • A la izquierda un menú con las opciones de personalización.
  • A la derecha la previsualización de tu página web.

Cualquier cambio en las opciones actualizará la previsualización. En este tutorial veremos que WordPress tiene dos métodos para actualizar la previsualización:

  • ‘refresh’
  • ‘postMessage’

Metodo ‘refresh’

El método ‘refresh’ es utilizado por defecto. Con este método WordPress hace un refresco de toda la previsualización, es decir cada vez que cambiamos una opción se vuelven a cargar todos los elementos de la página. El problema de este método es el tiempo de recarga, cuanto más elementos tenga la página, más tiempo debe esperar el usuario para ver los cambios.

Metodo ‘postMessage’

El método ‘postMessage’ permite más agilidad en la previsualización. No hará una recarga de toda la página, tan sólo cambia el elemento HTML necesario. Para utilizar este método hay que escribir algo de código Javascript, pero WordPress nos lo pone muy fácil.

Partimos del código del tutorial anterior. Abrimos el fichero functions.php y nos dirigimos a la función tuto_customizer_register_settings donde se configuran las opciones de personalización.

Nos centrarnos en la opción tuto_custom_header_h1_color, que cambia el color de la cabecera:

$wp_customize->add_setting(
    'tuto_custom_header_h1_color',
    array(
        'default'     => '#000000',
    )
);  

Para configurar el método de previsualización necesitamos la variable 'trasnsport'. El código anterior no tiene esta variable, por lo que está usando el método por defecto 'refresh'. Así que lo cambiamos a postMessage añadiendo esta línea: 'transport' => 'postMessage'.

$wp_customize->add_setting(
    'tuto_custom_header_h1_color',
    array(
        'default'     => '#000000',
        'transport'   => 'postMessage'
    )
);  

Código Javascript necesario

Ahora necesitamos implementar una función Javascript que realice los cambios en los elementos de la página. Creamos un fichero llamado theme-customizer.js con el siguiente código:

(function( $ ) {
    "use strict";

    // Cambiamos el color de la cabecera
    wp.customize( 'tuto_custom_header_h1_color', function( value ) {
        value.bind( function( to ) {
            $( '.header h1' ).css( 'color', to );
        } );
    });

})( jQuery );

La función wp.customize contiene dos parámetros:

  • El nombre de la opción del customizer, en este caso tuto_custom_header_h1_color
  • Una función que cambia el elemento HTML de la página

Como podemos ver, usamos JQuery para la selección del elemento HTML, en este caso .header h1, y con la función css( 'color', to ) cambiamos el 'color' del elemento con el valor seleccionado por el usuario to.

$( '.header h1' ).css( 'color', to );   

Encolar el fichero Javascript

Por último debemos decirle a WordPress que necesitamos el fichero theme-customizer.js para la previsualización. Así que usamos el hook customize_preview_init:

function tuto_customizer_live_preview() {

    wp_enqueue_script(
        'tuto_customizer_live_preview',
        get_template_directory_uri() . '/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        '1.0.0',
        true
    );

}
add_action( 'customize_preview_init', 'tuto_customizer_live_preview' );

Esta función la podemos usar en el fichero functions.php

La línea array( 'jquery', 'customize-preview' ), indica a WordPress que nuestro Javascript depende de las librerías jquery y customize-preview. Sin estas librerías no puede funcionar.

Ahora ya podemos ver cómo funciona la página de previsualización.

Conclusión

La página de personalización aporta una experiencia de usuario muy dinámica. No debemos olvidar implemetar este apartado en nuestros temas, sobre todo para las opciones visuales de la web. Para otras opciones que no cambian el aspecto de la web sería mejor usar las opciones de tema.

Puedes ver el código del tutorial en github

Comentarios

  1. Tengo un website que quiero pasar a WP y mi problema radica en que tiene al menos 10 temáticas diferentes y necesito que al hacer click en un menú se vaya a la temática deseada pero no quiero que todo se entrevere como sucede con las entradas que se agregan en base a la fecha u orden:
    Es decir, necesito que cada temática sea independiente de las demas y al mismo tiempo sea independiente de la home page.
    No me importaria demasiado si el top debe ser el mismo en todos los temas
    ————————–
    El sitio está realizado actualmente con directorios con nombres independientes y temáticas independientes cada uno con su apariencia y todos tienen un link en la home page. El problema es que tiene muchos errores de de maquetación etc y se complica para verlo en tablet y móviles y son demasiadas páginas para corregir porque he ido agregando y reparando mientras aprendía solo CSS y html
    Muchas gracias por su sugerencia y su tiempo

    1. Hola Jorge

      Tienes varias formas de hacerlo y viendo tu web creo que lo mejor es crear un WordPress multisite. Cada “temática” sería un WordPress independiente (todos colgando de tu dominio principal) y con la opción de poner un theme diferente para cada uno.

  2. gracias por responder
    pensé esa opción pero seria una locura atender 6 o 7 temáticas con sus plugins y demás problemas sin contar que no tengo pagas tantas bases de datos y si usara una sola ésta pesaría un montón de mb

    el problema es que no encuentro la manera de separar o agrupar las páginas de los temas, o sea que no se mezclen

    1. Un WordPress multisite sólo necesita una base de datos, tiene un superadministrador para todos sus sitios web, y lo administras todo de forma centralizada. Al principio puede ser todo un poco duro configurarlo todo pero creo que compensa.

      Hay plugins para crear categorías y tags para páginas. Quizás así puedas agruparlas

Responder a jorge Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *