Introduction
Ce guide a pour vocation d’être le moins technique possible pour expliquer comment fonctionne le site du CAF Meythet et pour préparer peut-être un futur webmaster.
En toute première chose, il faut savoir que le site du CAF utilise WordPress qui est un CMS (système de gestion de contenu). Notre site est hébergé chez ovh (OVHCloud).
Notion de thème WordPress
Un thème WordPress est un ensemble qui détermine l’apparence et le fonctionnement d’un site. Le CAF Meythet utilise le thème evolve et donc en conséquence le dossier evolve qui contient les programmes du thème.
https://cafmeythet.org/wp/wp-content/themes/evolve
Donc tous les programmes php pour le calendrier sont situés dans ce dossier ainsi que les données (images, fichiers, icones). Ces données sont dans deux dossiers principaux
https://cafmeythet.org/wp/wp-content/themes/evolve/CAF
https://cafmeythet.org/wp/wp-content/themes/evolve/CAF-DATA
Le langage informatique utilisé : php
php (Hypertext Preprocessor) est le langage utilisé pour construire WordPress. Facebook et Wikipedia sont également créé en php.
C’est un langage orienté objet qui dispose de nombreuses fonctions de base. Pour des raisons de faille de sécurité il est impératif d’utiliser une version supérieure à 8.1 – les versions 7.x ne sont plus maintenues.
C’est le langage idéal pour produire des pages Web dynamiques tel que le calendrier.
Java script
Le php est majoritairement utilisé puisqu’il génère les échanges avec un serveur mais pour tout ce qui se passe en local sur le poste client (c.a.d chez vous), un code java script est utilisé. La déclaration du code java script se fait en utilisant les bannières <SCRIPT> code java script </SCRIPT>. Un bon exemple est le diaporama du calendrier qui est écrit en java script.
Relation entre une application Web et une page WordPress
L’adresse internet ou URL de lancement d’une application Web tel que le calendrier se fait après publication d’une page WordPress qui ne contient que le titre et un modèle de page.
Ce modèle de page est définit par une séquence clé Template Name: qui doit être dans le source php du programme qui lui même doit être transféré dans le dossier du thème actif.
<?php
/*
Template Name: TESTCALENDRIER
*/
Avec l’exemple ci-dessus du source php d’un programme, le modèle de page définit ici est TESTCALENDRIER
Ainsi lorsque la page de titre TestCalendrier qui aura comme modèle TESTCALENDRIER est publiée, l’adresse ou URL de lancement de l’application correspondante est :
https://cafmeythet.org/wp/testcalendrier/
Mise à jour de WordPress et de ses composants
WordPress ait mis à jour régulièrement. D’autres composants comme les extensions et thème doivent également être mis à jour (amélioration, suppression de faille de sécurité).
Le logiciel php doit également être mis à jour.
La version de php actuellement utilisé en mai 2026 est php 8.3.23. WordPress recommande au minima la version 8.3.
La mise à jour d’un thème est problématique car le dossier thème est entièrement vidé de tous ses éléments. C’est ce qui a produit le problème du 26 novembre 2025.
Pour éviter l’effacement des programmes et des données une technique existe qui consiste à cloner le theme evolve par un theme enfant que je nomme evolve-caf
Construction du thème enfant evolve-caf
Etape 1 : créer le dossier evolve-caf dans le dossier themes en utilisant ftp
Etape 2 : créer le fichier style.css qui va préciser le nom du thème enfant et celui du thème parent
Attention : style.css n’est pas un fichier css comme celui qui a le même nom dans le thème parent evolve.
Deux mots clés sont obligatoires
Theme Name: qui précise le nom du theme enfant
Template: qui précise le nom du thème parent
Le “:” accolé fait partie du mot-clé. Le fichier est créé avec l’éditeur de source Sublime Text puis est téléchargé par ftp.
Etape 3 : créer le fichier function.php qui va permettre d’ajouter le fichier css style.css du parent evolve
Pour ajouter des styles css personnalisés, une autre fonction pourra être ajouté à ce fichier php. Des styles personnalisés sont également dans les fichier php d’un programme entre les bannières STYLE et /STYLE
Etape 4 : activation du style enfant
Le fait d’ajouter le fichier style.css a été reconnu par WordPress qui a ajouté le thème evolve-caf aux thèmes existants.
En sélectionnant le thème evolve-caf un bouton permet de l’activer.
A partir de cette activation tous les fichiers situés dans le theme enfant evolve-caf seront prioritaires sur ceux de même nom du thème parent evolve.
Le site utilisera les programmes php personnalisés du CAF Meythet de evolve-caf et ceux propres aux thème evolve du thème parent.
Et, grand avantage de cette technique de thème enfant, en cas de mise à jour du thème parent evolve le thème enfant ne sera pas modifié.
Emplacement des dossiers et fichier
Les dossiers CAF et CAF-DATA devront être déplacés du dossier evolve vers le dossier evolve-caf
Le paramétrage des chemins d’accès et des URL correspondant devra être adapté.
Installation du composer et de phpspreadsheet
Le calendrier et le bloc-notes utilise des fichiers Excel de type xlsx soit pour les export (création), soit pour les imports (lecture). Pour gérer ces fichiers en lecture ou écriture, il est nécessaire de disposer d’un ensemble de fonctions du package phpspreadsheet. Le chargement et l’installation du package phpspreadsheet nécessite l’installation d’un composant qui est le composer php.
Installation du composer
Il est nécessaire de charger le package sur le thème enfant par la commande php en se mettant en mode terminal unix. La commande ssh://cafmeyth-mic@ssh.cluster103.hosting.ovh.net:22/ permet de se connecter en mode terminal en utilisant par exemple PUTTTY
php -r “copy(‘https://getcomposer.org/installer’, ‘composer-setup.php’);”
Installer ensuite composer.phar par la commande
php composer-setup.php
Installation du package phpspreadsheet qui permet le traitement lecture/écriture des fichiers Excel
Elle se fait en utilisant la commande suivante en mode terminal unix
php composer.phar require phpoffice/phpspreadsheet
Intégration de phpspreadsheet dans le source php des applications
Il est nécessaire d’incorporer au source php ces deux lignes de commande pour la lecture.
Pour la création d’un fichier Excel le nombre de lignes de commande est bien plus important et dépend des propriétés que l’on veut ajouter au cellule du fichier Excel – commande use …
Apparence des objets sur l’écran par du CSS
CSS signifie Feuilles de Style en Cascade (Cascading Style Sheet en anglais) qui permet de définir la police utilisée, la dimension des blocs, leur couleur, leur taille, la police etc …
La définition des styles peut être ajouté dans le source du programme php mais hors php entre les bannières <STYLE> et </STYLE>
Elles peuvent être dans un fichier source .css qui complètent les définitions sources du thème (evolve) qui sont dans le source style.css
Ainsi une définition d’un style peut être défini dans style.css du thème evolve, puis complétée par le source css utilisateur (cafmeythet.css par exemple) puis complétée par les définitions qui sont entre les bannières <STYLE> et </STYLE>. C’est pour cela que l’on parle de Cascading ou “en cascade”.
Pour définir le fichier css utilisateur on utilise une nouvelle fois le fichier functions.php déjà utilisé pour le thème enfant.
Ci-dessus on voit que l’on ajoute au thème enfant evolve-caf, les définitions du fichier style.css du thème parent ( get_template_directory_uri() ) puis en cascade les définitions du fichier cafmeythet.css du thème enfant evovle_caf ( get_stylesheet_directory_uri() )
La fonction add_action va alors lancer automatiquement les deux feuilles de style css chaque fois qu’une application (page) du thème sera activée.
Pour mettre au point cafmeythet.css et ne pas tomber dans le piège des données en cache des navigateurs, on utilise une astuce consistant à ajouter la date et heure au nom du fichier css, par exemple cafmeythet_20251215_1800.css – à chaque modification des styles css, on mettra à jour la date et heure du fichier css et son nom dans functions.php.
Les applications web du site du CAF Meythet
La plus connue est le CALENDRIER mais il y en a plusieurs autres :
- CALENDRIER : calendrier des activités
- BLOC-NOTES : saisie des activités, statistiques des sorties, gestion du matériel et des documents
- ABONNEMENT : inscription à des types d’activité
- CADRES : trombinoscope des encadrants
- INSCRIPTION : inscription à l’escalade
- TESTCALENDRIER : pour mise au point du calendrier
- TESTBLOC-NOTES : pour mise au point du bloc-notes
- TESTWP : application du webmaster
Base de données
En plus de la base de données propre à WordPress, une seconde base de données MySQL est utilisées par les applications Web.
Un certain nombre de tables sont utilisées par les applications en ligne et un nombre équivalent pour les applications de test.
Par exemple la table cal_activ qui contient l’ensemble des données des activités est cloné par l’application du webmaster sur la table test_activ pour l’application de test TESTCALENDRIER
Les outils nécessaires
Editeur de code
L’éditeur de source Sublim Texte est indispensable pour coder des langages tel que le php, le java script ou le css.
La mise en couleur des lignes évite la plupart des erreurs
Client ftp
Le client ftp FileZilla qui permet de publier et de modifier les applications ainsi que des fichiers.
Les outils proposés par ovh
Un hébergeur tel que ovh ou Lws fournissent un ensemble d’outils dont on peut citer :
Un accès à phpMyAdmin qui permet de faire des requêtes sql sur la base de données
Une vision des mails envoyés par le calendrier ainsi que des rapports d’erreurs
Un accès en terminal Unix sur les dossiers de WordPress
Une sauvegarde automatique des bases de données.
C’est le principe QUESTION/REPONSE entre un CLIENT (un adhérent ou un encadrant à travers son mobile ou PC) et un SERVEUR (le gros ordinateur unix avec les bases de données chez ovh).
Il y a deux bases de données, une utilisée principalement par WordPress et une qui est utilisée uniquement par nos applications web.