Créer un thème dans WordPress (partie 3)

Cette série vous propose d'étudier la création d'un thème WordPress "from scratch", c'est à dire en partant de zéro et dans les règles de l'art.

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.

Les 6 vidéos (+ l'intro et la conclusion) sont disponibles ci-dessous dans une playlist de ma chaine Youtube (réglez le lecteur sur 720p^HD).

sommaire des vidéos:

• intro: présentation du tutoriel
• 01: Intégration de la structure de base de notre carousel Bootstrap avec des images temporaires
• 02: Détermination et création dans Bootstrap de la taille personnalisée pour les images du carousel
• 03: Création du Custom-Post-Type  pour le carousel, amélioration listing dans le tableau de bord
• 04: Création de la boucle personnalisée dans WordPress avec WP_Query
• 05: Création de la boucle personnalisée dans WordPress avec WP_Query (suite)
• 06: Mise en place finale du carousel Bootstrap avec Javascript, jQuery et Animate.css
• Conclusion: Dernières retouches