WordPress Playground – Cómo usar WordPress en su navegador / explorador

Muchos lectores nos han preguntado si podían probar WordPress, probar plugins o jugar con temas sin tener que establecer un sitio web completo o estropear su sitio activo. Buenas noticias: existe WordPress Playground, una herramienta que te permite hacer todo esto directamente en tu navegador.

WordPress Playground es bastante fácil de usar, pero seguimos recibiendo muchas preguntas acerca de él. También hemos avisado de que mucha gente no utiliza todas sus características.

Por eso hemos creado esta guía. No importa si estás empezando con WordPress, si quieres probar de forma segura nuevos plugins o temas en tu sitio, o si eres un desarrollador que necesita un lugar rápido para probar cosas. Este artículo te mostrará cómo usar WordPress Playground como un profesional.

¿Qué es WordPress Playground y cómo funciona?

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

Es como un entorno de pruebas online en el que puedes hacer todo tipo de desarrollos con WordPress sin afectar a tu sitio web real.

Todo lo que tienes que hacer es ir al sitio web de WordPress Playground para abrirlo. A continuación, podrás utilizar WordPress como lo harías normalmente: instalar nuevos plugins, probar nuevos temas, añadir nuevas páginas, 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 volver a subirla a WordPress Playground.

¿Cómo funciona WordPress Playground?

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

1. WebAssembly binario (Wasm): Te permite ejecutar código PHP directamente en tu navegador / explorador 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 basado en archivos más ligero llamado SQLite, que se ejecuta directamente en tu navegador / explorador.
3. APIs Service Worker y Worker Threads: Estas herramientas web ayudan a gestionar peticiones y ejecutar scripts JavaScript en segundo plano, haciendo posible que WordPress Playground ejecute aplicaciones PHP sin problemas en tu navegador / explorador.

Estas tecnologías también permiten a los desarrolladores integrar WordPress Playground con node.js, Visual Studio Code y una herramienta CLI llamada wp-now.

Con estas herramientas, los desarrolladores también pueden utilizar WordPress Playground en una plataforma de desarrollo con fines de prueba o puesta en escena.

¿Cuáles son las limitaciones de WordPress Playground?

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

• No hay acceso directo al directorio de temas y plugins – Tendrás que instalar temas y plugins descargándolos y subiéndolos manualmente. Dicho esto, una característica beta de acceso a la red pretende resolver este problema.
• Las personalizaciones en WordPress Playground son temporales – Si decide no guardar los cambios en el navegador, tendrá que tener cuidado de no actualizar accidentalmente la página para evitar perder su progreso.
• Los problemas con iFrame son comunes – Si incrustas una instancia de WordPress Playground en tu página web, puedes esperar algunos problemas, desde actualizaciones accidentales hasta iFrame que no funciona.
• Se trata de unacaracterística relativamente nueva . No todo funcionará correctamente, así que puedes esperar algunos contratiempos aquí y allá mientras exploras el entorno.

Dicho esto, Playground es un proyecto de WordPress relativamente nuevo. Así que puedes esperar que el equipo lance nuevas características y correcciones de fallos para mejorar la experiencia del usuario.

Ahora que ya sabes qué es WordPress Playground, veamos cómo puedes utilizarlo. Puedes utilizar los enlaces rápidos de abajo para navegar a través de nuestro tutorial:

Cómo utilizar WordPress Playground

Para utilizar WordPress Playground, puede ir directamente a este nombre de dominio en su navegador: https: //playground.wordpress.net

Una vez que estés en el sitio web, espera unos instantes a que se establezca Playground. A continuación, verá la parte frontal del sitio web utilizando un tema de WordPress por defecto.

Si está utilizando WordPress Playground para realizar pruebas, es posible que desee configurar el entorno para reflejar el software de WordPress para su sitio web real.

Para ello, haga clic en el menú que dice ‘PHP X WP X – Almacenamiento: Ninguno’.

El primer ajuste que tienes que establecer es el tipo de almacenamiento. Hay tres opciones.

Ninguno” significa que todos los cambios se perderán al actualizar la página. Mientras tanto, “Explorador” significa que los cambios se almacenarán en el navegador pero desaparecerán si cierra la pestaña del navegador o vacía la caché.

También puedes guardar los cambios en tu ordenador seleccionando “Dispositivo”. Esta opción le permitirá seleccionar una carpeta en su ordenador para almacenar sus archivos de WordPress Playground, de forma similar a la creación de un sitio WordPress localhost.

Lo siguiente que quieres configurar es la versión de PHP.

Le recomendamos que sea la misma que la versión de PHP que utiliza para su sitio web. Dicho esto, es posible que aquí no encuentres versiones de PHP anteriores a la 7.0.

A continuación, puede activar opcionalmente los ajustes “Cargar extensiones: libxml, openssl, mbstring, iconv, gd” y “Acceso a la red (por ejemplo, para los plugins de navegación)”.

El primer ajuste cargará esas extensiones PHP específicas (libxml, openssl, mbstring, iconv, y gd) para mejorar tu WordPress Playground. Pero no son necesarias.

El segundo ajuste se llama ‘Acceso a la red’. Es una característica beta y conectará tu WordPress Playground al directorio oficial de plugins para que puedas instalar temas y plugins de WordPress directamente desde el entorno.

Por último, puede seleccionar una versión de WordPress para el Playground. Debe elegir la versión que utiliza actualmente para su blog o sitio web de WordPress.

WordPress también pone a su 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 utilizarlo si eres desarrollador de plugins o temas y quieres comprobar la compatibilidad con la siguiente actualización de WordPress.

Cuando haya terminado de configurar estos ajustes, siga adelante y haga clic en “Aplicar cambios”.

Y eso es todo para los ajustes. Ahora, puedes dirigirte al área de administrador para empezar a probar el entorno de pruebas.

Para abrir el área del administrador, pase el cursor sobre el menú del título del sitio y haga clic en “Escritorio”. También puede ir al Editor del sitio completo haciendo clic en “Editar sitio”.

Cómo instalar temas y plugins en WordPress Playground

Hay dos formas de instalar un plugin o tema de WordPress en WordPress Playground. Una es ir a la página de un plugin o tema en WordPress.org y hacer clic en el botón ‘Descargar’.

Esto guardará el archivo zip del plugin o tema en tu ordenador.

A continuación, puede continuar con la instalación manual habitual de WordPress para plugins y temas. Puedes leer nuestras guías para más instrucciones:

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

Este método también funciona para probar plugins y temas premium de WordPress.

Para plugins, simplemente vaya al Escritorio de WordPress Playground y navegue a Plugins ” Añadir nuevo plugin.

A continuación, haga clic en el botón “Subir plugin” y seleccione “Elegir archivo” para subir el archivo zip del plugin que descargó anteriormente. Por último, haz clic en “Instalar ahora”.

En cuanto a los temas, WordPress te instalará un tema por defecto cuando utilices Playground por primera vez.

Pero si quieres usar un nuevo tema gratuito de WordPress, puedes descargarlo manualmente del directorio de temas de WordPress. Luego, en el Playground, ve a Apariencia ” Temas y haz clic en “Añadir nuevo tema”.

En la pantalla siguiente, haga clic en el botón “Subir tema”.

A continuación, elija el archivo del tema que descargó anteriormente y haga clic en “Instalar ahora”.

Si este proceso te parece un poco tedioso, no te preocupes. WordPress ha estado trabajando en una característica beta que permite a Playground conectarse con el directorio de plugins o temas. Esto debería estar activado / activo si eliges ‘Acceso a la red’ durante la configuración anterior.

De esta forma, Playground funciona como cualquier escritorio de WordPress y puedes instalar temas y plugins gratuitos sin necesidad de guardarlos primero en tu ordenador.

Otra forma de instalar temas y plugins en el escritorio de WordPress es usando la API de consulta de WordPress Playground. Funciona añadiendo algunos parámetros de consulta a la URL de WordPress Playground.

Así, por ejemplo, si quieres instalar y probar la versión gratuita de AIOSEO en WordPress Playground, puedes ir a la página de AIOSEO en WordPress.org. A continuación, fíjate en el slug de la URL de AIOSEO.

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

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

Cuando pulse la clave ‘Enter’, WordPress Playground creará automáticamente un nuevo entorno con el plugin AIOSEO instalado.

Si desea instalar el tema, a continuación, sólo tiene que sustituir el parámetro plugin con el tema, así:

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

Incluso puede combinar varios parámetros de consulta si desea instalar varios plugins o temas sobre el núcleo de WordPress. Solo tienes que separar cada parámetro con el signo &.

Este es el aspecto que tendrá la URL si instala los plugins AIOSEO y MonsterInsights, así como el tema Astra:

https://playground.wordpress.net/?theme=astra&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 ella, cada vez que vayas a la página de un 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. Simplifica el método de parámetros de consulta.

Cómo exportar/importar un sitio creado con WordPress Playground

Digamos que has jugado con WordPress Playground, añadido algunas entradas nuevas usando el editor Gutenberg, y tal vez incluso creado un sitio web completo. Sería un desperdicio cerrar la pestaña y perder todo tu progreso para siempre.

Por suerte, puedes exportar tu sitio desde WordPress Playground y guardarlo en tu ordenador. Siempre que vuelvas a abrir Playground, podrás subir ese archivo zip exportado para continuar donde lo dejaste.

Para ello, vaya al menú superior de Playground y haga clic en el menú de tres líneas de la esquina superior derecha. A continuación, haz clic en “Descargar como .zip”.

Su navegador comenzará a descargar el archivo en su ordenador.

Para subir el archivo a WordPress Playground, sólo tienes que abrir el sitio de Playground y volver a hacer clic en el menú de tres líneas. A continuación, haz clic en “Restaurar desde .zip”.

Una ventana emergente le pedirá que elija un archivo que haya exportado anteriormente.

Una vez seleccionado el archivo, sólo tienes que hacer clic en “Importar”.

Si el archivo es válido, aparecerá una ventana emergente avisándole de que la importación se ha realizado correctamente y el Playground se actualizará con la nueva instancia.

Sólo tienes que hacer clic en “Aceptar” para cerrar el mensaje / ventana emergente.

Importar/Exportar WordPress Playground a GitHub

Si tienes una cuenta en GitHub, también puedes exportar e importar tu sitio desde WordPress Playground. GitHub es una gran plataforma que te permite realizar un seguimiento de los cambios en tu sitio web, hacer copias de seguridad de tus archivos y colaborar con otros usuarios.

Para exportar un sitio de WordPress Playground a GitHub, haz clic en el menú de tres líneas y selecciona ‘Export Pull Request to GitHub’.

En el siguiente mensaje / ventana emergente, verás que WordPress te anima a guardar tu sitio web en tu ordenador como copia de seguridad. Una vez hecho esto, puedes marcar la casilla “He exportado mi Playground como zip”.

A continuación, haz clic en el botón “Conéctate a tu cuenta de GitHub”.

A continuación, debe confirmar que autoriza a WordPress Playground a acceder a sus repositorios.

Sólo tienes que hacer clic en “Autorizar adamziel” para continuar.

En esta etapa, siga adelante y seleccione qué tipo de archivos está exportando: plugins, temas o directorio wp-content. Si desea exportar plugins, temas, archivos de medios, widgets, menús y fuentes, seleccione la última opción.

También tendrás que especificar la URL del repositorio de GitHub al que deseas exportar el sitio. A continuación, haz clic en el botón “Siguiente paso”.

Una vez hecho esto, tienes que elegir si estás creando una nueva pull request o actualizando una ya existente. Para fines de demostración, vamos a elegir la primera opción.

A continuación, introduzca la ruta en el repositorio donde deben confirmarse los cambios.

También tendrá que insertar un mensaje de commit para especificar qué cambios se han realizado utilizando WordPress Playground.

Una vez hecho esto, haz clic en “Crear Pull Request”.

Si la exportación es correcta, WordPress mostrará un mensaje / ventana emergente con un enlace al nuevo pull request.

Basta con hacer clic en el enlace para verlo en acción.

Ahora, si quieres importar un sitio desde GitHub a WordPress Playground, sólo tienes que volver a hacer clic en el menú de tres líneas.

A continuación, seleccione “Importar desde GitHub”.

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

Después, sólo tienes que hacer clic en la URL del repositorio de GitHub desde el que deseas importar. WordPress proporciona algunos ejemplos si no estás seguro.

A continuación, tiene que especificar qué archivos está importando: temas, plugins o todo el directorio wp-content.

También puede insertar la ruta del repositorio desde el que está importando. Una vez hecho esto, simplemente haga clic en “Importar”.

Si la importación funciona, verá un mensaje / ventana emergente correcto, confirmando que WordPress Playground se actualizará con la nueva instancia.

Otra cosa que puedes hacer con WordPress Playground y GitHub es obtener una vista previa de un pull request existente en GitHub del proyecto WordPress. De esta forma, puedes ver qué mejoras y desarrollos se están realizando en WordPress y probarlos.

Para ello, puede volver a hacer clic en el botón de menú de tres líneas y seleccionar “Vista previa de WordPress Pull Request”.

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

A continuación, haga clic en “Ir”.

Cómo utilizar WordPress Playground Blueprints

En WordPress, blueprint es un simple archivo JSON que te ayuda a establecer un entorno personalizado de WordPress de forma rápida y sencilla. Incluye ajustes como qué versión de WordPress y PHP usar, qué plugins y temas instalar y cuál debe ser la página de inicio.

Si haces clic en el menú de tres líneas situado en la parte superior de la página de WordPress Playground, puedes seleccionar “Editar el Blueprint” para modificar la versión del código de tu entorno.

Este es el aspecto de la página Blueprint.

Desde aquí, puedes modificar el código, guardarlo en tu ordenador para compartirlo más tarde, o incluso ejecutar el Blueprint de otro usuario. Asegúrate de tener conocimientos básicos de código con WordPress para que el Blueprint funcione correctamente.

Puede marcar / comprobar los ejemplos de otras personas en la galería de WordPres Blueprints.

Cómo incrustar WordPress Playground en su sitio web

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

Aquí es donde WordPress Playground puede ser útil. Puede incrustarlo en su página o entrada, ofreciendo a los usuarios una experiencia de lectura más interactiva. Pueden seguir tus instrucciones a través de Playground.

En primer lugar, debes abrir el editor de bloques de Gutenberg para una página o entrada. Una vez allí, haz clic en el botón “+” para añadir bloques y selecciona el bloque HTML personalizado.

Ahora, copie el código que aparece a continuación y péguelo en el bloque HTML:

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

Si lo desea, también puede añadir algunos parámetros de consulta a esta URL como le hemos mostrado anteriormente.

A continuación, haga clic en “Publicar” o “Actualizar” para aplicar los cambios.

La zona de juegos de WordPress puede tener un aspecto diferente dependiendo de su tema.

En nuestro caso, no parecía alineado con los bloques que tenía encima, y el propio elemento era demasiado pequeño para interactuar con él.

Para evitarlo, puede utilizar 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 hacer que el Playground incrustado siga el relleno y el margen del contenedor.

También hemos añadido el atributo de estilo para establecer la anchura del iFrame en el 100% de su contenedor y la altura en 500 píxeles.

Esto es lo que parece en la parte delantera:

Cómo informar de un error en WordPress Playground

Si experimentas alguna incidencia en WordPress Playground, puedes informar al equipo de WordPress para que corrijan esos errores. Para ello, puedes hacer clic en el menú de tres líneas situado en la parte superior de la página y hacer clic en la opción “Informar de un error”.

Ahora debería ver una ventana emergente en la que puede describir cómo se produce el error. También deberías insertar la URL de tu entorno de WordPress Playground para que el equipo pueda ver qué ha ocurrido exactamente.

Una vez hecho esto, basta con hacer clic en “Informar de un error”.

Además, WordPress Playground te permite ver los registros de errores de tu entorno.

Para ello, vuelve a hacer clic en el menú de tres líneas y selecciona “Ver registros”.

Ahora aparecerá una ventana emergente que le mostrará la lista de errores.

Esto es lo que parece:

Preguntas frecuentes acerca de WordPress Playground

Veamos algunas de las preguntas más frecuentes acerca de WordPress Playground.

¿Puede utilizar WordPress en su navegador / explorador?

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

¿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 determinadas versiones de WordPress.

¿Puedo subir a mi cuenta de alojamiento un sitio creado con WordPress Playground?

Técnicamente, puedes exportar tu sitio desde WordPress Playground e importarlo a tu cuenta de alojamiento WordPress. Sin embargo, como WordPress Playground utiliza la base de datos SQLite, es posible que tengas que convertir la base de datos a MySQL para que el sitio funcione en un servidor web.

¿Cómo puedo ejecutar plugins y temas de WordPress a nivel regional?

Si desea ejecutar plugins y temas de WordPress en un entorno de desarrollo local, primero debe crear un sitio local de WordPress. Puedes leer nuestro tutorial sobre cómo crear un sitio local de WordPress 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. Puede que también quieras comprobar nuestro artículo sobre los mejores maquetadores de páginas para arrastrar y soltar en WordPress y nuestra guía práctica sobre cómo añadir contenido dinámico en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.