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

wpc-jquery-cycle-youtube-0

É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.

wpc-jquery-cycle-youtube-1

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 !

wpc-jquery-cycle-youtube-2

É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.

[pastacode lang=”php” message=”” highlight=”” provider=”manual” manual=”function%20wpc_scripts()%20%7B%20%0A%09%0A%09wp_register_script(‘jquery-cycle’%2C%20get_template_directory_uri().’%2Finc%2Fjs%2Fjquery.cycle2.min.js’%2C%20’jquery’%2C%20’2.0.6’)%3B%0A%09wp_register_script(‘jquery-cycle-carousel’%2C%20get_template_directory_uri().’%2Finc%2Fjs%2Fjquery.cycle2.carousel.js’%2C%20’jquery’%2C%20’1.0’%2C%20true)%3B%0A%09wp_register_script(‘jquery-cycle-center’%2C%20get_template_directory_uri().’%2Finc%2Fjs%2Fjquery.cycle2.center.js’%2C%20’jquery’%2C%20’1.0’%2C%20true)%3B%0A%09wp_register_script(‘jquery-cycle-youtube’%2C%20get_template_directory_uri().’%2Finc%2Fjs%2Fjquery.cycle2.video.min.js’%2C%20’jquery’%2C%20’1.0’%2C%20true)%3B%0A%0A%09wp_enqueue_script(‘jquery-cycle’)%3B%0A%09wp_enqueue_script(‘jquery-cycle-carousel’)%3B%0A%09wp_enqueue_script(‘jquery-cycle-center’)%3B%0A%09wp_enqueue_script(‘jquery-cycle-youtube’)%3B%0A%0A%7D%0A%0Aadd_action(‘wp_enqueue_scripts’%2C%20’wpc_scripts’)%3B”/]

É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é !

[pastacode lang=”php” message=”” highlight=”” provider=”manual” manual=”%3C%3Fphp%20%24images%20%3D%20get_field(‘wpc_gallery’)%3B%20if%20(%24images)%20%3A%20%3F%3E%0A%09%09%09%0A%09%3C%3Fphp%0A%09%09%24video%20%3D%20get_field(‘wpc_product_video’)%3B%0A%0A%09%09preg_match(‘%2Fsrc%3D%26%23034%3B(.%2B%3F)%26%23034%3B%2F’%2C%20%24video%2C%20%24matches_url%20)%3B%0A%09%09%24src%20%3D%20%24matches_url%5B1%5D%3B%09%0A%09%09preg_match(‘%2Fembed(.*%3F)%3Ffeature%2F’%2C%20%24src%2C%20%24matches_id%20)%3B%0A%09%09%24id%20%3D%20%24matches_id%5B1%5D%3B%0A%09%09%24id%20%3D%20str_replace(%20str_split(%20’%3F%2F’%20)%2C%20”%2C%20%24id%20)%3B%09%09%20%0A%09%09parse_str(%20parse_url(%20%24url%2C%20PHP_URL_QUERY%20)%20)%3B%0A%09%3F%3E%0A%09%09%09%09%0A%09%3Cdiv%20class%3D%26%23034%3Bcycle-slideshow%26%23034%3B%20%0A%09%09data-cycle-fx%3Dfadeout%0A%09%09data-cycle-timeout%3D0%0A%09%09data-cycle-pager%3D%26%23034%3B%23thumbs%26%23034%3B%0A%09%09data-cycle-slides%3D%26%23034%3B%3Eiframe%2C%3Ea%2C%3Eimg%26%23034%3B%0A%09%09data-cycle-youtube%3Dtrue%0A%09%09data-cycle-youtube-autostart%3Dfalse%0A%09%09data-cycle-pager-template%3D%26%23034%3B%26%23034%3B%0A%09%3E%0A%09%09%3C%3Fphp%20foreach(%24images%20as%20%24image)%20%3A%20%3F%3E%0A%09%09%09%3Cimg%20src%3D%26%23034%3B%3C%3Fphp%20echo%20%24image%5B’sizes’%5D%5B’large’%5D%3B%20%3F%3E%26%23034%3B%20alt%3D%26%23034%3B%3C%3Fphp%20echo%20%24image%5B’alt’%5D%3B%20%3F%3E%26%23034%3B%20%2F%3E%0A%09%09%3C%3Fphp%20endforeach%3B%20%3F%3E%0A%09%09%09%09%0A%09%09%3C%3Fphp%20the_field(‘wpc_product_video’)%3B%20%3F%3E%0A%09%09%09%09%0A%09%3C%2Fdiv%3E%0A%09%0A%09%3Cdiv%20id%3D%26%23034%3Bthumbs%26%23034%3B%20class%3D%26%23034%3Bcycle-pager%20center%20external%26%23034%3B%3E%0A%09%09%09%09%09%0A%09%09%3C%3Fphp%20foreach(%24images%20as%20%24image)%20%3A%20%3F%3E%0A%09%09%09%3Cimg%20src%3D%26%23034%3B%3C%3Fphp%20echo%20%24image%5B’sizes’%5D%5B’thumbnail’%5D%3B%20%3F%3E%26%23034%3B%20alt%3D%26%23034%3B%3C%3Fphp%20echo%20%24image%5B’alt’%5D%3B%20%3F%3E%26%23034%3B%20%2F%3E%0A%09%09%3C%3Fphp%20endforeach%3B%20%3F%3E%0A%09%09%09%09%09%0A%09%09%3Cimg%20src%3D%26%23034%3Bhttp%3A%2F%2Fimg.youtube.com%2Fvi%2F%3C%3Fphp%20echo%20%24id%20%3F%3E%2F0.jpg%26%23034%3B%20width%3D%26%23034%3B107%26%23034%3B%20height%3D%26%23034%3B61%26%23034%3B%20alt%3D%26%23034%3B%3C%3Fphp%20_e(‘Video%20thumbnail’%2C%20’tbf’)%3B%20%3F%3E%26%23034%3B%20%2F%3E%0A%09%09%09%09%09%0A%09%3C%2Fdiv%3E%0A%0A%3C%3Fphp%20endif%3B%20%3F%3E”/]

É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.

[pastacode lang=”css” message=”” highlight=”” provider=”manual” manual=”.cycle-slideshow%20%7B%20max-width%3A%20640px%3B%20margin%3A%20auto%20%7D%0A.cycle-slideshow%20%3E%20div%20%7B%20width%3A%20100%25%3B%20height%3A%20100%25%20%7D%0A.cycle-slideshow%20%3E%20img%20%7B%20width%3A%20100%25%3B%20height%3A%20100%25%20%7D%0Aiframe%2Cobject%2Cembed%20%7B%20width%3A%20100%25%3B%20height%3A%20100%25%20%7D%0Aiframe.cycle-slide-active%20%7B%20z-index%3A%20999%20!important%3B%20%7D”/]

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.

Aurélien Denis
Publié le Mis à jour il y a 3 ans 3 commentaires
Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

3 commentaires
  1. becaneweb

    Bonjour Aurélien,

    Encore un tuto qui m’a permis d’aller un peu plus loin dans le développement d’un WordPress merci.

    J’ajouterai deux petits détails pour aider les non initiés comme moi à utiliser ton tuto, car j’ai mis un moment à résoudre mes difficultés :

    – Une fois les fichiers installés, penser à configurer dans le fichier php le code data-cycle-timeout=0 pour donner le temps entre deux slide (1000 = 1 sec)

    – Penser à vérifier que les scripts sont bien chargés dans vos page si vous rencontrez des disfocntionnements
    Rmq : pour charger un script placé dans un thème enfant utiliser la fonction get_stylesheet_directory_uri() à la place de get_template_directory_uri()

    Ce sont des détails d’amateur, certes, mais ça peut servir, je te laisse juger de l’utilité du commentaire.

  2. JLS

    ce tutoriel s’adresse aux personnes possédant la version pro d’ACF, donnant accès donc a la version 5 du plugin et ainsi à ces nouveaux champs disponible Gallery et oEmbed, il serait bon de le préciser en début d’article.

    1. Aurélien Denis auteur de l’article

      Exact ! Corrigé merci !

Laisser un commentaire