Construisez votre premier blueprint
Construisons un blueprint élémentaire qui :
- Crée un nouveau site WordPress
- Définit le titre du site par « Mon premier blueprint »
- Installe le thème Adventurer
- Installe l’extension Hello Dolly depuis le répertoire WordPress
- Installe une extension personnalisée
- Modifie le contenu du site
1. Créer un nouveau site WordPress
Commençons par créer un fichier blueprint.json avec le contenu suivant :
{}
On pourrait penser que rien ne se passe, mais ce blueprint lance déjà un site WordPress avec la dernière version.
Si vous utilisez un IDE tel que VS Code ou PHPStorm, vous pouvez utiliser le Schéma JSON Blueprint pour activer l'auto-complétion pendant votre développement. Ajoutez la ligne qui suit au début de votre fichier blueprint.json :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json"
}
Voici ce à quoi ça ressemble dans VS Code :
2. Définir le titre du site par « Mon premier blueprint »
Les blueprints correspondent à une suite d’étapes qui définissent comment construire un site WordPress. Avant d’écrire la première étape, déclarez une liste vide d’étapes :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"steps": []
}
Ce blueprint n’est pas vraiment intéressant, il crée le même site par défaut que le blueprint ci-dessus. Faisons quelque chose pour y remédier !
WordPress conserve le titre du site dans l’option blogname. Ajoutez votre première étape et définissez cette option avec « Mon premier blueprint » :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"steps": [
{
"step": "setSiteOptions",
"options": {
"blogname": "Mon premier blueprint"
}
}
]
}
L’étape setSiteOptions définit les options du site dans la base de données WordPress. Cet objet options contient les paires clé-valeur à définir. Dans ce cas, vous avez changé la valeur de la clé blogname en "Mon premier blueprint". Vous pouvez en apprendre plus sur les étapes existantes dans le Référentiel API des étapes blueprint.
Forme courte
Vous pouvez définir certaines étapes en utilisant la forme courte. Par exemple, vous pouvez écrire l’étape setSiteOptions ainsi :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"siteOptions": {
"blogname": "Mon premier blueprint"
}
}
La forme courte et la syntaxe par étapes sont équivalentes. Chaque étape définie avec la forme courte est automatiquement ajoutée au début du tableau steps dans un ordre arbitraire. Laquelle choisir ? Utilisez la forme courte lorsque la concision est votre principale préoccupation, utilisez les étapes lorsque vous avez besoin d’un meilleur contrôle sur l’ordre d’exécution.
3. Installer le thème Adventurer
Adventurer est un thème open-source disponible dans le répertoire de thèmes WordPress. Installons-le en utilisant l’étape installTheme :
{
"siteOptions": {
"blogname": "My first blueprint"
},
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
}
]
}
Le site devrait maintenant ressembler à la capture d’écran ci-dessous :
Ressources
Le themeData définit une ressource et fait référence à un fichier externe nécessaire pour finaliser l’étape. Playground prend en charge différents types de ressources, et notamment
url,wordpress.org/themes,wordpress.org/plugins,vfs(système de fichier virtuel), ouliteral.
Cet exemple utilise la ressource wordpress.org/themes, qui nécessite un slug identique à celui utilisé dans le répertoire de thème WordPress :
Dans ce cas, https://wordpress.org/themes/<slug>/ devient https://wordpress.org/themes/adventurer/.
Pour en savoir plus sur les ressources prises en charge, consultez le Référenciel API des ressources blueprint.
4. Installer l’extension Hello Dolly
Une extension WordPress classique qui affiche des paroles aléatoires de la chanson « Hello, Dolly ! » au sein du tableau de bord d’administration. Installons-le à l’aide de l’étape installPlugin :
{
"siteOptions": {
"blogname": "Mon premier blueprint"
},
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
},
{
"step": "installPlugin",
"pluginData": {
"resource": "wordpress.org/plugins",
"slug": "hello-dolly"
}
}
]
}
L’extension Hello Dolly est maintenant installée et active.
Comme le themeData, le pluginData fait référence à un fichier externe nécessaire à l’étape. Cet exemple utilise la ressource wordpress.org/plugins pour installer l’extension avec le slug correspondant du répertoire d’extension de WordPress.
5. Installer une extension personnalisée
Installons une extension WordPress qui ajoute un message dans le tableau de bord :
<?php
/*
Plugin Name: "Hello" on the Dashboard
Description: A custom plugin to showcase WordPress Blueprints
Version: 1.0
Author: WordPress Contributors
*/
function my_custom_plugin() {
echo '<h1>Hello from My Custom Plugin!</h1>';
}
add_action('admin_notices', 'my_custom_plugin');
Vous pouvez utiliser l’étape installPlugin, mais cela nécessite la création d'un fichier ZIP. Démarrons avec quelque chose de différent pour voir si l’extension fonctionne :
- Créez un répertoire
wp-content/plugins/hello-from-the-dashboarden utilisant l’étapemkdir. - Écrivez un fichier
plugin.phpen utilisant l’étapewriteFile. - Activez l’extension en utilisant l’étape
activatePlugin.
Voici à quoi ça ressemble dans un blueprint :
{
// ...
"steps": [
// ...
{
"step": "mkdir",
"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard"
},
{
"step": "writeFile",
"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard/plugin.php",
"data": "<?php\n/*\nPlugin Name: \"Hello\" on the Dashboard\nDescription: A custom plugin to showcase WordPress Blueprints\nVersion: 1.0\nAuthor: WordPress Contributors\n*/\n\nfunction my_custom_plugin() {\n echo '<h1>Hello from My Custom Plugin!</h1>';\n}\n\nadd_action('admin_notices', 'my_custom_plugin');"
},
{
"step": "activatePlugin",
"pluginPath": "hello-from-the-dashboard/plugin.php"
}
]
}
La dernière chose à faire est de connecter l’utilisateur/utilisatrice en tant qu’administrateur/administratrice. Vous pouvez le faire à l’aide de la forme courte de l’étape login :
{
"login": true,
"steps": {
// ...
}
}
Voici le blueprint en entier :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
"siteOptions": {
"blogname": "My first Blueprint"
},
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
},
{
"step": "installPlugin",
"pluginData": {
"resource": "wordpress.org/plugins",
"slug": "hello-dolly"
}
},
{
"step": "mkdir",
"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard"
},
{
"step": "writeFile",
"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard/plugin.php",
"data": "<?php\n/*\nPlugin Name: \"Hello\" on the Dashboard\nDescription: A custom plugin to showcase WordPress Blueprints\nVersion: 1.0\nAuthor: WordPress Contributors\n*/\n\nfunction my_custom_plugin() {\n echo '<h1>Hello from My Custom Plugin!</h1>';\n}\n\nadd_action('admin_notices', 'my_custom_plugin');"
},
{
"step": "activatePlugin",
"pluginPath": "hello-from-the-dashboard/plugin.php"
}
]
}
Voici à quoi cela ressemble quand vous naviguez dans le tableau de bord :
Créer une extension et la compresser
Encoder des fichiers PHP en JSON peut être utile pour des tests rapides, mais cela est peu pratique et difficile à lire. Au lieu de cela, créez un fichier contenant le code de l’extension, compressez-le et utilisez le fichier ZIP comme resource dans l’étape installPlugin pour l’installer (le chemin dans l’URL doit correspondre à celui de votre dépôt GitHub) :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
"siteOptions": {
"blogname": "My first Blueprint"
},
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
},
{
"step": "installPlugin",
"pluginData": {
"resource": "wordpress.org/plugins",
"slug": "hello-dolly"
}
},
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"
}
}
]
}
Vous pouvez raccourcir encore davantage ce blueprint en utilisant la forme courte :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
"siteOptions": {
"blogname": "My first Blueprint"
},
"plugins": ["hello-dolly", "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"],
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
}
]
}
6. Changer le contenu du site
Enfin, supprimons le contenu par défaut du site et importons-en un nouveau à partir d’un fichier d’exportation WordPress (WXR).
Supprimer le vieux contenu
Il n’existe pas d’étape blueprint permettant de supprimer le contenu par défaut, mais vous pouvez le faire à l’aide d’un extrait de code PHP :
<?php
require '/wordpress/wp-load.php';
// Delete all posts and pages
$posts = get_posts(array(
'numberposts' => -1,
'post_type' => array('post', 'page'),
'post_status' => 'any'
));
foreach ($posts as $post) {
wp_delete_post($post->ID, true);
}
Pour exécuter ce code pendant la configuration, utiliser l’étape runPHP :
{
// ...
"steps": [
// ...
{
"step": "runPHP",
"code": "<?php\nrequire '/wordpress/wp-load.php';\n\n$posts = get_posts(array(\n 'numberposts' => -1,\n 'post_type' => array('post', 'page'),\n 'post_status' => 'any'\n));\n\nforeach ($posts as $post) {\n wp_delete_post($post->ID, true);\n}"
}
]
}
Importer le nouveau contenu
Utilisons l’étape importWxr pour importer un fichier d’exportation WordPress (WXR) qui permet de tester les thèmes WordPress. Le fichier est disponible dans le répertoire WordPress/theme-test-data et vous pouvez y accéder via son adresse raw.githubusercontent.com : https://raw.githubusercontent.com/WordPress/theme-test-data/master/themeunittestdata.wordpress.xml.
Voici à quoi ressemble la version finale du blueprint :
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
"siteOptions": {
"blogname": "My first Blueprint"
},
"plugins": ["hello-dolly", "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"],
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "adventurer"
}
},
{
"step": "runPHP",
"code": "<?php\nrequire '/wordpress/wp-load.php';\n\n$posts = get_posts(array(\n 'numberposts' => -1,\n 'post_type' => array('post', 'page'),\n 'post_status' => 'any'\n));\n\nforeach ($posts as $post) {\n wp_delete_post($post->ID, true);\n}"
},
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://raw.githubusercontent.com/WordPress/theme-test-data/master/themeunittestdata.wordpress.xml"
}
}
]
}
Et voilà. Félicitations, vous avez créé votre premier blueprint ! 🥳
Traduction par @quentinsauvaire et relecture par @beryldlg
Dernière mise à jour le 9 mars 2026