Controles personalizados con Theme Customizer

En tutoriales anteriores hablé sobre la API Theme Customizer y cómo crear controles para la página de personalización. A veces estos controles a veces no nos gustan o sencillamente no sirven para nuestras necesidades. Con este tutorial explico cómo crear nuestros controles personalizados.

Si no conoces la API Theme Customizer es muy recomendable que eches un vistazo a la serie de tutoriales que publiqué en este blog:

Ejemplo de sidebar a la derecha o a la izquierda

Voy a crear el típico ejemplo de colocar la barra lateral a la derecha o a la izquierda. Si utilizo un control ya disponible como el boton radio quedaría asi:

boton radio tradicional

Pero quiero hacerlo más vistoso y dejarlo de esta otra forma:

boton radio personalizado con Theme Customizer

Primeros pasos

Como base de este tutorial voy a usar el tema _s. Como es un tema para empezar de cero viene sin ningún estilo, así que añadimos el siguiente código CSS (en el fichero style.css) para dar algo de estructura a la web.

.site-footer {
    clear: both;
    width: 100%;
}

/* Custom layout: right sidebar default */

.content-area {
    float: left;
    margin: 0 -25% 0 0;
    width: 100%;
}
.site-main {
    margin: 0 25% 0 0;
    background-color: #eee;
}
.site-content .widget-area {
    float: right;
    overflow: hidden;
    width: 25%;
    background-color: #aaa;
}

/* Custom layout: left sidebar option */

.sidebar-left .content-area {
    float: right;
    margin: 0 0 0 -25%;
    width: 100%;
}
.sidebar-left .site-main {
    margin: 0 0 0 25%;
}
.sidebar-left .site-content .widget-area {
    float: left;
    overflow: hidden;
    width: 25%;
}

Por defecto la barra lateral está a la izquierda y la clase sidebar-left la coloca a la derecha (la usaremos más adelante).

Código del control personalizado

El tema _s tiene un fichero llamado customizer.php donde va el código utilizado en la página personalización. Ahí es donde voy a colocar el control personalizado. Dentro de la función _s_customize_register sitúo el siguiente código:

class Tuto_Layout_Control extends WP_Customize_Control {

    public function render_content() {
        $name = '_customize-radio-' . $this->id;
        ?>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
        <?php foreach ( $this->choices as $value => $image ) : ?>
            <?php $class_selected = ( $this->value() == $value ) ? ' of-radio-img-selected' : ''; ?>
            <label>
                <input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> class="screen-reader-text" />
                <img src="<?php echo get_template_directory_uri() . '/inc/' . esc_html( $image ); ?>" class="of-radio-img-img<?php echo $class_selected; ?>"/>
            </label>

        <?php endforeach;
    }

    public function enqueue() {

        wp_enqueue_script( 'admin-customizer-control', get_template_directory_uri() . '/inc/' . 'custom-controls.js', array( 'jquery' ), '1.0.0', true );
        wp_enqueue_style( 'customizer-control-css', get_template_directory_uri() . '/inc/' . 'custom-controls.css' );     

    }
}

$wp_customize->add_section(
    'section_layout',
    array(
        'title'    => __( 'Layout', '_s' ),
        'priority' => 1,
    )
);

$wp_customize->add_setting(
    'sidebar_layout',
    array(
        'default'    => 'content-sidebar',
    )
);

$wp_customize->add_control(
    new Tuto_Layout_Control(
        $wp_customize,
        'sidebar_layout',
        array(
            'label'       => __( 'Default Layout', '_s' ),
            'section'     => 'section_layout',
            'choices' => array(
                'content-sidebar' => 'layout-content-sidebar.png',
                'sidebar-content' => 'layout-sidebar-content.png',
            )
        )
    )
);

Ahora explico el código en detalle.

Clase Tuto_Layout_Control

El nuevo control se crea con una clase que llamamos Tuto_Layout_Control que hereda de WP_Customize_Control. Esta es la forma que tiene WordPress para crear los controles personalizados. Esta clase contiene la función render_content que se encarga de generar el código html para visualizar el control en la página de personalización. En esta función se accede a varios parametros:

  • $this->choices. Son las opciones a elegir y se determinan al instanciar la clase.
  • $this->value. Es el valor elegido por el usuario.

La segunda función de la clase es enqueue que le dice a WordPress los ficheros javascript y CSS necesarios para el control. En este caso necesitamos fichero de cada uno:

  • Fichero javascript: /inc/custom-controls.js
  • Fichero CSS: /inc/custom-controls.css

Javascript para el control

Necesito un poco de javascript para que el control tengan un comportamiento igual que un botón radio. En este caso quiero que aparezca un marco en la imagen seleccionada.

jQuery(document).ready(function($){

    $('.of-radio-img-img').click(function(){
        $(this).parent().parent().find('.of-radio-img-img').removeClass('of-radio-img-selected');
        $(this).addClass('of-radio-img-selected');
    });

});

Este javascript lo ponemos en /inc/custom-controls.js.

Estilo CSS para el control

También necesito un poco de estilo para las imágenes, parar cambiar el puntero del ratón y además creo una clase para el marco de la imagen seleccionada.

/* Layout_Control in Customize screen */
.of-radio-img-img {
    border:3px solid #f9f9f9;
    margin:0 5px 10px 0;
    cursor:pointer;
    float:left;
}
.of-radio-img-selected {
    border:3px solid #ccc
}
.of-radio-img-img:hover {
    opacity:.8;
}

Este CSS lo ponemos en /inc/custom-controls.css.

Creación del control

Después de la clase Tuto_Layout_Control tengo tres apartados que se encargan de añadir el nuevo control.

  1. $wp_customize->add_section. Crea una sección nueva.
  2. $wp_customize->add_setting. Crea los parametros para control sidebar_layout.
  3. $wp_customize->add_control. Crea el control con sus opciones dentro de la nueva sección.

Si quieres ver en detalle como funciona este código lo puedes ver en este tutorial.

Cambiar la barra lateral de lado

Finalmente tengo que usar la clase sidebar-left que pone la barra lateral a la izquierda. Esta clase debo ponerla en el el contenedor id="content" dentro del fichero header.php. La linea que debo cambiar es:

<div id="content" class="site-content">   

por esta otra:

<div id="content" class="site-content <?php if ( get_theme_mod( 'sidebar_layout' ) == 'sidebar-content' ) echo 'sidebar-left'; ?>">   

La función get_theme_mod recupera el parámetro sidebar_layout de nuestro control personalizado que marca si debo poner la clase sidebar-left.

Como puedes ver WordPress nos permite crear controles personalizados sencillos como este tutorial, pero tambien podemos crearlos tan complejos como queramos. Pero siempre pensando en simplificar la experiencia del usuario final.

Puedes bajar el código en github

Deja un comentario

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