jQuery & WordPress – Intégrer un carrousel photos avec carouFredSel

La bibliothèque jQuery est présente nativement sous WordPress. Elle permet de faire fonctionner d’autres scripts JavaScript, utiles pour améliorer l’expérience utilisateur et l’interactivité de votre site.

Galerie photos, sliders, carrousel… sont autant de scripts disponibles en jQuery. Ce tutoriel aura pour objectif d’utiliser la galerie de médias de WordPress pour générer un carrousel.

A propos de jQuery sous WordPress

Par défaut, WordPress embarque la bibliothèque jQuery sur laquelle repose le script que nous allons utiliser pour notre carrousel. Au fil des versions, elle est régulièrement mise à jour. Vous pouvez même désactiver celle de WordPress et préférez une version hébergée dans un CDN comme celui de Google par exemple.

Création du carrousel photo avec carouFredSel pour WordPress

Étape n°1 – Ajout du script carouFredSel

Il existe plusieurs scripts permettant d’obtenir des carrousels… il en existe même des dizaines. jCarousel figure parmi les plus connus mais son choix s’est porté sur carouFredSel qui dispose d’effets sympathiques et visuellement efficaces.

Il nous le télécharger à partir du site officiel puis décompressez le ZIP :

Vous obtenez alors 4 fichiers. Nous ne garderons que la version compressée, à savoir jquery.carouFredSel-5.6.2-packed.js que nous renommerons carouFredSel.js – plus court à retenir et à utiliser dans les URLs.

Dans le dossier /wp-content/themes/NOM_DU_THEME/, modifiez le fichier functions.php en y ajoutant les lignes de code ci-dessous. Prenez soin de les placer entre balises PHP.

function carousel() {
wp_register_script( 'jquery-carousel' , get_template_directory_uri() . '/js/carouFredSel.js');
if (is_page('ma-page')) {
	wp_enqueue_script( 'jquery-carousel' );
}
}
add_action('wp_enqueue_scripts', 'carousel');

Ces lignes auront pour effet d’enregistrer le script carouFredSel.js puis de le charger en front-end sur toutes les pages de votre site. Autrement dit, cela rajoutera la ligne suivante dans la partie head du code source :

<script src="http://votresite.fr/wp-content/themes/NOM_DU_THEME/js/carouFredSel.js" type="text/javascript"></script>

Une ligne que vous ne devez pas ajouter directement dans votre fichier header.php comme certains thèmes le font.

De plus, pour être optimal, je vous conseille d’utiliser des tags conditionnels pour ne charger ce dernier que sur les pages concernées du site.

N’oubliez pas de sauvegarder le fichier.

Étape n°2 – Ajout du code JavaScript dans la page

Étant donné que nous allons générer automatiquement le carrousel photo via PHP, nous devons créer un modèle de page. Pour ce faire, reportez au tutoriel sur la création d’un modèle de page sous WordPress.

Pour l’exemple, nous allons créer un fichier template-carousel.php reprenant une structure basique pour afficher l’en-tête et le pied de page. Libre à vous de l’adapter en vous basant notamment sur le fichier page.php de votre thème WordPress – ce qui aura pour effet de reprendre la structure d’une page statique de votre site.

<?php
/*
Template Name: Carousel
*/
?>
<?php get_header(); ?>

<script type="text/javascript">
 jQuery(function() { 
 jQuery("#foo1").carouFredSel({
 items : 3,
 scroll : {
 items : 1,
 duration : 1000,
 pauseDuration : 2000
 },
 auto : false,
 prev : "#foo1_prev",
 next : "#foo1_next"
 }).parent().css("margin", "auto"); 
 });
 </script>

<?php get_footer(); ?>

Étape n°3 – Création de la boucle WordPress

C’est sans doute la partie la plus complexe. Cette boucle va récupérer les images envoyées dans la bibliothèque de médias de WordPress. Ici, nous ferons appel à la taille miniature des fichiers images, plus pratique pour obtenir un résultat fonctionnel.

Insérons donc les lignes suivantes juste après l’ajout du script précédent – soit au-dessus de get_footer.

<div class="list_carousel"> 

<a id="foo1_prev" href="#"><span>Précédent</span></a>
<a id="foo1_next" href="#"><span>Suivant</span></a>
<ul id="foo1">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

 $args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID
  );

  $attachments = get_posts( $args );
     if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
           echo '<li>';
           echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );
           echo '<p>';
           echo apply_filters( 'the_title', $attachment->post_title );
           echo '</p></li>';
          }
     }

 endwhile; endif; ?>
</ul>

</div>

Étape n°4 – Ajout des styles CSS nécessaires

Ouvrez donc le fichier style.css puis ajoutez ces lignes de code CSS.

/* jQuery Carousel */
#slideshow-catalogue ul {
 clear: both;
}
.list_carousel {
 position: relative;
}
.list_carousel ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
}
.list_carousel li {
 color: #666;
 text-align: center;
 width: 185px;
 height: 185px;
 padding: 0;
 margin: 6px 50px 6px 6px;
 display: block;
 float: left;
}
a.prev2, a.next2, a#prev-galery, a#next-galery {
 width: 32px;
 height: 47px;
 display: block;
 position: absolute;
 top: 35px;
}
a.prev2, a#prev-galery {
 background: url(images/arrow-left.png) no-repeat transparent;
}
a.next2, a#next-galery {
 background: url(images/arrow-right.png) no-repeat transparent;
 right: 0;
}
a.prev2 span, a.next2 span {
 display: none;
}
.clearfix {
 float: none;
 clear: both;
}

Remarquez la présence de 2 fichiers images qui ne sont autres que des flèches de navigation. Il vous faut donc en créer ou en télécharger sur le Web pour les afficher.

Résultat final

Les boutons Précédent / Suivant permettent de faire défiler les images horizontalement. Comme indiqué plus haut, la CSS fait appel à des images par défaut.

Au final, nous aurons fait appel à du code HTML, CSS, PHP et JavaScript le tout fonctionnant sous WordPress afin d’obtenir un carrousel photo. Sachez que cette technique peut être généralisée pour la plupart des scripts jQuery disponibles sur le marché. Et vous, amis lecteurs, quels sont vos scripts jQuery favoris ?