# Un site e-learning en éditeur de site : template de cours et progression

> Retour sur un template de cours et un indicateur de progression construits avec des patterns et un bloc dynamique, pour une plateforme de formation modeste.

- Auteur : WordPress Développement
- Publié le : 2023-03-04
- Mis à jour le : 2023-03-04
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/template-cours-progression-elearning/

## L’essentiel

- Un seul template de cours pour toutes les leçons
- Indicateur de progression via bloc dynamique et meta utilisateur
- Aucun moteur de quiz ni gestion de paiement inclus

Un catalogue de quarante leçons, chacune avec sa propre mise en page bricolée à la main dans l'ancien thème : c'était le point de départ de ce projet pour une petite structure de formation professionnelle continue. La refonte en thème bloc avait un objectif précis, reproduire un unique template capable d'afficher n'importe quelle leçon du type de contenu personnalisé `lecon`, avec un indicateur visuel de progression pour l'apprenant connecté.

Ce retour d'expérience décrit la construction de ce template et de l'indicateur de progression, assemblés à partir de patterns et d'un bloc dynamique enregistré côté serveur. Le moteur de quiz et la gestion des paiements ont été confiés à une extension existante sur le site et ne sont pas traités dans ce billet.

## Un template unique pour tout le catalogue

Le type de contenu personnalisé `lecon` dispose d'un template dédié `single-lecon.html`, dans le dossier `templates` du thème bloc. Ce template combine un pattern d'en-tête affichant le titre de la leçon et son module d'appartenance, le contenu de la leçon via le bloc `core/post-content`, puis un pattern de navigation vers la leçon suivante du même module.

La difficulté n'était pas la mise en page elle-même, plutôt classique, mais la nécessité d'y insérer un élément dynamique et propre à chaque visiteur connecté : l'indicateur de progression. Un pattern, statique par nature, ne peut pas afficher une donnée qui dépend de l'utilisateur courant ; il fallait un bloc rendu côté serveur.

## Construire le bloc de progression

Le bloc `wpm/progression-lecon` est un bloc dynamique enregistré avec `register_block_type()` et un `render_callback` PHP. Il calcule, à chaque affichage, le nombre de leçons du module marquées comme terminées pour l'utilisateur connecté, via une meta utilisateur mise à jour au fil de la navigation.

> L'essentiel à retenir : Un seul template de cours pour toutes les leçons ; Indicateur de progression via bloc dynamique et meta utilisateur ; Aucun moteur de quiz ni gestion de paiement inclus

```
function wpm_render_progression_lecon( $attributes, $content, $block ) {
    if ( ! is_user_logged_in() ) {
        return '';
    }

    $post_id  = get_the_ID();
    $module   = wp_get_post_terms( $post_id, 'module' );
    $user_id  = get_current_user_id();

    if ( empty( $module ) ) {
        return '';
    }

    $lecons_module = get_posts( array(
        'post_type' => 'lecon',
        'tax_query' => array( array(
            'taxonomy' => 'module',
            'terms'    => $module[0]->term_id,
        ) ),
        'fields'    => 'ids',
        'numberposts' => -1,
    ) );

    $terminees = get_user_meta( $user_id, 'wpm_lecons_terminees', true );
    $terminees = is_array( $terminees ) ? $terminees : array();
    $count     = count( array_intersect( $lecons_module, $terminees ) );

    return sprintf(
        '<p class="wpm-progression">%d / %d leçons terminées dans ce module</p>',
        $count,
        count( $lecons_module )
    );
}

register_block_type( 'wpm/progression-lecon', array(
    'render_callback' => 'wpm_render_progression_lecon',
) );
```

## Marquer une leçon comme terminée

Le marquage se fait via un formulaire minimal inséré en pied de leçon par le même pattern, traité par une action `admin-post.php` classique qui met à jour la meta utilisateur `wpm_lecons_terminees` avant de rediriger vers la leçon suivante du module.

- Le pattern de navigation « leçon suivante » interroge la taxonomie `module` et l'ordre de menu des articles pour déterminer la leçon à proposer ensuite.
- Le bloc de progression est inséré une seule fois dans le pattern d'en-tête, partagé par toutes les leçons, ce qui évite toute duplication de logique entre les quarante contenus du catalogue.
- Un filtre `render_block` supplémentaire masque l'indicateur pour les visiteurs non connectés, sans dupliquer la vérification dans le callback lui-même.

### Pourquoi pas un plugin de LMS complet

Un plugin de gestion de formation en ligne aurait apporté quiz, certificats et suivi détaillé, mais aussi une complexité de configuration disproportionnée pour quarante leçons réparties en cinq modules. Le choix du bloc dynamique sur mesure a permis de garder un temps de développement contenu, au prix d'un suivi de progression volontairement simple : un compteur de leçons terminées par module, rien de plus.

> Un indicateur de progression n'a pas besoin d'être sophistiqué pour être motivant ; un simple compteur suffit souvent à faire revenir l'apprenant.

## En résumé

Ce projet illustre une approche pragmatique de l'éditeur de site pour des besoins qui dépassent le simple affichage de contenu : un template unique, quelques patterns et un bloc dynamique ciblé suffisent à couvrir un cas d'usage métier sans recourir à une extension généraliste. La limite de cet exercice est claire, dès que le catalogue grandirait significativement ou qu'un suivi pédagogique plus fin serait demandé, une solution dédiée deviendrait probablement plus pertinente.