Dans cette troisième partie (durée env 2H40) de notre tutoriel, nous allons donc intégrer à la page d'accueil de notre site un carousel Bootstrap dont l'utilisateur final pourra gérer le contenu.
Nous partirons avec notre page d'accueil telle qu'elle était à la fin de la saison 2 et nous lui ajouterons un slider dans lequel les images se succèdent automatiquement (ou manuellement) et nous ajouterons un effet d'animation sur les titres apparaissant avec ces images.
Nous stockerons les références des images dans des custom-post-types, les images étant quant à elles stockées normalement dans la librairie de Médias de WordPress et nous créerons un format supplémentaire pour ces images qui peuplent la galerie.
Dans la liste qui présente nos images, nous ferons apparaître une vignette ainsi que l'attribut ordre propre à WordPress afin de faciliter la gestion par l'utilisateur final.
Le carousel sera piloté par du code javascript afin de distiller l'animation des titres dans le bon ordre.
En résumé, voici ce que nous allons faire:
- intégrer un carousel Bootstrap et le tester avec des images temporaires.
- déterminer une taille personnalisée pour les images de notre carousel et ajouter cette taille personnalisée à notre thème
- créer un custom-post-type pour stocker les éléments du carousel
- compléter les colonnes dans la liste d'administration du custom post type pour faire apparaître la vignette et l'ordre de classement
- modifier la requête par défaut pour afficher nos custom post type dans l'ordre du classement
- utiliser le plugin Advanced Custom Fields (ACF) pour créer rapidement un champs personnalisé.
- intégrer les images de notre CPT dans le carousel en créant une boucle personnalisée
- introduire du code javascript et jQuery pour régler les paramètres du carrousel
- raccorder une librairie css nommée animate.css à notre thème pour régler les animations.
- ajouter du code javascript pour piloter les animations.
--
(Ce tutoriel, orienté Back-end WordPress et PHP/Javascript s'adresse à un public qui possède déjà des notions en design et intégration web, c'est pour cela que certains détails concernant le design, le Html et Css sont évoqués rapidement, afin de rester concentré sur le sujet principal)
Ce tutoriel faisant partie d'une série, il est préférable d'avoir suivi les deux premières saisons avant de l'aborder. Toutefois cette partie (saison 3) pourra être suivie de manière indépendante, si l'auditeur possède déjà une certaine expérience.