# Sage 10 en pratique : développer un thème WordPress avec Blade, Acorn et Bud

> Installation de Sage 10, composants Blade, service providers Acorn et build Bud, avec les pièges de déploiement rencontrés sur un vrai projet.

- Auteur : Clément Hadrot
- Publié le : 2022-06-09
- Mis à jour le : 2022-06-09
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/sage-10-blade-acorn-bud-pratique/

## L’essentiel

- Acorn apporte le conteneur de services Laravel à WordPress
- Blade remplace entièrement le PHP natif dans les vues
- Bud gère le build sans configuration Webpack manuelle

Le studio de photographie Lumen souhaitait un thème sur mesure avec une architecture de code proche de ce que l'équipe pratiquait déjà sur ses projets Laravel côté applicatif. Sage 10, sorti l'année précédente, correspondait exactement à ce besoin : il introduit Acorn, un pont entre WordPress et le conteneur de services de Laravel, et remplace l'ancien build Webpack par Bud, plus simple à configurer. Ce tutoriel couvre l'installation complète et les deux ou trois pièges de déploiement rencontrés en production.

Ce texte ne compare pas Sage aux autres starter themes du marché ; il se concentre sur sa mise en pratique concrète, pour qui a déjà choisi cette voie.

## Installation et structure du projet

Sage 10 s'installe via Composer, à la différence des versions précédentes qui reposaient sur un simple générateur Yeoman :

```
composer create-project roots/sage studio-lumen
cd studio-lumen
npm install
npm run build
```

La structure qui en résulte diffère sensiblement d'un thème classique : les vues vivent dans `resources/views/`, les contrôleurs optionnels dans `app/`, et le point d'entrée du thème reste `functions.php`, mais réduit à sa portion congrue puisque l'essentiel de la logique passe désormais par Acorn.

## Acorn : le conteneur de services Laravel appliqué à WordPress

> L'essentiel à retenir : Acorn apporte le conteneur de services Laravel à WordPress ; Blade remplace entièrement le PHP natif dans les vues ; Bud gère le build sans configuration Webpack manuelle

Acorn adapte plusieurs briques de Laravel — le conteneur d'injection de dépendances, les service providers, le système de configuration — au contexte de WordPress. Un service provider dédié aux menus du thème, par exemple, s'enregistre comme dans une application Laravel classique :

```
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class ThemeServiceProvider extends ServiceProvider {
	public function boot() {
		register_nav_menus( array(
			'primary' => __( 'Menu principal', 'sage' ),
			'footer'  => __( 'Menu du pied de page', 'sage' ),
		) );

		add_theme_support( 'post-thumbnails' );
		add_theme_support( 'title-tag' );
	}
}
```

Ce provider est ensuite déclaré dans `config/app.php`, aux côtés des autres fournisseurs de services du thème. L'intérêt principal de cette organisation : chaque aspect du thème (menus, images, blocs personnalisés) vit dans son propre provider, plutôt que dans un unique `functions.php` qui grossit indéfiniment.

## Blade : des vues sans balises PHP à rallonge

Les templates s'écrivent en Blade, avec héritage de gabarits natif, ce qui réduit fortement la duplication par rapport à des `get_header()` et `get_footer()` répétés dans chaque fichier :

```
{{-- resources/views/single.blade.php --}}
@extends('layouts.app')

@section('content')
	@while(have_posts()) @php(the_post())
		<article>
			<h1>{{ get_the_title() }}</h1>
			{!! get_the_content() !!}
		</article>
	@endwhile
@endsection
```

La directive `{!! !!}`, à la différence de `{{ }}`, n'échappe pas automatiquement le HTML — indispensable pour `get_the_content()`, qui contient déjà du balisage, mais à réserver strictement à des sorties dont on maîtrise l'origine, jamais à une saisie utilisateur non filtrée.

## Bud : un build sans configuration Webpack manuelle

Sage 10 remplace l'ancien système de build basé sur Webpack directement configuré par Bud, une surcouche qui expose une API plus simple pour les besoins courants d'un thème : compilation Sass, bundling JavaScript, gestion des assets. Le fichier `bud.config.js` reste volontairement court pour un projet standard :

```
export default async (bud) => {
	bud
		.entry('app', ['scripts/app.js', 'styles/app.scss'])
		.entry('editor', ['styles/editor.scss']);
};
```

### Les pièges de déploiement rencontrés

- **Chemin des assets compilés :** Acorn s'attend à trouver un manifeste des fichiers compilés dans `public/build/`. Oublier de déployer ce dossier, souvent exclu par erreur d'un `.gitignore` copié depuis un projet Laravel classique, casse le chargement des styles sans message d'erreur explicite.
- **Cache de configuration :** Acorn met en cache la configuration du thème en production, comme le ferait Laravel. Une modification de `config/app.php` non suivie d'un vidage de ce cache reste invisible tant qu'on ne le sait pas.
- **Version de PHP côté hébergement :** Acorn et ses dépendances Laravel exigent une version de PHP plus récente que celle parfois encore active par défaut chez certains hébergeurs mutualisés, ce qui a nécessité une vérification préalable avant le premier déploiement.

> Un thème Sage bien construit se maintient plus vite qu'un thème classique équivalent, à condition que toute l'équipe partage déjà une base solide en Laravel ; sans cette base, chaque ligne de code devient un obstacle à expliquer.

## En résumé

Sage 10, Acorn et Bud forment un ensemble cohérent pour une équipe déjà à l'aise avec l'écosystème Laravel, avec un vrai gain de structure sur les projets de taille moyenne à grande. Les trois pièges de déploiement identifiés ici — assets compilés absents, cache de configuration, version de PHP insuffisante — couvrent la quasi-totalité des incidents rencontrés lors des premières mises en production du studio avec cette stack.