WordPress Playground Explicado: Qué es y cómo usarlo

Puntos clave

• WordPress Playground es un sandbox basado en navegador y sin servidor que te permite ejecutar un sitio completo de WordPress para probarlo y aprender sin necesidad de alojamiento.
• La herramienta es un entorno de pruebas desechable para experimentar con temas, plugins y código personalizado, pero no sustituye a un sitio web real.
• Aunque Playground es estupendo para pruebas rápidas, un entorno de ensayo en vivo es esencial para probar el rendimiento y prepararse para la producción.

Si alguna vez has intentado configurar WordPress sólo para probar algo, ya sabes lo que hay que hacer: buscar alojamiento, crear una base de datos, configurar PHP y finalmente instalar WordPress. Son muchos pasos para algo que sólo te llevará cinco minutos probar.

Por eso existe WordPress Playground. Ejecuta WordPress completamente en tu navegador, sin necesidad de servidor ni instalación. Con un solo clic, puedes lanzar un sitio WordPress nuevo, experimentar con plugins o modificar un tema sin tocar tu configuración local.

En este post, hablaremos sobre qué es realmente WordPress Playground, cómo funciona y por qué es una herramienta útil para desarrolladores, propietarios de sitios y cualquiera que esté aprendiendo WordPress.

También te enseñaré a personalizar la instancia de WordPress con temas y plugins, a guardar los cambios e incluso a incrustar Playground en tu propio sitio.

¿Qué es WordPress Playground?

WordPress Playground no es sólo otra herramienta de demostración: es un entorno completo de WordPress que se ejecuta directamente en tu navegador. La idea se presentó por primera vez durante el State of the Word 2022, y rápidamente llamó la atención porque funciona sin ningún servidor, configuración PHP o bases de datos MySQL entre bastidores.

En lugar de conectarse al alojamiento tradicional, Playground utiliza tecnologías como WebAssembly y SQLite para imitar un entorno WordPress real directamente en tu pestaña. Eso significa que obtienes el familiar panel de WordPress, la posibilidad de instalar plugins y temas, e incluso probar código personalizado, pero nada de ello depende de tu ordenador o de una cuenta de alojamiento.

Piensa en él como un laboratorio WordPress de usar y tirar. Parece y se siente como el auténtico, pero una vez que cierras el navegador, toda la instancia desaparece a menos que la guardes.

Cómo funciona WordPress Playground

WordPress suele funcionar con una configuración completa: un servidor web como Apache o Nginx, PHP instalado en la máquina y una base de datos MySQL en segundo plano. Así es como se configuran la mayoría de los entornos de alojamiento.

Playground se salta todo eso. En su lugar, ejecuta las piezas de WordPress directamente en tu navegador, por lo que no necesitas un servidor ni un servicio de base de datos local en funcionamiento.

WebAssembly (ejecuta PHP en tu navegador)

La parte principal que lo hace posible es WebAssembly (Wasm). Permite que PHP se ejecute dentro del propio navegador. Sin él, WordPress ni siquiera arrancaría, ya que PHP normalmente depende de un servidor para ejecutarse.

SQLite (base de datos ligera dentro de Playground)

Para la base de datos, Playground utiliza SQLite en lugar de MySQL. SQLite es una base de datos ligera de un solo archivo. No está diseñada para sitios de producción enormes, pero para pruebas o demos es más que suficiente. WordPress sigue interactuando con ella del mismo modo que lo hace con MySQL.

Service Workers (gestión de solicitudes fuera de línea)

Luego están los Trabajadores de Servicio y los Hilos de Trabajo. Mantienen las tareas en segundo plano en movimiento y gestionan las peticiones en el navegador. En realidad, no te darás cuenta de que funcionan, pero son la razón de que el panel de control tenga capacidad de respuesta y de que los plugins se ejecuten sin arrastrarlo todo.

Por qué y cuándo usar WordPress Playground

Playground no está aquí para sustituir al alojamiento. Es más bien una herramienta rápida para los momentos en los que necesitas un sitio WordPress de inmediato y no te apetece montar un entorno completo.

Probar WordPress sin alojamiento

Hay veces que sólo quieres comprobar algo en WordPress -quizá un ajuste, quizá un plugin- pero no quieres molestarte con servidores, bases de datos o instalaciones locales. Playground se abre en segundos y te ofrece un sitio limpio con el que jugar. No requiere configuración.

Aprender y experimentar con seguridad

Si eres nuevo en WordPress, o estás enseñando a alguien cómo funciona, Playground es básicamente una caja de arena. Puedes cambiar temas, añadir contenido, incluso romper cosas a propósito. Nada importante corre peligro, y una vez que cierras la pestaña, desaparece.

Prototipos de temas y plugins

Los desarrolladores pueden utilizarlo como un bloc de notas. Puedes colocar algo de CSS, probar un nuevo bloque o comprobar rápidamente un fragmento de PHP sin tener que encender tu pila local. No es lo mismo que ejecutar un entorno de desarrollo completo, pero para ideas rápidas suele ser suficiente.

Ejecución de demostraciones o entornos de formación

Playground también funciona bien para sesiones de formación o demostraciones de productos. En lugar de guiar a la gente a través de una larga configuración, sólo tienes que enviarles un enlace. Todo el mundo recibe su propio sitio WordPress en el navegador, listo para funcionar.

Cómo iniciar una instancia de WordPress Playground

Para iniciar un sitio Playground, abre wordpress.org/playground/ en tu navegador y haz clic en Explorar Playground. Tras una breve carga, verás un nuevo sitio de WordPress ejecutándose localmente en tu navegador, sin necesidad de alojamiento ni instalación.

Por defecto, Playground ejecuta la última versión estable de WordPress con la configuración estándar. Si quieres ajustar el entorno, haz clic en el icono de engranaje de la esquina superior derecha.

A partir de ahí, puedes

• Elige una versión de WordPress: útil si quieres probar una versión anterior o la próxima versión «Nightly»(la versión de desarrollo que se actualiza diariamente con los últimos cambios de código).
• Elige una versión de PHP – que coincida con la versión que utiliza tu sitio en vivo.
• Cambia el idioma del panel de administración.
• Activa opciones como el acceso a la red (para instalar plugins/temas desde la web) o el multisitio.

Una vez que tu sitio esté listo, puedes empezar a utilizarlo como cualquier sitio normal de WordPress. Por ejemplo, para crear una página básica:

• Ve a + Nuevo → Páginas.

• Elige un patrón si quieres.

• Añade un título y algo de contenido.
• Pulsa Publicar y visualízalo al instante.

Eso es todo lo que se necesita para poner en marcha Playground.

Personalizar Playground con temas, plugins y versiones de PHP

Una vez que hayas iniciado Playground, no estarás limitado a la configuración predeterminada. Al igual que un sitio de WordPress normal, puedes cambiar el aspecto con temas, probar plugins e incluso cambiar entre diferentes versiones de WordPress y PHP.

Instalar y cambiar de tema

Dentro del panel de control, ve a Apariencia → Temas. Desde aquí puedes:

• Activa uno de los temas que ya están disponibles.
• Haz clic en el botón Añadir tema para navegar por el directorio de temas de WordPress e instalar un tema nuevo.

• Como en cualquier sitio normal de WordPress, también puedes subir un archivo de tema si quieres probar algo específico.

Funciona exactamente igual que en un sitio activo, así que si estás familiarizado con WordPress, no hay nada nuevo que aprender.

Añadir y probar plugins

Los plugins también se gestionan del mismo modo. Abre Plugins → Añadir nuevo, y podrás:

• Busca en el directorio de plugins (si el acceso a la red estaba activado cuando configuraste Playground).

• Sube un archivo zip del plugin si quieres probar un código personalizado.

Esto es útil si quieres comprobar cómo se comporta un plugin antes de añadirlo a tu sitio principal.

Cambiar entre versiones de WordPress y PHP

Una de las funciones más útiles de Playground es la posibilidad de cambiar las versiones de WordPress y PHP sobre la marcha. Esto no es algo que harías normalmente en una configuración en vivo sin crear un nuevo entorno, pero aquí sólo te llevará un par de clics.

En Playground, puedes cambiar las versiones a través del panel de ajustes (icono de engranaje en la esquina superior derecha).

¿Por qué es importante?

Compatibilidad de plugins y temas: No todos los plugins o temas funcionan perfectamente con la última versión de WordPress o PHP. Al alternar entre versiones, puedes ver rápidamente si algo se rompe antes de desplegarlo en un sitio real.

Diferentes entornos de alojamiento: No todos los alojamientos web ejecutan la misma versión de PHP. Algunos pueden estar en la 8.1, otros en la 8.3. Si estás creando o manteniendo código, Playground te ofrece una forma de previsualizar cómo se comporta en esas versiones sin necesidad de múltiples servidores de prueba.

Prepararse para las actualizaciones: Tanto el núcleo de WordPress como PHP lanzan nuevas versiones con regularidad. Probar en Playground te ayuda a saber si tu sitio (o el de tu cliente) está preparado para esa actualización, o si antes hay que hacer correcciones.

Guardar y restaurar sitios de WordPress Playground

Cuando estés experimentando dentro de Playground, probablemente querrás una forma de guardar tu trabajo para poder volver a él más tarde, o incluso trasladarlo a otro lugar. Playground te ofrece 4 formas principales de hacerlo:

1. Guardar en tu navegador

Si sólo quieres continuar donde lo dejaste, puedes guardar tu instancia de Playground directamente en el navegador. En el menú (el icono de cuatro cuadrados de la parte superior izquierda), selecciona Campo de juegos temporal → Guardar → Guardar en este navegador.

Tu sitio aparecerá en Campos de juego guardados, y los cambios que hagas persistirán, aunque cierres la pestaña.

Esta opción es la mejor para proyectos a corto plazo o pruebas rápidas, ya que los datos guardados viven en tu navegador.

2. Exportar como archivo .zip

Para tener una copia de seguridad más portátil, puedes exportar tu sitio Playground como .zip. Ve al mismo menú y selecciona Descargar como .zip en el menú hamburguesa de la esquina superior derecha. Esto te dará un único archivo comprimido que contiene tu configuración de Playground: temas, plugins, contenido, todo.

Por qué es importante: un archivo .zip es mucho más fácil de mover entre entornos. Puedes importarlo de nuevo a Playground, compartirlo con un compañero de equipo o incluso utilizarlo con herramientas como Studio by WordPress.com para el desarrollo local.

3. Importar un archivo .zip Volver

Si ya tienes una exportación .zip, restaurarla es sencillo. En el menú de Playground, selecciona Importar desde .zip, y luego sube tu archivo. Siempre que sea una exportación válida, Playground reconstruirá tu sitio exactamente como lo guardaste.

4. Importar y exportar con GitHub

Además de trabajar con archivos .zip, Playground también se conecta directamente con GitHub. Esto te permite exportar tus cambios directamente a un repositorio o extraer código existente a Playground para probarlo.

En el menú Playground, encontrarás opciones para Exportar a GitHubque crea un pull request en tu repositorio con los archivos actualizados, o Importar desde GitHub introduciendo la URL de un repositorio o pull request.

Para los equipos o desarrolladores que ya utilizan GitHub para el control de versiones, esto convierte a Playground en una forma práctica de probar, editar y sincronizar cambios sin salir del navegador.

Utilizar Blueprints y la API de consulta en Playground

Exportar e importar sitios de Playground funciona bien si sólo necesitas hacer una copia de seguridad de una configuración o moverla de un sitio a otro. Pero si buscas una forma más rápida y repetible de crear entornos específicos, Playground también admite Blueprints y la API de consulta.

Ambas opciones llevan más allá la idea de guardar un Playground: en lugar de limitarse a congelar tu sitio en un .zip, te permiten describir o solicitar lo que quieres y hacer que Playground lo construya por ti automáticamente.

¿Qué son los planos?

En Playground, un blueprint es un pequeño archivo JSON que actúa como un conjunto de instrucciones. En lugar de elegir manualmente la versión de WordPress, la versión de PHP, los temas o los plugins cada vez, puedes almacenar esas opciones en un plano y recargarlas cuando lo necesites.

Para ver esto en acción, abre Playground y haz clic en el pequeño icono cuadrado de la parte superior izquierda. Desde ahí, dirígete a la pestaña Planos.

Verás una galería de configuraciones listas compartidas por otros:desde instalaciones limpias hasta sitios preconfigurados con determinados plugins o temas de bloqueo.

Por ejemplo, aquí sólo voy a previsualizar el plano Stylish Press de adamziel.

Una vez cargado el plano, puedo hacer los cambios que quiera en ese sitio Playground: añadir plugins, cambiar el tema o actualizar la configuración. Si quiero conservar esos ajustes, puedo guardar la configuración como mi propio plano para más tarde.

Si ya has personalizado tu propio sitio de Playground, también puedes convertirlo en un plano.

Cambia a la pestaña Patio de Juegos Temporal, haz clic en el menú de tres puntos situado junto al nombre de tu sitio y elige Ver Plano.

Esto muestra el archivo JSON de tu configuración actual, que puedes guardar y reutilizar.

Conceptos básicos de la API de consulta para un control avanzado

Otra forma de personalizar Playground es a través de la API de consulta. En lugar de hacer clic para instalar temas o plugins, puedes simplemente añadir parámetros a la URL de Playground y hacer que todo se cargue automáticamente.

Por ejemplo, si quieres probar el plugin «Editor Clásico», sólo tienes que añadir esto al enlace Playground:

?plugin=editor-clásico

Esto iniciará un sitio con el Editor Clásico ya instalado.

Lo mismo funciona para los temas: sustituye plugin por tema. También puedes encadenar varios elementos con &. Por ejemplo:

?plugin=editor-clásico&plugin=hello-dolly&theme=twentytwentyfour

Abre ese enlace y Playground creará un sitio con WordPress que ejecute esos dos plugins y el tema especificado, sin necesidad de pasos de configuración.

Este enfoque es especialmente útil para compartir demostraciones. En lugar de darle a alguien una lista de cosas que tiene que instalar, puedes enviarle un único enlace y aterrizará en un entorno listo para usar.

Incrustar WordPress Playground en tu sitio web

La incrustación funciona de forma muy parecida a añadir un iframe. WordPress Playground te proporciona un fragmento de código que puedes soltar en tu página, y carga una instancia de WordPress totalmente funcional dentro de ese espacio.

Por ejemplo, si quieres que los lectores prueben el plugin Editor clásico, podrías incrustarlo así:

<iframe src=»https://playground.wordpress.net/?plugin=classic-editor» width=»100%» height=»600″></iframe>

Ese iframe abre un Playground con el Editor Clásico ya instalado, para que los visitantes puedan experimentar directamente en tu entrada.

He incrustado el iframe en un post del blog de Cloudways como puedes ver en la captura de pantalla de abajo:

Tampoco estás limitado a los plugins. Si has guardado un Blueprint JSON que configura WordPress con temas y ajustes específicos, también puedes incrustarlo. Sólo tienes que dirigir el iframe a tu archivo Blueprint, por ejemplo:

<iframe src=»https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint.json» width=»100%» height=»600″></iframe>

De este modo, puedes compartir un sitio de demostración completo -como una tienda de prueba de WooCommerce o una vista previa de un tema personalizado- sin tocar tu sitio en vivo. Y como todo se ejecuta en el navegador, no hay riesgo para tu servidor o base de datos.

Limitaciones de WordPress Playground a tener en cuenta

Playground es útil para hacer pruebas y demostraciones rápidas, pero hay algunos límites que merece la pena conocer:

Limitaciones de rendimiento

Como se ejecuta en el navegador mediante WebAssembly, no es tan rápido como un servidor real. Los temas o plugins más pesados pueden parecer lentos en comparación con un alojamiento real.

No hay base de datos persistente a menos que se exporte

Todo lo que construyas es temporal. Una vez que cierras la pestaña, tu trabajo desaparece, a menos que lo hayas exportado como archivo .zip o guardado como plano.

No sustituye al alojamiento real

Playground funciona bien para aprender, experimentar o compartir configuraciones, pero no está diseñado para ejecutar un sitio web real. Para ello necesitarás un alojamiento adecuado.

En resumen, es mejor pensar en Playground como un espacio de pruebas desechable más que como un entorno a largo plazo.

Lleva WordPress más allá del patio de recreo

WordPress Playground es estupendo para hacer pruebas, pero cuando estés listo para ponerte en marcha, elige un alojamiento de WordPress fiable para obtener velocidad, seguridad y crecimiento.

PRUEBA AHORA

Playground vs. Live Staging en Cloudways

Playground es perfecto para experimentar en el navegador, pero tiene límites. Puedes guardar y recargar instancias, pero sigues trabajando en un entorno simulado. Eso significa que no puedes ver cómo funciona tu sitio en un alojamiento real, y que no puedes colaborar fácilmente con tus compañeros de equipo en la misma configuración.

Aquí es donde la creación de un sitio de ensayo es un mejor enfoque. Te permite probar el rendimiento, experimentar con plugins o cambios en el código, e invitar a los miembros del equipo a revisar las actualizaciones antes de poner nada en marcha. A diferencia de Playground, la puesta en escena te ofrece realismo y fiabilidad, salvando las distancias entre las pruebas rápidas basadas en el navegador y el despliegue listo para la producción.

Cloudways hace que crear un sitio de ensayo sea muy cómodo. Con unos pocos clics, puedes clonar tu sitio en un entorno de prueba, ejecutar todas las pruebas que necesites y, a continuación, volver a introducir los cambios en tu sitio activo cuando estés seguro de que todo funciona.

Cómo crear un sitio de pruebas de WordPress en Cloudways

Configurar un sitio de prueba en Cloudways sólo lleva unos minutos. Te explicamos cómo:

Paso 1 – Navega hasta tu solicitud

• Accede a tu Plataforma Cloudways.
• Dirígete a Servidores y selecciona el servidor donde está desplegada tu aplicación.

• Pulsa el icono www y elige la aplicación que quieras clonar.

Paso 2 – Crear un entorno de ensayo

• En la barra lateral izquierda, ve a Gestión de montajes.
• Haz clic en Lanzar aplicación de ensayo.

• Aparecerá un cuadro de diálogo. Puedes elegir entre crear el sitio de ensayo en el mismo servidor o en otro servidor de tu cuenta (sólo tienes que asegurarte de que el destino cumple los requisitos de la app).

• Marca Crear como puesta en escena y pulsa Proceder de todos modos.

Eso es todo: Cloudways empezará a clonar tu aplicación activa en un entorno de ensayo. Una vez que esté lista, aparecerá en tu lista de aplicaciones con una etiqueta de ensayo, completamente aislada de tu sitio activo para que puedas realizar pruebas de forma segura.

Para obtener una guía completa sobre la creación de un sitio de ensayo de WordPress en Cloudways, consulta nuestra guía detallada de ensayo.

¡Terminando!

WordPress Playground es una forma práctica de poner en marcha un sitio de WordPress al instante, tanto si estás probando un plugin, probando una idea o simplemente aprendiendo a utilizarlo. Es ligero, rápido y seguro, ya que todo se ejecuta en el navegador.

Dicho esto, cuando necesites probar el rendimiento, trabajar con un equipo o preparar cambios para un sitio real, un entorno de ensayo adecuado es la mejor opción.

Con el alojamiento gestionado de WordPress de Cloudways, la configuración de la puesta en escena sólo requiere unos pocos clics y te ofrece un espacio que refleja las condiciones reales de alojamiento, lo que facilita mucho el salto de los experimentos a la producción.