Slider en cabecera para tema twentyeleven en WordPress

Muchas veces he utilizado como tema base para crear un template para WordPress, el tema twentyeleven, que viene por defecto en la instalación de la última versión.

Siempre había querido hacer un slider con las imágenes que se muestran en la cabecera y que son configurables desde Apariencia / Cabecera. El caso es que el otro día tuve que hacerlo para un cliente y, antes de ponerme a hacerlo desde cero, busqué un poco por si alguien lo había hecho ya, no es cuestión de ir reinventando la rueda porque sí.

El caso es que encontré un plugin que añade una opción más a la ventana de configuración de la cabecera para que esta se muestre como un slider, utilizando para ello el plugin para jQuery Nivo Slider (qué casualidad, porque yo iba a poner ese).

El caso es que después de instalar el plugin y de realizar un par de ajustes ya me aparecían las imágenes de la cabecera pasando de una a otra.

Ahora solo me hacía falta configurar mis imágenes para que salieran estas en lugar de las que vienen por defecto en twentyeleven.

Abrimos el archivo functions.php y al final del todo lo que haremos será:

  1. Deshabilitar las imágenes de la cabecera que vienen por defecto y…
  2. Habilitar nuestras imágenes habiendo subido previamente las nuevas al servidor via ftp

Para esto lo que habrá que hacer, como ya he dicho, es escribir el siguiente código al final de functions.php:

Con esto lo que hacemos es borrar las antiguas imágenes y poner cinco nuevas.

Mucha gente utiliza los child themes, o temas basados en otros, para crear modificaciones de estos. Yo no lo hago pero más que nada porque no me he puesto nunca. Simplemente me gusta enredarme con el código y crear un nuevo tema a partir del original, aunque igual lo de hacer un child theme sea mejor opción.

Espero que le sirva a alguien 😀

Act: Suelo dejar para el final el tema de hacerlo todo compatible a versiones antiguas de IE. En este caso IE7 no carga las imágenes. Por lo visto el utilizar la opción auto insert del plugin no le gusta mucho al dichoso IE y no carga bien. La solución es cambiar el código de carga de las imágenes directamente en el archivo header.php. Donde pone esto:

Por esta línea:

Con esto ya cargará bien las imágenes en IE7 y nos podremos olvidar del tema…

+ info: http://wordpress.org/extend/plugins/header-image-slider/
http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

Fancybox

Hasta ahora el mejor, más rápido y mejor diseñado lightbox like plugin que he usado. Con multitud de opciones de inicialización como poder poner las transiciones tanto de muestra como de ocultación de fotos, el formato del título, la posición de este y el estilo.

La agrupación de las fotografías en grupos no es nada nuevo, de hecho todo plugin de estas características que se precie debe tener agrupación para poder ir de foto en foto. Lo bueno que tiene este plugin es que combina con el plugin jquery.mousewheel para poder acceder a las diferentes fotos mediante la rueda del ratón. Además, si utilizas el modo elastic para las transiciones, si le das a cerrar la imágen hace el elastic-out (por llamarlo de alguna forma) a la imágen que estás viendo. Una chulada si usas un navegador como dios manda (en IE se ve a saltos, que raro).

Definitivamente lo voy a usar para mi próximo proyecto.

Un aplauso para los creadores de Fancybox.

Act: Le echaré un vistazo también a Facybox (notese que le falta una n) que parece ser que está basado en Fancybox y con el que es posible hacer lo mismo pero con cualquier elemento (div,li,etc…)