Cómo integrar una galería Flickr en WordPress y configuración desde la administración – Parte 1

Inicio » Tecnología » Diseño Web » Cómo integrar una galería Flickr en WordPress y configuración desde la administración – Parte 1

Anteriormente les mencioné como elaborar un custom post type para mostrar las entradas de facebook en una web, y también les comenté que me encontraba realizando una galería flickr para mostrarla en una página WordPress, no me atrevía a publicar el desarrollo de esta galería debido a que aún no estaba completada, habían algunas cosas que quería hacer y que no funcionaban y quería brindarles todo de la mejor manera posible.

Debido a que la galería la tengo integrada de tal forma que es activada y configurada desde la opciones del theme al que se integra, he decidido ampliar el título del artículo y no quedarme únicamente en la explicación del desarrollo de la galería, si no también cómo integrarla con un sistema de administración.

El primer paso es conseguir el script phpFlickr, que lo puedes descargar desde la siguiente dirección: phpFlickr 3.1

Una vez descargado el archivo, lo descomprimimos y dentro de la carpeta encontraremos varios archivos, el que necesitaremos es el archivo phpFLickr.php, este archivo lo copiamos dentro de la carpeta de nuestro theme.

Creación de la plantilla personalizada para la galería Flickr

Debemos crear una plantilla personalizada de página, a la que podemos llamar “Galería Flickr” o el nombre que ustedes deseen, lo importante es ponerle un nombre para poder identificarla. Para la plantilla personalizada que vamos a elaborar de preferencia utilicemos un archivo que no incluya el sidebar, para el ejemplo he editado mi plantilla de page.php y le he quitado el sidebar.

Para convertir un archivo de página normal (eg. page.php, archive.php, etc.), lo único que debemos hacer es modificar la función que carga el header.php e indicar el nombre de la plantilla.

Integración de phpFlickr con la página personalizada

Ahora que ya contamos con nuestra plantilla personalizada, debemos hacer la integración de phpFlickr, a estas alturas si deseamos podemos crear una página, seleccionando la plantilla personalizada que acabamos de crear.

Debajo de la denominación del nombre de la plantilla, debemos insertar el código de integración, de tal manera que nuestro encabezado quede de la siguiente manera:

Como ustedes pueden apreciar, la integración es bastante sencilla, en la línea 5 cargamos el archivo phpFlickr.php que hemos copiado a la carpeta de nuestro theme, en la línea 7, se nos pide indicar el API Key de nuestra cuenta y en la línea 8 nos pide indicar el ID del usuario, que normalmente tiene el formato: 12345@NDS (parecido), y para mostrar la galería, se debe utilizar el siguiente código:

Vamos a destripar por así decirlo este código para poder entenderlo y ver específicamente que es lo que necesitamos:

En la línea 1, tenemos que indicar el ID del set de imágenes; en Flickr llamamos set a un conjunto o album de imágenes, cada album o set tiene un ID único.

Las demás líneas lo que hacen son el código encargo de mostrar las imágenes y darles el formato, inclusive podemos cambiar la calidad de imagen que queremos cargar, esto lo hacemos modificando esta parte del código:

Hasta aquí si bien es cierto a estas alturas nuestra galería ya se encuentra funcionando, ustedes pueden brindarle el formato que desean o si desean podemos realizar algunos procesos más que nos permitan automatizar y configurar desde la administración, ya que si lo dejamos hasta este punto, tendríamos que especificar el API key, el ID del usuario y el ID del set de imágenes de forma manual, y dependiendo del slider que utilicen, tendrían que crear diferentes bloques de código para cada set de imágenes, ya que de la forma como está sólo mostraría un solo set.

Una vez hemos definido esto, nuestra meta a partir de este punto es realizar lo siguiente:

  • Elaborar un slider con la galería flickr, tenemos que saber que tipo de slider o galería de imágenes vamos a utilizar, para desarrollar mi galería he buscado y probado todo tipo de sliders, pero el que vamos a utilizar nos permitirá mostrar: un listado de sets o albums a manera de tabs, y al pulsar sobre e icono o título del set cargarán las imágenes del set en cuestión, y al pulsar sobre cada imagen o thumbnail del set, se mostrará la imagen grande que se cargará con fancybox.
  • Carga de sets desde la administración, para ello crearemos un custom post type específico para la galería, con un metabox desde el que deberá indicar el ID del set que vamos a mostrar.
  • Configuración desde la administración, para el ejemplo les voy a brindar el código de mi plantilla para personalización del theme (tómenlo como un regalito, es difícil encontrar algo así por la red que sea fácil de entender al menos), las opciones del theme para la galería serían mostrar u ocultar el custom post type correspondiente a la galería, esto quiere decir que el usuario podrá indicar si quiere o no utilizar la galería. Para poder utilizar la galería el usuario tendrá que indicar desde la administración el API key y el ID de usuario, esto facilitará a que el usuario no se vea en la engorrosa tarea de estar editando los archivos del theme.
  • Automatización de procesos, una vez activada la opción de galería desde la personalización del theme, se mostrará el custom post type y acto seguido se creará la página correspondiente para la galería con su correspondiente plantilla personalizada.

Para que puedan ver como quedaría nuestra galería una vez terminada, nos podemos dar un paseo por http://tba.cl/web/galeria

El día de mañana o dentro de la semana estoy publicando la segunda parte con el desarrollo de todos los procesos antes indicados.

Probando si se muestra seleccin de Google Adsense

Deja un comentario