Creando tu propia plantilla para una página de galería de imágenes en WordPress

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Hoy voy a guiarte a través de la creación de una plantilla personalizada para páginas de tipo "galería" en WordPress. Recuerdo en el pasado querer implementar una galería en mi tema y sentirme frustrado con las opciones. La galería incorporada de WordPress funciona bien, pero la mayoría de las veces no es del todo ideal. Además, los complementos como la galería NexGen a menudo son más de lo que necesitas o deseas. Te mostraré lo fácil que es crear una página de plantilla para una galería que puedes ajustar y modificar fácilmente para futuros temas o versiones.

Descripción general

A través del tutorial, voy a mostrarte cómo crear una plantilla de galería en el tema incluido con WordPress, TwentyEleven. Puedes usar cualquier tema que desees, pero en pro de este ejemplo estoy usando TwentyEleven.

Paso 1. Duplica la plantilla de página existente

Entra al directorio del tema al que quieras agregar la plantilla de galería, wp-content/themes/{theme}. Localiza page.php, cópialo, pégalo y cambia su nombre a template-gallery.php. Para las plantillas personalizadas, me gusta agregar el prefijo "template-" ("plantilla-"), ya que facilita su búsqueda.

Paso 2. Define la plantilla de la galería

WordPress reconoce definiciones de plantillas en el encabezado de los archivos de plantilla de los temas. Para definir la plantilla, debes agregar un comentario PHP como en el ejemplo a continuación. Para hacer eso, abre template-gallery.php que acabas de crear y agrega el bloque de comentario que especifica el nombre de la plantilla.

	<?php
	/*
	Template Name: Gallery Page
	*/
	?>

http://codex.wordpress.org/Theme_Development#Custom_Page_Templates

Paso 3. Edita la plantilla para cargar imágenes de página

WordPress procesa los archivos adjuntos a las páginas como entradas post_type - attachment, con la página como el padre. WordPress tiene una función integrada para consultar entradas que son hijas de una página específica, post/post_type. get_children();, y esta acepta todo tipo de parámetros para recuperar contenido de los hijos asociados a un padre. Consulta la documentación en http://codex.wordpress.org/Function_Reference/get_children. Esta función de WordPress nos permite recuperar archivos adjuntos fácilmente para una página específica.

Para nuestra galería, queremos que las imágenes aparezcan antes del contenido. Así que vamos a cargar las imágenes de la página en el loop de esta última, pero antes del contenido. Para TwentyEleven puedes colocar el fragmento de código justo debajo de <?php the_post(); ?>. En otros temas, puedes insertar el código en el loop de arriba <?php the_title(); ?>. Consulta el código a continuación para ver cómo se implementa get_children( $args ); y lee la explicación posterior.

	<?php

	$args = array(
		'numberposts' => -1, // Using -1 loads all posts
		'orderby' => 'menu_order', // This ensures images are in the order set in the page media manager
		'order'=> 'ASC',
		'post_mime_type' => 'image', // Make sure it doesn't pull other resources, like videos
		'post_parent' => $post->ID, // Important part - ensures the associated images are loaded
		'post_status' => null,
		'post_type' => 'attachment'
	);

	$images = get_children( $args );
	// continued below ...
	?>

Explicación de $args

'numberposts': podemos definir la cantidad de imágenes que la función recupera. Para consultar todas las imágenes, usa -1.
'orderby': podríamos ordenar por título o fecha u otra opción, pero el beneficio de 'menu_order' es que el orden en el administrador de medios de la página será el orden en el que se cargan las imágenes.
'post_mime_type': solamente queremos las entradas que son 'images'.
'post_parent': queremos recuperar los hijos de la página actual. Podemos acceder a la variable global $post y a su propiedad ID para enviarla como parent_id.
'post_type': 'post_mime_type' se encarga de garantizar que solamente se recuperen imágenes, pero definir 'post_type' como 'attachment' ayuda a reducir la consulta.

Verifica que la entrada tenga imágenes y un loop.

Después de que get_children( $args ); consulte los archivos adjuntos y devuelva los valores, es conveniente verificar que la consulta haya devuelto resultados. Algunas páginas podrían no tener imágenes adjuntas y no necesitamos recorrer resultados vacíos con un bucle. Usaremos una sentencia condicional para ver si $images devuelve un valor, y si es así, entonces sabemos que la página tiene archivos adjuntos y después podemos recorrerlos con un bucle.

	// continued from above ...
	if($images){ ?>
	<div id="slider">
		<?php foreach($images as $image){ ?>
		<img src="<?php echo $image->guid; ?>" alt="<?php echo $image->post_title; ?>" title="<?php echo $image->post_title; ?>" />
		<?php	} ?>
	</div>
  	<?php } ?>

Para cada archivo adjunto de imagen queremos desplegar una imagen. Cada objeto $image tiene varias propiedades a las que puedes acceder y que puedes mostrar. Lo más importante de este ejemplo es la fuente de cada imagen, que es la propiedad guid. Para fines de accesibilidad y SEO, podemos desplegar el título de la imagen y colocar los atributos alt y title de las imágenes.

Paso 4. Agrega el complemento JavaScript para galerías

Para el siguiente paso vamos a agregar un complemento jQuery para darle vida a nuestra galería. El complemento que vamos a usar es Flux Slider, un complemento Javascript/jQuery de tipo slider. Descarga el código fuente y coloca flux.min.js dentro de la carpeta wp-content/themes/{theme}/js. Ya que estoy usando el tema TwentyEleven, jQuery no está incluido del lado público, por lo que tendré que asegurarme de incluirlo. Si estás usando un tema diferente, asegúrate de que jQuery esté cargado.

Edita footer.php

Incluye jQuery (si aún no está incluido) y el script flux.min.js en el pie de página; asegúrate de que flux.min.js esté debajo de la inclusión de jQuery, pero antes de la función wp_footer();.

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="<?php bloginfo('template_url');?>/js/flux.min.js"></script>
	<script>
		window._flux = new flux.slider('#slider',{pagination: true});
	</script>

	<?php wp_footer(); ?>

Fin

Como puedes ver, es bastante sencillo recuperar imágenes adjuntas a una página y personalizar su salida. Puedes incluir fácilmente este mismo loop en entradas o en un tipo de entrada personalizada.

Puedes cambiar fácilmente el complemento jQuery por otra opción de tu elección. Todo lo que tienes que hacer es editar el HTML del loop con el marcado apropiado e incluir el complemento.

WordPress es muy flexible, ¡y este es otro ejemplo de lo sencillo que es construir con él!