SPIP 1-2 : Configurer le squelette DSFR

Modalité

Module de formation en visio le mercredi de 13h à 14h30

Environ 45 minutes de formation sur un thème prédéfini

Environ 30 minutes de questions/réponses

Module de transférabilité

Une mise en oeuvre rapide de ce qui a été appris lors du module de formation (prévoir 1h maximum).

Un livrable simple (souvent une copie d’écran) à remetttre dans les 2 semaines suivant le module de formation

Dates

Mercredi 26 novembre 2025

Mercredi 1er avril 2026

Contenu

Passer au squelette DSFR.
Relooker son site très rapidement tout en appliquant la charte graphique de l’État.

Pas à pas

Préparer

Préparer

  • Faire une copie d’écran complète de la page d’accueil du site avant de modifier quoi que ce soit.
  • Faire une copie de la page « Mentions légales » si elle existe.
  • Vider le cache.
Ajouter les pages légales

Ajouter les pages légales

Avec le squelette Escal, un plugin Legal EN gère les pages légales.

Le squelette DSFR intègre une gestion minimale des pages légales, mais permet aussi de compléter avec des articles SPIP.

  1. Créer 3 articles et coller les contenus des fichiers texte suivants :
  2. Pour chacun, bien noter son « id » (numéro de l’article).
  3. Pour chacun, ajouter le mot-clé « Exclure »

Choisir l’adresse de contact

Tuto vidéo

Choisir le squelette DSFR

Choisir le squelette DSFR

Désactiver le(s) plugin(s) de squelette actif(s)

  1. Dans l’espace privé, dans « Configuration » → Gestion des plugins », aller dans l’onglet « Actifs ».
  2. Chercher TOUS les plugins de squelettes ou thèmes comme « Escal », « SarkaSPIP », « ScolaSPIP », « Eva-Web », « Kamakura »…
  3. S’il n’y en a qu’un, cliquer sur le bouton « Actions » à droite du plugin, puis « Désactiver ».
  4. s’il y en a plusieurs, TOUS les cocher et en bas de page choisir « Désactiver », puis cliquer sur le bouton « Appliquer ».

Pour le moment NE PAS SUPPRIMER ces plugins. (cela permet éventuellement de faire marche arrière).

Activer le plugin « Squelette DSFR »

  1. Dans l’espace privé, dans « Configuration » → Gestion des plugins », aller dans l’onglet « Inactifs ».
  2. Chercher le plugin « Squelette DSFR ».
  3. Cliquer sur le bouton « Actions » à droite du plugin, puis « Activer ».
Configurer le squelette DSFR

Configurer le squelette DSFR

Dans l’espace privé, dans « Squelettes » cliquer sur « Squelette DSFR – Configuration ».

Le menu comprend trois onglets :

Contenu du site

Informations et mentions légales

Les couleurs

Contenu du site

Créer un menu classique

Créer un menu classique

Pour chaque rubrique qui devra être un élément de 1er niveau du menu, on ajoute le mot-clé « DSFR_Menu ».

Tuto vidéo

Créer un menu sur mesure

Créer un menu sur mesure

Dans « Squelettes » → « Squelette DSFR – Mes menus », on peut créer un ou plusieurs menus sur mesure, dont les éléments seront au choix des textes, des liens, des rubriques, des étiquettes.

Pour sélectionner un menu « sur mesure », on ira dans « Squelettes » → « Squelette DSFR – Configuration » et on choisira le menu grâce à son nom dans la liste déroulante « Choix du menu ».

Tuto vidéo

Utiliser les mots-clés DSFR

Utiliser les mots-clés DSFR

La page d’accueil du site https://test-spip.edu.ac-lyon.fr/spip/ permet de visualiser comment apparaissent les articles selon les mots-clés DSFR choisis.

DSFR_Bandeau

Taille pour l’image ayant le mot-clé DSFR-Bandeau : 1920 x 640 pixels

Tuto vidéo

DSFR_Carousel

Taille pour les logos des articles ayant le mot-clé DSFR-Carousel : 1200 x 500 pixels

Nettoyer

Nettoyer

  • Vider le cache.
  • Désactiver et supprimer le plugin « ciimport ».
  • Supprimer les plugins de squelette si le résultat est complètement validé et sinon ne pas oublier de le faire plus tard pour éviter tout problème d’affichage ultérieur (si le plugin était activé par erreur).
Compléments

Logos

Les logos doivent avoir un format 16/9 pour s’afficher correctement dans les tuiles d’actualité.

TOUS LES MODULES DU PARCOURS