WordPress: creare una galleria di immagini personalizzata per ciascun post

In questo articolo vedremo come creare la struttura HTML per una galleria di immagini da inserire nei vostri post di WordPress. Ovviamente alla galleria andranno aggiunti gli opportuni stili CSS e gli effetti JavaScript. Il codice che presenterò è ampiamente commentato. Vediamone insieme i dettagli.

Come prima cosa, associate ad un post le immagini che desiderate e create una galleria utilizzando le opzioni della Media Library. Quindi aggiungete al file functions.php il seguente codice:

function my_gallery() {

	global $post;

	$args = array(
		'post_parent'    => $post->ID,			// Per il post corrente
		'post_type'      => 'attachment',		// Allegati del post
		'post_mime_type' => 'image',			// Solo le immagini
		'order'			 => 'ASC',				// Elenco ascendente
		'orderby'        => 'menu_order',		// Elenco secondo l'ordine del menu
		'numberposts'    => -1, 				// Tutti gli allegati
		'post_status'    => null,				// Per tutti i tipi di post
	);

	// Prendiamo gli allegati con una query
	$attachments = get_posts($args);
	
		// Se ci sono allegati, allora:
		if ($attachments) {	

			// Inizializziamo un contatore per controllare l'indice delle immagini
			$count = 0;
			
			// Un loop tra le immagini allegate
			foreach ($attachments as $attachment) { 
				 		
				// La prima immagine sarà quella centrale grande
				
				if($count == 0) { ?>
				
					
					

						
						
						


								
								
								< ?php $default_attr = array(
										'id' 	=> "test",
										'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),
										'title' => trim(strip_tags( $attachment->post_title )),
									);
								?>

								
								
								< ?php echo wp_get_attachment_image($attachment->ID, 'full', false, $default_attr); ?>

								
								


								
								
								< ?php echo $attachment->post_title; ?>

								

						
						

						
						

				
				< ?php } ?> 

						
						
						


							< ?php if ($count==0) {

									// Alla prima thumbnail diamo una classe speciale
									
									$thumb_attr = array(
										'class' => "thumb selected",
									);

								} else {

									// Alle altre thumbnail diamo una classe predefinita
									$thumb_attr = array(
										'class' => "thumb",
									);

								} ?>
					
							
							
							< ?php echo wp_get_attachment_image($attachment->ID, 'thumbnail', false, $thumb_attr); ?>
			
						
				
				
				
				< ?php $count = $count + 1; } ?>
						
			
					
	
			
				
				
	< ?php }

}

// Creiamo lo shortcode

add_shortcode('my-gallery', 'my_gallery');
?>

Possiamo utilizzare lo shortcode in questo modo:

[my-gallery]