APE/5 - Site internet

Administrer le site de l'APE des Petits Kids Neydens

Ce document explique comment gérer le site au quotidien : se connecter, ajouter un événement, gérer les images, et ce qu'il faut savoir avant de publier. Il s'adresse à toute personne du bureau qui prend le relais.

• Adresse du site : https://ebpk-neydens.com
• Administration : https://ebpk-neydens.com/wp-admin

---

1. Se connecter

Deux façons de se connecter à l'administration :

• Avec le compte Microsoft du tenant (SSO) : bouton Login with APE sur la page de connexion. Réservé aux comptes autorisés dans Entra ID.
• Avec un compte WordPress local (identifiant + mot de passe) : à garder comme accès de secours si la connexion Microsoft ne fonctionne pas.

Ne supprimez jamais le dernier compte administrateur local. C'est la roue de secours si la connexion Microsoft tombe en panne.

---

2. Structure du site

Page	Adresse	Contenu
Accueil	/	Bandeau de présentation, prochains événements, liens utiles (newsletter, WhatsApp, École Directe, adhésion)
Agenda	/agenda/	Liste de tous les événements (gérée par l'extension The Events Calendar, pas une page classique)
L'association	/association/	Présentation de l'APE, équipe
Bénévoles	/benevoles/	Comment aider
Contact	/contact/	Coordonnées, liens utiles
Mentions légales et confidentialité	/mentions-legales-et-confidentialite/	Obligations légales et RGPD

Le menu et le pied de page sont communs à toutes les pages : pour les modifier, Apparence › Éditeur › Patterns › Header (ou Footer), pas dans une page.

Chaque page (hors Agenda) a été créée avec le modèle Page sans titre, sans page parente, pour que son adresse reste simple (/contact/ et non /accueil/contact/).

---

3. Gérer les événements

Les événements sont gérés par l'extension The Events Calendar, pas par des pages classiques.

3.1 Créer un événement

ℹ️ Info : Le menu Evenement se trouve dans le menu de gauche dans Wordpress

1. Événements › Ajouter.
2. Renseignez : titre (avec les accents), date et heure, lieu, organisateur, catégorie.
3. Ajoutez une image mise en avant (celle qui apparaît dans la liste de l'agenda) : format 16:9, environ 1200 × 675 px, moins de 300 Ko.
4. Dans la description, utilisez le modèle « Événement vierge » (voir §3.2) ou écrivez librement avec les blocs de l'éditeur.
5. Laissez l'événement en brouillon tant qu'il n'est pas prêt, puis Publier.

3.2 Utiliser le modèle d'événement

Un motif réutilisable « Événement : image à gauche » a été créé : une colonne image (à gauche) et une colonne texte (à droite).

Pour l'utiliser : dans l'éditeur de l'événement, cliquez sur le +, onglet Motifs, puis choisissez le motif. Remplacez ensuite l'image et le texte.

Avant de publier, vérifiez que :

• l'image de la description a été remplacée (pas celle du modèle vierge) ;
• le texte alternatif de l'image est renseigné ;
• les phrases « À compléter » ont été retirées.

3.3 Catégories

Les catégories définissent la couleur de l'événement dans le calendrier : Événements › Categories. Catégories existantes : Fête, Vente, Réunion.

3.4 Modifier ou annuler un événement

Ouvrez l'événement dans Événements › Tous les événements, modifiez-le, puis Mettre à jour.

Pour annuler un événement déjà publié : soit vous le supprimez, soit vous ajoutez « ANNULÉ » au début du titre et une phrase d'explication en tête de la description. Les personnes abonnées à l'agenda (Google, Outlook, Apple) verront la mise à jour à leur prochaine synchronisation (jusqu'à 24 h de délai).

---

4. S'abonner à l'agenda (pour les parents)

Le site propose un abonnement automatique à l'agenda, qui se met à jour tout seul (nouveaux événements, changements d'horaire). Boutons disponibles sur l'accueil et sous la liste de l'agenda :

• Google Agenda
• Outlook
• Apple / iCal

Adresse technique du flux (à ne communiquer qu'en cas de besoin, par exemple pour un abonnement manuel) :

https://ebpk-neydens.com/?post_type=tribe_events&ical=1&eventDisplay=list

À savoir : un abonnement se met à jour automatiquement mais avec un délai (souvent jusqu'à 24 h, parfois plus pour la toute première synchronisation). Ce n'est pas un défaut du site : c'est le fonctionnement normal des agendas en ligne.

---

5. La médiathèque (images et documents)

5.1 Organisation

Les fichiers sont rangés dans des dossiers (extension FileBird), visibles dans Médias. Rangement conseillé :

Identité (logo, charte, favicon)
Affiches
  ├ 2026-2027
  └ Archives
Événements
  ├ [nom de l'événement]
Photos (uniquement avec autorisation des parents)
Documents (statuts, comptes rendus)
Icônes et logos partenaires

Déplacer un fichier d'un dossier à l'autre ne casse pas les images déjà utilisées sur le site.

5.2 Bonnes pratiques

• Nommer le fichier avant de l'envoyer : sans accent ni espace, par exemple affiche-vente-gateaux-2026.jpg.
• Texte alternatif obligatoire pour toute image qui porte une information (affiche, photo). Laisser vide seulement pour une icône purement décorative.
• Taille des images : environ 1200 px de large pour une affiche, 1600 px maximum pour une photo. Une image trop lourde ralentit le site.
• Photos d'enfants : jamais de photo permettant d'identifier un enfant sans l'autorisation écrite des parents. Voir la page Mentions légales et confidentialité.

---

6. Mode maintenance

En cas de mise à jour importante ou de coupure prévue, une page d'attente aux couleurs du site peut être activée.

1. Extension Maintenance (WebFactory) ou équivalent : bouton ON / OFF dans ses réglages.
2. Le contenu de la page d'attente est déjà enregistré dans le champ HTML du plugin.
3. Pensez à repasser sur OFF une fois l'intervention terminée : tant que le mode est actif, les visiteurs (dont les moteurs de recherche) ne voient que la page d'attente.
4. Vérifiez toujours l'effet dans une fenêtre de navigation privée ou depuis un téléphone en 4G : connecté comme administrateur, vous voyez le site normalement, pas la page d'attente.

Pour une coupure plus longue (migration, restauration), une solution plus robuste existe au niveau du serveur (Caddy) : demander à la personne qui gère le serveur.

---

7. Sécurité et bon sens

• Les liens externes (École Directe, WhatsApp, paiement en ligne) s'ouvrent dans un nouvel onglet ; les liens internes (Agenda, Bénévoles, Contact) restent dans le même onglet.
• Ne modifiez pas le CSS additionnel (Styles › Additional CSS) sans comprendre ce que vous changez : c'est lui qui donne au site son identité visuelle (couleurs, polices, mise en page). En cas de doute, faites une copie du contenu actuel avant de le modifier.

---

8. Charte graphique (pour référence)

Élément	Valeur
Violet (fond, titres)	#3E3588
Violet foncé (texte)	#2A2364
Orange (accent, boutons)	#F3960A
Bleu	#49AAEE
Turquoise	#1BC29F
Rose	#EC5F9E
Lavande (fonds clairs)	#F1EFFA
Police des titres	Montserrat
Police du texte	Figtree

---

9. En cas de problème

Problème	Piste
Le site ne s'affiche plus	Vérifier que le mode maintenance n'est pas resté activé
Un événement n'apparaît pas dans l'agenda	Vérifier qu'il est publié (pas en brouillon) et que sa date n'est pas passée
Les événements n'apparaissent pas dans Google Agenda	Patienter jusqu'à 24 h : c'est le délai normal de synchronisation
Impossible de se connecter	Utiliser le compte WordPress local de secours
Une page a un problème d'affichage	Ne pas paniquer : rien n'est perdu, WordPress garde un historique des révisions de chaque page

Pour toute question technique plus approfondie, contacter Greg.