Carrousel Sites Pro

Version: 1.0.0
Auteur: Jean-Paul Mansouri (F4HXN)
Site web: https://www.f4hxn.fr – https://www.mansouri.fr
Licence: GPL v2 or later

Description

Carrousel Sites Pro est un plugin WordPress Ă©lĂ©gant et professionnel qui permet d’afficher vos diffĂ©rents sites web dans un carrousel interactif avec prĂ©visualisation et ouverture au clic.

Fonctionnalités

  • ✅ Carrousel interactif avec navigation fluide
  • ✅ DĂ©filement automatique paramĂ©trable
  • ✅ Navigation multiple : boutons, indicateurs, clavier, tactile
  • ✅ Responsive et optimisĂ© mobile
  • ✅ Interface d’administration intuitive
  • ✅ Shortcode simple Ă  utiliser
  • ✅ Personnalisation complĂšte des sites affichĂ©s
  • ✅ AccessibilitĂ© optimisĂ©e (ARIA, navigation clavier)
  • ✅ Aucune dĂ©pendance (pas de jQuery dans le frontend)

Installation

MĂ©thode 1 : Upload manuel

  1. Téléchargez le fichier carrousel-sites-pro.zip
  2. DĂ©comprez le fichier
  3. Uploadez-le repertoire dans /wp-content/plugins/
  4. Activez le plugin depuis le menu « Extensions » de WordPress

MĂ©thode 2 : Upload ZIP

  1. Télécharger le fichier carrousel-sites-pro.zip
  2. Dans WordPress : Extensions > Ajouter > Téléverser une extension
  3. SĂ©lectionnez le fichier ZIP
  4. Cliquez sur « Installer maintenant » puis « Activer »

Utilisation

Shortcode de base

[carrousel_sites]

Shortcode avec options

[carrousel_sites title="DĂ©couvrez mes projets" autoplay="true" delay="5000"]

ParamĂštres disponibles

ParamĂštreTypeDĂ©fautDescription
titlestring« Mes Sites Web »Titre affiché au-dessus du carrousel
autoplaybooleantrueActive/désactive le défilement automatique
delayinteger5000DĂ©lai en millisecondes entre chaque slide

Exemples d’utilisation

[carrousel_sites]
[carrousel_sites title="Mes Projets"]
[carrousel_sites autoplay="false"]
[carrousel_sites delay="3000"]
[carrousel_sites title="Portfolio" autoplay="true" delay="4000"]

Configuration

  1. Allez dans Carrousel Sites dans le menu WordPress
  2. Ajoutez ou modifiez vos sites :
  • URL : L’adresse complĂšte du site (https://
)
  • Titre : Le nom Ă  afficher
  • IcĂŽne : Un emoji reprĂ©sentatif (đŸ“» đŸ’» 🌐 etc.)
  • Description : Une courte description (optionnel)
  1. Cliquez sur « Enregistrer les modifications »

Émojis recommandĂ©s pour les icĂŽnes

  • 🌐 Site web gĂ©nĂ©ral
  • đŸ’» Site technique / dĂ©veloppement
  • đŸ“± Application mobile
  • 🎹 Portfolio crĂ©atif
  • 📊 Site d’analyse / statistiques
  • 🛒 Site e-commerce
  • 📧 Site de contact
  • đŸ“» Radio / podcast
  • đŸŽ” Site musical
  • đŸ“· Photographie
  • 🎓 Site Ă©ducatif
  • 🏱 Site d’entreprise

Personnalisation

Couleurs du thĂšme

Le plugin utilise les couleurs :

  • Primaire : #0076a5
  • Secondaire : #298ad4
  • Fond : blanc

Pour personnaliser les couleurs, modifiez le fichier :
/assets/css/carrousel-sites-pro.css

Hauteur du carrousel

Par défaut : 500px sur desktop, 400px sur tablette, 300px sur mobile

Pour modifier, changez dans le CSS :

.site-preview {
    height: 500px; /* Votre hauteur */
}

Compatibilité

  • ✅ WordPress 5.0+
  • ✅ PHP 7.0+
  • ✅ Tous les navigateurs modernes
  • ✅ Responsive (mobile, tablette, desktop)
  • ✅ Compatible avec tous les thĂšmes WordPress

Structure du plugin

carrousel-sites-pro/
│
├── carrousel-sites-pro.php    # Fichier principal du plugin
├── README.md                   # Ce fichier
│
├── assets/
│   ├── css/
│   │   └── carrousel-sites-pro.css    # Styles
│   └── js/
│       └── carrousel-sites-pro.js     # JavaScript
│
└── admin/
    └── admin-page.php          # Interface d'administration

Fonctionnalités détaillées

Navigation

  • Boutons : PrĂ©cĂ©dent / Suivant
  • Indicateurs : Clic direct sur un site
  • Clavier : FlĂšches gauche/droite
  • Tactile : Swipe gauche/droite sur mobile
  • Auto-play : DĂ©filement automatique avec pause au survol

Accessibilité

  • Labels ARIA pour les lecteurs d’Ă©cran
  • Navigation clavier complĂšte
  • Focus visible sur les Ă©lĂ©ments interactifs
  • RĂŽles ARIA appropriĂ©s

Performance

  • CSS et JS minifiĂ©s
  • Pas de dĂ©pendances externes
  • Chargement optimisĂ©
  • Code lĂ©ger et performant

Support

Pour toute question ou problĂšme :

Licence

Ce plugin est distribué sous licence GPL v2 or later.

Auteur

Jean-Paul Mansouri (F4HXN)

Remerciements

Merci d’utiliser Carrousel Sites Pro !

Si vous apprĂ©ciez ce plugin, n’hĂ©sitez pas Ă  laisser un avis ou Ă  le partager.

Télécharger

Demo 

[carrousel_sites]

Mes sites Web

F4HXN.fr
F4HXN.fr
https://www.f4hxn.fr
Jerko.fr
Jerko.fr
https://www.jerko.fr
Pechez.com
Pechez.com
https://www.pechez.com
Frimousse.net
Frimousse.net
https://www.frimousse.net

Changelog – Carrousel Sites Pro

Toutes les modifications notables de ce projet seront documentées dans ce fichier.

Version 1.6.1 (04 DĂ©cembre 2025)

Correction

  • Ombres renforcĂ©es – IntensitĂ© des ombres augmentĂ©e pour une meilleure visibilitĂ©
  • Ombre titre : text-shadow: 3px 3px 8px rgba(0,0,0,0.4) (opacitĂ© 20% → 40%)
  • Ombre carrousel : box-shadow: 0 10px 40px rgba(0,0,0,0.25) (opacitĂ© 10% → 25%)
  • Rayon de flou augmentĂ© pour un effet plus marquĂ©
  • Effet de profondeur prononcĂ© et bien visible

Version 1.6.0 (03 DĂ©cembre 2025)

Nouveautés

  • Ombres activables/dĂ©sactivables – ContrĂŽle des effets d’ombre
  • ☑ Case Ă  cocher pour activer/dĂ©sactiver l’ombre sur le titre
  • ☑ Case Ă  cocher pour activer/dĂ©sactiver l’ombre sur le carrousel
  • Options sauvegardĂ©es dans WordPress (csp_title_shadow, csp_carousel_shadow)
  • Ombre carrousel activĂ©e par dĂ©faut

Design

  • Choix entre design plat ou avec profondeur
  • Styles prĂ©dĂ©finis : minimaliste, moderne, relief complet
  • Application dynamique via CSS inline

Version 1.5.0 (02 DĂ©cembre 2025)

Nouveautés majeures

  • Couleurs personnalisables – Personnalisation complĂšte des couleurs
  • 🎹 SĂ©lecteur de couleur pour le fond du carrousel
  • 🎹 SĂ©lecteur de couleur pour le titre
  • Interface visuelle intuitive avec <input type="color">
  • PrĂ©visualisation du code couleur hex en temps rĂ©el
  • Synchronisation automatique sĂ©lecteur ↔ champ texte

Options ajoutées

  • csp_carousel_bg_color – Couleur de fond (dĂ©faut: #ffffff)
  • csp_carousel_title_color – Couleur du titre (dĂ©faut: #0076a5)
  • Sauvegarde sĂ©curisĂ©e avec sanitize_hex_color()
  • CSS inline gĂ©nĂ©rĂ© dynamiquement avec !important

Version 1.4.1 (01 DĂ©cembre 2025)

Correction majeure

  • Suppression barre bleue – Élimination complĂšte des bordures indĂ©sirables
  • RĂšgles CSS renforcĂ©es avec !important sur tous les Ă©lĂ©ments
  • Suppression forcĂ©e de tous les pseudo-Ă©lĂ©ments (::after, ::before)
  • Compatible avec tous les thĂšmes WordPress
  • RĂšgles appliquĂ©es sur : wrapper, container, h2, carousel

Modifications CSS

  • border: none !important sur tous les niveaux
  • text-decoration: none !important sur le titre
  • box-shadow: none !important sur les Ă©lĂ©ments sans ombre
  • Protection contre les styles des thĂšmes

Version 1.4.0 (01 DĂ©cembre 2025)

Nouveautés

  • Titre personnalisable – Configuration du titre dans l’interface admin
  • Nouveau champ « Titre du carrousel » dans « ParamĂštres gĂ©nĂ©raux »
  • Titre configurable en un seul endroit
  • S’applique automatiquement Ă  tous les carrousels
  • Surcharge possible via attribut shortcode title="..."

Fonctionnement

  • Option WordPress : csp_carousel_title
  • Valeur par dĂ©faut : « Mes Sites Web »
  • PrioritĂ© : attribut shortcode > config admin > dĂ©faut

Version 1.3.0 (01 DĂ©cembre 2025)

Fonctionnalité majeure

  • Upload d’images – IntĂ©gration de la mĂ©diathĂšque WordPress
  • đŸ“· Bouton « Choisir une image » pour chaque site
  • PrĂ©visualisation en temps rĂ©el (200px)
  • Bouton « Supprimer l’image »
  • Fallback automatique sur Ă©mojis si pas d’image

Affichage

  • Images avec object-fit: cover
  • Effet zoom au survol (scale 1.05)
  • Recommandations : 1200×500px, <300KB, JPG/PNG
  • Champ optionnel – pas d’obligation d’image

Technique

  • wp_enqueue_media() – Chargement mĂ©diathĂšque WordPress
  • admin.js – Gestion upload/suppression
  • Sauvegarde URL image avec esc_url_raw()
  • Rendu conditionnel : <img> si image, sinon emoji

Version 1.2.0 (01 DĂ©cembre 2025)

Corrections importantes

  • Fix ajout de sites – RĂ©solution bug sauvegarde
  • RĂ©Ă©criture du code de sauvegarde avec boucle for()
  • Validation avec isset() pour chaque champ
  • Sites exemple par dĂ©faut changĂ©s : exemple1.fr, exemple2.fr (au lieu de sites rĂ©els)

Améliorations

  • 🔄 Bouton « RĂ©initialiser aux valeurs par dĂ©faut »
  • Scroll automatique vers le nouveau site ajoutĂ©
  • Confirmations intelligentes avant suppression
  • Alerte si modifications non enregistrĂ©es
  • Messages de confirmation amĂ©liorĂ©s

Version 1.1.0 (01 DĂ©cembre 2025)

Amélioration UX

  • Instruction cliquable – Bouton Â«Â đŸ‘† Cliquez pour visiter » interactif
  • Bouton entiĂšrement cliquable (pas juste dĂ©coratif)
  • Effets visuels au survol :
  • Changement de couleur (blanc → bleu #0076a5)
  • Texte change (blanc)
  • Animation scale (1.05)
  • Box-shadow renforcĂ©e
  • Animation pulse pour attirer l’attention

Version 1.0.0 (01 DĂ©cembre 2025)

Version initiale

  • ✅ Carrousel interactif – DĂ©filement automatique et manuel
  • ✅ Interface d’administration – Gestion facile des sites
  • ✅ Shortcode avec options – carrousel_sites personnalisable
  • ✅ Responsive design – AdaptĂ© mobile, tablette, desktop
  • ✅ AccessibilitĂ© optimisĂ©e – ARIA labels, navigation clavier

Fonctionnalités principales

  • Ajout/suppression de sites illimitĂ©s
  • URL, titre, icĂŽne emoji, description pour chaque site
  • Navigation : boutons prev/next, indicateurs, clavier, touch
  • Auto-play configurable avec pause au survol
  • Shortcode : 
[carrousel_sites autoplay="true" delay="5000"]

Design

  • Couleurs : #0076a5 (bleu principal), #298ad4 (bleu clair)
  • Fond blanc par dĂ©faut
  • Animations fluides (transitions CSS)
  • Overlay avec gradient sur les sites
  • Responsive breakpoints : 768px, 480px

Technique

  • Aucune dĂ©pendance externe
  • JavaScript vanilla (pas de jQuery frontend)
  • Compatible WordPress 5.0+
  • Compatible PHP 7.0+
  • Licence GPL v2

Notes de version

Compatibilité

  • WordPress 5.0+
  • PHP 7.0+
  • Tous navigateurs modernes
  • Mobile, tablette, desktop

Installation

  1. Télécharger carrousel-sites-pro.zip
  2. WordPress → Extensions → Ajouter → TĂ©lĂ©verser
  3. Activer le plugin
  4. Menu → Carrousel Sites → Configurer

Support

  • Site web : https://www.f4hxn.fr
  • Auteur : Jean-Paul Mansouri (F4HXN)
  • Licence : GPL v2

DĂ©veloppĂ© avec ❀ par F4HXN