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.
A la base on utilise le CMS (système de gestion de contenu) WordPress qui est installé sur un hébergeur de serveur ovh (OVHCloud).
Notion de thème WordPress
Un thème WordPress est un ensemble de fichier qui détermine l’apparence et le fonctionnement d’un site. Le CAF Meythet utilise le thème evolve et donc le dossier evolve
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.
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 du début de source php d’un programme php (ci-dessus) le modèle de page définit 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é).
WordPress est écrit en php comme le calendrier et le logiciel php doit également être mis à jour.
Le site hébergé chez ovh utilise jusqu’à présent la version php 7.4 alors que WordPress recommande au minima la version 8.3 non supportée par une ancienne version d’evolve.
Lorsque le thème evolve est mis à jour le dossier evolve est vidé (perte des programmes et données), 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 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
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. Les styles personnalisés sont actuellement dans le fichier php d’un programme (exemple calendrier.php)
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.
En cas de mise à jour du thème 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 quelquefois des fichiers Excel de type xlsx. (Fichier Excel mutli-feuilles). 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 instructions
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.