Guía de inicio rápido para desarrolladores
WordPress Playground fue creado como una herramienta programable. A continuación encontrarás algunos ejemplos de lo que puedes hacer con él. Cada API discutida se describe en detalle en la sección de APIs:
Incrustar WordPress en tu sitio web
Playground puede incrustarse en tu sitio web usando la etiqueta HTML <iframe> de la siguiente manera:
<iframe src="https://playground.wordpress.net/"></iframe>
Cada visitante obtendrá su propia instancia privada de WordPress de forma gratuita. Luego puedes personalizarla usando una de las APIs de 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.
Controlar el sitio web incrustado
WordPress Playground proporciona tres APIs que puedes usar para controlar el sitio web incrustado. Todos los ejemplos en esta sección están construidos usando una de estas:
- 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
Aprende más sobre cada una de estas APIs en la sección de descripción general de APIs.
Mostrar un plugin o tema del directorio de WordPress
Puedes instalar plugins y temas del directorio de WordPress solo con parámetros de URL. Este iframe preinstala los plugins coblocks y friends y el tema pendant.
This is called Query API and you can learn more about it here.
<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
Mostrar cualquier plugin o tema
¿Qué pasa si tu plugin no está en el directorio de WordPress?
Aún puedes mostrarlo en Playground usando Blueprints JSON. Por ejemplo, este Blueprint descargaría e instalaría un plugin y un tema desde tu sitio web y también importaría contenido inicial:
{
"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"
}
}
]
}
Consulta primeros pasos con Blueprints para aprender más.
Previsualizar pull requests de tu repositorio
Puedes previsualizar código del repositorio de dos maneras: directamente con git:directory, o apuntando a un .zip de tu pipeline de CI. Aquí está el enfoque git:directory usando Blueprints:
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "git:directory",
"url": "https://github.com/my-user/my-repo",
"ref": "refs/pull/1/head",
"refType": "refname"
},
"options": {
"activate": true
},
"progress": {
"caption": "Installing plugin from my-user/my-repo PR #1"
}
}
]
}
En el código anterior, se instalará un complemento desde un repositorio ubicado en url, y la referencia para encontrar la rama es refType; en este caso, se utilizará refname, pero también se puede utilizar branch, tag y commit.
Puedes automatizar este proceso usando la Acción de GitHub para generar enlaces de vista previa, lo que te ayudará a agilizarlo.
Cargar un archivo .zip es otra alternativa para previsualizar tu proyecto. Consulta el ejemplo en vivo del previsualizador de PR de Gutenberg.
Para usar Playground como un previsualizador de PR, necesitas:
- Un pipeline de CI que empaquete tu plugin o tema
- Acceso público al archivo
.zipgenerado
Esos paquetes zip no son diferentes de los plugins regulares de WordPress, lo que significa que puedes instalarlos en Playground usando la API de Blueprints JSON. Una vez que expongas un endpoint como https://your-site.com/pull-request-1234.zip, el siguiente Blueprint hará el resto:
{
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://your-site.com/pull-request-1234.zip"
}
}
]
}
La demo oficial de Playground usa esta técnica para previsualizar pull requests del repositorio de 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"
}
}
]
}
Previsualizar ramas o PRs de WordPress Core y Gutenberg
Puedes previsualizar pull requests específicos de los repositorios de WordPress Core y Gutenberg usando parámetros de la API Query. Las ramas de Gutenberg también tienen una alternativa para previsualizarlas con el parámetro gutenberg-branch. Esto es útil para probar los últimos cambios de trunk o ramas de características específicas sin crear un PR.
- Previsualizar un PR específico de WordPress Core:
https://playground.wordpress.net/?core-pr=9500 - Previsualizar un PR específico de Gutenberg:
https://playground.wordpress.net/?gutenberg-pr=73010 - Previsualizar la rama trunk de Gutenberg:
https://playground.wordpress.net/?gutenberg-branch=trunk
Construir un entorno de pruebas de compatibilidad
Prueba tu plugin en diferentes versiones de PHP y WordPress configurándolas en Playground. Esto te ayuda a verificar la compatibilidad antes del lanzamiento.
Con la API Query, simplemente agregarías los parámetros de consulta php y wp a la URL:
<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>
Con Blueprints JSON, usarías la propiedad preferredVersions:
{
"preferredVersions": {
"php": "8.3",
"wp": "6.1"
}
}
Ejecutar código PHP en el navegador
La API de JavaScript proporciona el método run() que puedes usar para ejecutar código PHP en el navegador:
<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>
¡Combina eso con un editor de código como Monaco o CodeMirror, y obtendrás fragmentos de código en vivo como en este artículo!