FORMATION WORDPRESS · MODULE 08/08 · 10 HEURES
Vous débutez totalement ? Commencez par la section « Mode débutant » de chaque atelier : elle explique où cliquer, quoi faire et comment vérifier votre résultat. Le code vient après les manipulations simples. Voir aussi le guide de prise en main →
Dernière semaine : vous passez du site de test au livrable professionnel. Performance, sécurité, sauvegardes, contrôle des versions, recette responsive et plan de retour arrière sont évalués.
Site d’agence terminé : accueil, services, contact, blog, catégories, article, plugin métier, API, SEO, optimisations mesurées et procédure de déploiement/rollback.
PARCOURS GUIDÉ
Cliquez sur une étape pour découvrir sa mission. Le bouton « Aller à cette étape dans le cours » ouvre directement sa procédure détaillée. Le switch en colonne de droite enregistre votre avancement.
Construire une mesure de référence Impossible de dire « plus rapide » sans point de départ. Mesurez des pages réelles avec l’outil et le protocole clairement indiqués. Pas à pas Choisissez trois…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Optimiser images, polices et scripts Une amélioration doit viser un goulot réel : une image héro énorme, un script inutilisé, une police bloquante ou une image sans dimensions. Exemple d’image…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Qualité du code, sécurité et matrice de tests Les extensions, versions PHP, rôles et appareils se combinent. Une vérification PHP ou un test visuel isolé ne prouve pas la compatibilité complète.…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Déployer avec sauvegarde et rollback La mise en ligne suit une procédure écrite. Avant de modifier un site client, sauvegardez fichiers et base . Une restauration doit être testée, pas supposée.…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
Projet final : présenter votre site d’agence Votre évaluation finale doit ressembler à une livraison client. Elle ne juge pas seulement le code mais aussi la navigation, les contenus modifiables…
Action : lire la procédure, la reproduire, puis activer le switch après contrôle du résultat.
COURS APPROFONDI & ATELIERS
Ces exemples sont volontairement progressifs. Les extraits de code s’exécutent dans des fichiers PHP d’un thème/plugin WordPress, pas directement dans le texte d’une page LiveCanvas.
Avant d’optimiser, il faut mesurer. Les Core Web Vitals évaluent notamment chargement visuel, interactions et stabilité, mais ils dépendent des appareils et du réseau.
PageSpeed Insights ou Chrome → Inspecter → Lighthouse.
Exemple concret : Exemple de tableau : « Accueil, mobile, LCP à mesurer, CLS à mesurer, observation sur image hero ».
Un rapport avant optimisation est conservé avec URL, date, type de mesure et problèmes principaux.
INP n’est pas toujours disponible en laboratoire : ne remplacez pas des données terrain absentes par une valeur inventée.
LCP : rendu de l’élément principal. CLS : décalages de mise en page. INP : réactivité des interactions.
Impossible de dire « plus rapide » sans point de départ. Mesurez des pages réelles avec l’outil et le protocole clairement indiqués.
Un tableau avant/après que l’on peut comparer raisonnablement, sans inventer de mesures.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 01 » dans votre suivi.
Les images volumineuses et les dimensions imprévisibles affectent les performances. L’optimisation doit tenir compte du contexte exact de la page.
WordPress → Médias ; LiveCanvas → image du hero ; navigateur → Réseau / Lighthouse.
<img src="/images/hero.webp" width="1200" height="700"
alt="Équipe de création web au travail" fetchpriority="high">
L’image s’affiche sans saut notable de contenu et les mesures sont documentées avant/après.
Une compression trop agressive dégrade la qualité visuelle ; recherchez un compromis et testez les écrans Retina.
Image LCP : souvent grand visuel principal. Lazy-loading : chargement différé des ressources non prioritaires.
Une amélioration doit viser un goulot réel : une image héro énorme, un script inutilisé, une police bloquante ou une image sans dimensions.
<img
src="/wp-content/uploads/hero-1200.webp"
width="1200" height="680"
alt="Équipe de l’agence devant un ordinateur"
decoding="async">
loading="lazy".srcset si vous utilisez ses APIs.À éviter : supprimer ou différer toutes les ressources JS en pensant que cela garantit un meilleur INP.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 02 » dans votre suivi.
Plus un site charge de fichiers inutiles, plus son comportement peut se dégrader. Il faut identifier précisément les sources avant de désactiver une extension.
Chrome → Inspecter → Réseau ; WordPress → Extensions ; thème → wp_enqueue_scripts.
Exemple concret : Exemple de suivi : « script chargé sur toutes les pages alors qu’utile seulement sur Contact → chargement conditionnel ».
Un journal indique quelles ressources ont été conservées ou retirées, et pourquoi.
Désactiver tous les scripts peut améliorer une mesure tout en cassant les fonctions : les tests de non-régression sont indispensables.
Dépendance : ressource nécessaire à une autre. Régression : fonction qui cesse de fonctionner après une modification.
Les extensions, versions PHP, rôles et appareils se combinent. Une vérification PHP ou un test visuel isolé ne prouve pas la compatibilité complète.
Matrice de recette PASS/FAIL/BLOQUÉ avec date, outil, preuve et correctif réalisé.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 03 » dans votre suivi.
Une mise à jour doit pouvoir être reproduite et annulée. Les changements de WordPress et PHP se testent sur un environnement de staging.
Hébergement → staging ; WordPress → Tableau de bord → Mises à jour ; dépôts Git si disponibles.
Exemple concret : Exemple : « WordPress 6.x / PHP 8.x / thème lab 0.1 : accueil OK, contact OK, REST GET OK ».
Une matrice de compatibilité et une liste de tests documentent la nouvelle version.
La réussite d’un simple php -l ne prouve pas qu’un plugin fonctionne réellement avec WordPress et LiveCanvas.
CI : contrôles automatiques à chaque changement. Staging : environnement isolé avant production.
La mise en ligne suit une procédure écrite. Avant de modifier un site client, sauvegardez fichiers et base. Une restauration doit être testée, pas supposée.
Le client dispose d’une procédure de mise en ligne et d’un chemin de retour arrière testable.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 04 » dans votre suivi.
La livraison inclut un plan de restauration. Une sauvegarde inutilisable ne protège pas le site.
Hébergement → Sauvegardes ; site de test de restauration ; WordPress → Pages / Articles.
Exemple concret : Livrable : procédure de sauvegarde/restauration, capture des vérifications et version finale du projet.
Un retour arrière a été reproduit sur staging et le site restauré affiche ses contenus attendus.
Ne considérez pas l’existence d’un fichier ZIP comme une preuve de restauration réussie : la base de données doit aussi être restaurable.
Rollback : retour à une version fonctionnelle. Sauvegarde : copie des fichiers et de la base.
Votre évaluation finale doit ressembler à une livraison client. Elle ne juge pas seulement le code mais aussi la navigation, les contenus modifiables et la maintenance.
Expliquez pourquoi chaque template existe et démontrez que le client peut modifier pages, articles, catégories et menu sans toucher au PHP.
Critère de réussite : le site doit rester exploitable après changement de contenu, pas seulement correspondre à une capture statique.
Le résultat est-il reproductible ? Gardez une preuve (capture ou extrait de code), puis validez l’interrupteur « Étape 05 » dans votre suivi.
SOURCES & SUPPORTS
Documentation officielle : Consulter la référence WordPress ↗. Vidéos : ajoutez des tutoriels enregistrés et vérifiés dans LiveCanvas ; aucune vidéo factice n’est présentée comme un cours existant.
FIN DU MODULE · ÉVALUATION
Répondez aux cinq questions. Après correction, découvrez votre note sur 20, le nombre d’erreurs et l’explication de chaque réponse. Quatre réponses correctes sur cinq sont nécessaires pour valider le nouveau quiz.