Tabs & Accordion

Extension Tabs & Accordion

📋 Description

Extension WordPress qui ajoute des onglets et accordéons à votre site avec des boutons intégrés à l’éditeur classique. Interface intuitive pour créer facilement du contenu organisé et interactif.

✨ Fonctionnalités

🎯 Boutons dans l’éditeur classique

  • Bouton « Onglets » : icône avec colonnes
  • Bouton « Accordéon » : icône avec menu
  • Interface popup intuitive pour configurer le contenu
  • Génération automatique du shortcode

📑 Onglets (Tabs)

  • Navigation horizontale entre contenus
  • Animation fluide de transition
  • 3 styles disponibles : default, minimal, rounded
  • Support clavier (flèches, Home, End)
  • Responsive mobile

📂 Accordéons

  • Panneaux pliables/dépliables
  • Premier panneau ouvert par défaut
  • Mode « multiple » : plusieurs panneaux ouverts simultanément
  • 3 styles disponibles : default, minimal, bordered
  • Animation slide fluide
  • Support clavier (flèches, Entrée, Espace)

♿ Accessibilité

  • Support complet du clavier
  • Focus visible
  • Attributs ARIA
  • Compatible lecteurs d’écran
  • Respect de prefers-reduced-motion

🚀 Installation

Structure des fichiers

tabs-accordion/
├── tabs-accordion.php          # Fichier principal
├── assets/
│   ├── tabs-accordion.css      # Styles frontend
│   ├── tabs-accordion.js       # Scripts frontend
│   ├── admin-style.css         # Styles admin
│   └── admin-script.js         # Scripts admin
└── README.md

Étapes d’installation

  1. Créer le dossier du plugin 
    mkdir wp-content/plugins/tabs-accordion
mkdir wp-content/plugins/tabs-accordion/assets
  2. Copier les fichiers
    • tabs-accordion.php → fichier principal
    • Dans assets/ :
      • tabs-accordion.css
      • tabs-accordion.js
      • admin-style.css
      • admin-script.js
  3. Activer le plugin
    • Aller dans WordPress Admin → Extensions
    • Activer « Tabs & Accordion »

📝 Utilisation

Méthode 1 : Boutons de l’éditeur (RECOMMANDÉ)

  1. Éditer une page/article
  2. Cliquer sur le bouton « Onglets » ou « Accordéon » (au-dessus de l’éditeur)
  3. Configurer :
    • Nombre d’éléments (1-10)
    • Titre de chaque élément
    • Contenu de chaque élément
  4. Cliquer « Insérer »
  5. Le shortcode est automatiquement ajouté à l’éditeur

Méthode 2 : Shortcodes manuels

Onglets

Syntaxe de base :

[tabs]
[tab title="Onglet 1"]Contenu du premier onglet[/tab]
[tab title="Onglet 2"]Contenu du deuxième onglet[/tab]
[tab title="Onglet 3"]Contenu du troisième onglet[/tab]
[/tabs]

Avec style personnalisé :

[tabs style="minimal"]
[tab title="Introduction"]Texte d'introduction...[/tab]
[tab title="Détails"]Plus de détails...[/tab]
[/tabs]

Styles disponibles :

  • default : style classique avec fond gris
  • minimal : style épuré sans fond
  • rounded : onglets arrondis comme des pilules

Accordéon

Syntaxe de base :

[accordion]
[accordion_item title="Section 1"]Contenu de la première section[/accordion_item]
[accordion_item title="Section 2"]Contenu de la deuxième section[/accordion_item]
[accordion_item title="Section 3"]Contenu de la troisième section[/accordion_item]
[/accordion]

Avec plusieurs panneaux ouverts :

[accordion multiple="true"]
[accordion_item title="FAQ 1"]Réponse à la question 1[/accordion_item]
[accordion_item title="FAQ 2"]Réponse à la question 2[/accordion_item]
[/accordion]

Styles disponibles :

  • default : style classique avec bordures
  • minimal : style épuré sans bordures
  • bordered : bordures épaisses

🎨 Exemples d’utilisation

Exemple 1 : Présentation de services

[tabs style="rounded"]
[tab title="Web Design"]
Nous créons des sites web modernes et responsives.
[/tab]
[tab title="Développement"]
Développement d'applications sur mesure.
[/tab]
[tab title="SEO"]
Optimisation pour les moteurs de recherche.
[/tab]
[/tabs]

Exemple 2 : FAQ

[accordion style="minimal"]
[accordion_item title="Comment m'inscrire ?"]
Pour vous inscrire, cliquez sur le bouton "S'inscrire" en haut de la page.
[/accordion_item]
[accordion_item title="Quels sont les tarifs ?"]
Nos tarifs varient selon les formules. Consultez notre page Tarifs pour plus de détails.
[/accordion_item]
[accordion_item title="Puis-je annuler ?"]
Oui, vous pouvez annuler à tout moment depuis votre espace personnel.
[/accordion_item]
[/accordion]

Exemple 3 : Contenu riche avec HTML

[tabs]
[tab title="Texte"]
<h3>Titre du contenu</h3>
<p>Paragraphe avec <strong>texte en gras</strong> et <em>italique</em>.</p>
[/tab]
[tab title="Image"]
<img src="image.jpg" alt="Description">
<p>Légende de l'image</p>
[/tab]
[tab title="Vidéo"]
<iframe width="560" height="315" src="https://www.youtube.com/embed/..."></iframe>
[/tab]
[/tabs]

Exemple 4 : Imbrication possible

[accordion]
[accordion_item title="Produits"]
[tabs style="minimal"]
[tab title="Électronique"]Liste des produits électroniques[/tab]
[tab title="Vêtements"]Liste des vêtements[/tab]
[/tabs]
[/accordion_item]
[accordion_item title="Services"]
Nos services disponibles...
[/accordion_item]
[/accordion]

⌨️ Raccourcis clavier

Onglets

  • Flèche droite : onglet suivant
  • Flèche gauche : onglet précédent
  • Home : premier onglet
  • End : dernier onglet

Accordéon

  • Entrée / Espace : ouvrir/fermer le panneau
  • Flèche bas : panneau suivant
  • Flèche haut : panneau précédent
  • Home : premier panneau
  • End : dernier panneau

🎨 Personnalisation CSS

Modifier les couleurs des onglets

/* Couleur principale */
.tab-nav-item.active {
    color: #ff6600;
    border-bottom-color: #ff6600;
}

.tabs-style-rounded .tab-nav-item.active {
    background: #ff6600;
}

Modifier les couleurs de l’accordéon

/* Header actif */
.accordion-header.active {
    background: #28a745;
}

/* Au survol */
.accordion-header:hover {
    background: #f0f8ff;
}

Changer l’animation

/* Animation personnalisée */
@keyframes customFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tab-content {
    animation: customFadeIn 0.4s ease;
}

🔧 Paramètres avancés

Onglets

Paramètre Valeurs Défaut Description
style default, minimal, rounded default Style visuel

Exemple :

[tabs style="minimal"]...[/tabs]

Accordéon

 

Paramètre Valeurs Défaut Description
style default, minimal, bordered default Style visuel
multiple true, false false Plusieurs panneaux ouverts
active true, false true Premier panneau ouvert, les autres sont fermés.
Si active="true" sur un autre panneau que le premier celui-ci sera ouvert.

Exemple :

[accordion style="bordered" multiple="true"]...[/accordion]

🐛 Dépannage

Les onglets/accordéons ne fonctionnent pas

  1. Vérifier que jQuery est chargé
    • Ouvrir la console (F12)
    • Vérifier qu’il n’y a pas d’erreur JavaScript
  2. Conflit avec un autre plugin
    • Désactiver les autres plugins temporairement
    • Réactiver un par un pour identifier le conflit
  3. Thème incompatible
    • Vérifier que le thème charge wp_footer()
    • Essayer avec un thème par défaut (Twenty Twenty-Four)

Les boutons n’apparaissent pas dans l’éditeur

  1. Vérifier que vous utilisez l’éditeur classique
    • Cette extension ne fonctionne qu’avec l’éditeur classique
    • Pour Gutenberg, utilisez les blocs natifs
  2. Vider le cache du navigateur
    • Ctrl+F5 ou Cmd+Shift+R

Le style ne s’applique pas

  1. Vérifier que le CSS est chargé
    • Inspecter la page (F12)
    • Onglet « Network » → chercher tabs-accordion.css
  2. Conflit CSS avec le thème
    • Ajouter !important dans votre CSS personnalisé

📱 Responsive

L’extension est entièrement responsive :

  • Desktop : onglets horizontaux
  • Tablette : onglets horizontaux avec moins de padding
  • Mobile : onglets verticaux (empilés)

Tous les styles s’adaptent automatiquement.

🌐 Compatibilité

  • ✅ WordPress 5.0+
  • ✅ PHP 7.0+
  • ✅ Éditeur classique
  • ✅ Tous les navigateurs modernes
  • ✅ Compatible WPML et Polylang
  • ✅ Compatible WooCommerce

🔒 Sécurité

  • Sanitization de toutes les entrées
  • Échappement des sorties HTML
  • Nonces WordPress (si nécessaire)
  • Validation des paramètres

📊 Performance

  • Léger : ~15 Ko CSS + ~8 Ko JS
  • Optimisé : chargement uniquement si shortcode présent
  • Cache-friendly : compatible avec tous les plugins de cache

🎓 Ressources

Inspiration design

  • Material Design : onglets Google
  • Bootstrap : composants tabs/collapse
  • Tailwind UI : composants d’interface

Tutoriels

📄 Licence

© Eurêkamaths – Tous droits réservés

🔄 Changelog

Version 1.0.0

  • Première version
  • Boutons dans l’éditeur classique
  • Shortcodes [tabs] et [accordion]
  • 3 styles pour chaque composant
  • Support clavier complet
  • Responsive design
  • Accessibilité WCAG 2.1
  • Mode sombre automatique

💡 Idées futures

  • [ ] Support de l’éditeur Gutenberg (blocs)
  • [ ] Plus de styles prédéfinis
  • [ ] Animations personnalisables
  • [ ] Export/import de configurations
  • [ ] Shortcode pour tableaux à onglets
  • [ ] Icônes personnalisées par onglet