WordPress: creare slideshow avanzati con custom field, JSON e attributi di dati

WordPress: creare slideshow avanzati con custom field, JSON e attributi di dati

Se abbiamo creato uno slideshow con dei custom post type, potremmo voler associare delle animazioni diverse per ciascuna slide. In WordPress possiamo ottenere questo risultato usando i custom field, JSON e gli attributi di dati HTML5.

Vogliamo animare la caption di ciascuna slide. Partiamo da questi stili CSS:


.slide {
	position: relative;
	overflow: hidden;
}

.slide-caption {
	position: absolute;
	top: -9999px;
	left: -9999px;
	transition: all 2s ease-in;
}

Nel Loop dello slideshow dobbiamo reperire i due valori delle coordinate x e y dai custom field e memorizzarli come stringa JSON in un attributo di dati:


<?php

$post_id = get_the_ID();
$caption_x = (int) get_post_meta( $post_id, 'caption_x', true );
$caption_y = (int) get_post_meta( $post_id, 'caption_y', true );
$coords = array( 'top' => $caption_x, 'left' => $caption_y );

?>
<div class="slide">
	<!--...-->
	<div class="slide-caption" data-coords='<?php echo json_encode( $coords ); ?>'>...</div>
</div>

L'output JSON potrebbe essere:


{"top":110,"left":70}

Quindi con jQuery:


function animateCaption( currentSlide ) {
	var $caption = currentSlide.find( ".slide-caption" ),
		coords = JSON.parse( $caption.data( "coords" ) );
		
		$caption.css( coords );
}

Torna su