WordPress Playground permite que cualquier persona pueda lanzar un sitio de WordPress al instante, sin necesidad de instalaciones ni alojamiento web. Es una forma rápida y práctica de explorar cómo se ve y se comporta un tema.
Puedes abrir una nueva instancia de WordPress con solo un enlace y empezar a experimentar inmediatamente.
Si un tema está disponible en el repositorio de WordPress, puedes previsualizarlo en Playground añadiendo el slug del tema a la URL, por ejemplo:
?theme=kiosko.
Dicho esto, cada sitio de Playground comienza con una instalación limpia de WordPress, por lo que los temas aparecen sin páginas ni contenido de demostración.
Si quieres que tu tema aparezca exactamente como lo has diseñado, con su contenido de prueba, sus menús y sus ajustes, puedes usar los modelos de Playground.
En esta guía te enseñaremos cómo empezar a utilizar los modelos de Playground y cómo crear un sitio de demostración completo e interactivo para tu tema.
Para este ejercicio, tendrás que utilizar un repositorio de GitHub para almacenar recursos, como archivos .xml y blueprint.json, para construir tu demo. Debe ser un repositorio público para que Playground pueda acceder a él.
¿Qué son los modelos de Playground?
Los modelos de Playground de WordPress te permiten crear sitios de demostración preconfigurados en formato JSON.
Cada modelo describe cómo debe construirse la instancia de Playground: qué tema instalar, qué contenido importar, qué ajustes activar y más.
Puedes consultar la documentación completa aquí: WordPress Playground → Blueprints (en inglés).
Con los modelos puedes compartir un único enlace que lanza una demo completamente configurada de tu tema, con páginas, patrones y medios, para que los visitantes puedan explorarlo directamente en su navegador.
Exploremos el proceso paso a paso.
1. Crea el contenido de tu web de demostración
Primero, crea una versión de demostración de tu tema en local, con páginas, entradas, menús y ajustes, para comprobar cómo se ve en un sitio real.
Más adelante exportarás este contenido y lo usarás dentro de Playground.
Si has trabajado antes con el editor del sitio, esta parte te resultará familiar. Ya sabes qué combinación de páginas, entradas, menús, imágenes y ajustes de WordPress hacen que tu tema destaque.
Para este artículo, hemos preparado un sitio de demostración a partir del tema predeterminado Twenty Twenty-Five, aplicando una de sus variaciones de estilo y modificando algunas plantillas.
El ejemplo imita una demo de un blog de viajes con una página de inicio, una página de blog, una página «Acerca de» y plantillas y patrones de ejemplo:
También he incluido una plantilla de página 404:
Así como una página «Acerca de»:
Y mucho más.
El hosting que te da más
Desde backups en tiempo real hasta un tiempo de actividad insuperable. Todo lo que necesitas, sin restricciones.
2. Gestiona las imágenes y los patrones
Mientras creas tu contenido, es posible que uses los patrones que vienen con tu tema.
A veces, las imágenes utilizadas forman parte del tema y se almacenan en la carpeta de recursos del tema.
Tendrás que subirlas a la biblioteca de medios y utilizarlas desde ahí en tus páginas o entradas, o reemplazar las referencias de las URL en el contenido con enlaces relativos que apunten a:
/wp-content/themes/{tutema}/assets/{nombredelarchivo}
…y eliminar la parte https://{dominio.ext} de la URL.
Es mejor usar las herramientas de WordPress para añadirlas automáticamente a la biblioteca de medios para guardarlas o hacerlo desde la barra de herramientas del bloque Imagen.
Con esto tendrás un archivo de contenido independiente que puedes reutilizar en otros temas o instancias de Playground.
3. Exporta tu contenido
Una vez que hayas creado el contenido de demostración en tu sitio local, expórtalo mediante la función de exportación de WordPress:
Ve a Herramientas → Exportar y selecciona Todo el contenido (o selecciona específicamente lo que quieres exportar).
Puedes consultar más información sobre la función de exportación en la documentación.
Antes de importar el archivo .xml en Playground, asegúrate de que tus imágenes y otros recursos están preparados.
También tendrás que actualizar las referencias de las imágenes en el archivo de contenido.
4. Prepara tu exportación para Playground
Antes de importar el archivo .xml exportado, asegúrate de que Playground puede acceder a tus archivos multimedia y de que todos los enlaces de imagen apunten a las ubicaciones correctas.
Para ello:
- Sube las imágenes y recursos del sitio de demostración a un repositorio público de GitHub (por ejemplo, a una carpeta /media).
- Actualiza las referencias de las imágenes en el archivo .xml para que apunten a esas URL de GitHub.
Sube las imágenes y recursos de la demostración
Playground utiliza el plugin WordPress Importer, que automáticamente redimensiona las imágenes y actualiza las URL del nuevo sitio.
Sin embargo, el importador intenta obtener las imágenes desde sus URL originales, y la mayoría de los servidores web bloquean estas solicitudes debido a las políticas de intercambio de recursos de origen cruzado (CORS).
Para solucionarlo, aloja los recursos de tu demo en GitHub.
El dominio raw.githubusercontent.com de GitHub evita estas restricciones, lo que lo hace ideal para servir archivos multimedia para demostraciones.
Sube todas tus imágenes a una carpeta /media en tu repositorio de GitHub y mantén sus nombres de archivo originales para acelerar el proceso de importación.
Actualiza las referencias de las imágenes en tu archivo .xml
A continuación, reemplaza las referencias a las imágenes en tu archivo .xml con las nuevas URL de GitHub, bajo la etiqueta <wp:attachment_url>.
Usa este patrón:
https://raw.githubusercontent.com/{organizacion}/{nombredelrepositorio}/{rama}/media/{nombredelarchivo}
Por ejemplo:
<wp:attachment_url><]></wp:attachment_url>
Y esto es lo que significa cada parte:
- Organización: tu organización de GitHub (por ejemplo, wptrainingteam)
- Repositorio: el nombre de tu repositorio (por ejemplo, tt5-demo-blueprint)
- Rama: main
- Carpeta: media
- Nombre del archivo: el nombre del archivo original
Busca en tu archivo .xml el elemento <wp:attachment_url> (manteniendo intactas las etiquetas <![CDATA[…]]>) y reemplaza cada referencia con la URL correcta de GitHub.
Consejo: En el ejemplo del sitio de demostración de Twenty Twenty-Five, hubo 17 reemplazos en total.
Tu entorno de desarrollo integrado (IDE) probablemente te permita encontrar la cadena particular en tu archivo .xml, sea lo grande que sea. Es posible que veas otras referencias de las imágenes en el archivo cuando utilices la misma imagen en diferentes tamaños.
Hemos añadido un pequeño script Bash al repositorio; si quieres, puedes modificarlo y usarlo bajo tu propia responsabilidad.
El importador de WordPress redimensionará las nuevas imágenes desde las URL de adjuntos y reemplazará las referencias en otros lugares. Solo hay que cambiar cada referencia de imagen una vez.
5. Crea tu modelo
Ahora que tu contenido de demostración está listo, es el momento de configurar tu sitio de Playground usando un modelo.
Un modelo define cómo Playground configura tu demostración: qué tema instalar, qué contenido importar y qué opciones aplicar.
Entiende la estructura del modelo
El archivo del modelo tiene dos partes principales:
- Ajustes: colocados en la raíz del documento.
- Pasos: acciones listadas en un array que Playground ejecuta en orden.
Puedes consultar más información en la documentación de los modelos.
Aquí tienes un esquema de un archivo JSON inicial:
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
... more settings,
"steps": [
{
"step":"installTheme" {
}
},
{
"step":"importWXR" {
}
}
more steps...
]
}
La primera línea ($schema) es opcional.
Añadirla ayuda a tu IDE a validar la sintaxis, sugerir propiedades y detectar posibles errores.
Añade ajustes básicos
El primer ajuste es «login»: true.
Si no necesitas credenciales específicas, este atajo concede acceso de administrador a los visitantes del sitio de demostración de forma automática.
Si prefieres tener más control, échale un vistazo a la documentación de los pasos de los modelos y a la galería de modelos para ver los diferentes casos.
Limpia el contenido predeterminado de WordPress
Cada nueva instalación de WordPress incluye contenido de muestra (una entrada, un comentario y una página) que puede interferir con tu demostración.
Puedes añadir un paso al modelo para eliminar el contenido ejecutando un comando de WP-CLI:
{
"step": "wp-cli",
"command": "wp site empty --yes"
},
Importa tu contenido de demostración
Para importar el contenido específicamente, aprovecha el paso importWxr usando el dominio raw.githubusercontent.com para apuntar a tu archivo *.xml.
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wptrainingteam/tt5-demo-blueprint/main/playgroundcontent.xml"
}
}
Instala y activa el tema
A continuación, instala y activa el tema que quieres mostrar.
Puede provenir del repositorio de WordPress, de un archivo ZIP o de un directorio de archivos de tema.
Este ejemplo usa el tema predeterminado Twenty Twenty-Five:
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwentyfive"
},
"options": {
"activate": true
}
},
Configura las opciones del sitio
Es posible que también quieras establecer algunas opciones en el sitio. Puedes usar un paso o el atajo setSiteOptions:
- Para que los enlaces a las páginas de categorías y los menús de navegación funcionen, es necesario activar los enlaces permanentes bonitos.
- También puedes establecer valores para el nombre y la descripción del blog para hacerlo más atractivo.
- Para terminar de ajustar tu demostración, quizá te interese configurar también la página de inicio y la página de blog.
El siguiente fragmento muestra cómo implementar estos ajustes:
"setSiteOptions": {
"blogname": "Twenty-Twenty-Five",
"blogdescription": "El tema predeterminado de WordPress",
"show_on_front": "page",
"page_on_front": 80,
"page_for_posts": 26,
"permalink_structure": "/%postname%/"
}
Los números de page_on_front y page_for_posts coinciden con los ID de las entradas en tu contenido importado.
Esto funciona porque el sitio fue vaciado antes de la importación.
Opcional: Añade plugins
También puedes incluir plugins, como por ejemplo, WooCommerce o colecciones de bloques.
Este es el atajo para instalar los plugins «Block Visibility», «Public Post Preview» y «Gutenberg» y activarlos.
Para añadir más plugins, solo tienes que añadirlos al array:
{
"plugins": [ "block-visibility","public-post-preview", "gutenberg" ]
}
Combínalo todo
Ahora que has añadido cada paso, es el momento de combinarlos en un archivo de modelo completo.
Este JSON final define toda la configuración de tu sitio de demostración, desde limpiar el contenido predeterminado hasta instalar tu tema, importar entradas y establecer las opciones del sitio:
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"login": true,
"steps": [
{
"step": "wp-cli",
"command": "wp site empty --yes"
},
{
"step": "updateUserMeta",
"meta": {
"admin_color": "modern"
},
"userId": 1
},
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwentyfive"
},
"options": {
"activate": true
}
},
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wptrainingteam/tt5-demo-blueprint/main/playground-content.xml"
}
},
{
"step": "setSiteOptions",
"options": {
"blogname": "Demo del tema ",
"blogdescription": "Una previsualización de un tema",
"show_on_front": "page",
"page_on_front": 80,
"page_for_posts": 26,
"permalink_structure": "/%postname%/"
}
}
],
"plugins": [ "block-visibility","public-post-preview", "gutenberg" ],
}
6. Prueba tu modelo
Antes de compartir tu demostración, prueba el modelo en Playground para confirmar que cada paso se ejecuta correctamente y que tu tema aparece como querías.
Abre la URL de tu Playground para lanzar el sitio de demostración y comprueba que:
- El tema se instala y se activa correctamente.
- Aparecen todas las páginas, entradas y menús de la importación .xml.
- Las imágenes se cargan desde la carpeta /media de GitHub.
- Los enlaces permanentes y los ajustes de la página de inicio funcionan como deberían.
Si algo no va bien, revisa el archivo blueprint.json en busca de algún error tipográfico o alguna coma que falte.
Los modelos son declarativos, por lo que incluso un pequeño problema de sintaxis puede interrumpir la configuración. Corrige cualquier problema en local, sube el archivo corregido a GitHub y actualiza el enlace de Playground para probarlo de nuevo.
7. Comparte tu modelo
Por último, sube tu archivo blueprint.json a GitHub y comparte la URL de Playground con el parámetro de consulta del modelo.
Puedes usar un acortador de URL como Bitly para hacer seguimiento del uso.
Por ejemplo:
La demostración completa del tema está disponible en GitHub e incluye:
- El contenido a importar
- Imágenes y recursos en la carpeta /media
- El archivo blueprint.json
- El script Bash para ayudar con los reemplazos de las URL de los adjuntos
Consejo: La documentación de los modelos ofrece muchas formas de configurar tu instancia de Playground según tus necesidades o las de tus clientes.
Aprende más sobre los modelos y Playground
Ahora que has aprendido a usar Playground para mostrar tus productos, no dejes de visitar estas guías del blog de desarrolladores de WordPress:
- Introducción a Playground: ejecutar WordPress en el navegador
- Explorando el futuro del desarrollo web con WebAssembly y PHP
- Cómo usar WordPress Playground para demos interactivas
También puedes aplicar este conocimiento en WordPress Studio, que ahora es compatible con los modelos.
WordPress.com en Español 
No utilices los comentarios para hacer preguntas, solicitar ayuda o informar de errores. Para ello ponemos a tu disposición nuestros foros o el formulario de contacto con el servicio de soporte.
Antes de publicar un comentario, lee nuestras normas sobre comentarios.