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.

Démo finale

Si vous parvenez à la fin de ce tutoriel, vous obtiendrez un résultat similaire à la première démo du site officiel de carouFredSel.

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 :

CarouFredSel

Script jQuery de type carrousel.

Taille : 200,2 KiB  •  Date : 7 août 2012 •  Hits : 1 397

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&eacute;c&eacute;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

Capture d'écran - CarouFredSel.js sous WordPress
Un carrousel jQuery intégré à WordPress

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 ?

Crédits photo : pedrosimoes7

34 commentaires

  1. Boissiere

    Bonjour,
    Merci pour toutes ces informations.
    J’aurais souhaité un complément sur les types de carrousels proposés par wordpress. Je cherche à intégrer le carroussel : que l’on trouve sur le site de la Fnac ou celui de Arte.
    Voici le lien :
    http://videos.arte.tv/en/videos#/tv/coverflow///1/120/
    Pourriez vous me dire si cette présentation est possible sur wordpress et si oui, par quel widget ?
    Bien cordialement
    Hélène
    Merci

    1. Aurélien Denis auteur de l’article

      Oui c’est possible… jQuery est indépendant du CMS utilisé. En fait, WordPress est utile pour appeler dynamiquement du contenu comme des miniatures, des titres, des champs spéciaux, etc. sinon il faudrait créer tout le code HTML pour chaque élément manuellement… interminable !

      Par contre, c’est un carrousel de type CoverFlow façon Apple sous iTunes… faudrait regarder sur Google avec ces mots-clés ou dans le répertoire de plugins de WordPress.

      1. Boissiere

        Merci pour ces informations.
        Vous avez trouvé le mot que je cherchais. Cover flow.
        Vous voulez dire qu’il est possible d’ajouter une extension sur wordpress ?
        Ce plugin existe-t-il déjà sur certains thèmes ?
        Merci pour votre rapidité.
        Hélène

          1. Boissiere

            C’est exactement ce que je cherchais depuis 2 mois !
            Vous m’avez comprise ! Merci.
            N’hésitez pas à m’en dire plus si vous avez d’autres infos.
            Par exemple : un thème serait il plus adapté ?
            Peut on gérer la surface du carrousel ?
            Merci
            Hélène B

          2. Aurélien Denis auteur de l’article

            Il faut trouver un script jQuery s’en approchant puis l’intégrer sous WordPress, sur une démarche similaire à ce tutoriel ou regarder du côté des plugins WordPress.

          3. Boissiere

            Bonjour,
            J’ai tenté d’intégrer WP image Flow 2.
            J’ai un petit souci pouvez vous m’aider ?
            J’ai bien Image Flow dans les extentions, mais la vignette ne s’affiche pas dans le menu de création de page (par exemple, Ngen gallery : le logo apparait dés qu’il a été télchargé)
            Je ne suis pas passée par les fichiers installés dans le serveur FTP.
            Est ce que j’aurais du comme si j’installais jQuiry ?
            Votre site Marolle est très bien. Bravo !
            Hélène

  2. chris

    Bonjour,
    Merci pour ce blog qui a l’air super intéressant, et bien fait.
    Je viens de réaliser ce tuto, et j’obtiens l’erreur suivante :
    Parse error: parse error, expecting `'( » in C:\wampserver\www\wordpress\wp-content\themes\MarcelTheme\functions.php on line 8

    mon fichier functions.php (à partir de la ligne 6):
    function carousel() {
    wp_register_script( ‘jquery-carousel’ , get_template_directory_uri() . ‘/js/carouFredSel.js’);
    if is_page(‘ma-page’) {
    wp_enqueue_script( ‘jquery-carousel’ );
    }
    }

    Des idées ? merci d’avance.

      1. chris

        Bonsoir,
        Merci pour la réponse mais oui, j’ai bien retapé les apostrophes,et toujours le même souci.
        Pour info, c’est la ligne :
        if is_page(‘ma-page’) {
        qui pose probleme, car lorsque je la commente, il n’y a plus cette erreur.
        (mais on est d’accord, ça ne fonctionne pas)
        ???

        1. Fred

          Je confirme que j’ai exactement la même erreur sous MAMP (à part le numéro de ligne car j’ai inclus à la fin de functions.php mais sinon c’est bien sur la même ligne).

          Est-ce que ce nom « ma-page » est à modifier ? Je ne comprends pas ce test, à vrai dire…

          1. Aurélien Denis auteur de l’article

            Oui tout à fait ! Je n’ai pas été assez clair mais il s’agit d’utiliser une condition pour limiter l’affichage du carrousel à la page concernée. Il faut indiquer le slug ou l’ID de la page dans cette ligne…

      2. Fred

        Bon, j’ai identifié la cause de l’erreur : c’est la parenthèse autour du test qui manque.

        En clair, il ne faut pas taper:
        if is_page(‘ma-page’) {
        mais :
        if (is_page(‘ma-page’)) {

        En revanche, même si je n’ai plus le message d’erreur, je n’arrive pas à obtenir mon carousel.

        J’ai remplacé ‘ma-page’ par l’index de mon post (entre les quotes puis sans elles) et ça n’a aucun effet. Ma galerie apparaît toujours dans le mode habituel de WP.
        Faut-il ajouter un tag ? Faire une opération additionnelle ?

        1. Aurélien Denis auteur de l’article

          Difficile à dire, tout se joue à la virgule près et je n’ai vraiment mais alors vraiment pas le temps de vérifier ton code… désolé !

          Pour autant, partages le avec un service comme pastebin ou sur un forum. Qui sait ? Quelqu’un pourra peut-être t’aider !

  3. Easynico

    Bonjour. Un peu novice dans le milieu, n’est il pas possible d’intégrer le plugin caroufredsel via l’outil « extensions » dans l’admin wordpress plutôt que de rentrer des codes un peu partout.
    J’ai essayé en vain de trouver le plugin caroufredsel en ajoutant une extension…aucune réponse du moteur de recherche. Dommage, le plugin semble génial!…Y a til donc une solution pour les noviceS?..

  4. ChDUP

    Je perviens à integrer carouFredSel sur une page wordpress.
    Le problème est que j’utilise également un diaporama d’image intégré à mon thème qui utilise jQuery.
    Il semble y avoir conflit entre ces 2 versions de jQuery puisque si je desactive le caroussel, j’ai bien le diaporama et si je desactive le diaporama j’ai bien le caroussel, mais je ne parviens à activer les 2 en même temps.
    une piste ?
    d’avance merci

  5. Forge

    Bonjour Aurélien

    J’ai sans doute mal compris quelques points :
    – rien ne s’est affiché tant que je n’ai pas insérer d’images dans la page utilisant le modèle crée
    – en ayant inséré 7 images seules 5 s’affichent
    – en cliquant sur précédent ou suivant, le navigateur me renvoi en haut de la page sans avoir bouger une image

    Merci d’éclairer ma lanterne, un peu éteinte sur le Jquery je dois dire

    1. Forge

      En continuant à chercher, je viens de me rendre compte que le JS n’était pas chargé, donc j’ai mis le lien en dur dans le header sans passer par le code functions.php.

      Par contre j’ai tout de même cet effet au clic sur suivant ou précédent, qui me remonte en haut de la page.

      C’est la dernière petite chose… si tu avais une idée.
      Encore merci pour ce tuto !

  6. melamanix

    Bonjour à tous et merci pour cet article !!

    Voilà mon problème : je veux mettre le carouFredSel sur chaque article.
    Le soucie est que la div class= »caroufredsel_wrapper » que crée le javascript ne se produit que sur le premier article et non sur les autres.
    Je ne comprends pas pourquoi ? Pourriez vous m’aider s’il vous plait,

        1. melamanix

          Merci pour vos réponses,
          Gilles, je me pencherais sur cette page quand j’aurais plus de temps. C’est elle justement qui m’a permis de croire que c’était possible.
          Du coup j’ai simplifié mon design, je me pencherais sur le sujet quand j’aurais fini mon site et je vous tiendrais au courant de mes trouvailles…

          Bonne journée …

          1. Aurélien Denis auteur de l’article

            Je pense qu’il faut passer l’ID dans la boucle qui affiche les différents articles (dans une page d’accueil ou blog je suppose) ainsi que l’ID de l’article car il faut pouvoir différencier les différents carrousels pour le script…

  7. Marc

    Bonjour,
    Je n’ai pas encore essayé votre code mais j’ai une question. Comment faire pour placer le carrousel dans le pied de page ? J’aimerais que les images défilent en bas du site afin de ne pas surcharger le haut de page (déjà une bannière + image).

    Je vous remercie pour votre site à la fois complet et compréhensible.

  8. Laurent

    Bonjour et merci beaucoup Aurélien.
    Je me permets juste une petite remarque de syntaxe dans le premier paragraphe de code, il manque les parenthèses à la condition if (is_page( »)) {
    Les soucis rencontrés avec cette ligne viennent de là je pense.

  9. slimane

    Bonjour Aurélien,
    Je suis en train de réaliser bénévolement un site pour une association à but humanitaire sous WP avec un thème personnalisé.
    Je souhaite mettre un carrousel de photos dans le fichier index.php et un autre dans une page statique en particulier et pas sur les autres qui existent.
    Peux-tu me dire quelle est la marche à suivre pour ce cas particulier ?

    Je te remercie d’avance,
    Slimane

  10. Nirina

    Bonjour Aurélien,

    D’abord merci pour le tuto!
    Je suis débutant, j’essai de faire un site par wordpress, j’ai suivis le tuto mais mais je n’arrive à afficher rien comme carousel. Pourtant il n’y a pas d’erreur.

    Comment est-ce qu’on ajoute les images?
    Et y a-t -il des modifs à faire dans les code?

    Merci beaucoup de m’aider qui que ce soit qui pourra.
    Nirina

Laisser un commentaire