Pisito en Madrid

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

Estas últimas semanas he estado más desconectado de Twitter, de los blogs, he publicado menos en pisito… Pero todo tiene una explicación y es que he vuelto a algo con lo que no me ponía desde hacía tiempo: programar. Salieron dos proyectos de desarrollo en Wordpress en Social Noise y he estado sumergido en ellos. Uno ya ha sido lanzado, Las cosas de Robin, y otro pronto verá la luz El caso es que nunca había creado un theme desde cero y la verdad es que me ha encantado.

Podría escribir un libro con todo lo que he aprendo haciéndolo pero voy a ir paso por paso y empezar a descubrir cosillas que a lo mejor no sabéis y son realmente útiles y fáciles de implantar. Comienzo con los Campos Personalizados o Custom Fields. Cuando estás escribiendo un nuevo post en Wordpress, a final de esa página verás una sección con este nombre que te permite añadir un nombre y lo que quieras en una caja de texto.

Lo que se consigue con esto es asociar ‘algo’ a un post y ese algo se guardará bajo el nombre que queramos. Pongo un ejemplo práctico. Cada post del VideoPisito tiene un campo personalizado llamado video con la dirección a la miniatura que sale en el home de cada uno de los posts. De esta forma cuando Wordpress carga el listado de posts, accede a ese campo y saca su valor para cada uno de ellos y lo muestra.

Para el blog de Michael Robinson había que jugar mucho con este tipo de cosas. Sin ir más lejos en la barra lateral podemos encontrar un módulo con el último vídeo de apuesta, un listado con los últimos posts acompañados de una miniatura y el vídeo destacado de la semana. Podíamos hacer que esto fuera manual pero es mucho más práctico mediante campos personalizados, en uno poniendo el código del vídeo y en otro la URL de la miniatura. ¡La gran ventaja es que puedes asociar a un post lo que quieras y cuantos quieras!

¿Cómo funcionan? Pues muy sencillo: pincha en Nuevo dentro de campo personalizado en el editor de Wordpress, elige un nombre e introduce un valor, por ejemplo, miniatura y la URL de una imagen que quieras usar como miniatura. Ahora tendrás que ir al lugar donde quieres mostrarlas, por ejemplo en la barra lateral, y poner el siguiente código:

¡No os asustéis! Vamos a analizarlo. En las primeras tres líneas cargo los diez últimos posts (get_posts()) y para cada uno de ellos (foreach) uso la variable $post para cargar sus valores internos, entre ellos están los campos personalizados. En la siguiente línea extraigo el valor de mi custom field ‘miniatura’ (get_post_meta()) y lo almaceno en la variable $miniatura.

Luego lo que hay que hacer es imprimirlo y como podéis ver es sólo echo ($miniatura) en PHP dentro del campo src de la imagen, ya que en mi caso el campo personalizado almacenaba la URL de una imagen. Podéis ver también que uso funciones como the_permalink() o the_title() que imprimen la URL del post cargado y el título respectivamente.

El resultado de este código, con un poco de CSS y JQuery para el scrollbar dinámico, es el listado de los últimos posts con miniaturas que hay en la barra lateral del blog Las cosas de Robin.

Los campos personalizados tienen un potencial grandísimo, sobretodo para automatizar acciones que van asociadas a posts. Algo que recomiendo para desarrollar en Wordpress con agilidad es la familiarización con el Codex, donde están todas las funciones del CMS de Automattic. Dudas y críticas a los comentarios

En el rediseño de pisito he incluido cabeceras dinámicas, es decir, cada vez que entres saldrá de forma aletoria una imagen con una frase distinta en la parte superior del blog. También he hecho lo mismo con la mascota de pisito, el caracol. Poco a poco iré añadiendo nuevos así que si tienes frases o ideas para el Sr. Snails, puedes comentarlas en este post. El caso es que he recibido algunos emails y tweets preguntando cómo hacerlo. El proceso es muy sencillo.

Los pasos a seguir con PHP son:

• Nombra las imágenes que tengas con el mismo nombre pero añadiendo un número al final, de forma consecutiva, y súbelas al mismo directorio en tu servidor.
• Genera un número aleatorio entre 1 y el número de imágenes distintas que tengas, y guárdalo en una variable. Esto en PHP se lleva a cabo con la función rand(1,número de imágenes).
• Mediante HTML muestra la imagen, pero a la hora de poner el número tendrás que usar la variable de PHP con el número aleatorio.

Aquí tienes un ejemplo del código completo. Como es Wordpress he usado funciones para mostrar la descripción (bloginfo(’description’)), la url de la imagen (bloginfo(’template_directory’)) y el nombre del blog (bloginfo(’name’)) de forma automática pero sino lo único que tienes que hacer es cambiar esas partes de forma manual. De esta forma mostrarás cabeceras, mascotas y cualquier imagen de forma aleatoria. ¿Fácil, no?