Theme Customization de WordPress II

Theme Customization API de WordPressEste es el segundo tutorial sobre la API theme customization. En la entrada anterior vimos como crear nuestra plantilla base, una breve introducción a la API y los controles por defecto de WordPress. Ahora veremos como crear controles y secciones nuevas con varios ejemplos.

El Action Hook “customize_register”

Todo el código necesario para usar esta API debe estar en el fichero functions.php, así que creamos este fichero en el directorio raiz de nuestra plantilla. Dentro del fichero creamos una función llamada tuto_customizer_register_settings y la asociamos al hook customize_register (Si no sabes que es un hook puedes echar un vistazo a este artículo).

function tuto_customizer_register_settings( $wp_customize ) {

}
add_action( 'customize_register', 'tuto_customizer_register_settings' );

Vamos con los ejemplos:

Cambiar el color de la cabecera

Nos interesa cambiar el color de la cabecera, así que el primer paso consiste en crear un nuevo parametro (setting). Lo llamamos tuto_custom_header_h1_color. Este código lo colocamos dentro de la función tuto_customizer_register_settings:

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

Necesitamos el parámeto default que será el valor por defecto.

El segundo paso consiste en asociar un control a nuestro parámetro. Creamos un nuevo control, que en este caso será un selector de color que trae por defecto WordPress. Tambien colocamos este código dentro de tuto_customizer_register_settings:

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'tuto_custom_header_h1_color',
        array(
            'label'      => 'Color de la cabecera',
            'section'    => 'colors',
        )
    )
);

Este selector de color es una clase llamada WP_Customize_Color_Control y necesita varios parámetros para funcionar:

  • $wp_customize Es el objeto pasado por el hook customize_register
  • 'tuto_custom_header_h1_color' Es el parámetro/setting previamente registrado
  • label Es el nombre del control que se muestra en la página de personalización
  • section Es la sección donde ponemos el control ( colors es una sécción por defecto de WordPress).

Vemos como queda la página de personalización:

Theme Customizer Admin Page Color

Con esto WordPress ya sabe manejar nuestro control pero aún nos falta implementar el cambio de color. El color de la cabecera se cambia modificando el estilo de la página y la forma adecuada de hacerlo es utilizando el hook wp_head con un poco de código CSS y el parámetro tuto_custom_header_h1_color que hemos creado antes:

function tuto_customizer_css() {
?>
    <style type="text/css">

        .header h1 {
            color: <?php echo get_theme_mod( 'tuto_custom_header_h1_color' ); ?>;
        }

    </style>
<?php
}
add_action( 'wp_head', 'tuto_customizer_css' ); 

El hook wp_head introduce este código CSS dentro de las etiquetas <head> de la página, de esta forma cualquier cambio en nuestro control se reflejará en el blog. Ya podemos probar si funciona correctamente.

Theme Customizer Admin Page Color Testing

Vamos con otro ejemplo.

Cambiar la fuente de la cabecera

Como indica el título queremos cambiar la tipografía de nuesta cabecera, pero esta vez queremos el control dentro de una nueva sección. Primero creamos la nueva sección (igual que antes, todo el código va dentro de la función tuto_customizer_register_settings):

$wp_customize->add_section(
    'tuto_custom_fonts',
    array(
        'title'     => 'Fuentes',
        'priority'  => 200
    )
);  

El title es el título mostrado en la sección y priority es la posición dentro del menú (a menor prioridad más arriba en el menú).

Y ahora creamos el parámetro y su control asociado. En esta ocasión el control es un seletor con varias opciones para las fuentes.

$wp_customize->add_setting(
    'tuto_custom_header_h1_font',
    array(
        'default'   => 'times',
    )
);

$wp_customize->add_control(
    'tuto_custom_header_h1_font',
    array(
        'label'    => 'Fuente Cabecera',
        'section'  => 'tuto_custom_fonts',
        'type'     => 'select',
        'choices'  => array(
            'times'     => 'Times New Roman',
            'arial'     => 'Arial',
            'courier'   => 'Courier New'
        )
    )
);  

Este control lo metemos dentro de la nueva sección "section" => "tuto_custom_fonts"

Finalmente debemos implementar el cambio de fuente. Usamos de nuevo el hook wp_head y añadimos el CSS necesario para cambiar la fuentes:

function tuto_customizer_css() {
?>
    <style type="text/css">

        .header h1 {
            color: <?php echo get_theme_mod( 'tuto_custom_header_h1_color' ); ?>;
            font-family: <?php echo get_theme_mod( 'tuto_custom_header_h1_font' ); ?>;
        }

    </style>
<?php
}
add_action( 'wp_head', 'tuto_customizer_css' ); 

Vemos como queda:

Theme Customizer Admin Page Font Testing

Tipo de Controles

En el tutorial hemos visto dos tipos de controles, pero la API tiene unos pocos más:

  • text
  • Checkbox
  • Radio
  • select (usado en este tutorial)
  • dropdown-pages

También tenemos unos controles más “avanzados”:

  • WP_Customize_Color_Control Para seleccionar colores (usado en este tutorial)
  • WP_Customize_Upload_Control Para subir archivos
  • WP_Customize_Image_Control Para subir imágenes o seleccionarlas de la librería multimedia

Pero además podemos crear nuestros controles personalizados heredando de la clase WP_Customize_Control. Podemos ampliar información en este enlace.

Conclusión

En la siguiente entrada terminaremos la serie de tutoriales de esta API con los métodos de previsualización.

Puedes ver todo 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 *