Connection à WordPress

Dans un navigateur, saisir l’url :
https://alertesaintjean.fr/wp-login.php

Ensuite, il est demandé :
Identifiant ou adresse e-mail : saisir ce qui est demandé
Mot de passe : saisir le mot de passe
puis cliquez sur le bouton : se connecter

Comment rouver une ancre, pour (par exemple)

OK – Bonus : script détective qui te dit aussi si c’est une ancre mobile

Je te redonne la version du script “détective d’ancre”, améliorée pour t’indiquer :

• le type de bloc (Section / Ligne / Module Texte / Appel d’action…),

• et si la classe asj-anchor-mobile est présente (OUI / non).

📌 À coller dans la console (F12 → Console), sur la page où tu veux chercher :
—————————————————

(() => {
// 📝 On demande l’ID à rechercher
let id = prompt(‘ID de l’ancre à rechercher (sans #)’, ‘Planning’);
if (!id) {
alert(‘Recherche annulée.’);
return;
}
id = id.trim();

// 1) On prépare une liste de documents à fouiller : la page + toutes les iframes accessibles
const docs = [document];

document.querySelectorAll(‘iframe’).forEach(f => {
try {
if (f.contentDocument) {
docs.push(f.contentDocument);
}
} catch (e) {
// On ignore les iframes d’un autre domaine
}
});

let target = null;
let ownerDocIndex = -1;

// 2) On cherche l’ID dans chaque document
docs.some((doc, i) => {
const el = doc.getElementById(id);
if (el) {
target = el;
ownerDocIndex = i;
return true;
}
return false;
});

if (!target) {
alert(‘❌ Aucune ancre avec id= »‘ + id + ‘ » trouvée dans la page ou les iframes.’);
return;
}

// 3) On remonte jusqu’aux blocs Divi (section / ligne / module)
const section = target.closest(‘.et_pb_section’);
const row = target.closest(‘.et_pb_row’);
const module = target.closest(‘.et_pb_module’);

// 4) On détermine le « type » lisible
let typeBloc = ‘Élément simple’;
let conseil =  »;

if (module) {
const c = module.classList;
if ([…c].includes(‘et_pb_text’)) {
typeBloc = ‘Module Texte’;
} else if ([…c].includes(‘et_pb_promo’)) {
typeBloc = ‘Module Appel d’action’;
} else {
typeBloc = ‘Autre module Divi’;
}
conseil = ‘👉 Dans Divi : engrenage GRIS du module → onglet « Avancé » → « ID & classe CSS ».’;
} else if (row) {
typeBloc = ‘Ligne (Row)’;
conseil = ‘👉 Dans Divi : engrenage VERT de la ligne → onglet « Avancé » → « ID & classe CSS ».’;
} else if (section) {
typeBloc = ‘Section’;
conseil = ‘👉 Dans Divi : engrenage BLEU de la section → onglet « Avancé » → « ID & classe CSS ».’;
} else {
conseil = ‘👉 L’ID est sur un élément intérieur (balise HTML), pas directement sur un bloc Divi.’;
}

// 5) Vérifier la classe asj-anchor-mobile
const hasMobileClass =
target.classList.contains(‘asj-anchor-mobile’) ||
(module && module.classList.contains(‘asj-anchor-mobile’)) ||
(row && row.classList.contains(‘asj-anchor-mobile’)) ||
(section && section.classList.contains(‘asj-anchor-mobile’));

// 6) On choisit quel bloc entourer
const wrapper = module || row || section || target;

// 7) Scroll + mise en évidence
try {
wrapper.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });
} catch (e) {
wrapper.scrollIntoView();
}

wrapper.style.outline = ‘3px solid red’;
wrapper.style.outlineOffset = ‘4px’;

// 8) Récap
const where = ownerDocIndex === 0 ? ‘document principal’ : ‘iframe #’ + ownerDocIndex;
alert(
‘✅ Ancre trouvée :nn’
+ ‘id = « ‘ + id + ‘ »n’
+ ‘Contexte : ‘ + where + ‘n’
+ ‘Type de bloc : ‘ + typeBloc + ‘n’
+ ‘Classe « asj-anchor-mobile » : ‘ + (hasMobileClass ? ‘OUI’ : ‘non’) + ‘nn’
+ conseil
);
})();

—————————————————

On peut donc voir clairement :

• Type de bloc : Module Texte / Ligne / Section / etc.

• Classe “asj-anchor-mobile” : OUI / non

🟩 OK
Donc à retenir pour toi :

Pour les ancres mobiles :
ID CSS = … + Classe CSS = asj-anchor-mobile sur le même bloc.

Et on a en plus un “radar” pour les retrouver et vérifier si la classe est bien posée 👍

Explications :

Créer une ancre “classique”

Explications :

🟩 1. Créer une ancre “classique”

1. Ouvrir la page dans le Visual Builder.

2. Choisir le bloc repère pour l’ancre :

   • soit la Section (bloc bleu),

   • soit la Ligne (bloc vert),

   • soit un Module (bloc gris – texte, appel d’action, etc.).

3. Sur ce bloc → cliquer sur l’engrenage (bleu / vert / gris).

4. Onglet Avancé → ID & classe CSS.

5. Remplir ID CSS avec un nom simple, sans espace, sans # :

   • exemple : Planning, Tarifs, ContactDanse, AG-2025…

6. Enregistrer.

👉 Le lien qui pointe vers cette ancre aura simplement l’URL :

• #Planning

• #Tarifs
  etc.

Créer une nouvelle page

Explications :

Créer une nouvelle page

Explications :

Créer une nouvelle page

Explications :

Créer une nouvelle page

Explications :

Comment dans apparence / Menu, faire disparaitre ou apparaitre un sous menu a des dates différentes

Explications :

Je veux que mon sous menu Prochain.s CA.s disparaisse après tel date :

– Dans Apparence → Menus, en haut à droite, clique sur Options de l’écran.
– Vérifier que “Classe CSS” est bien cochée.
– Dans la liste du menu, ouvrir l’élément “DATE.S CA” (petite flèche à droite).
– Dans le champ “Classe CSS (facultatif)”, mettre exactement :

asj-menu-2025-01-01-2025-11-14

– Clique sur Enregistrer le menu.

À partir de là :
Du 1ᵉʳ janvier 2025 jusqu’au 14 novembre 2025 → le lien “DATE.S CA” apparaît dans le menu.

Avant le 1ᵉʳ janvier 2025  → il est caché.

Après le 14 novembre 2025 → il disparaît tout seul, il n’y a plus rien à toucher.
Sauf a remettre des dates pour qu’il apparaisse de nouveau

Cela utilise le snippet : ASJ – Menus visibles selon dates (v1.0.0) 
Voir menu WordPress « Snippets« 

Sur mobile, les sous menu, peuvent ne pas pointer au bon endroit (visuellement)

Explications pour un thechnicien

💻 Problème et Solution d’Ancrage sur Mobile

🎯 Le Problème (Le Décalage)

• Mécanisme standard : Lors d’un clic sur un élément de navigation (menu), le navigateur est dirigé vers un point spécifique de la page identifié par une ancre HTML (généralement un attribut id ou ID CSS).

• Comportement sur mobile : Sur les appareils mobiles, l’affichage est souvent affecté par des éléments fixes, tels qu’une barre de navigation supérieure (header) qui reste visible lors du défilement.

• Conséquence : Lorsque l’ancre est atteinte, le contenu ciblé (par exemple, le TITRE de la section comme « Planning » pour la page DANSE) est partiellement ou totalement masqué par cette barre de navigation fixe, créant un décalage visuel.

💡 La Solution (Le Décalage compensé)

La parade technique consiste à ajouter un espace de compensation juste avant l’ancre ciblée, mais uniquement pour l’affichage mobile.

• Principe : Utiliser une classe CSS appliquée à l’élément contenant l’ancre (id). Cette classe définit une marge ou un rembourrage (padding) négatif qui n’est actif que lorsque la page est vue sur un appareil mobile.

• Mise en œuvre technique : L’ajout de la compensation se fait via une requête média CSS (@media screen and (max-width: XXXpx)) qui cible les écrans mobiles.

  • On utilise souvent la propriété scroll-margin-top ou, si nécessaire, un ajustement de la position via une combinaison de marge négative (margin-top) et de rembourrage positif (padding-top).

Exemple (Cas d’utilisation) : Pour la page DANSE, le choix « Planning » du menu pointerait vers une ancre (ex: <h2 id="planning">Planning</h2>) à laquelle on aurait appliqué la classe d’ajustement mobile.

Cette technique garantit que, même avec une barre de navigation fixe, le titre de la section ciblée reste entièrement visible après la redirection vers l’ancre.

Explications pour un néophyte

🧭 Le Problème du « Masque » sur Mobile

Imaginez que vous utilisez un plan de ville très long.

Le Problème (Le Masque)

• Le Menu, c’est comme un Raccourci : Quand vous cliquez sur un élément du menu (par exemple, « Planning »), c’est comme si vous disiez à votre navigateur : « Amène-moi directement à la pancarte ‘Planning’ sur cette longue page. »

• La Barre Fixe : Sur les téléphones, il y a souvent un bandeau en haut (le menu principal) qui ne bouge pas, il est collé à l’écran. C’est pratique, car vous avez toujours le menu sous la main.

• Le Décalage : Le navigateur vous amène exactement au début de la pancarte « Planning ». Le problème, c’est que ce bandeau supérieur vient recouvrir le haut de la pancarte. Au lieu de voir le titre « Planning » en entier, vous ne voyez que le début du texte qui suit, car le bandeau le masque.

Conclusion simple : Le bandeau fixe mange le titre que vous vouliez voir.

🛡️ La Solution (L’Épaulement)

La solution consiste à ruser en créant un espace de sécurité invisible, mais uniquement pour les téléphones.

• L’Idée : Quand vous mettez le raccourci (l’ancre) au niveau du titre « Planning », au lieu de le mettre juste au début du titre, on va lui demander de viser un endroit qui est légèrement plus haut sur la page.

• L’Épaulement : On crée un petit « coussin » ou un épaulement juste au-dessus du titre.

• Le Rôle du Coussin : Ce coussin est exactement de la hauteur du bandeau fixe en haut.

• Le Résultat : Le navigateur vise ce coussin, le bandeau fixe vient se coller sur le coussin, et par conséquent, le titre « Planning » apparaît désormais juste en dessous du bandeau, parfaitement visible !

Conclusion simple : On ajoute un espace de sécurité (un coussin) pour que le bandeau fixe ne cache plus le titre de la section. Ce coussin n’existe que sur les téléphones pour ne pas décaler l’affichage sur les ordinateurs.

Explications par l’exemple
Exemple cas pour la page DANSE, le choix « Planning »

ce qu’il faut retenir c’est bien ce couple sur le même bloc Divi :

ID CSS → Planning

Classe CSS → asj-anchor-mobile

Donc, dans Divi → engrenage de la section / ligne / module :
Avancé → ID & classe CSS

ID CSS : Planning

Classe CSS : asj-anchor-mobile

👉 Tous les liens qui pointent vers #Planning profiteront alors du snippet
“ASJ – Ancres mobile : scroll custom (v4.0.0)”
et auront le scroll corrigé sur mobile (offset, etc.).
Les autres ancres sans cette classe gardent le comportement normal.

🟦 INFO – Résumé “recette” pour chaque nouvelle ancre mobile

Pour chaque ancre que l’on veut rendre “propre sur mobile” :

Choisir un ID (ex. Planning, Tarifs, ContactDanse…)

Sur le bloc Divi qui sert de repère (souvent la ligne qui porte le titre) :

ID CSS → Planning

Classe CSS → asj-anchor-mobile

Les liens (menu, boutons, texte…) → URL / lien : #Planning

On peut en mettre autant que tu veux :

Planning

Tarifs

Inscription
… chacun avec sa classe asj-anchor-mobile.

Icones utiles

Explications :
Icones :

💻 / 🎯/ 💡 / 🧭 /

🛡️/👉 / 🟩/ 🟦 / 🟨/ 📌/ 🔍

2025-11-17 15:00

🟦 INFO
Je peux utiliser quasiment tous les emojis standards Unicode dans le chat (les mêmes que sur ton téléphone : 🙂, 🚗, ⚽, etc.).
Par contre, en faire une liste complète serait interminable, donc je te propose plutôt :

• un rappel de notre code couleur à nous,

• • une boîte à outils d’icônes utiles qu’on peut réutiliser pour WordPress, Divi, snippets, etc.

🟦 INFO • Ton code couleur perso (qu’on utilise déjà)

🟦 INFO • Icônes “boîte à outils” que je peux utiliser facilement

• Icône	Libellé / Usage
  ✅	Validé, tout bon, OK final
  ☑️	Coché, option activée
  🔘	Sélection actuelle / élément choisi
  🟢	Tout va bien, en ligne, opérationnel
  🟡	À surveiller, en cours, moyen
  🔴	Problème important, à traiter
  ❌	Erreur, à corriger, KO
  🚫	Interdit, non autorisé
  🛑	Stop net, ne pas continuer
  ⚠️	Attention, point de vigilance
  ❗	Important, à lire absolument
  ❕	Remarque importante mais moins critique
  ❓	Question ouverte
  ❔	Doute / à vérifier
  ℹ️	Info utile, complément

  mmmmmmmmmm

  Fiche mémo – Icônes et usages

  Version 1.0 – Fiche pratique pour les échanges et la documentation.

  1. Statut / validation / erreurs

  Icône	Libellé / Usage
  ✅	Validé, tout bon, OK final
  ☑️	Coché, option activée
  🔘	Sélection actuelle / élément choisi
  🟢	Tout va bien, en ligne, opérationnel
  🟡	À surveiller, en cours, moyen
  🔴	Problème important, à traiter
  ❌	Erreur, à corriger, KO
  🚫	Interdit, non autorisé
  🛑	Stop net, ne pas continuer
  ⚠️	Attention, point de vigilance
  ❗	Important, à lire absolument
  ❕	Remarque importante mais moins critique
  ❓	Question ouverte
  ❔	Doute / à vérifier
  ℹ️	Info utile, complément

  🟩 OK – Statut / validation / erreurs

  • ✅ validé / tout bon

  • ❌ erreur / à éviter

  • ⚠️ attention / point sensible

  • ℹ️ info importante

  • 🚧 en travaux / en test

  • ⏳ en cours / ça peut prendre du temps (côté humain, pas moi 😉)

  2. Organisation / étapes / navigation

  Icône	Libellé / Usage
  ➜	Action à faire, prochaine étape
  ➡️	Continuer, suivant, aller à droite
  ⬅️	Retour, précédent
  ⬆️	Remonter, aller en haut
  ⬇️	Descendre, aller plus bas
  🔁	Répéter, récurrence, routine
  🔄	Rafraîchir, recharger, « on relance »
  🔂	Rejouer / refaire une fois
  🔀	Mélanger, ordre aléatoire
  🔗	Lien, URL, ancre
  🧭	Orientation, navigation générale
  📌	Point à garder, élément « épingle »
  📍	Localisation précise, endroit
  📎	Pièce jointe, fichier lié
  🧷	Petit truc accroché, détail à ne pas perdre

  ⬜ NOTE – Navigation / structure

  • ➜ étape / action à faire

  • ➕ ajouter / activer / créer

  • ➖ retirer / désactiver

  • 🔁 répéter / boucle / récurrence

  • 📌 point important / épinglé

  • 🔗 lien / URL

  • 📎 pièce jointe / fichier lié

  3. Temps / planning / échéances

  Icône	Libellé / Usage
  📅	Date, événement (AG, tournoi, etc.)
  📆	Planning, calendrier global
  🗓️	Agenda détaillé, feuille de dates
  ⏰	Heure précise, alarme
  🕒	Horaire, créneau
  ⏳	En cours, en attente
  ⌛	Temps écoulé, presque fini
  🕐	Heure visuelle (exemple, à adapter)

  ⬜ NOTE – Temps / planning

  • 📅 date / événement / AG / tournoi

  • 🕒 horaire / créneau

  • ⏱️ délai / temps estimé (pour toi, pas pour moi 😉)

  4. Fichiers / documents / données

  Icône	Libellé / Usage
  📄	Document classique, page, texte
  📃	Version brouillon / manuscrit
  📑	Sommaire, repère dans un document
  📚	Ensemble de documents, bibliothèque
  📁	Dossier, rubrique
  📂	Sous-dossier, classement interne
  🗃️	Archive, ancien contenu
  🗂️	Classement par onglets, catégories
  🗄️	Archive lourde, historique
  📊	Tableau, statistiques, données chiffrées
  📈	Évolution à la hausse, amélioration
  📉	Baisse, diminution
  🧾	Reçu, facture, justificatif
  📝	À rédiger, note, prise de notes

  ⬜ NOTE – Docs, fichiers, textes

  • 📄 document, page, texte

  • 📁 dossier / section du site

  • 📊 tableau / stats

  • 📑 sommaire / section

  • 📝 à rédiger / texte à compléter

  • 📷 capture, image

  5. Web / WordPress / Divi / technique

  Icône	Libellé / Usage
  🌐	Site web, front-end
  🧩	Extension / plugin / module
  ⚙️	Réglages, configuration
  🔧	Petit réglage, correction ciblée
  🔨	Modification lourde, gros chantier
  🛠️	Maintenance, intervention technique
  💾	Sauvegarde, backup, enregistrement
  🧪	Test, essai, debug
  🧰	Boîte à outils, ressources techniques
  🧱	Bloc, module, section (Divi, builder)
  🔍	Analyse, audit, diagnostic
  🧠	Logique, stratégie, réflexion globale
  🧵	Fil de discussion, suite d’échanges
  🪛	Bidouille fine, ajustement précis

  ⬜ NOTE – Web / WordPress / Dev

  • 🌐 site / page web

  • 🧩 plugin / extension

  • 🛠️ réglages / technique / snippet

  • 💾 sauvegarde

  • 🧪 test / debug

  • 🔍 analyse / audit

  • 🧱 bloc / module (Divi, Divi Supreme, etc.)

  6. Communication / réseaux / contenu

  Icône	Libellé / Usage
  💬	Message, commentaire, échange
  🗨️	Citation, réponse
  🗯️	Message marqué / accentué
  ✉️	Mail en général
  📧	Adresse / envoi par mail
  📣	Annonce, info publique
  📢	Mise en avant forte, « à diffuser »
  📡	Signal, diffusion, live
  📰	Article, actualité
  📱	Mobile, affichage smartphone
  💻	PC, affichage bureau
  🖥️	Écran, poste fixe
  🎥	Vidéo (YouTube, Facebook, etc.)
  🎞️	Séquence, montage vidéo
  ▶️	Lecture, démarrer
  ⏯️	Play/pause, mise en pause
  🎙️	Audio, podcast, message vocal
  🎧	Écoute, casque, son

   

  7. Ambiance / priorité / ressenti

  Icône	Libellé / Usage
  ⭐	Point important, élément clé
  🌟	Mise en avant spéciale, « star »
  ✨	Amélioration, petit plus visuel
  💡	Idée, astuce, suggestion
  🔥	Très important / urgent / chaud
  🎯	Objectif, but précis
  🎉	Succès, bonne nouvelle
  🏁	Fin de tâche, objectif atteint
  🚀	Gros progrès, optimisation, « on décolle »
  ❤️	Très important pour l’asso / coup de cœur
  💛	Important mais pas critique
  💚	Bien pour le confort / la facilité
  💙	Confiance, stabilité
  🤝	Coopération, travail à plusieurs
  🙏	Merci, gratitude
  🙂	Neutre / normal, tout va bien
  😃	Content, bonne avancée
  😅	On a galéré mais ça marche
  🤔	À réfléchir, à creuser
  😬	Bof / pas idéal
  😍	Gros coup de cœur, super résultat

  ⬜ NOTE – Ambiance / humeur

  • 🙂 normal / léger

  • 🤔 réflexion / idée à creuser

  • 😅 “ouf”, compliqué mais on gère

  • 🚀 amélioration / optimisation / “on envoie”

  • ❤️ coup de cœur / très important pour toi

  8. Rappel du code couleur utilisé dans les chats

  Icône	Libellé / Usage
  🟦 INFO	Explication, contexte, mode « je t’explique »
  🟩 OK	Solution trouvée, confirmation, validation
  🟨 WARN	Attention, limite, risque, chose à surveiller
  🟥 ERR	Erreur, blocage, incompatibilité
  ⬜ NOTE	Remarque, astuce, mémo, info complémentaire

   

mmmmmm