jQuery Cycle YouTube avec Advanced Custom Fields pour WordPress

Combiner des images et des vidéos dans un carrousel avec l’incontournable Advanced Custom Fields, le tout sous WordPress et avec prise en charge responsive : tel est l’objectif de ce tutoriel.

Pour rappel, jQuery Cycle 2 est un script léger pour générer des diaporamas de toute sorte. Compatible HTML5, il offre à mon sens bien plus de facilité d’usage que Flexslider – un bon script néanmoins.

Résultat final

Étape n°1 – Créer les champs ACF

Seulement 2 champs sont nécessaires : un champ Galerie et un champ oEmbed pour la vidéo.

Le premier va nous permettre d’importer et de gérer l’ordre d’affichage des images dans le carrousel. Le second permettra à l’utilisateur de coller une URL en provenance de YouTube dans le champ adéquat pour que WordPress affiche une fenêtre de prévisualisation du média distant, très sympa !

Étape n°2 – Intégration des scripts jQuery Cycle

Pour une gestion complète et notamment des vidéos YouTube, il nous faut injecter 4 scripts via les fonctions wp_register_script et wp_enqueue_script.

Rendez-vous sur le site officiel de jQuery Cycle 2 pour récupérer le fichier de base ainsi que : Cycle Carousel (transition), Cycle Center et Cycle YouTube.

function wpc_scripts() { 
	
	wp_register_script('jquery-cycle', get_template_directory_uri().'/inc/js/jquery.cycle2.min.js', 'jquery', '2.0.6');
	wp_register_script('jquery-cycle-carousel', get_template_directory_uri().'/inc/js/jquery.cycle2.carousel.js', 'jquery', '1.0', true);
	wp_register_script('jquery-cycle-center', get_template_directory_uri().'/inc/js/jquery.cycle2.center.js', 'jquery', '1.0', true);
	wp_register_script('jquery-cycle-youtube', get_template_directory_uri().'/inc/js/jquery.cycle2.video.min.js', 'jquery', '1.0', true);

	wp_enqueue_script('jquery-cycle');
	wp_enqueue_script('jquery-cycle-carousel');
	wp_enqueue_script('jquery-cycle-center');
	wp_enqueue_script('jquery-cycle-youtube');

}

add_action('wp_enqueue_scripts', 'wpc_scripts');

Étape n°3 – Structure HTML/PHP

Il nous faut à présent afficher les données. Dans le cadre de ce projet, il s’agissait de créer des fiches produits intégrant un carrousel d’images et une vidéo. Cela supposait donc le recours à un type de contenu personnalisé générant un fichier single-nom_du_custom_post_type.php. A vous d’adapter en conséquence !

Comme vous pouvez le voir dans la démonstration finale, nous souhaitons afficher non seulement un carrousel mais également les vignettes juste en-dessous.

Pour les images, nous allons tout simplement récupérer les tailles générées par WordPress (large pour le carrousel et miniature pour la pagination de vignettes).

Pour la vidéo, il faut ruser : on récupère tout d’abord l’ID de la vidéo à partir de son URL pour ensuite interroger Google qui en stocke 4 par défaut. Et le tour est joué !

<?php $images = get_field('wpc_gallery'); if ($images) : ?>
			
	<?php
		$video = get_field('wpc_product_video');

		preg_match('/src="(. ?)"/', $video, $matches_url );
		$src = $matches_url[1];	
		preg_match('/embed(.*?)?feature/', $src, $matches_id );
		$id = $matches_id[1];
		$id = str_replace( str_split( '?/' ), '', $id );		 
		parse_str( parse_url( $url, PHP_URL_QUERY ) );
	?>
				
	<div class="cycle-slideshow" 
		data-cycle-fx=fadeout
		data-cycle-timeout=0
		data-cycle-pager="#thumbs"
		data-cycle-slides=">iframe,>a,>img"
		data-cycle-youtube=true
		data-cycle-youtube-autostart=false
		data-cycle-pager-template=""
	>
		<?php foreach($images as $image) : ?>
			<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
		<?php endforeach; ?>
				
		<?php the_field('wpc_product_video'); ?>
				
	</div>
	
	<div id="thumbs" class="cycle-pager center external">
					
		<?php foreach($images as $image) : ?>
			<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
		<?php endforeach; ?>
					
		<img src="http://img.youtube.com/vi/<?php echo $id ?>/0.jpg" width="107" height="61" alt="<?php _e('Video thumbnail', 'tbf'); ?>" />
					
	</div>

<?php endif; ?>

Étape n°4 – CSS

Pour que le tout fonctionne, ajoutons quelques lignes de CSS. Là encore, à vous d’ajuster en fonction de votre projet !

Nous indiquons notamment que l’iframe contenant la vidéo YouTube doit s’afficher devant tout le reste sinon le bouton de lecture ne sera pas cliquable.

.cycle-slideshow { max-width: 640px; margin: auto }
.cycle-slideshow > div { width: 100%; height: 100% }
.cycle-slideshow > img { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }
iframe.cycle-slide-active { z-index: 999 !important; }

Notes additionnelles

Ce tutoriel se base sur YouTube pour l’affichage des vidéos. Quelques adaptations vous permettront de faire de même avec Vimeo ou toute autre plateforme.

Sachez que WordPress intègre nativement un lecteur HTML5 si par cas vous hébergez vous-même vos vidéos.

Petite limite : seule une vidéo pourra être injectée dans le diaporama. Plus simple à gérer et plus performant !

Bonne nouvelle, cette technique fonctionne avec le plugin multilingue WPML en adaptant l’appel des champs avec ICL_LANGUAGE_CODE.