WordPress Playground – Cómo usar WordPress en tu navegador

A medida que creamos tutoriales para nuestros lectores, a menudo necesitamos formas rápidas de probar funciones, complementos y temas de WordPress. Después de todo, recomendar soluciones sin probarlas a fondo primero no sería muy útil, ¿verdad?

Presentamos WordPress Playground: una herramienta práctica que te permite explorar WordPress directamente en tu navegador. No requiere una configuración compleja y, lo que es más importante, no supone ningún riesgo para tu sitio web existente.

Hemos encontrado que WordPress Playground es increíblemente útil en nuestro propio proceso de prueba y hemos descubierto varias formas ingeniosas de aprovechar al máximo sus funciones. Ya sea que recién estés comenzando con WordPress, quieras probar nuevas herramientas de forma segura o necesites un entorno de prueba rápido, esta herramienta puede hacerte la vida mucho más fácil.

En esta guía, te explicaremos todo lo que necesitas saber sobre el uso efectivo de WordPress Playground.

¿Qué es WordPress Playground?

WordPress Playground es una instancia temporal de WordPress en el navegador donde puedes experimentar y aprender más sobre el sistema de gestión de contenidos.

Es como un entorno de prueba donde puedes realizar todo tipo de desarrollo de WordPress sin configurar un sitio real y en vivo.

Todo lo que necesitas hacer es ir al sitio web de WordPress Playground para abrirlo. Luego, puedes usar WordPress como lo harías normalmente: agregar nuevas páginas, instalar nuevos plugins, probar nuevos temas, etc.

Si actualizas la página de WordPress Playground, todas las personalizaciones desaparecerán. Sin embargo, también puedes descargar tu instancia de WordPress y subirla de nuevo a WordPress Playground.

¿Cómo funciona WordPress Playground?

WordPress Playground funciona con algunas tecnologías geniales que te permiten probar WordPress sin la configuración habitual de servidor web y base de datos:

1. Binario WebAssembly (Wasm): Te permite ejecutar código PHP directamente en tu navegador web, haciendo que WordPress funcione sin un servidor tradicional. También hace que la plataforma sea compatible con todos los navegadores, desde Chrome y Edge hasta Firefox y Safari.
2. Base de datos SQLite: En lugar de MySQL, WordPress Playground utiliza un sistema de base de datos más ligero basado en archivos llamado SQLite, que se ejecuta directamente en tu navegador.
3. APIs de Service Worker y Worker Threads: Estas herramientas web ayudan a manejar solicitudes y ejecutar scripts de JavaScript en segundo plano, lo que permite que WordPress Playground ejecute aplicaciones PHP sin problemas en tu navegador.

Estas tecnologías también permiten a los desarrolladores integrar WordPress Playground con node.js, Visual Studio Code, aplicaciones CLI e incluso OpenAI.

Con estas herramientas, los desarrolladores también pueden usar WordPress Playground en una plataforma de desarrollo para propósitos de prueba o staging.

¿Cuáles son las limitaciones de WordPress Playground?

A pesar de sus beneficios, WordPress Playground tiene varias limitaciones, como:

• Las personalizaciones en WordPress Playground son temporales – Si decides no guardar los cambios en el navegador, deberás tener cuidado de no refrescar la página accidentalmente para evitar perder tu progreso.
• Puede ser propenso a errores – Por nuestra experiencia probando plugins usando WordPress Playground, no todo funcionará correctamente. Así que puedes esperar algunos tropiezos aquí y allá, pero puedes proporcionar comentarios a WordPress para mejorar la plataforma.
• Los problemas con iFrame son comunes – Si incrustas una instancia de WordPress Playground en tu página web, puedes esperar algunos problemas, desde refrescos accidentales hasta que el iFrame no funcione.

Ahora que sabes qué es WordPress Playground, veamos cómo puedes usarlo. Puedes usar los enlaces rápidos a continuación para navegar por nuestro tutorial:

• Cómo configurar WordPress Playground
• Cómo usar los planos de WordPress Playground
• Cómo instalar temas y plugins en WordPress Playground
• Cómo guardar una instancia de WordPress Playground en tu navegador
• Cómo descargar/restaurar un sitio de WordPress Playground
• Cómo importar/exportar WordPress Playground a GitHub
• Cómo incrustar WordPress Playground en tu sitio web
• Cómo reportar un error en WordPress Playground
• Preguntas frecuentes sobre WordPress Playground

Cómo configurar WordPress Playground

Para usar WordPress Playground, puedes ir directamente a este nombre de dominio en tu navegador web: https://playground.wordpress.net

Una vez que estés en el sitio web, espera unos momentos a que se configure Playground. Luego, verás el front-end del sitio web usando un tema predeterminado de WordPress.

Si estás usando WordPress Playground para pruebas, es posible que desees configurar el entorno para que refleje el software de WordPress de tu sitio web real.

Para hacer esto, haz clic en el ícono de engranaje 'Configuración' en la esquina superior derecha.

Lo primero que debes hacer es seleccionar una versión de WordPress para Playground. Puedes elegir la versión que ya estás usando o planeas usar para tu sitio web de WordPress.

WordPress también pone a disposición la versión 'WordPress Nightly'. Esta es la versión de desarrollo de WordPress que incluye los últimos cambios realizados por el equipo de desarrollo de WordPress.

Puedes usar esto si eres un desarrollador de plugins o temas y quieres probar la compatibilidad con la próxima actualización de WordPress.

Lo siguiente que querrás configurar es la versión de PHP.

Recomendamos que sea la misma que la versión de PHP que usa para su sitio web. Dicho esto, es posible que no encuentre versiones de PHP anteriores a la 7.0 aquí.

Otra cosa que puede hacer en WordPress Playground es elegir el idioma de su área de administración.

Hay docenas para elegir, pero para fines de demostración, usaremos 'Inglés (Estados Unidos)'.

Debajo de eso, puede habilitar las configuraciones 'Permitir acceso a la red' y 'Crear una red multisitio'.

Recomendamos habilitar la función de acceso a la red porque podrá instalar temas y plugins de WordPress directamente desde el entorno. De esta manera, no tendrá que configurarlos manualmente.

Si desea crear una red de prueba multisitio de WordPress, le sugerimos activar la segunda configuración.

Una vez hecho, simplemente haga clic en 'Aplicar configuración y restablecer Playground'.

Para abrir el área de administración, pase el cursor sobre el menú del título del sitio y haga clic en 'Panel'.

O bien, también puede ir al Editor de Sitio Completo haciendo clic en 'Editar sitio'.

La configuración básica de WordPress Playground ha finalizado, pero exploremos algunas configuraciones adicionales que pueden mejorar su experiencia.

Cómo usar los planos de WordPress Playground

En WordPress, un 'blueprint' es un archivo JSON simple que le ayuda a configurar un entorno personalizado de WordPress de forma rápida y sencilla. Esto incluye configuraciones como qué versión de WordPress y PHP usar, qué plugins y temas instalar, e incluso qué elementos de diseño de WordPress tener.

Esta es una excelente opción si creas entornos de prueba con frecuencia pero necesitas configurarlos rápidamente. O si necesitas compartir configuraciones específicas de WordPress con otros.

Para acceder a los planos, haz clic en el pequeño ícono cuadrado en la esquina superior izquierda.

Luego, navega a la pestaña ‘Galería de planos’.

Aquí encontrarás planos públicos compartidos por otros usuarios. Hay muchas opciones para elegir. Puedes usar la opción ‘Crear Tema de Bloques’ para construir un tema de bloques personalizado usando el plugin Create Block Theme o probar ‘Stylish Press’ para configurar un sitio web de WooCommerce de demostración.

Nos encanta Stylish Press en particular porque es realmente útil para probar plugins y temas de WooCommerce para nuestros tutoriales.

Para usar cualquier plano, simplemente haz clic en el botón ‘Vista previa’ para cargarlo en tu WordPress Playground.

También puedes convertir tu propia instancia de WordPress Playground en un plano.

Simplemente cambia a la pestaña ‘Playground Temporal’, haz clic en el botón de tres puntos junto a ‘Página de inicio’ y selecciona ‘Ver Plano’.

Esto mostrará tu instancia como un archivo .json de plano.

Si deseas guardar el archivo de plano en tu computadora, simplemente haz clic en el icono de disquete ‘Guardar’.

Guardar tu plano es útil para referencia futura, o puedes compartirlo en la galería de planos siguiendo las Directrices de Contribución.

Para cargar un plano guardado, haz clic en el icono de carpeta abierta junto al botón del disquete.

Simplemente selecciona tu archivo blueprint.json y WordPress configurará automáticamente tu entorno basándose en esa configuración.

Cómo instalar temas y plugins en WordPress Playground

Hay varias formas de instalar plugins y temas de WordPress en WordPress Playground. Si habilitaste la función de acceso a la red durante la configuración, puedes instalarlos directamente desde el panel de WordPress, al igual que lo harías en un sitio de WordPress normal.

Para obtener instrucciones paso a paso sobre el proceso de instalación estándar, consulta nuestras guías detalladas:

• Cómo instalar un plugin de WordPress (paso a paso para principiantes)
• Cómo instalar un tema de WordPress (guía para principiantes)

Si no ha habilitado el acceso a la red o está instalando plugins premium de WordPress o temas, deberá seguir el método de instalación manual.

Primero, descargue el archivo del tema o plugin. Para opciones gratuitas, vaya a WordPress.org, busque el plugin o tema deseado y haga clic en el botón ‘Descargar’. Esto guarda un archivo zip en su computadora.

Para los plugins, simplemente vaya al panel de control de WordPress Playground y navegue a Plugins » Añadir Nuevo Plugin.

Después de eso, haga clic en el botón ‘Subir Plugin’ y seleccione ‘Elegir Archivo’ para subir el archivo zip del plugin que descargó anteriormente. Finalmente, haga clic en ‘Instalar Ahora’.

En cuanto a los temas, WordPress tendrá un tema predeterminado instalado para usted cuando use Playground por primera vez.

Pero si desea usar un tema gratuito o incluso uno premium de WordPress diferente, puede descargarlo manualmente de su fuente. Luego, en Playground, vaya a Apariencia » Temas y haga clic en ‘Añadir Nuevo Tema’.

En la siguiente pantalla, haga clic en el botón ‘Subir Tema’.

Después de eso, elija el archivo del tema que descargó anteriormente y haga clic en ‘Instalar Ahora’.

Otra forma de instalar temas y plugins es usar la API de consulta de WordPress Playground. Este método requiere que agregue algunos parámetros de consulta a la URL de WordPress Playground.

Entonces, por ejemplo, si desea instalar y probar la versión gratuita de AIOSEO en WordPress Playground, puede ir a la página de WordPress.org de AIOSEO. Después de eso, tome nota del slug de la URL de AIOSEO.

Ahora, en una nueva pestaña del navegador, escribe la URL de WordPress Playground con el slug de AIOSEO, así:

https://playground.wordpress.net/?plugin=all-in-one-seo-pack

Al presionar la tecla 'Enter', WordPress Playground creará automáticamente un nuevo entorno con el plugin AIOSEO instalado.

Si quieres instalar el tema, simplemente reemplaza el parámetro plugin por theme, así:

https://playground.wordpress.net/?theme=neve

Incluso puedes combinar varios parámetros de consulta si quieres instalar múltiples plugins o temas además del núcleo de WordPress. Solo asegúrate de separar cada parámetro con el signo ampersand &.

Así se verá la URL si estás instalando los plugins AIOSEO y MonsterInsights, así como el tema Neve:

https://playground.wordpress.net/?theme=neve&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Si eres usuario de Chrome, también puedes instalar la extensión Open in WordPress Playground. Con esta, cada vez que vayas a una página de plugin o tema en WordPress.org, verás el botón 'Playground'.

Al hacer clic, se abrirá un nuevo entorno de WordPress Playground con el plugin o tema instalado. Esto simplifica el método de parámetros de consulta.

Cómo guardar una instancia de WordPress Playground en tu navegador

Digamos que has jugado con WordPress Playground y has creado toda una página de destino para una lista de espera o incluso un sitio web. Sería un desperdicio simplemente cerrar la pestaña y perder todo tu progreso para siempre.

Afortunadamente, WordPress Playground te permite guardar tu instancia en tu navegador. Para hacer esto, haz clic en el pequeño ícono cuadrado en la esquina superior izquierda.

Asegúrate de estar en la pestaña 'Temporary Playground'.

Luego, haz clic en el botón 'Save' y elige 'Save in this browser'.

Ahora, espera a que WordPress almacene este playground en tu navegador. Según nuestra experiencia, esto tomará unos minutos.

Una vez hecho esto, verás una nueva sección llamada 'Saved Playgrounds'. WordPress nombrará automáticamente tu playground con un nombre creativo, como 'Happy Sunny Country' o 'Calm Classic Forest'.

Aún puedes configurar los ajustes del entorno aquí, al igual que en la sección anterior. Sin embargo, estás limitado a cambiar la versión de PHP y los ajustes de acceso a la red.

Después de realizar cualquier cambio, haz clic en ‘Guardar y recargar’ para abrir la instancia.

Ahora, WordPress guardará cada cambio que hagas en la instancia de Playground, incluso si cierras la pestaña del navegador.

WordPress también te permite ‘Guardar en un directorio local’. Simplemente haz clic en el mismo botón ‘Guardar’ de antes y selecciona ‘Guardar en un directorio local’.

Lo que encontramos es que esta opción descarga todos los archivos de Playground sin descomprimir, al igual que una instalación normal de WordPress. Obtendrás carpetas estándar de WordPress como wp-content, wp-admin y otras.

Recomendamos usar esta opción si deseas subir estos archivos a un entorno de staging o a un sitio web vacío en un servicio de hosting.

Es particularmente útil cuando quieres construir primero en WordPress Playground y luego trabajar en ello fuera del entorno de Playground.

Cómo descargar/restaurar un sitio de WordPress Playground

Si bien guardar tu playground en el navegador es conveniente para un acceso rápido, y guardar archivos sin descomprimir funciona bien para sitios en vivo, a veces necesitas algo intermedio.

Descargar tu WordPress Playground como un archivo zip te da una copia de seguridad portátil que es fácil de almacenar y compartir. También puedes restaurarla en cualquier instancia de WordPress Playground.

Para empezar, haz clic en el pequeño icono cuadrado en la esquina superior izquierda.

Asegúrate de estar en la pestaña ‘Playground temporal’ o en un playground guardado. Luego, haz clic en el menú de tres puntos en la esquina superior derecha junto al botón ‘Página de inicio’.

Haz clic en ‘Descargar como .zip’ y tu navegador comenzará a descargar el archivo a tu computadora.

Tu navegador comenzará a descargar el archivo a tu computadora.

Para restaurar tu playground descargado, haz clic en el menú de tres puntos encima de ‘Temporary Playground’ y selecciona ‘Import from .zip.’

Aparecerá una ventana emergente y te pedirá que elijas tu archivo exportado.

Selecciónalo y haz clic en ‘Importar.’

Si el archivo es válido, verás un mensaje de éxito y el Playground se actualizará con tu configuración restaurada.

Simplemente haz clic en ‘OK’ para cerrar la ventana emergente y comenzar a trabajar con tu sitio restaurado.

Algo genial de las exportaciones zip de WordPress Playground es que puedes usarlas con Studio by WordPress.com, que es la herramienta de desarrollo local de WordPress.com. Esto te permite seguir trabajando en tu sitio en un entorno local adecuado.

Primero, dirígete al sitio web de Studio by WordPress.com y haz clic en ‘Download for Windows’ o ‘Download for Mac,’ dependiendo de tu computadora.

Abre el archivo descargado para comenzar la instalación.

Verás una ventana emergente que muestra el progreso de la instalación.

Después de que termine la instalación, estará listo para agregar su primer sitio.

Simplemente arrastre su archivo zip de WordPress Playground al campo 'Importar una copia de seguridad'. Puede darle a su sitio cualquier nombre que le ayude a identificarlo fácilmente.

Una vez importado, verá el panel de su sitio local de WordPress.

Para comenzar a trabajar en su sitio, haga clic en el botón 'Iniciar' en la esquina superior derecha. Esto activará su sitio web local en su computadora.

Espere a que el botón 'Iniciar' cambie a 'En ejecución' y luego haga clic en el enlace 'WP Admin' en la esquina superior izquierda.

Esto abrirá su página de administración local de WordPress, donde puede continuar desarrollando su sitio.

Cómo Importar/Exportar WordPress Playground a GitHub

Si tiene una cuenta de GitHub, también puede exportar e importar su sitio desde WordPress Playground. GitHub es una excelente plataforma que le permite rastrear los cambios en su sitio web, hacer copias de seguridad de sus archivos y colaborar con otros usuarios.

Comience haciendo clic en el pequeño icono cuadrado en la esquina superior izquierda.

Para exportar un sitio desde WordPress Playground a GitHub, haga clic en el menú de tres puntos junto al botón 'Página de inicio'.

Después de eso, seleccione 'Exportar a GitHub'.

En la siguiente ventana emergente, verá que WordPress le anima a guardar su sitio web en su computadora como copia de seguridad. Una vez que lo haga, puede marcar la casilla 'He exportado mi Playground como zip'.

Luego, haga clic en el botón 'Conectar su cuenta de GitHub'.

A continuación, debe confirmar que está autorizando a WordPress Playground a acceder a sus repositorios.

Simplemente haga clic en 'Autorizar adamziel' para continuar.

En esta etapa, proceda a seleccionar qué tipo de archivos está exportando: plugins, temas, directorio wp-content o rutas específicas.

Si deseas exportar todos tus plugins, temas, archivos multimedia, widgets, menús y fuentes, selecciona la última opción.

También deberás especificar la URL del repositorio público de GitHub donde te gustaría exportar el sitio.

Luego, haz clic en el botón 'Siguiente paso'.

Una vez que hayas hecho eso, necesitas elegir si crear una nueva solicitud de extracción o actualizar una existente. Para fines de demostración, elegiremos la primera opción.

Después de eso, ingresa la ruta en el repositorio donde se deben confirmar los cambios.

También deberás insertar un mensaje de confirmación para especificar los cambios realizados utilizando el Playground de WordPress.

Con todo eso hecho, haz clic en 'Crear solicitud de extracción'.

Si la exportación es exitosa, WordPress mostrará una ventana emergente con un enlace a la nueva solicitud de extracción.

Simplemente haz clic en el enlace para verlo en acción.

Ahora, si deseas importar un sitio de GitHub a WordPress Playground, simplemente haz clic en el menú de tres puntos encima de 'Playground temporal'.

Luego, selecciona 'Importar desde GitHub'.

Si estás abriendo un entorno de Playground de WordPress completamente nuevo, es posible que necesites realizar todo el proceso de autorización de GitHub Playground nuevamente.

Después de eso, simplemente ingresa el repositorio de GitHub o la URL de la ruta que te gustaría importar.

A continuación, debes especificar qué archivos estás importando: temas, plugins o el directorio completo de wp-content.

También puedes insertar la ruta del repositorio desde el que estás importando nuevamente si es necesario. De lo contrario, WordPress completará automáticamente este campo si ya sabe desde qué ruta importar.

Una vez hecho esto, simplemente haz clic en ‘Importar’.

Si la importación funciona, verás aparecer un mensaje de éxito.

Simplemente haz clic en ‘OK’ para cerrarlo.

Otra cosa que puedes hacer con WordPress Playground y GitHub es previsualizar una solicitud de extracción (pull request) existente de GitHub desde el proyecto de WordPress. De esta manera, puedes ver qué mejoras y desarrollos se están realizando en WordPress y probarlos.

Ten en cuenta que, en el momento de escribir esto, esta función solo funciona para previsualizar solicitudes de extracción de los repositorios WordPress Develop o Gutenberg.

Para hacer esto, puedes hacer clic nuevamente en el botón del menú de tres puntos y seleccionar ‘Preview a WordPress PR’ o ‘Preview a Gutenberg PR’.

A continuación, puedes insertar la URL o el ID de la solicitud de extracción en el campo correspondiente.

Después de eso, haz clic en ‘Ir’.

Cómo incrustar WordPress Playground en tu sitio web

Si estás escribiendo un tutorial de WordPress, es probable que incluyas capturas de pantalla del panel de WordPress para guiar a los usuarios a través de tus instrucciones. Sin embargo, a veces las capturas de pantalla simplemente no ilustran con precisión las acciones que estás describiendo.

Aquí es donde WordPress Playground puede ser útil. Puedes incrustarlo en tu página o publicación, brindando a los usuarios una experiencia de lectura más interactiva. Pueden seguir tus instrucciones usando Playground.

Primero, necesitas abrir el editor de bloques de Gutenberg para una página o publicación. Una vez allí, haz clic en el botón ‘+’ para agregar un bloque y selecciona el bloque ‘HTML personalizado’.

Ahora, copia el siguiente código y pégalo en el bloque HTML:

<iframe src="https://playground.wordpress.net/"></iframe>

Si lo deseas, también puedes agregar algunos parámetros de consulta a esta URL, como te mostramos anteriormente.

Después de eso, haz clic en ‘Guardar’ o ‘Publicar’ para que los cambios se apliquen en vivo.

WordPress Playground puede verse diferente dependiendo de tu tema.

En nuestro caso, no se veía alineado con los bloques de arriba, y el elemento en sí era demasiado pequeño para interactuar con él.

Para evitar esto, puedes usar este código en su lugar:

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

Aquí, la etiqueta iFrame está envuelta en etiquetas div para que la incrustación de Playground siga el relleno y margen del contenedor.

También agregamos el atributo style para establecer el ancho del iFrame al 100% de su contenedor, y la altura a 500 píxeles.

Así es como se ve en el sitio público:

Cómo reportar un error en WordPress Playground

Si experimentas algún problema en WordPress Playground, puedes reportarlos al equipo de WordPress para que esos errores se corrijan.

Para hacer eso, haz clic en el pequeño ícono cuadrado en la esquina superior izquierda.

Después de eso, puedes hacer clic en el menú de tres puntos en la esquina superior derecha de la página.

Luego, haz clic en la opción ‘Reportar error’.

Ahora deberías ver una ventana emergente donde puedes describir cómo ocurre el error. También deberías insertar la URL de tu entorno de WordPress Playground para que el equipo pueda ver qué sucedió exactamente.

Una vez hecho, simplemente haz clic en ‘Reportar error’.

Adicionalmente, WordPress Playground te permite ver los registros de errores de tu entorno.

Puedes hacer esto navegando a la sección ‘Registros’ en la pestaña ‘Entorno temporal’ o en uno de los entornos que hayas guardado.

Preguntas frecuentes sobre WordPress Playground

Cubramos algunas preguntas frecuentes sobre WordPress Playground.

¿Puedes usar WordPress en tu navegador?

Sí, WordPress Playground te permite usar WordPress directamente en tu navegador. Puedes crear sitios web y probar temas y plugins antes de instalarlos en tu sitio en vivo.

¿Puedo instalar temas y plugins personalizados en WordPress Playground?

Sí, puedes instalar y cambiar temas o plugins en WordPress Playground para ver si funcionan en el área de administración y son compatibles con ciertas versiones de WordPress.

¿Puedo subir un sitio hecho con WordPress Playground a mi cuenta de hosting?

Sí, puedes exportar tu sitio desde WordPress Playground e importarlo a tu cuenta de hosting de WordPress. Simplemente guarda tus archivos de WordPress Playground en un directorio local y luego súbelos a un sitio web vacío en tu cuenta de hosting.

¿Cómo ejecuto plugins y temas de WordPress localmente?

Si quieres ejecutar plugins y temas de WordPress en un entorno de desarrollo local, primero debes crear un sitio de WordPress local. Puedes leer nuestro tutorial sobre cómo crear un sitio de WordPress local para obtener instrucciones paso a paso.

Esperamos que este artículo te haya ayudado a aprender qué es WordPress Playground y cómo usarlo en tu navegador. También te puede interesar nuestro artículo sobre los mejores constructores de páginas de WordPress de arrastrar y soltar y nuestra guía sobre cómo agregar contenido dinámico en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.