F4HXN Carrousel Pages – Plugin WordPress

Version actuelle : 1.7.0

Plugin WordPress pour afficher un carrousel des dernières pages ou articles publiés, avec filtre par catégories et configuration complète depuis l’admin.

Version
WordPress
License

Fonctionnalités

  • ✅ Carrousel responsive avec navigation complète (flèches, points, clavier, swipe mobile)
  • ✅ Pages ou Articles au choix
  • ✅ Filtre par catégories (pour les articles)
  • ✅ Configuration admin complète (nombre, vitesse, autoplay, etc.)
  • ✅ Personnalisation shortcode pour chaque utilisation
  • ✅ Images miniatures (Image à la une) affichées en grand (700px)
  • ✅ Design F4HXN (couleurs #0076a5 et #298ad4)
  • ✅ Responsive sur tous les écrans
  • ✅ Cache busting intégré

Installation

Méthode 1 : Via l’admin WordPress (recommandée)

  1. Télécharge le fichier f4hxn-carousel-pages.zip
  2. Va dans Extensions → Ajouter
  3. Clique sur « Téléverser une extension »
  4. Sélectionne le fichier ZIP
  5. Clique sur « Installer maintenant »
  6. Active le plugin

Méthode 2 : Via FTP

  1. Dézippe le fichier f4hxn-carousel-pages.zip
  2. Upload le dossier f4hxn-carousel-pages dans /wp-content/plugins/
  3. Active le plugin dans WordPress

Configuration

Paramètres admin

Réglages → Carrousel F4HXN

ParamètreDescriptionValeur par défaut
Type de contenuPages ou ArticlesPages
CatégoriesSélection multiple (Articles uniquement)Toutes
Nombre d’élémentsNombre à afficher (1-20)6
AutoplayDéfilement automatiqueActivé
VitesseTemps d’affichage en ms (1000-10000)5000
Afficher l’extraitMontrer l’extrait du contenuActivé
Afficher la dateMontrer la date de publicationActivé

Utilisation

Shortcode de base

Utilise les paramètres configurés dans l’admin :

[f4hxn_carousel]

Shortcodes avec paramètres personnalisés

Pages

[f4hxn_carousel]

[f4hxn_carousel number="8"]

[f4hxn_carousel number="10" autoplay="0"]

Articles

Tous les articles :

[f4hxn_carousel post_type="post"]

Articles d’une catégorie :

[f4hxn_carousel post_type="post" categories="5"]

Articles de plusieurs catégories :

[f4hxn_carousel post_type="post" categories="5,8,12"]

10 derniers articles :

[f4hxn_carousel post_type="post" number="10"]

Combinaisons avancées

[f4hxn_carousel post_type="post" categories="5,8" number="10" autoplay="1" speed="3000"]

[f4hxn_carousel post_type="page" number="4" autoplay="0"]

Paramètres disponibles

ParamètreTypeValeursDescription
numberEntier1-20Nombre d’éléments à afficher
autoplayBooléen0 ou 1Défilement automatique
speedEntier1000-10000Vitesse en millisecondes
post_typeTextepage ou postType de contenu
categoriesTexteIDs séparés par virgulesCatégories (articles uniquement)

Exemples d’utilisation

Exemple 1 : Blog radioamateur

Carrousel d’actualités sur la page d’accueil :

[f4hxn_carousel post_type="post" categories="3" number="5"]

Carrousel technique dans la section tutoriels :

[f4hxn_carousel post_type="post" categories="7,12" number="8"]

Exemple 2 : Site vitrine

Dernières pages sur l’accueil :

[f4hxn_carousel number="6"]

Pages spécifiques avec défilement lent :

[f4hxn_carousel number="4" speed="7000"]

Exemple 3 : Mix pages et articles

Page d’accueil (pages) :

[f4hxn_carousel post_type="page" number="4"]

Section blog (articles) :

[f4hxn_carousel post_type="post" number="8"]

Trouver l’ID d’une catégorie

Méthode 1 : Dans l’admin

  1. Va dans Articles → Catégories
  2. Survole le nom d’une catégorie
  3. Regarde en bas à gauche du navigateur
  4. L’URL affiche tag_ID=5 → L’ID est 5

Méthode 2 : En modifiant

  1. Clique sur une catégorie pour la modifier
  2. Regarde l’URL dans la barre d’adresse
  3. Tu verras tag_ID=5 → L’ID est 5

Design et style

Couleurs par défaut

  • Couleur principale : #0076a5
  • Couleur secondaire : #298ad4
  • Fond : Blanc
  • Texte : #333

Dimensions

  • Desktop : 1200px max × 700px hauteur image
  • Tablette : 100% largeur × 300px hauteur image
  • Mobile : 100% largeur × 250px hauteur image

Personnalisation CSS

Si tu veux modifier le style, édite le fichier :

/wp-content/plugins/f4hxn-carousel-pages/assets/carousel.css

Exemples de modifications :

Changer la hauteur de l’image :

.slide-image {
    height: 800px; /* Au lieu de 700px */
}

Changer la marge en haut :

.slide-image {
    padding-top: 30px; /* Au lieu de 20px */
}

Changer les couleurs :

.slide-title a {
    color: #ff0000; /* Au lieu de #0076a5 */
}

Dépannage

Le carrousel ne s’affiche pas

  1. Vérifie que le plugin est activé
  2. Vérifie que tu as des pages ou articles publiés
  3. Vérifie que le shortcode est correct
  4. Vide le cache (navigateur et WordPress)

Les images ne s’affichent pas

  • Les pages/articles doivent avoir une « Image à la une » définie
  • Va dans l’édition de la page → Section « Image à la une » (colonne de droite)

Les changements CSS ne s’appliquent pas

  1. Vide le cache du navigateur : Ctrl+Shift+Delete
  2. Vide le cache WordPress si tu utilises un plugin de cache
  3. Force le rechargement : Ctrl+F5

Les catégories ne fonctionnent pas

  • Les catégories sont uniquement pour les articles
  • Les pages WordPress n’ont pas de catégories
  • Utilise post_type="post" avec categories

Fonctionnalités avancées

Navigation

  • Flèches gauche/droite : Naviguer entre les slides
  • Points de navigation : Cliquer pour aller à une slide spécifique
  • Clavier : ← et → pour naviguer
  • Swipe : Glisser sur mobile/tablette
  • Pause au survol : L’autoplay se met en pause

Responsive

Le carrousel s’adapte automatiquement à tous les écrans :

  • Desktop : Affichage complet
  • Tablette : Dimensions réduites, navigation optimisée
  • Mobile : Layout adapté, swipe activé

Changelog

Version 1.6.0

Date : Décembre 2024

Nouveautés :

  • ✅ Marge de 20px ajoutée en haut de l’image
  • ✅ Hauteur d’image augmentée à 700px (desktop)
  • ✅ Hauteurs responsive ajustées (300px tablette, 250px mobile)

Améliorations :

  • Meilleur rendu visuel avec espacement
  • Images plus grandes pour meilleure visibilité

Version 1.5.0

Date : Décembre 2024

Nouveautés :

  • ✅ Choix du type de contenu (Pages ou Articles)
  • ✅ Filtre par catégories pour les articles
  • ✅ Sélection multiple de catégories dans l’admin
  • ✅ Paramètre post_type dans le shortcode
  • ✅ Paramètre categories dans le shortcode

Améliorations :

  • Interface admin enrichie
  • Documentation shortcodes mise à jour
  • Gestion dynamique des catégories (JavaScript)

Version 1.4.0

Date : Décembre 2024

Nouveautés :

  • ✅ Affichage du haut de l’image prioritaire
  • ✅ object-position: top center
  • ✅ align-items: flex-start

Améliorations :

  • Le haut de l’image est toujours visible
  • Meilleur contrôle de l’affichage des miniatures

Version 1.3.0

Date : Décembre 2024

Correctifs :

  • ✅ Restauration des dimensions d’origine (1200px × 450px)
  • ✅ Annulation de la réduction de largeur (v1.2.0)

Version 1.2.0

Date : Décembre 2024

Tentative (annulée) :

  • ❌ Réduction de la largeur à 900px (annulée en v1.3.0)

Version 1.1.0

Date : Décembre 2024

Nouveautés :

  • ✅ object-fit: contain pour afficher les images entières
  • ✅ Cache busting avec timestamp
  • ✅ Styles inline avec !important

Améliorations :

  • Meilleure gestion du cache
  • Images non rognées

Version 1.0.0

Date : Décembre 2024

Version initiale :

  • ✅ Carrousel de pages WordPress
  • ✅ Configuration admin
  • ✅ Paramètres : nombre, autoplay, vitesse
  • ✅ Affichage extrait et date
  • ✅ Navigation complète (flèches, dots, clavier)
  • ✅ Design responsive
  • ✅ Couleurs F4HXN

📋Feuille de route

Prochaines versions (suggestions)

v1.7.0 :

  • [ ] Support des Custom Post Types
  • [ ] Ordre personnalisé (aléatoire, alphabétique, etc.)
  • [ ] Transition effects personnalisables

v1.8.0 :

  • [ ] Widget Gutenberg dédié
  • [ ] Prévisualisations dans l’admin
  • [ ] Templates personnalisables

v2.0.0 :

  • [ ] Constructeur visuel de carrousels
  • [ ] Animations avancées
  • [ ] Support des galeries d’images

Support et contribution

Support

  • Auteur : Jean-Paul Mansouri (F4HXN)
  • Locator : JN33KW
  • Site web : https://www.f4hxn.fr
  • Localisation : Puget-Théniers, Alpes-Maritimes

Bugs et suggestions

Si tu trouves un bug ou as une suggestion :

  1. Vérifie que tu as la dernière version
  2. Vide tous les caches
  3. Contacte-moi avec :
    • Version du plugin
    • Version de WordPress
    • Description du problème
    • Capture d’écran si possible

Licence

GPL v2 ou ultérieure

Crédits

Développé par Jean-Paul Mansouri (F4HXN) pour la communauté radioamateur.

73 de F4HXN ! 📻

Ressources

Fichiers du plugin

f4hxn-carousel-pages/
├── f4hxn-carousel-pages.php    # Fichier principal
├── assets/
│   ├── carousel.css            # Styles
│   └── carousel.js             # JavaScript
└── README.md                   # Ce fichier

Liens utiles

  • Documentation WordPress : https://developer.wordpress.org/
  • Shortcodes WordPress : https://codex.wordpress.org/Shortcode_API
  • F4HXN.fr : https://www.f4hxn.fr

Dernière mise à jour : Décembre 2025
Version : 1.6.0

VERSION 1.7.0 – PAGES + ARTICLES MÉLANGÉS

NOUVELLE FONCTIONNALITÉ MAJEURE

Tu peux maintenant afficher Pages ET Articles dans le MÊME carrousel ! 🎉

NOUVEAUTÉS VERSION 1.7.0

✅ Support de post types multiples

  • Pages uniquement : post_type="page"
  • Articles uniquement : post_type="post"
  • Pages + Articles mélangés : post_type="page,post" ← NOUVEAU !

✅ Tri chronologique unifié

Tous les contenus (pages et articles) sont triés par date de publication, du plus récent au plus ancien.

✅ Option dans l’admin

Nouveau choix dans Réglages → Carrousel F4HXN :

  • Pages uniquement
  • Articles uniquement
  • Pages + Articles (mélangés) ← NOUVEAU !

UTILISATION

Shortcode de base avec pages + articles

Dans l’admin, sélectionne « Pages + Articles (mélangés) », puis utilise :

[f4hxn_carousel]

Ou directement dans le shortcode :

[f4hxn_carousel post_type="page,post"]

Exemples d’utilisation

Exemple 1 : Les 10 derniers contenus (pages + articles)

[f4hxn_carousel post_type="page,post" number="10"]

Exemple 2 : Pages + Articles avec autoplay rapide

[f4hxn_carousel post_type="page,post" number="8" speed="3000"]

Exemple 3 : Pages + Articles d’une catégorie spécifique

[f4hxn_carousel post_type="page,post" categories="5"]

Note : Les catégories ne s’appliquent qu’aux articles. Les pages seront affichées sans filtre.

Exemple 4 : Articles de plusieurs catégories + toutes les pages

[f4hxn_carousel post_type="page,post" categories="5,8,12" number="15"]

CONFIGURATION ADMIN

Accès aux paramètres

Réglages → Carrousel F4HXN

Nouveau champ « Type de contenu »

OptionDescription
Pages uniquementAffiche seulement les pages
Articles uniquementAffiche seulement les articles
Pages + Articles (mélangés)Affiche pages et articles ensemble ✨

Gestion des catégories

Quand tu sélectionnes « Pages + Articles (mélangés) » :

  • Le champ Catégories reste visible
  • Les catégories s’appliquent uniquement aux articles
  • Les pages sont toujours affichées (sans filtre de catégorie)

CAS D’USAGE

Cas 1 : Site vitrine avec blog intégré

Page d’accueil – Tous les contenus récents :

[f4hxn_carousel post_type="page,post" number="8"]

Affichera un mix des dernières pages créées et des derniers articles publiés.

Cas 2 : Blog radioamateur avec pages importantes

Section principale – Mix contenus :

[f4hxn_carousel post_type="page,post" number="12"]

Avantage : Les pages importantes (QSL, Matériel, etc.) apparaissent avec les articles récents.

Cas 3 : Contenus techniques filtrés

Articles techniques + Pages :

[f4hxn_carousel post_type="page,post" categories="7,12" number="10"]

Affichera :

  • Les articles des catégories 7 et 12 (ex: Antennes, Propagation)
  • PLUS toutes les pages récentes

Cas 4 : Plusieurs carrousels différents

Sur la même page, tu peux avoir :

<h2>📰 Dernières actualités</h2>

[f4hxn_carousel post_type= »post » categories= »3″ number= »5″]

<h2>📄 Contenus importants</h2>

[f4hxn_carousel post_type= »page » number= »4″]

<h2>🔥 Tout le contenu récent</h2> [f4hxn_carousel post_type= »page,post » number= »10″]

ORDRE D’AFFICHAGE

Comment sont triés les contenus ?

Tri par date de publication (du plus récent au plus ancien)

Exemple avec number="6" :

1. Article "DX Contest 2024" - 10 déc. 2024
2. Page "Nouveau matériel" - 9 déc. 2024
3. Article "Propagation" - 8 déc. 2024
4. Article "QSO du mois" - 7 déc. 2024
5. Page "Tarifs 2025" - 6 déc. 2024
6. Article "Tutoriel FT8" - 5 déc. 2024

→ Pages et articles mélangés par ordre chronologique ✅

APPARENCE

Différenciation visuelle

Les pages et articles s’affichent de la même manière dans le carrousel :

  • ✅ Image miniature (Image à la une)
  • ✅ Titre
  • ✅ Date
  • ✅ Extrait
  • ✅ Bouton « Lire la suite »

Pas de différenciation visuelle entre pages et articles (design uniforme).

PARAMÈTRES TECHNIQUES

Syntaxe du post_type

Tu peux écrire dans n’importe quel ordre :

post_type="page,post"   ✅ Fonctionne
post_type="post,page"   ✅ Fonctionne aussi

Espaces acceptés

post_type="page, post"  ✅ Les espaces sont automatiquement supprimés
post_type="page,  post" ✅ Fonctionne

MIGRATION DEPUIS v1.6.0

Pas de changement requis !

Si tu utilisais déjà le plugin :

  • Tes shortcodes existants fonctionnent toujours
  • Tes configurations admin sont conservées
  • Rien à reconfigurer

Pour utiliser la nouvelle fonctionnalité :

Option 1 – Via l’admin :

  1. Va dans Réglages → Carrousel F4HXN
  2. Change le type de contenu vers « Pages + Articles (mélangés) »
  3. Enregistre
  4. C’est tout ! ✅

Option 2 – Via le shortcode :
Modifie ton shortcode existant :

[f4hxn_carousel post_type="page,post"]

INSTALLATION VERSION 1.7.0

Procédure complète :

  1. Désinstalle l’ancienne version
  • WordPress → Extensions
  • Désactive « F4HXN Carrousel Pages »
  • Supprime le plugin
  1. Vide le cache
  • Cache navigateur : Ctrl+Shift+Delete
  • Cache WordPress : Vide-le si plugin de cache
  1. Installe la nouvelle version
  • Télécharge le ZIP (version 1.7.0)
  • Extensions → Ajouter → Téléverser
  • Sélectionne le ZIP et installe
  • Active le plugin
  • Vérifie : Version 1.7.0 dans Extensions
  1. Configure (optionnel)
  • Réglages → Carrousel F4HXN
  • Choisis « Pages + Articles (mélangés) » si tu veux cette option
  • Enregistre
  1. Teste
  • Va sur ta page avec le carrousel
  • Ctrl+F5 pour forcer le rechargement

TOUS LES PARAMÈTRES DISPONIBLES

ParamètreValeurs possiblesExemple
post_typepage, post, page,postpost_type="page,post"
number1-20number="10"
categoriesIDs séparés par virgulescategories="5,8,12"
autoplay0 ou 1autoplay="1"
speed1000-10000 (ms)speed="3000"

FAQ

Q : Puis-je filtrer les pages par catégorie ?
R : Non, les pages WordPress n’ont pas de catégories. Le filtre catégorie s’applique uniquement aux articles.

Q : Si je filtre par catégorie, les pages sont-elles toujours affichées ?
R : Oui ! Avec post_type="page,post" categories="5", tu verras :

  • Les articles de la catégorie 5
  • PLUS toutes les pages récentes (sans filtre)

Q : Comment afficher UNIQUEMENT les pages ET UNIQUEMENT les articles d’une catégorie ?
R : Ce n’est pas possible avec un seul carrousel. Utilise deux carrousels :

[f4hxn_carousel post_type="page" number="5"]
[f4hxn_carousel post_type="post" categories="5" number="5"]

Q : L’ordre est-il vraiment chronologique ?
R : Oui ! Pages et articles sont triés ensemble par date de publication, du plus récent au plus ancien.

Q : Combien de contenus maximum ?
R : Le paramètre number va de 1 à 20. Par défaut : 6.

Q : Les contenus mélangés s’affichent-ils différemment ?
R : Non, le design est uniforme. Tu ne peux pas distinguer visuellement une page d’un article dans le carrousel.

TOUTES LES FONCTIONNALITÉS CONSERVÉES

La version 1.7.0 conserve toutes les fonctionnalités précédentes :

✅ Marge en haut de l’image (20px)
✅ Hauteur de 700px (desktop)
✅ Affichage du haut de l’image
✅ Filtre par catégories (articles)
✅ Configuration admin complète
✅ Navigation complète (flèches, dots, clavier, swipe)
✅ Responsive sur tous les écrans
✅ Design F4HXN (#0076a5, #298ad4)
✅ Cache busting
✅ Pas de border-left

+ Nouveau : Pages + Articles mélangés ! 🎉

📊 HISTORIQUE DES VERSIONS

VersionFonctionnalité principale
1.0.0Version initiale – Pages uniquement
1.1.0Images entières (object-fit: contain)
1.2.0Largeur réduite (annulée)
1.3.0Dimensions restaurées
1.4.0Affichage haut de l’image
1.5.0Choix Pages/Articles + Filtre catégories
1.6.0Marge en haut + Hauteur 700px
1.7.0✅ Pages + Articles mélangés

EXEMPLES CONCRETS

Exemple 1 : Site d’association radioamateur

Page d’accueil :

[f4hxn_carousel post_type="page,post" number="8"]

→ Mix des dernières infos et pages importantes

Section technique :

[f4hxn_carousel post_type="page,post" categories="7,12" number="10"]

→ Articles techniques + pages ressources

Exemple 2 : Blog personnel

Sidebar :

[f4hxn_carousel post_type="page,post" number="4" autoplay="0"]

→ 4 contenus récents (mix pages/articles)

Exemple 3 : Site club

Accueil :

[f4hxn_carousel post_type="page,post" number="12" speed="4000"]

→ Tout le contenu récent en rotation

73 de F4HXN ! 📻

Version actuelle : 1.7.0

Télécharger