Guide de démarrage rapide pour les développeurs et développeuses
WordPress Playground a été créé comme un outil programmable. Vous trouverez ci-dessous quelques exemples de ce que vous pouvez faire avec. Chaque API discutée est décrite en détail dans la section APIs :
Intégrer WordPress sur votre site
Playground peut être intégré sur votre site en utilisant la balise HTML <iframe> comme suit :
<iframe src="https://playground.wordpress.net/"></iframe>
Chaque visiteur obtiendra sa propre instance WordPress privée gratuitement. Vous pouvez ensuite la personnaliser en utilisant l'une des APIs Playground.
The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.
If you need certain availability, you should host your own WordPress Playground.
Contrôler le site intégré
WordPress Playground fournit trois APIs que vous pouvez utiliser pour contrôler le site en iframe. Tous les exemples de cette section sont construits en utilisant l’une d’entre elles :
- Query API enable basic operations using only query parameters
- Blueprints API give you a great degree of control with a simple JSON file
- JavaScript API give you full control via a JavaScript client from an npm package
En savoir plus sur chacune de ces APIs dans la section de présentation des APIs.
Présenter une extension ou un thème du répertoire WordPress
Vous pouvez installer des extensions et des thèmes du répertoire WordPress avec seulement des paramètres d’URL. Cet iframe préinstalle les extensions coblocks et friends ainsi que le thème pendant.
This is called Query API and you can learn more about it here.
<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
Présenter n’importe quelle extension ou thème
Et si votre extension n’est pas présente dans le répertoire WordPress ?
Vous pouvez toujours la présenter sur Playground en utilisant les JSON Blueprints. Par exemple, ce Blueprint téléchargerait et installerait une extension et un thème depuis votre site et importerait également un contenu de démarrage :
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/your-plugin.zip"
}
},
{
"step": "installTheme",
"themeData": {
"resource": "url",
"url": "https://your-site.com/your-theme.zip"
}
},
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://your-site.com/starter-content.wxr"
}
}
]
}
Voir commencer avec les Blueprints pour en savoir plus.
Prévisualiser les pull requests de votre dépôt
Vous pouvez prévisualiser le code du dépôt de deux manières : directement avec git:directory, ou en pointant vers un .zip de votre pipeline CI. Voici l’approche git:directory utilisant les Blueprints :
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "git:directory",
"url": "https://github.com/my-user/my-repo",
"ref": "add-feature-xyz",
"refType": "branch"
}
}
]
}
git:directory ne nécessite aucune configuration CI. L’utilisation d’une URL .zip directe offre de meilleures performances car Playground télécharge un seul fichier, mais nécessite une configuration CI.
Voir l’exemple en direct du prévisualiseur de PR Gutenberg.
Pour utiliser Playground comme prévisualiseur de PR, vous avez besoin :
- D’un pipeline CI qui empaquette votre extension ou thème
- D’un accès public au fichier
.zipgénéré
Ces archives zip ne sont pas différentes des extensions WordPress classiques, ce qui signifie que vous pouvez les installer dans Playground en utilisant l’API JSON Blueprints. Une fois que vous exposez un point de terminaison comme https://your-site.com/pull-request-1234.zip, le Blueprint ci-dessous fera le reste :
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/pull-request-1234.zip"
}
}
]
}
La démo officielle de Playground utilise cette technique pour prévisualiser les pull requests du dépôt Gutenberg :
{
"landingPage": "/wp-admin/plugins.php?test=42test",
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "mkdir",
"path": "/wordpress/pr"
},
{
"step": "writeFile",
"path": "/wordpress/pr/pr.zip",
"data": {
"resource": "url",
"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
"caption": "Downloading Gutenberg PR 47739"
},
"progress": {
"weight": 2,
"caption": "Applying Gutenberg PR 47739"
}
},
{
"step": "unzip",
"zipPath": "/wordpress/pr/pr.zip",
"extractToPath": "/wordpress/pr"
},
{
"step": "installPlugin",
"pluginData": {
"resource": "vfs",
"path": "/wordpress/pr/gutenberg.zip"
}
}
]
}
Prévisualiser les branches ou PRs de WordPress Core et Gutenberg
Vous pouvez prévisualiser des branches ou pull requests spécifiques des dépôts WordPress Core et Gutenberg en utilisant les paramètres de la Query API. C’est utile pour tester les dernières modifications du trunk ou des branches de fonctionnalités spécifiques sans créer de PR.
- Prévisualiser la branche trunk de WordPress Core :
https://playground.wordpress.net/?core-branch=trunk - Prévisualiser une PR spécifique de WordPress Core :
https://playground.wordpress.net/?core-pr=9500 - Prévisualiser la branche trunk de Gutenberg :
https://playground.wordpress.net/?gutenberg-branch=trunk - Prévisualiser une PR spécifique de Gutenberg :
https://playground.wordpress.net/?gutenberg-pr=73010
Créer un environnement de test de compatibilité
Testez votre extension sur différentes versions de PHP et WordPress en les configurant dans Playground. Cela vous aide à vérifier la compatibilité avant publication.
Avec la Query API, vous ajouteriez simplement les paramètres de requête php et wp à l’URL :
<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>
Avec les Blueprints JSON, vous utiliseriez la propriété preferredVersions :
{
"preferredVersions": {
"php": "8.3",
"wp": "6.1"
}
}
Exécuter du code PHP dans le navigateur
L'API JavaScript fournit la méthode run() que vous pouvez utiliser pour exécuter du code PHP dans le navigateur :
<iframe id="wp"></iframe>
<script type="module">
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: 'https://playground.wordpress.net/remote.html',
});
await client.isReady;
await client.run({
code: `<?php
require("/wordpress/wp-load.php");
update_option("blogname", "Playground is really cool!");
echo "Site title updated!";
`,
});
client.goTo('/');
</script>
Combinez cela avec un éditeur de code comme Monaco ou CodeMirror, et vous obtiendrez des extraits de code en direct comme dans cet article !
Traduction automatisée, relecture et corrections par @beryldlg
Dernière mise à jour le 21 janvier 2026