Hace casi un mes desde que salió mi segundo theme de WordPress, desarrollado desde cero en Social Noise, esta vez para el blog de SAAB, Move Your Mind. Me encantó el resultado conseguido con El Blog de Robin pero este me fascinó. Rompe por completo con la estructura blog, tiene muchos pequeños detalles (como poner un poco de transparencia a la categoría que no estás visitando) y contiene una miniweb dentro de la categoría Saab.

Para desarrollar el theme tuve que valerme mucho del ingenio pero como WordPress es totalmente abierto y tiene una documentación espléndida, salió adelante sin muchas complicaciones. Un obstáculo que me encontré fue facilitar la gestión del blog a un editor. Cuando diseñas un nuevo theme con muchas pijadas tienes que pensar en la persona que va a gestionarlo. Es fácil modificarlo accediento por FTP y tocando el código pero no todo el mundo tiene conocimientos para hacerlo. Es en este punto es donde entran los Widgets.

Los Widgets son pequeños módulos que se gestionan desde el panel de administración de WordPress. Hay de todo, desde uno que muestra lo últimos comentarios hasta otros que permiten introducir código HTML. Estos últimos son los que nos valdrán para conseguir que la persona que gestione el blog sólo tenga que modificar el código HTML de un Widget en concreto para cambiar alguna zona dentro del theme. Por ejemplo, si en algún lado del theme hay una imagen que se cambia de forma manual, lo que tendremos que hacer es crear una nueva zona de Widgets y jugar con éstos, permitiendo gestionarlo todo desde el panel de administración de WordPress.

Crear una nueva zona de Widgets

Entre los archivos que componen un theme de WordPress encontrarás uno que se llama functions.php. Éste contiene las funciones propias del theme y entre ellas las zonas de Widgets. Si lo abres encontrarás el siguiente código (entre otras cosas):

Esto normalmente corresponde a la barra lateral (sidebar). Si queremos añadir nuevas secciones lo único que tendremos que hacer es incluir justo debajo, pero dentro de las etiquetas php, el mismo código pero con un nuevo campo: name. Este campo debe ser descriptivo y será la clave para llamar a la zona de Widgets. Además puedes definir el código HTML que tendrá antes y después de cada Widget y antes y después del título. Este por ejemplo sería para el pie (footer).

Colocar las nuevas zonas de Widgets

Ya tenemos una nueva zona de Widgets, si entramos en el panel de administración de los Widgets veremos que hay una nueva sección, pero ahora falta situarla en el theme. El proceso es muy sencillo y lo ilustraré con un ejemplo. Imagina que en el footer tienes una imagen que quieres que el editor del blog la gestione de forma fácil a través de un Widget. Pues lo que haremos es sustituir la URL de la imagen por:

Esto llama a la zona «Footer» de Widgets y carga el código que esta tenga. Vete a Widgets dentro del panel de administración e incluye un Widget de Texto/HTML en la sección correspondiente con la URL de la imagen. El resultado es que se mostrará la imagen que el editor ponga en dicho Widget. Así de sencillo 🙂

ThemeLab

Artículos relacionados:

Tutorial WordPress: uso de los campos personalizados Tutorial: novedades y configuración del OS X Mountain Lion Tip: crea tonos para iPhone con Spotify Tip: ¿Por qué Facebook no detecta el thumbnail de mis posts?