Grégoire Noyelle

Créateur de thèmes WordPress :: Formateur :: Web Designer

  • Votre Projet
  • Formations
  • Tutoriels
  • Liens
  • CV
  • Contact
Retour vers la page Tutoriels avec la liste de tous les tutos.
Pour rester informé, abonnez-vous à la newsletter

WordPress :: Créer un widget Slick Slider avec ACF Pro et ACF Widgets

Mis à jour le 22 février 2017 :: 7 commentaires

Dans ce tutoriel, nous verrons comment créer un widget Slider en associant le plugin jQuery Slick Slider, les extensions WordPress ACF Widgets et ACF Pro.

Intégration de Slick-Slider dans mon extension

Présentation de Slick Slider

Slick – Slider est une extension jQuery créée par Ken Wheeler pour réaliser des Sliders sur mesure. De nombreuses démonstrations et options sont données sur le site officiel.

Logo de Slick Slider

Création du dossier de l’extension

Je me repose sur le modèle de base pour créer une extension WordPress. Voici le modèle à télécharger depuis Github: wp-theme-sup-base. Je précise qu’en fin d’article un lien est donné pour télécharger la version finalisée de l’extension.

Structure requise par Slick Slider

Globalement, une extension jQuery est construite selon ce modèle:

  • Fichiers JS appelés dans la balise <head>.
  • Fichiers CSS appelé dans la balise <head>.
  • Structure HTML avec les classes nécessaires pour le script JS.
  • Initialisation du script dans vos modèles avec la balise <script> avant la fermeture de la balise <body>.

Voici la structure complète donnée dans sur site de Slick – Slider).

Si le code ne s’affichait pas, le voir en ligne.

Voici ce qu’il faut retenir dans les étapes que je vais développer dans ce tutoriel pour l’intégrer à WordPress:

  • Les fichiers CSS seront ajoutés avec les fonctions wp_enqueue_scripts.
  • La structure HTML (ici avec your-class) sera ajoutée dans mon modèle pour le Widget.
  • C’est une boucle sur la galerie ACF qui appellera toutes les images.
  • Les fichiers JS seront ajoutés avec les fonctions wp_enqueue_scripts.
  • La balise script sera ajoutée avant la balise body avec le hook wp_footer.

Intégration des différents fichiers

Après téléchargement de l’extension, je me concentre sur tout ce qui se trouve dans le dossier slick.

Pour le CSS, je prends les versions compilées (non en .less ou .scss).
Pour le JS, je prends les versions compressées (.min.js).

Je vais réorganiser les fichiers en respectant le classement par type de contenu: CSS, JS, Images… Un très bon article sur CSS Tricks illustre bien la logique des chemins: Quick Reminder About File Paths

Si j’observe le fichier slick-theme.css, je trouve des chemins avec ./ devant. Il faudra ajuster en fonction de l’organisation de mes fichiers. Pour rappel, voici la logique:

/ pour la racine du disque courant.
./ Pour le répertoire courant.
../ Pour le parent du répertoire courant.

Appel des scripts et des CSS

J’utilise le hook wp_enqueue_scripts pour ajouter les fichiers CSS et JS dans mon extension. Comme c’est un hook, on laisse ainsi la possibilité à d’autres d’effectuer un remove_actionsur ces mêmes éléments.

À chaque fois, au final, je l’intègre vraiment sur l’accueil uniquement en faisant une condition sur is_home().

Voici le code complet:

Si le code ne s’affichait pas, le voir en ligne.

Déclenchement du script sur l’accueil

Sur la page d’accueil, j’ajoute la balise script dans mon modèle pour appeler la fonction JS de Slick Slider. Cela donne dans le fichier wp-slick-slider > func.wordpress.php :

Si le code ne s’affichait pas, le voir en ligne. Ce code est donné sur la page de Slick – Slider.

Création du Widget

Ajout d’un nouveau Widget avec ACF Widgets

Avant de commencer cette partie, je vous recommande ce tutoriel dédié sur ACF Widget et ACF Pro.
Avec l’extension ACF Widgets j’ajoute un nouveau widget que j’appelle Slider. Au final, je devrai donc créer un fichier widget-slider.php dans mon thème.

Création des champs ACF

Pour notre futur Widget, nous avons besoin de deux groupes de champs un pour les médias et un autre pour générer le widget.

  • Un groupe Métadonnées pour les images avec un champ. URL et un champ Vrai Faux pour ajouter un lien en option vers les images. Dans les Règles, ce groupe sera attribué aux Médias.
  • Un groupe Slider Slick Slider avec un simple champ Galerie ACF. Dans les Règles, ce groupe sera attribué au Widget Slider.

Une fois les champs Métadonnées installés, j’ai des nouveaux champs dans les médias. Cela donne:

Nouvelles options d'image avec ACF

Voici ce que donne le Widget. Pour chaque image on peut ajouter les liens.

Prévisualisation du Widget ACF Galerie

Création du modèle de Widget

Voici le modèle complet de ce fichier qui je le rappelle devra s’appeler widget-slider.php.

Si le code ne s’affichait pas, le voir en ligne.

  • Ce modèle est déclaré dans notre thème.
  • On récupère les données stockées dans le champ Galerie d’ACF. Ce champ retourne un tableau qui est stocké ici dans la variable $images. Je vous recommande vivement d’afficher le contenu avec une fonction de debug.
  • Pour afficher l’image je me sers de la fonction WordPress wp_get_attachment_image().
  • Installation de la structure HTML avec les variables $output. Je me repose sur les balises utilisées par Slick Slider pour déclencher le script.
  • Boucle PHP: foreach sur les données du tableau $images.
  • Récupération des méta données ajoutées aux visuels. Celles-ci ont été ajoutées avec ACF. Un groupe de champs a été lié aux Médias. Il apparaîtra dans la galerie. Pour afficher ces données, je dois mettre l’ID de chaque élément, car celle-ci ne sont pas affichées dans ce que retourne la variable $images.
  • Mise en place de chaque bloc d’image avec toutes les données: méta données et valeur retournées par la galerie.

Au final le widget devra être appelé sur la page d’accueil. Ce qui donne en image.

Résultat Galerie Slick Slider avec ACF Pro

Lien

  • Slick Slider WordPress – MaxGalleria. Extension payante WordPress qui intègre Slick Slider.
  • Extension complète du tutoriel sur Github

Autres tutoriels sur le sujet

  • WordPress :: Créer un widget Text Rotator avec ACF Pro et ACF Widgets
  • WordPress :: Créer un widget avec ACF Pro et ACF Widgets
  • WordPress :: Utiliser le champ Image d’ACF dans vos thèmes
  • WordPress :: Comment forcer l’activation d’Advanced Custom Fields (ACF)
  • ACF Pro :: Ajouter des pages d’options WordPress
  • WordPress :: Réduire les dépendances d’Avanced Custom Fields
  • ACF :: Créer une date Intertionalisable
  • WordPress :: Utiliser les cases à cocher d’Avanced Custom Fields (ACF)
  • WordPress :: Créer des articles relatifs avec Advanced Custom Fields (ACF)
  • WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

Partager :: les compteurs ont été enlevé 😉

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur LinkedIn(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Pocket(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)

Catégorie(s) : Tutoriels, WordPress tutos Étiqueté : Back-office WordPress, confirmé, développement, Plugin ACF

A propos de l'auteur

Grégoire Noyelle, Créateur de Thèmes WordPress, Formateur spécialiste sur WordPress, WooCommerce, HTML et CSS (Grid Layout) dans son centre de Formation dédié au CMS WordPress. Suivez moi sur Twitter ou LinkedIn.
[En savoir plus]

Commentaires

  1. Aurélien a écrit

    7 février 2017 à 10 h 52 min

    Slick Slider est une bonne solution pour créer des diaporamas, ce qui me chagrine avec ce script reste les CSS mal ordonnées. On y trouve des balises redondantes, non triées et avec un formatage douteux… donc vaut mieux repasser derrière pour faire le ménage. 🙂

    Le bon vieux jQuery Cycle 2 reste une autre référence du genre également.

    Très bon article sinon !

    Répondre
    • Grégoire Noyelle a écrit

      7 février 2017 à 21 h 33 min

      Hello Aurélien,
      Merci pour ce tuyau et pour le retour.
      L’idée surtout ici était de voir comment intégrer un plugin jQuery avec ACF Pro et ACF Widgets.

      Répondre
    • Grégoire Noyelle a écrit

      17 février 2017 à 6 h 44 min

      Salut,
      Je viens de regarder les CSS (le html est généré par nos soins) et je ne vois pas en quoi le code est douteux. Peux-être as-tu essayé une version plus ancienne.

      Répondre
      • Aurélien a écrit

        17 février 2017 à 17 h 02 min

        Exemple tout simple : l’effet grayscale est répété plusieurs fois dans slick-theme.css. 😉

        Répondre
        • Grégoire Noyelle a écrit

          17 février 2017 à 17 h 08 min

          Tu as raison merci 🙂
          Il est possible de contribuer sur le repot Github

          Répondre
  2. Christophe a écrit

    23 février 2017 à 22 h 57 min

    Super tes tutos Grégoire, quelles seraient les motifs pour une intégration dans un thème Genesis ? Merci

    Répondre
    • Grégoire Noyelle a écrit

      26 février 2017 à 8 h 27 min

      Salut. L’idée est ici d’avoir des widgets sur mesure qui marcheront dans un thème Genesis qui repose sur les zones de widget. Par exemple sur la page d’accueil.

      Répondre

Laisser un commentaire Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Article / Page: WordPress :: Créer un widget Slick Slider avec ACF Pro et ACF Widgets. Retour vers l'accueil

Tutoriels par Thèmes

  • Tous les Tutoriels
  • WordPress
  • Web Design
  • Photoshop
  • Mailchimp

Séries complètes de Tutoriels

  • Les bases de Grid Layout

Recherche dans les Tutoriels

S’abonnez à la newsletter

Pour recevoir des news, merci de remplir les 3 champs suivants:

Partenaires

Divi WordPress Theme

Genesis Framework for WordPress

WordPress Theme Editor

capture: Personnaliser son thème WordPress avec Genesis

WordPress est une matière première
Nous pouvons …

... créer

Commençons votre Projet

Toute création est la résultante d’une combinaison unique d’idées, d’outils adaptés à vos besoins. Nous pouvons réaliser un site WordPress, mettre en place une nouvelle formation, créer une interface.

[Quel est votre besoin]

... transmettre

Créons une formation

Formateur à l’école des Gobelins et à Apaxxdesigns, j’interviens également au sein des entreprises ou chez des particuliers sur plusieurs disciplines. Enfin, je mets à disposition de nombreuses ressources sur ce site.

[Voir les modules et ressources]

... échanger

Distinguons votre demande

Mon parcours multidisciplinaire me permet de m’adapter à des projets complexes. Nous pouvons prendre contact ou dans un premier temps mieux cerner votre projet.

[En savoir plus]

Derniers Tutoriels

Tester les emails WooCommerce avec Local de Flywheel

Dans ce tutoriel sur WordPress, nous verrons comment envoyer les emails WooCommerce avec … [Lire la suite...]

Ajouter un nouveau menu responsive dans Genesis

Dans ce tutoriel, nous verrons comment ajouter un nouveau menu responsive dans votre thème Genesis. … [Lire la suite...]

Placer les éléments avec Grid Layout CSS

Ce tutoriel est majeur, car nous verrons comment placer les éléments d’abord dans une grille simple … [Lire la suite...]

Unité de mesure avec Grid Layout CSS

Dans ce tutoriel, nous verrons comment utiliser les différentes unités de mesure avec Grid Layout. … [Lire la suite...]

Construction de grilles simples avec Grid Layout CSS

Nous verrons dans ce tutoriel comme construire une grille basique avec Grid Layout CSS. Pour rester … [Lire la suite...]

Déclaration et terminologie pour Grid Layout CSS

Voici le premier tutoriel d’une longue série sur Grid Layout CSS. Ce premier article a pour but de … [Lire la suite...]

Concevoir les sites de demain avec Grid Layout et WordPress

Dans cet article, je montrerai dans quelle mesure Grid Layout sera au coeur des sites Web de … [Lire la suite...]

Voir tous les tutoriels

Tutoriels populaires

WordPress :: Migrer son site du local vers le serveur en ligne

Dans ce tutoriel, nous verrons comment passer d’une version locale de site vers une version en … [Lire la suite...]

WordPress :: Créer un réseau de sites

Le réseau de site permet d'utiliser un seul site WordPress avec sa base de données pour générer … [Lire la suite...]

WordPress :: Gestion complète des Menus

Dans ce tutoriel nous verrons en détail comment créer et gérer les menus WordPress. Aussi nous les … [Lire la suite...]

WordPress :: Intégrer une galerie Photo

Dans ce tutoriel nous verrons comment fonctionne la galerie d’images WordPress. Toutes les étapes … [Lire la suite...]

WordPress :: Migrer son site avec le script d’Interconnectit

Dans ce tutoriel nous verrons comment migrer un site d'un emplacement A à un emplacement B. Pour les … [Lire la suite...]

Genesis :: introduction au framework de thème WordPress

Voici le premier volet d'une longue série sur le Framework de thème Genesis. Nous verrons des … [Lire la suite...]

WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

ACF : Advanced Custom Fields est un plug-in très puissant et très bien documenté. Il est créé par le … [Lire la suite...]

Voir tous les tutoriels

Social

  • Github
  • Linkedin
  • Flux RSS
  • Twitter

Formations actives

  • Toutes les formations
  • WordPress Niveau 1
  • WordPress Niveau 2
  • WordPress Niveau 3
  • WordPress Niveau 4
  • CSS3 Avancés
  • CSS3 Grid Layout
  • WooCommerce Niveau 1
  • WooCommerce Niveau 2

Centre de Formation WordPress

  • Votre Formateur WordPress
  • FAQ sur le centre de formation
  • Salle de formation
  • Témoignages sur le centre de formation
  • CGV du centre de formation
  • Charte de qualité du centre de formation
  • Réglement intérieur du Centre de formation

Liens Rapides

  • CV
  • Grégoire Noyelle
  • 9 perspectives
  • Partenaires
  • Membres Modules
  • Mentions légales
  • Me contacter

Copyright © 2018 :: Création: Grégoire Noyelle :: Base: WordPress , Genesis Framework :: Se connecter