Theme Customization de WordPress I

Theme Customizer De WordPressEn entradas anteriores hemos visto como usar varias APIS de WordPress; Widgets y Options. Ahora nos toca ver Theme Customization API. Esta API toca todo lo relacionado con la página de administración Personalizar.

La página de Personalizar nos muestra dos secciones, una sección con los parámetros que nos permite modificar el aspecto de nuestra plantilla, y otra sección con la previsualización de nuestra web. Este apartado de WordPress nos permite experimentar con el aspecto de nuestra web sin estropear nada. Cuando consigamos nuestro aspecto definitivo podemos Guardar y publicar.

Theme Customizer Admin Page

Veremos como usar esta API en dos entradas. En esta primera crearemos una plantilla muy básica y veremos una introducción de los componentes de Theme Customization. Y en la segunda entrada integraremos esta API en nuestra plantilla con varios ejemplos prácticos.

Plantilla base

Necesitamos una plantilla WordPress para este tutorial, una muy sencilla que no desvíe la atención del objetivo principal del tutorial. Sin entrar en cómo crear plantillas de WordPress podemos decir que tan solo hacen falta cuatro ficheros:

  • style.css
  • header.php
  • index.php
  • footer.php

style.css Fichero con los datos de la plantilla y su estilo:

/*
Theme Name: Tutorial Customizer
Theme URI: http://github.com/pintomena/tuto_customizer
Version: 0.4.0
Description: Plantilla usada como base para el tutorial "Customizer con WordPress" del blog http://bitado.com/blog/
Author: Pedro Pinto
Author URI: http://bitado.com/theme-customization-de-wordpress-i/
License: GPLv2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

header.php Fichero con la cabecera común a todas las páginas de la web:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php wp_title(); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    <div class="header">
        <h1>
            <?php bloginfo( 'title' ); ?>
        </h1>
        <h2>
            <?php bloginfo( 'description' ); ?>
        </h2>
    </div><!-- /.header --> 

index.php Fichero que normalmente contiene el loop (en este caso no lo vamos a poner para simplificar):

<?php get_header(); ?>

    <div class="content">
        Éste es el contenido.
    </div><!-- /.content -->

<?php get_footer(); ?>    

footer.php Fichero con el pié de página común a todas las páginas:

        <div class="footer">
            &copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'title' ); ?>
        </div><!-- /.footer -->
        <?php wp_footer(); ?>
    </body>
</html>   

Componenetes de Theme Customizer

Para generar la interface de Theme Customizer es necesario utilizar tres componentes de la API:

  • Sections
  • Controls
  • Settings

En esta captura de pantalla podemos ver cada componente:

Theme Customizer Components

Sections

Las secciones son una forma de agrupar los settings. WordPress trae por defecto una serie de secciones que veremos más adelante.

Controls y Settings

Los controles son elementos HTML como campos de texto, de selección, etc… que permiten al usuario modificar un parámetro que cambia el aspecto de la web. Y ese parámetro es un setting. Así que normalmente asociaremos un control con un setting.

Secciones por defecto

La instalación de WordPress trae varias secciones por defecto:

  • Título del sitio y descripción corta. Donde obviamente se cambian estos datos.
  • Portada Estática. Donde puedes seleccionar la página para la portada y para las entradas del blog.

Además podemos activar varias secciones más de forma muy sencilla:

  • Colores. Esta sección aparece si añadimos soporte custom-background con default-color
  • Imagen de fondo. Aperece si añadimos soporte custom-background con default-image
  • Navegación. Aparce al registrar una localización para menús register_nav_menus(...)

Próxima entrada

En la siguiente entrada veremos como usar estos componentes, añadiendo nuevas secciones, controles y settings. También explicaremos las dos formas que tiene esta API de previsualizar los cambios.

Deja un comentario

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