View source for APE/5 - Site internet

{{DISPLAYTITLE:{{SUBPAGENAME}}}}
# 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

- **Ne désactivez jamais la connexion par mot de passe local** tant que la connexion Microsoft (SSO) n'a pas été testée avec succès.
- **Faites une sauvegarde** avant toute modification importante (changement de thème, suppression en masse d'images, mise à jour d'extension).
- **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 [nom de la personne référente technique] : [coordonnées].

---

*Document à mettre à jour à chaque changement important du site. Dernière mise à jour : [date].*