Union_Locale_CGT_Foix_Haute-Ariege/cgt-wp-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4c51761c75
cgt-wp-theme/AGENTS.md
Union Locale CGT Foix Haute-Ariège 4c51761c75 feat: thème WordPress sur mesure Union Locale CGT Foix Haute-Ariège (v1.2.0)
2026-11-12 21:27:56 +01:00

22 KiB
Raw Blame History

AGENTS.md — CAHIER DES CHARGES COMPLET : THÈME WORDPRESS cgt-wp-theme

Projet : Site officiel de l'Union Locale CGT Foix Haute-Ariège (https://cgt-fha.fr/) Dépôt Gitea officiel : https://git.cgt-fha.fr/Union_Locale_CGT_Foix_Haute-Ariege/cgt-wp-theme.git Chemin de déploiement VPS : /var/www/fastuser/data/www/cgt-fha.fr/wp-content/themes/cgt-fha/ Ressource Skills locale : ../skills/ (../skills/wp-performance/SKILL.md et ../skills/wp-block-themes/SKILL.md) Ressource graphique locale : ../ressources/banniere union locale noir.png (à copier dans assets/img/banniere-ul-noir.png et utiliser comme logo par défaut de l'en-tête) Maquette de référence visuelle : L'utilisateur fournit l'image de maquette validée en pièce jointe. Respecte fidèlement sa hiérarchie visuelle, ses proportions, ses espacements et son style graphique.

1. PHILOSOPHIE TECHNIQUE, SKILLS & RÈGLES D'ARCHITECTURE

Tu es l'unique développeur de ce thème WordPress sur mesure. Ce thème remplace un thème généraliste bridé (Neve) pour offrir une souveraineté totale, une vitesse de chargement maximale et une ergonomie pensée pour les salariés et militants de Haute-Ariège[cite: 6].

  • Utilisation des Skills (../skills/) :
    • Lis et applique les bonnes pratiques définies dans ../skills/wp-performance/SKILL.md (optimisation des requêtes, cache Transients, WP-Cron) et ../skills/wp-block-themes/SKILL.md (uniquement pour la structure propre de theme.json)[cite: 6].
    • Restriction stricte : Ne génère jamais de blocs Gutenberg personnalisés en React (@wordpress/scripts, block.json compilés) ni de Full Site Editing complet[cite: 6].
  • Architecture : Thème PHP Classique / Hybride Moderne :
    • Utilise des gabarits PHP 8.x propres, typés et sécurisés (header.php, footer.php, front-page.php, home.php, single.php, page.php, archive.php, 404.php)[cite: 6].
    • Utilise theme.json uniquement pour déclarer la palette de couleurs CGT et les typographies dans l'éditeur d'articles[cite: 6].
  • Zéro dépendance externe lourde (RGPD & Performance) :
    • CSS moderne natif (CSS Custom Properties, CSS Grid, Flexbox, mobile-first). Aucune bibliothèque CSS externe (pas de Bootstrap ni Tailwind CDN)[cite: 6].
    • JavaScript Vanilla ES6 minimaliste uniquement pour le menu mobile accessible et les onglets de l'admin (pas de jQuery)[cite: 6].
    • Aucune police Google Fonts chargée via CDN tiers : utilise des polices système modernes (system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) ou des fichiers hébergés localement[cite: 6].
  • 100 % Modifiable sans toucher au code :
    • En dehors des articles locaux (publiés dans WordPress) et des actualités confédérales extraites automatiquement depuis cgt.fr, tous les textes, images, icônes, liens, boutons et coordonnées du thème doivent être modifiables depuis l'administration WordPress (Apparence > Réglages UL CGT + Apparence > Menus + Médiathèque).
    • Pré-remplissage obligatoire par défaut : Toutes les options doivent posséder des valeurs par défaut complètes (définies via wp_parse_args()) afin que le site soit immédiatement fonctionnel et complet dès l'activation du thème, sans aucune zone vide.
  • Intégration propre avec les extensions sœurs (Gitea) :
    • Le thème gère le visuel, le SEO/OpenGraph de base, le bandeau de mobilisation et l'encart d'actualités confédérales[cite: 6].
    • Il prévoit des hooks/emplacements propres (do_action(...) / support de shortcodes) pour accueillir les sorties des extensions cgt-wp-calendar (Agenda) et cgt-wp-forms (Formulaires Défense, Adhésion, Formation), tout en affichant un rendu cohérent même si ces extensions ne sont pas encore activées[cite: 6].

2. IDENTITÉ VISUELLE & CHARTE GRAPHIQUE

  • Couleur primaire (Rouge CGT) : --cgt-red: #d20012; (hover : --cgt-red-dark: #a8000e;)[cite: 7]
  • Couleurs neutres & surfaces :
    • Fond principal : --bg-main: #ffffff;
    • Fond alterné (section Confédérale / Formation / Footer) : --bg-soft: #f1f3f5;
    • Barre supérieure contact : --bg-topbar: #1c1e21;
    • Texte principal : --text-main: #1a1a1a;
    • Texte secondaire : --text-muted: #4a5568;
    • Bordures des cartes : --border-card: #cbd5e1;
    • Rayons d'arrondi : --radius-card: 12px; à 14px, boutons pilules --radius-pill: 999px;.

3. EN-TÊTE (header.php) & NAVIGATION

Respecte exactement le haut de la maquette de référence :

  1. Barre supérieure (topbar) :
    • Fond sombre (#1c1e21), texte blanc fin (13px).
    • À gauche : icône téléphone + lien tel: (07 60 49 64 69 par défaut) et icône enveloppe + lien mailto: (union-locale@cgt-fha.fr par défaut)[cite: 7].
    • À droite : icônes réseaux sociaux (Facebook officiel de l'UL https://www.facebook.com/profile.php?id=61552410568856, etc., éditables dans les réglages)[cite: 7].
  2. Bandeau d'Alerte Mobilisation Auto-Expirant :
    • Bandeau pleine largeur sur fond rouge CGT (#d20012), texte blanc centré en gras (ex. : MOBILISATION : Grève et manifestation à Foix - Allées de Villote), cliquable si une URL est renseignée[cite: 6].
    • Condition stricte d'affichage : S'affiche uniquement si la case Activer le bandeau est cochée ET que l'horodatage actuel (current_time('timestamp')) est strictement inférieur à la Date et heure d'expiration configurée dans l'admin[cite: 6]. Passé ce délai, le bandeau disparaît automatiquement[cite: 6].
  3. Barre de Navigation Principale (<header>) :
    • Fond blanc, hauteur confortable, ombre légère au défilement.
    • À gauche : Logo officiel de l'Union Locale CGT Foix Haute-Ariège (modifiable via custom_logo dans WordPress, avec fallback SVG/PNG local propre).
    • À droite : Menu principal horizontal (wp_nav_menu : Accueil, Actualités, Calendrier, Contact), avec soulignement rouge sur l'élément actif.
    • IMPORTANT : Ne mets PAS de bouton rouge « Syndiquez-vous » dans cette barre de navigation (pour éviter la répétition avec le Hero juste en dessous).
    • Sur mobile (< 768px) : bouton menu hamburger accessible (aria-expanded="false", contrôle clavier Escape).

4. PAGE D'ACCUEIL (front-page.php) — STRUCTURE COMPLÈTE

La page d'accueil s'articule en 7 sections verticales dans cet ordre exact :

Section 1 : Bannière Hero Plein Écran (Ancrage Territorial & Action)

  • Visuel de fond : Image panoramique des montagnes d'Ariège / territoire (configurable dans l'admin avec une image par défaut intégrée dans assets/img/hero-ariege.jpg), recouverte d'un voile sombre dégradé (rgba(15, 18, 22, 0.62)) assurant une lisibilité parfaite du texte blanc.
  • Contenu centré verticalement et horizontalement :
    • Titre principal (<h1>, blanc, grand, gras, 2 lignes) : Union Locale CGT Foix Haute-Ariège Votre syndicat de proximité !
    • Citation centrée en dessous (blanc doux, italique, éditable dans l'admin) : « La régression sociale ne se négocie pas, elle se combat ! » — Henri Krasucki, Secrétaire Général de la CGT de 1982 à 1992
    • Deux boutons d'action centrés côte à côte (display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;) :
      1. Bouton gauche (fond blanc #ffffff, texte noir #1a1a1a, coins arrondis 8px, gras) : « J'ai besoin d'aide » (lien configurable, par défaut vers la page Contact / Urgence salarié)[cite: 6].
      2. Bouton droit (fond sombre translucide ou rouge foncé, bordure blanche/rouge, texte blanc, coins arrondis 8px, gras) : « Rejoindre la CGT » (lien configurable, par défaut vers la page Syndiquez-vous)[cite: 6].

Section 2 : Module « À QUOI NOUS SERVONS ? » (3 Cartes de Mission)

Placé immédiatement sous le Hero et avant les actualités (fond blanc #ffffff) :

  • Titre de section : À QUOI NOUS SERVONS ? centré en majuscules (<h2>).
  • Grille 3 colonnes (grid-template-columns: repeat(3, 1fr); gap: 1.5rem;, 1 colonne sur mobile) :
    • Chaque carte possède un fond blanc, une bordure fine (1px solid #cbd5e1), des coins arrondis (border-radius: 12px), un padding généreux (1.75rem) et un contenu centré :
      1. Carte 1 : Icône poing levé / collectif (SVG propre) • Titre S'ORGANISER • Texte par défaut : « Construire le syndicat dans votre entreprise, préparer les élections CSE et ne plus rester isolé face à l'employeur. »
      2. Carte 2 : Icône bouclier (SVG propre) • Titre SE DÉFENDRE • Texte par défaut : « Faire respecter vos droits, vos salaires et vos conditions de travail, avec l'appui de nos conseillers du salarié et juristes. »
      3. Carte 3 : Icône bulles d'échange / livre (SVG propre) • Titre S'INFORMER & SE FORMER • Texte par défaut : « Connaître les actualités des luttes en Haute-Ariège et bénéficier de vos droits à la formation syndicale (CFESES). »
    • Note : Les icônes (sélecteur parmi une bibliothèque SVG intégrée), titres et textes de ces 3 cartes sont modifiables dans l'admin WordPress.

Section 3 : Vitrine 1 — « SUR LE TERRAIN EN HAUTE-ARIÈGE » (Actualités Locales)

  • Priorité éditoriale locale : Affiche automatiquement les 3 derniers articles publiés dans le WordPress de l'UL (WP_Query sur post_type => 'post', posts_per_page => 3)[cite: 6].
  • Titre de section : SUR LE TERRAIN EN HAUTE-ARIÈGE centré en majuscules (<h2>).
  • Mise en page des 3 cartes (fidèle à la maquette) :
    • Grille 3 colonnes (gap: 1.5rem).
    • Image à la une en haut avec coins arrondis (border-radius: 12px; height: 190px; object-fit: cover; width: 100%;), avec fallback SVG propre si un article n'a pas d'image.
    • Juste sous l'image : une pilule rouge CGT (background: #d20012; color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 10px;) affichant la catégorie principale (ex. Mobilisation, Vie syndicale) suivie de la date de publication (d.m.Y).
    • Titre de l'article en gras (18px) cliquable vers single.php.
    • Extrait nettoyé (wp_trim_words, ~20 mots).
  • Pied de section : Bouton lien discret centré « Voir toutes les actualités locales → » vers la page des articles (get_permalink(get_option('page_for_posts'))), suivi du hook do_action('cgt_fha_after_local_news'); permettant d'injecter les prochains rendez-vous de cgt-wp-calendar[cite: 6].

Section 4 : Vitrine 2 — « ACTUALITÉ CONFÉDÉRALE » (Récupération automatique cgt.fr)

  • Fond de section : Gris très doux (#f1f3f5) pour bien la distinguer des actualités locales.
  • Titre de section : ACTUALITÉ CONFÉDÉRALE centré en majuscules (<h2>).
  • Moteur PHP (inc/class-cgt-confederal-feed.php) :
    • Interroge https://www.cgt.fr/ via wp_remote_get() (timeout 10s, User-Agent propre) et parse le HTML avec DOMDocument + DOMXPath (sans polluer wp_posts) :
      • 1 article featured (« À la une ») : extrait depuis la section "à la une de la cgt" (title, summary, image_url convertie en URL absolue https://www.cgt.fr/..., category, url).
      • 3 articles latest (ARTICLE 1, ARTICLE 2, ARTICLE 3) : extraits depuis les 3 premiers articles de la section suivante "mais aussi..." (complétés via https://www.cgt.fr/actualites si un résumé est manquant).
    • Fallback de sécurité : Si la page d'accueil cgt.fr échoue ou change de structure DOM, bascule automatiquement sur les 4 premiers articles de https://www.cgt.fr/actualites (le 1er devient featured, les 3 suivants deviennent latest).
    • Cache & WP-Cron : Stockage dans le transient cgt_fha_confederal_feed (expiration 3h) + sauvegarde de secours cgt_fha_confederal_feed_backup conservée en cas d'indisponibilité réseau. Événement WP-Cron toutes les 2 heures + bouton "Actualiser les actus confédérales" dans la barre d'admin WordPress (admin_bar_menu).
  • Rendu HTML/CSS fidèle à la maquette :
    • Bloc supérieur « À LA UNE » :
      • Conteneur centré (max-width: 880px; margin: 0 auto 2.5rem auto;), disposition horizontale Flexbox (align-items: center).
      • À gauche (flex: 0 0 58%) : Image de l'article (border-radius: 14px; height: 290px; object-fit: cover;) avec un badge overlay discret en bas à droite À LA UNE.
      • À droite (flex: 1; margin-left: -40px; position: relative; z-index: 2;) : Boîte blanche arrondie chevauchant le bord droit de l'image (background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; padding: 1.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); text-align: center;) contenant :
        • Le titre de l'article (ou surtitre À LA UNE + titre).
        • La description / chapô nettoyé.
        • Le bouton pilule encadré (border: 1.5px solid #1a1a1a; border-radius: 999px; padding: 6px 28px; font-weight: 700;) : « LIRE SUR CGT.FR ↗ » (target="_blank" rel="noopener noreferrer").
      • Responsive mobile (< 768px) : flex-direction: column, margin-left: 0, margin-top: -24px.
    • Grille inférieure (3 colonnes : ARTICLE 1, ARTICLE 2, ARTICLE 3) :
      • Grille CSS grid-template-columns: repeat(3, 1fr); gap: 1.5rem; (1 colonne sous 768px).
      • Chaque carte affiche l'image en haut (height: 190px; width: 100%; object-fit: cover; border-radius: 14px;), puis une boîte blanche arrondie qui remonte par-dessus le bas de l'image (margin-top: -24px; position: relative; z-index: 2; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; padding: 1.25rem; box-shadow: 0 6px 18px rgba(0,0,0,0.05); display: flex; flex-direction: column; text-align: center; flex: 1;) contenant :
        • Le titre de l'article en gras.
        • La description courte (~120 caractères).
        • En bas (margin-top: auto; padding-top: 1rem;), le bouton pilule encadré « LIEN ↗ » (target="_blank" rel="noopener noreferrer").

Section 5 : Parcours « SALARIÉS ISOLÉS & TPE : VOUS N'ÊTES PAS SEULS »

  • Fond : Blanc (#ffffff).
  • Contenu (entièrement éditable dans l'admin) :
    • Bloc pédagogique destiné aux salariés des petites entreprises (< 11 salariés), commerces, artisanat ou chantiers sans CSE[cite: 6].
    • Met en avant la confidentialité absolue de toute démarche vis-à-vis de l'employeur, le rôle du syndicat Multipros, et l'accompagnement par les Conseillers du Salarié lors des entretiens préalables[cite: 6].
    • Bouton d'action rouge CGT : « Contacter l'UL en toute confidentialité »[cite: 6].

Section 6 : Vie Militante, Formation Syndicale (CFESES) & Appli Mobile

  • Fond : Gris doux (#f1f3f5).
  • Grille 2 colonnes (grid-template-columns: 1fr 1fr; gap: 2rem;) :
    1. Colonne gauche — Formation Syndicale (CFESES) : Rappelle le droit légal de chaque salarié au Congé de Formation Économique, Sociale, Environnementale et Syndicale (maintien de salaire, demande à remettre à l'employeur 30 jours avant) et l'aide à la vie syndicale[cite: 6, 8].
    2. Colonne droite — L'Application Mobile UL CGT Foix Haute-Ariège : Présente l'application Android/KMP (actualités locales, alertes mobilisation Push, carte de syndiqué virtuelle & 13 timbres 100 % hors-ligne) avec emplacement pour le lien de téléchargement direct (.apk / Play Store) et l'image QR Code (configurables dans l'admin)[cite: 8].

Section 7 : Réseau Syndical CGT

  • Fond : Blanc (#ffffff).
  • Bandeau de liens structurés vers l'écosystème confédéral et départemental : UD CGT 09, Confédération CGT (cgt.fr), La NVO (nvo.fr), IHS CGT, INDECOSA-CGT[cite: 6].

5. PIED DE PAGE (footer.php) — SOUVERAIN & PRATIQUE

  • Aucune mention "Propulsé par WordPress" ou "Thème..."[cite: 6].
  • Fond sombre (#1c1e21), texte blanc/gris clair, grille 3 colonnes :
    1. Union Locale CGT Foix Haute-Ariège : Logo (version claire/monochrome), courte présentation, et appel militant : « Une lutte dans votre entreprise, une info à partager ? Contactez l'UL ».
    2. Nos Locaux & Permanences (visible sur 100 % des pages) :[cite: 6]
      • Adresse : Espace Sabart, 10 Av. de l'Ayroule, 09400 Tarascon-sur-Ariège (modifiable dans l'admin)[cite: 7].
      • Téléphone cliquable : 07 60 49 64 69[cite: 7]
      • Email cliquable : union-locale@cgt-fha.fr[cite: 7]
      • Horaires des permanences d'accueil et juridiques (éditables)[cite: 6].
      • Lien vers la page Facebook officielle de l'UL[cite: 7].
    3. Accès rapides & Mentions : Liens vers Actualités, Calendrier, Se syndiquer, Urgence salarié, Mentions légales & Confidentialité.

6. PANNEAU D'ADMINISTRATION WORDPRESS (inc/theme-options.php)

Crée une page de réglages complète et intuitive dans Apparence > Réglages UL CGT (organisée en onglets propres sans dépendance JS externe) permettant de modifier sans coder :

  1. Onglet 1 — Identité & Coordonnées : Téléphone, E-mail, Adresse des locaux, Horaires des permanences, URL Facebook, URL page Syndiquez-vous, URL page Besoin d'aide / Contact.
  2. Onglet 2 — Bandeau Mobilisation : Case Activer, Texte du mot d'ordre & lieu, Lien URL optionnel, Champ datetime-local d'expiration automatique[cite: 6].
  3. Onglet 3 — Page d'accueil (Hero & Blocs statiques) :
    • Sélecteur d'image de fond du Hero (via la Médiathèque WP wp_enqueue_media()), Titre H1, Citation, Libellés et liens des 2 boutons du Hero.
    • Champs pour les 3 cartes « À quoi nous servons ? » (choix d'icône SVG, titre, description pour chaque carte).
    • Champs pour les blocs Salariés isolés / TPE, Formation CFESES et Application Mobile (URL APK/Store + sélecteur image QR Code + cases pour afficher/masquer chaque bloc)[cite: 6, 8].
  4. Onglet 4 — Flux Confédéral (cgt.fr) : État du cache actuel (date de dernière synchronisation, aperçu de l'article À la une en cache) et bouton de rafraîchissement manuel immédiat.

7. SEO LOCAL, OPENGRAPH & PERFORMANCE (inc/seo-performance.php)

  1. Balises <title> et <meta name="description"> :
    • Sur la page d'accueil : Union Locale CGT Foix Haute-Ariège | Défense des salariés et action syndicale[cite: 6].
    • Sur les articles et pages : [Titre] | Union Locale CGT Foix Haute-Ariège + meta description extraite automatiquement du contenu nettoyé[cite: 6].
  2. Balises OpenGraph : Injection automatique de og:title, og:description, og:url, og:type, og:locale (fr_FR) et og:image (image à la une ou image Hero par défaut) pour des aperçus propres sur Facebook, WhatsApp et SMS[cite: 6].
  3. Alerte Indexation Admin : Si get_option('blog_public') == '0', affiche une alerte rouge dans le tableau de bord WordPress invitant à autoriser l'indexation dans Réglages > Lecture[cite: 6].
  4. Optimisation & Nettoyage : Suppression de wp-emoji et wp-embed, ajout de loading="lazy" sur les images hors ligne de flottaison, échappement systématique (esc_html, esc_url, esc_attr, wp_kses_post)[cite: 6].

8. GESTION DE VERSIONS & PUBLICATION GITEA

  • Dépôt distant : https://git.cgt-fha.fr/Union_Locale_CGT_Foix_Haute-Ariege/cgt-wp-theme.git (branche principale : main).
  • Fichier .gitignore : Crée un fichier .gitignore propre à la racine pour exclure les fichiers système (.DS_Store, Thumbs.db), les éditeurs (.vscode/, .idea/), et d'éventuels dossiers temporaires, tout en conservant le code source du thème et le fichier AGENTS.md.
  • Compatibilité déploiement VPS : Assure-toi que tous les chemins dans le thème utilisent exclusivement les fonctions natives WordPress (get_template_directory(), get_template_directory_uri()) afin que le déploiement automatisé vers /var/www/fastuser/data/www/cgt-fha.fr/wp-content/themes/cgt-fha/ fonctionne sans aucune dépendance de chemin en dur[cite: 6].

9. ARBORESCENCE DES FICHIERS À GÉNÉRER

/
├── AGENTS.md                         # Ce cahier des charges
├── .gitignore                        # Exclusions propres pour Gitea
├── style.css                         # En-tête thème WP + Variables CSS + Design System complet
├── theme.json                        # Palette couleurs CGT (#d20012) & réglages éditeur
├── functions.php                     # Chargement des modules, supports WP, menus, enqueues
├── header.php                        # Topbar, Bandeau Mobilisation auto-expirant, Nav responsive
├── footer.php                        # Footer 3 colonnes avec coordonnées Espace Sabart & liens CGT
├── front-page.php                    # Page d'accueil complète (7 sections fidèles à la maquette)
├── home.php                          # Liste paginée des actualités locales de l'UL
├── single.php                        # Gabarit d'article local (partage social, catégorie, navigation)
├── page.php                          # Gabarit de page standard (Contact, Calendrier, Syndiquez-vous...)
├── archive.php                       # Archives par catégorie/étiquette locale
├── 404.php                           # Page d'erreur 404 utile avec recherche et liens vers l'UL
├── inc/
│   ├── class-cgt-confederal-feed.php # Scraper cgt.fr + cache Transients + WP-Cron + rendu wireframe
│   ├── theme-options.php             # Page d'admin WP : Réglages UL CGT (onglets + médias WP)
│   └── seo-performance.php           # Titres SEO locaux, OpenGraph, alerte indexation, nettoyage WP
└── assets/
    ├── js/main.js                    # Menu mobile accessible & onglets admin (Vanilla JS)
    └── img/                          # Visuels par défaut (hero-ariege.jpg/svg, logo-ul.svg, placeholder.svg)