Uso avanzado de archivos adjuntos en WordPress - Creación de páginas de galería categorizadas

Este tutorial es el tercero de una serie compuesta de cuatro partes en la que aprenderás algunas técnicas para trabajar con imágenes en los adjuntos en WordPress que te proporcionarán opciones avanzadas.

En esta serie cubriré lo siguiente:

• Asignación de categorías y taxonomías a los adjuntos
• Realización de consultas de archivos de medios basándonos en su taxonomía de manera que puedas darles salida en un bucle personalizado que usa consultas de taxonomía para extraer imágenes que podamos mostrar en las páginas de archivos
• Adición de una imagen a una categoría o término de taxonomía como "imagen destacada" para dicha categoría o término

En la primera parte demostré cómo crear nuevas taxonomías para archivos adjuntos. En la segunda parte mostré cómo crear un archivo de plantilla personalizado para documentos y cómo añadir un bucle que muestre un enlace al archivo de medios para cada documento. En esta tercera parte crearé un archivo de plantilla personalizado para la taxonomía gallery-category, el cual mostrará en una página con estilo de galería todas las imágenes que tengan asignado un determinado término. Nota: si quieres aplicar categorías y etiquetas preexistentes a tus archivos de medios, consulta mi tutorial sobre la asignación de categorías y etiquetas a archivos adjuntos.

Lo que vas a necesitar

Para seguir este tutorial necesitarás lo siguiente:

• Una instalación de WordPress para desarrollo
• Acceso FTP (o MAMP o un software similar si estás trabajando de forma local)
• Un editor de código

En la primera parte cree un plugin para registrar las taxonomías y en la parte 2 cree un tema hijo del tema Twenty Fourteen con un archivo de plantilla para los documentos. En esta parte usaré ese tema y le añadiré otro archivo de plantilla.

Si vas a seguir esta serie, necesitarás los archivos fuente de la parte 2, ya que estos incluyen el plugin así como el tema en sí. Si creas un tema personalizado usando estos pasos que he descrito hasta aquí también necesitarás asegurarte que el plugin creado en la Parte 1 esté activado, el nuevo archivo de plantilla no funcionará si no lo está. También tendrás que añadir el archivo de las funciones de la parte 2 de este tutorial, o añadir la función que aparece en él al archivo functions de tu tema. El paquete de código de para este tutorial incluye el plugin y el nuevo tema hijo con ambos archivos de plantilla añadidos, que solo funcionarán si tienes el tema padre Twenty Fourteen instalado.

1. Crear el archivo de plantilla

En tu tema, crea un nuevo archivo llamado taxonomy-gallery-category.php. Esto mostrará archivos para los términos en la taxonomía gallery-category. Copia el código de tu archivo de plantilla document-category y edítalo para eliminar el bucle y altera la salida del título de página, o copia el siguiente código:

1

<?php

2

/**

3

 * template for displaying galleries

4

 * uses a custom loop which displays the attached image

5

 */

6

7

get_header(); ?>

8

9

<div id="main-content" class="main-content">

10

11

12

    <div id="primary" class="content-area">

13

		<div id="content" class="site-content" role="main">

14

15

		<header class="page-header">

16

17

			<?php $queried_object = get_queried_object();

18

				echo '<h1 class="page-title">Gallery - ' . $queried_object->name . '</h1>'; ?>

19

		</header><!-- .page-header -->

20

21

		</div><!-- #content -->

22

	</div><!-- #primary -->

23

	<?php get_sidebar( 'content' ); ?>

24

</div><!-- #main-content -->

25

26

<?php

27

get_sidebar();

28

get_footer();

29

?>

2. Añadir un bucle personalizado

El siguiente paso consiste en añadir un bucle. Este bucle mostrará la imagen dentro de un enlace que dirige a su página de adjunto. Después de la etiqueta de cierre </head>, añade lo siguiente:

1

<?php

2

    if ( have_posts() ) : ?>

3

4

		<section class="gallery <?php echo $queried_object->name; ?>">

5

6

			<?php // Start the Loop.

7

				while ( have_posts() ) : the_post(); 

8

9

				// define attributes for image display

10

				$imgattr = array(

11

					'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),

12

				); ?>

13

14

				<div class="gallery-image"><a href ="<?php echo get_attachment_link(); ?>"><?php echo wp_get_attachment_image( $post->ID, 'thumbnail', $imgattr ); ?></a></div>

15

16

				<?php endwhile; ?>

17

18

		</section>

19

20

21

	<?php else :

22

		// If no content, include the "No posts found" template.

23

		get_template_part( 'content', 'none' );

24

25

	endif;

26

?>

Este bucle es distinto en distintos aspectos al que aparece en el archivo que creaste la última vez:

• En lugar de usar una lista para contener los datos adjuntos, estás utilizando una serie de elementos div (con la clase gallery-image para aplicar estilo) dentro de un elemento de sección.
• En lugar de vincular al propio archivo adjunto, el enlace es a la página de archivos adjuntos, utilizando echo get_attachment_link()
• En lugar de ajustar este enlace alrededor del título del archivo adjunto, se vincula alrededor de la propia imagen, que se muestra mediante echo wp_get_attachment_image(). Esto tiene un atributo para la etiqueta alt que se establece mediante la variable $imgattr.

Esto muestra todas las imágenes en una página de archivo, como puedes comprobar en mi página de archivo para Birmingham que se muestra aquí abajo:

3. Aplicar estilo a la galería

En estos momentos mi galería no tiene muy buen aspecto mostrando todas las imágenes apiladas una bajo la otra, así que aplicaré algo de estilo. En la hoja de estilo de tu tema, añade lo siguiente:

1

 /* style gallery images */

2

.gallery-image {

3

    float: left;

4

	margin: 10px 2%;

5

}

Guarda ahora tu hoja de estilo y observa de nuevo la página de la galería. Ahora tiene mucho mejor aspecto:

Resumen

En esta parte de la serie te he mostrado cómo puedes usar una página de archivo para mostrar una galería consultando archivos adjuntos a través de un bucle personalizado. Esto te ahorra tener que crear manualmente un montón de galerías si tu sitio necesita incluir múltiples galerías que puedan contener una misma imagen. Simplemente carga tus imágenes, asignarles categorías, ¡y ya lo tienes! En la parte final de esta serie te mostraré cómo puedes asignar una categoría a una imagen y usarla eficazmente como imagen destacada para esa categoría.