Catégorie : Développement logiciel

CarouSlidePro

Le par Danfer Greymuzzledans Plug-ins WordPressLaisser un commentaire

Plugin en développement

CarouSlide Pro v1.2.1 – Corrections finales

🐛 Bugs corrigés

1. ✅ Différenciation titre article vs texte overlay

Problème : Le texte s’affichait toujours avec le même style, qu’il provienne d’un article ou d’un overlay personnalisé.

Solution :

  • Overlay personnalisé (overlay_text) :
  • Fond TRANSPARENT (aucun background)
  • Liberté totale pour le HTML personnalisé
  • Ombres portées sur le texte pour lisibilité
  • Titre d’article :
  • Fond NOIR stylisé selon le template choisi
  • 4 templates disponibles (modern, classic, minimal, bold)
  • Classe CSS .carouslide-from-post pour distinction

Fichiers modifiés :

  • includes/class-carouslide-frontend.php – Logique de détection
  • public/css/carouslide-public.css – Styles différenciés

2. ✅ Choix de position depuis l’article

Problème : On ne pouvait pas choisir où insérer une slide depuis la meta box de l’article.

Solution :

  • Nouveau sélecteur de position dans la meta box
  • S’affiche uniquement si le carrousel est coché
  • Options dynamiques basées sur les slides existantes :
  • « À la fin » (défaut)
  • « Au début »
  • « Après [Nom de la slide] » (pour chaque slide)

Interface :

☑ Mon carrousel
   Position : [À la fin ▼]
              - À la fin
              - Au début
              - Après "Slide 1"
              - Après "Slide 2"

Fichiers modifiés :

  • includes/class-carouslide-metabox.php – Sélecteur + sauvegarde
  • Nouvelle méthode reorder_after_insert() pour réorganiser

3. ✅ Sous-titre manquant dans l’affichage

Problème : Le sous-titre était dans la BDD mais ne s’affichait pas sur le frontend.

Solution :

  • Le sous-titre s’affiche maintenant correctement sous le titre
  • Condition : show_subtitle doit être activé dans les settings du carrousel
  • Style différencié du titre (police, taille, opacité)

Fichiers modifiés :

  • includes/class-carouslide-frontend.php – Ajout du rendu du sous-titre
  • public/css/carouslide-public.css – Styles .carouslide-subtitle

✨ Nouvelles fonctionnalités

4. 📊 Page de statistiques complète

Nouveau menu : « Statistiques » dans CarouSlide Pro

Contenu :

Résumé global (4 cartes)

  • 📸 Nombre total de carrousels
  • 🎬 Nombre total de slides
  • 👁️ Vues totales
  • 📈 Moyenne vues/slide

Statistiques par carrousel

  • Tableau détaillé par slide :
  • Position
  • Miniature de l’image
  • Titre de la slide
  • Nombre de vues
  • Pourcentage (barre de progression)
  • Tri automatique par nombre de vues (du + vu au – vu)
  • Badge « Suivi désactivé » si tracking off

Design

  • Interface moderne avec gradient bleu
  • Icons Dashicons
  • Barres de progression animées
  • Cartes statistiques stylisées

Fichiers créés :

  • admin/partials/stats-display.php – Template de la page

Fichiers modifiés :

  • includes/class-carouslide-admin.php – Méthode display_stats_page()

5. ❤️ Page de don PayPal

Nouveau menu : « ❤️ Faire un don » (en jaune) dans CarouSlide Pro

Contenu :

Hero section

  • Titre avec emoji ❤️
  • Message de remerciement
  • Gradient bleu

Bouton principal PayPal

  • Gros bouton bleu officiel
  • Logo PayPal intégré
  • Email : danfer.greymuzzle@gmail.com
  • Ouverture dans nouvel onglet

Montants suggérés

  • Boutons rapides : 5€, 10€, 20€, 50€
  • Badge « Populaire » sur 20€
  • Lien direct vers PayPal avec montant

Section « Pourquoi donner ? »

  • 4 raisons avec icons :
  • ✅ Développement continu
  • ✅ Support gratuit
  • ✅ Compatibilité WordPress
  • ✅ 100% gratuit

Sidebar

  • 📊 Statistiques du plugin
  • 🌟 Autres façons de soutenir
  • 📧 Contact direct

Message final

  • Bandeau vert avec remerciements

Fichiers créés :

  • admin/partials/donate-display.php – Page complète avec styles inline

Fichiers modifiés :

  • includes/class-carouslide-admin.php – Menu + méthode display_donate_page()

📦 Récapitulatif des fichiers

Fichiers modifiés (4)

  1. ✅ includes/class-carouslide-admin.php – Menu + pages stats/donate
  2. ✅ includes/class-carouslide-frontend.php – Différenciation overlay
  3. ✅ includes/class-carouslide-metabox.php – Sélecteur position
  4. ✅ public/css/carouslide-public.css – Styles différenciés

Fichiers créés (2)

  1. ✅ admin/partials/stats-display.php – Page statistiques
  2. ✅ admin/partials/donate-display.php – Page de don

🎯 Tests à effectuer

Test 1 : Différenciation des styles

  1. Créez une slide avec Overlay personnalisé (HTML)
  2. Créez une slide avec Titre d’article (via meta box)
  3. Affichez le carrousel
  4. Résultat attendu :
  • Overlay = fond transparent, texte avec ombre
  • Article = fond noir stylisé selon template

Test 2 : Position depuis l’article

  1. Éditez un article
  2. Cochez un carrousel dans la meta box CarouSlide Pro
  3. Le sélecteur « Position » apparaît
  4. Choisissez « Au début »
  5. Sauvegardez l’article
  6. Résultat attendu : La slide de l’article est en première position

Test 3 : Sous-titre

  1. Éditez un carrousel
  2. Section « Style d’affichage »
  3. Vérifiez que « Afficher le sous-titre » est coché
  4. Ajoutez une slide avec titre ET sous-titre
  5. Résultat attendu : Le sous-titre s’affiche sous le titre

Test 4 : Statistiques

  1. Allez dans CarouSlide Pro > Statistiques
  2. Résultat attendu :
  • 4 cartes de résumé affichées
  • Liste des carrousels avec détails
  • Barres de progression fonctionnelles
  • Si aucune vue : message approprié

Test 5 : Don PayPal

  1. Allez dans CarouSlide Pro > ❤️ Faire un don
  2. Cliquez sur le bouton PayPal principal
  3. Résultat attendu : Ouverture de PayPal avec l’email correct
  4. Testez un bouton de montant suggéré (ex: 20€)
  5. Résultat attendu : PayPal s’ouvre avec montant pré-rempli

🔄 Migration

Aucune migration BDD nécessaire pour cette version !
Les colonnes nécessaires ont déjà été ajoutées en v1.2.0.

📝 Notes importantes

Compteur de vues

Pour que les statistiques fonctionnent, il faut :

  1. Activer « Suivre les statistiques » dans chaque carrousel
  2. Les vues sont comptées automatiquement à l’affichage
  3. Un carrousel sans cette option activée affichera 0 vue

PayPal

  • Email configuré : danfer.greymuzzle@gmail.com
  • Devise par défaut : EUR (modifiable dans le code si besoin)
  • Tous les liens s’ouvrent dans un nouvel onglet

Styles overlay

  • Template « Modern » = défaut (gradient noir)
  • Pour overlay transparent pur = utiliser le champ « Overlay personnalisé »
  • Pour titre avec fond = laisser le champ overlay vide

🚀 Prochaine version (1.3.0 prévue)

Fonctionnalités à venir :

  • 📊 Graphiques de statistiques avancées
  • 🎬 Prévisualisation en direct dans l’admin
  • 📋 Duplication de carrousel
  • 🌙 Mode sombre
  • 🎥 Support vidéo YouTube/Vimeo
  • 📤 Export/Import de carrousels

🎉 Résumé

Version : 1.2.1
Bugs corrigés : 3
Nouvelles pages : 2
Fichiers modifiés : 4
Fichiers créés : 2
Total fichiers : 6

Temps de mise à jour : ~5 minutes
Migration BDD : Non requise
Difficulté : ⭐☆☆☆☆ (Très facile)

Bon développement ! 🚀

CarouSlide Pro – Plugin WordPress

Un plugin de carrousel avancé et élégant pour WordPress avec gestion complète des slides d’articles.

📋 Fonctionnalités

Interface d’administration

  • ✅ Création et gestion de plusieurs carrousels
  • ✅ Éditeur visuel avec drag & drop pour réorganiser les slides
  • ✅ Réglages responsive (Desktop/Laptop/Tablet/Mobile)
  • ✅ Choix du type de navigation (masqué, points, miniatures avec option au survol)
  • ✅ Lecture automatique configurable avec pause au survol
  • ✅ Multiples effets de transition (slide, fade, zoom)
  • ✅ Sélection des pages d’affichage automatique
  • ✅ Shortcode généré automatiquement

Gestion des slides

  • ✅ Ajout manuel avec image, titre, lien et texte overlay
  • ✅ Ajout direct depuis les articles (avec meta box)
  • ✅ Option pour activer/désactiver l’ajout depuis les articles
  • ✅ Image mise en avant utilisée automatiquement

Carrousel côté client

  • ✅ Navigation précédent/suivant avec flèches élégantes
  • ✅ Navigation par points ou miniatures
  • ✅ Support du swipe sur mobile
  • ✅ Support des touches clavier (flèches)
  • ✅ Lazy loading des images
  • ✅ Transitions fluides et personnalisables
  • ✅ Responsive design

📦 Installation

Méthode 1 : Installation manuelle

  1. Téléchargez tous les fichiers du plugin
  2. Créez la structure de dossiers suivante dans /wp-content/plugins/ :
wp-content/plugins/carouslide-pro/
├── carouslide-pro.php
├── uninstall.php
├── includes/
│   ├── class-carouslide-activator.php
│   ├── class-carouslide-deactivator.php
│   ├── class-carouslide-core.php
│   ├── class-carouslide-admin.php
│   ├── class-carouslide-frontend.php
│   ├── class-carouslide-metabox.php
│   └── class-carouslide-database.php
├── admin/
│   ├── css/
│   │   └── carouslide-admin.css
│   ├── js/
│   │   └── carouslide-admin.js
│   └── partials/
│       ├── admin-display.php
│       └── carousel-editor.php
└── public/
    ├── css/
    │   └── carouslide-public.css
    └── js/
        └── carouslide-public.js
  1. Allez dans WordPress Admin > Extensions
  2. Activez « CarouSlide Pro »

Méthode 2 : Installation via ZIP

  1. Compressez tous les fichiers dans un fichier carouslide-pro.zip
  2. Dans WordPress Admin, allez dans Extensions > Ajouter
  3. Cliquez sur « Téléverser une extension »
  4. Sélectionnez le fichier ZIP
  5. Cliquez sur « Installer maintenant »
  6. Activez le plugin

🚀 Utilisation

Créer un carrousel

  1. Allez dans CarouSlide Pro dans le menu admin
  2. Cliquez sur Ajouter un carrousel
  3. Donnez un nom à votre carrousel
  4. Configurez les dimensions pour chaque appareil
  5. Choisissez le type de navigation
  6. Configurez l’autoplay et les transitions
  7. Cliquez sur Créer le carrousel

Ajouter des slides

Méthode 1 : Manuellement

  1. Dans l’éditeur de carrousel, cliquez sur + Ajouter une slide
  2. Choisissez l’onglet Manuel
  3. Remplissez les informations (titre, image, lien, texte overlay)
  4. Cliquez sur Enregistrer

Méthode 2 : Depuis un article

  1. Dans l’éditeur de carrousel, cliquez sur + Ajouter une slide
  2. Choisissez l’onglet Article
  3. Recherchez et sélectionnez un article
  4. Cliquez sur Enregistrer

Méthode 3 : Directement depuis l’article

  1. Éditez un article
  2. Dans la colonne de droite, trouvez la meta box CarouSlide Pro
  3. Cochez les carrousels auxquels ajouter l’article
  4. Publiez/Mettez à jour l’article

Afficher un carrousel

Méthode 1 : Affichage automatique

Dans les réglages du carrousel, sélectionnez les pages où il doit apparaître automatiquement.

Méthode 2 : Shortcode

Copiez le shortcode affiché dans l’éditeur de carrousel :

[carouslide id="1"]

Collez-le dans n’importe quelle page ou article.

Méthode 3 : Code PHP

Dans vos templates :

<?php echo do_shortcode('[carouslide id="1"]'); ?>

⚙️ Configuration

Dimensions

Configurez des dimensions différentes pour :

  • Desktop (> 1366px)
  • Laptop (≤ 1366px)
  • Tablet (≤ 768px)
  • Mobile (≤ 480px)

Valeurs acceptées : px, %, vw, vh, em, rem

Navigation

  • Masquée : Pas de navigation visible
  • Points : Navigation par points toujours visible
  • Points au survol : Points visibles uniquement au survol
  • Miniatures : Navigation par miniatures d’images
  • Miniatures au survol : Miniatures visibles au survol

Autoplay

  • Activer : Lance le défilement automatique
  • Durée : Temps d’affichage de chaque slide (en millisecondes)
  • Pause au survol : Met en pause quand l’utilisateur survole

Transitions

  • Glissement : Slide horizontal (effet par défaut)
  • Fondu : Transition en fondu
  • Zoom : Effet de zoom

🎨 Personnalisation CSS

Vous pouvez personnaliser l’apparence en ajoutant du CSS personnalisé :

/* Personnaliser les flèches */
.carouslide-nav {
    background: #your-color !important;
}

/* Personnaliser les points */
.carouslide-dot.active {
    background: #your-color !important;
}

/* Personnaliser l'overlay */
.carouslide-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

🔧 Support technique

Pour toute question ou problème :

  1. Vérifiez que votre thème charge jQuery
  2. Vérifiez qu’il n’y a pas de conflits JavaScript dans la console
  3. Assurez-vous que les images ont une taille appropriée

📝 Notes

  • Les images mises en avant des articles sont utilisées automatiquement
  • Les slides peuvent être réorganisées par drag & drop
  • Les carrousels sont responsive par défaut
  • Le lazy loading améliore les performances
  • Compatible avec tous les thèmes WordPress modernes

🚀 Améliorations futures possibles

  • Support des vidéos (YouTube, Vimeo)
  • Analytics avancés (clics par slide)
  • Export/Import de configurations
  • Templates de design prédéfinis
  • Support de Custom Post Types personnalisés
  • API REST pour intégrations externes

📄 Licence

GPL-2.0+

👨‍💻 Développement

Version : 1.0.0
Nécessite WordPress : 5.0+
Testé jusqu’à : 6.4
PHP : 7.4+

Fait avec ❤️ pour WordPress

Lien Gitlab:
https://gitlab.com/web9764503/carouslidepro/-/tree/547b4931b4ecc905b1865d37f1dbbdb656dd03ef
(pas encore en production)