Des fonctions aux classes

Une classe regroupe une responsabilité. Évitez une classe unique contenant menus, API, formulaire et SEO : les modifications deviennent difficiles à tester.

Exemple de classe simple

namespace Atelier\Frontend; final class Assets { public function hooks(): void { add_action( 'wp_enqueue_scripts', [ $this, 'enqueue' ] ); } public function enqueue(): void { wp_enqueue_style( 'atelier-main', get_theme_file_uri( '/assets/css/main.css' ), [], '1.0' ); } }

Pas à pas

1. Créez src/Frontend/Assets.php dans votre thème de test.
2. Recopiez le code ; vérifiez l’ouverture <?php et la correspondance namespace/classe.
3. Créez une classe ContentManager vide pour distinguer les contenus des ressources.
4. Reformulez à l’oral le rôle de chaque méthode et la différence entre new et static.

Résultat attendu

Le fichier PHP se charge sans erreur de syntaxe ; la responsabilité de chaque classe est claire. Son utilisation sera branchée à WordPress à l’étape suivante.

Autoload et Composer

Un autoload évite les dizaines de require_once. Composer peut créer le chargeur PSR-4, mais ce n’est pas une obligation pour installer les pages de l’Académie. Il s’agit ici d’un outil de développement PHP.

Fichier à créer : composer.json

{ "name": "atelier-horizon/theme", "type": "project", "autoload": { "psr-4": { "Atelier\\": "src/" } } }

Pas à pas

1. Créez composer.json à la racine du projet sur votre machine de développement.
2. Utilisez Composer localement pour générer vendor/autoload.php (ou fournissez une archive de projet déjà construite).
3. Dans le functions.php du thème, chargez vendor/autoload.php seulement s’il existe.
4. Instanciez Atelier\Frontend\Assets et appelez hooks().
5. Vérifiez qu’un chemin de fichier incorrect déclenche une erreur explicable.

Erreur fréquente : confondre Atelier\ comme chaîne JSON échappée et namespace Atelier; dans PHP. Les deux représentations n’ont pas la même syntaxe.

Actions vs filtres

Une action déclenche une opération ; un filtre reçoit une valeur et doit la retourner.

Exemple : filtre de classes HTML

add_filter( 'body_class', function ( array $classes ): array { if ( is_front_page() ) { $classes[] = 'is-home'; } return $classes; } );

Exemple : une action à l’initialisation du thème

add_action( 'after_setup_theme', function (): void { add_theme_support( 'title-tag' ); add_theme_support( 'post-thumbnails' ); register_nav_menus( [ 'primary' => 'Menu principal' ] ); } );

Pas à pas

1. Ajoutez le filtre et vérifiez avec l’inspecteur HTML que la classe is-home n’apparaît que sur l’accueil.
2. Activez la prise en charge des images mises en avant dans les articles.
3. Supprimez temporairement return $classes; sur votre environnement de test pour constater l’erreur, puis restaurez le code.
4. Rédigez deux phrases : « J’utilise une action quand… » et « J’utilise un filtre quand… ».

Résultat attendu

Les classes CSS apparaissent sur le bon écran et aucune valeur n’est perdue après le filtre.

Charger CSS et JavaScript de manière WordPress

Le navigateur peut voir une ressource, mais WordPress a besoin de connaître sa version, ses dépendances et le contexte d’usage.

Exemple fiable pour un thème

add_action( 'wp_enqueue_scripts', function (): void { wp_enqueue_style( 'atelier-style', get_theme_file_uri( '/assets/css/main.css' ), [], '1.0.0' ); if ( is_front_page() ) { wp_enqueue_script( 'atelier-home', get_theme_file_uri( '/assets/js/home.js' ), [], '1.0.0', true ); } } );

Pas à pas

1. Créez les deux fichiers assets/css/main.css et assets/js/home.js.
2. Ajoutez le Hook à functions.php.
3. Dans les outils réseau du navigateur, vérifiez que main.css arrive sur toutes les pages et home.js seulement à l’accueil.
4. Modifiez la version après une mise à jour pour gérer le cache.

À éviter : copier directement des balises <script> dans header.php sans justification, ce qui complique les dépendances.

Tester avant de livrer

Un code qui s’affiche une fois ne suffit pas. Il faut une méthode reproductible et des vérifications ciblées.

Protocole manuel

1. Activez un journal PHP sur votre staging privé, jamais en exposition publique.
2. Chargez Accueil, Article et Contact avec l’inspecteur navigateur ouvert.
3. Vérifiez les requêtes réseau CSS/JS et l’absence d’erreurs console.
4. Déclenchez volontairement un chemin d’asset inexistant, identifiez le 404, puis corrigez-le.
5. Utilisez php -l sur votre machine si PHP est disponible ; ajoutez PHPCS/WPCS en étape avancée.
6. Conservez la version du code dans Git avec une note de test.

Preuve attendue

Capture de l’onglet Réseau, un journal de modifications et une explication claire de l’incident provoqué.

Limite : PHPCS et un contrôle syntaxique ne démontrent ni l’absence de failles ni la compatibilité totale de WordPress.