wordpress-docker-compose/AI.md

theme: blocksy template: codespot

Parfait ! Voici un guide pas-à-pas détaillé pour configurer ton site d’association WordPress avec entête, galerie, actualités, formulaire de contact et compteurs animés, sans blog. On va partir sur un thème polyvalent gratuit comme Astra ou Blocksy, car ils offrent le plus de flexibilité pour ton cas.

---

1️⃣ Installation de WordPress et du thème

1. Connecte-toi à ton WordPress.

2. Va dans Apparence → Thèmes → Ajouter.

3. Cherche Astra ou Blocksy et clique sur Installer → Activer.

4. (Optionnel) Installe un starter site pour gagner du temps :

   • Astra → Astra Starter Templates (plugin gratuit)
   • Blocksy → Blocksy Companion Choisis un modèle type Portfolio / Association / Gallery.

---

2️⃣ Configurer l’entête et le menu

1. Va dans Apparence → Personnaliser → En-tête / Header.

2. Logo : téléverse ton logo (image de ton association ou de l’automotrice).

3. Menu :

   • Va dans Apparence → Menus → Créer un menu.
   • Ajoute les pages : À propos, Galerie, Actualités, Contact, Facebook.
   • Sélectionne “Menu principal” comme emplacement.

4. Vérifie le responsive : le menu doit s’adapter aux mobiles (burger menu).

---

3️⃣ Créer les pages principales

1. À propos :

   • Crée une page simple avec texte et image(s) sur l’association et la restauration.
   • Utilise les blocs WordPress (texte, image, colonnes).

2. Galerie :

   • Crée une page “Galerie”.

   • Méthode simple : Bloc Galerie → téléverse tes photos de l’automotrice.

   • Méthode avancée (plus d’options) : installer Envira Gallery ou Modula Gallery (plugins gratuits).

     • Crée une galerie, puis insère-la via le bloc ou le shortcode.

3. Actualités :

   • Comme tu ne veux pas de blog, crée un Custom Post Type “Actualités” :

     1. Installe Custom Post Type UI.
     2. Crée un type “Actualités”.
     3. Chaque événement ou nouvelle restauration devient un post.
     4. Sur la page “Actualités”, insère le bloc Liste de posts du type “Actualités”.

4. Contact :

   • Installe Contact Form 7.
   • Crée un formulaire simple : nom, email, message.
   • Copie le shortcode et colle-le sur la page “Contact”.
   • Optionnel : ajoute un bloc Google Maps si tu veux la localisation de ton association.

---

4️⃣ Ajouter le pied de page

1. Va dans Apparence → Personnaliser → Pied de page / Footer.

2. Ajouter :

   • Texte de copyright
   • Menu secondaire ou liens utiles
   • Icônes réseaux sociaux (Facebook)

3. Vérifie que le style correspond à l’en-tête (couleurs et polices).

---

5️⃣ Ajouter un bandeau avec 4 compteurs animés

Option avec Elementor (recommandé) :

1. Installe Elementor + UiCore Elements.

2. Crée une page ou section spéciale (souvent la page d’accueil).

3. Ajoute un Section à 4 colonnes.

4. Dans chaque colonne, ajoute un Counter Widget :

   • Exemple :

     • “Automotrices restaurées : 1”
     • “Bénévoles actifs : 12”
     • “Années de patrimoine : 65”
     • “Heures de restauration : 3000+”

5. Configure l’animation :

   • Définis le décompte de 0 → valeur cible
   • Choisis la vitesse

6. Publie la page.

---

6️⃣ Mise en page de la page d’accueil

• Utilise l’éditeur Gutenberg ou Elementor pour composer ta home :

  • Bandeau d’introduction (image + slogan)
  • Galerie photos
  • Section actualités
  • Bandeau compteurs
  • Formulaire de contact

• Ajoute des ancres ou liens dans le menu pour naviguer rapidement vers chaque section.

---

7️⃣ Bonus : masquer le blog

• Si le thème impose un blog :

  1. Crée une page d’accueil statique : Accueil → Modifier → Page statique.
  2. Dans Réglages → Lecture, sélectionne cette page comme Page d’accueil et laisse “Articles” vide ou redirige vers la page “Actualités”.
  3. Supprime les widgets/blog du menu si nécessaire.

---

Si tu veux, je peux te faire un schéma visuel de la structure du site avec les sections et les plugins associés. Ça aide énormément à construire la page d’accueil et le menu rapidement.

Veux‑tu que je fasse ce schéma ?