Ir al contenido principal

API de JavaScript

WordPress Playground incluye un cliente de API de JavaScript que te permite controlar por completo tu WordPress.

Aquí, API no significa «API REST»

WordPress Playground es una aplicación que funciona en el navegador. Aquí, el término API se refiere a un conjunto de funciones que puedes llamar desde JavaScript. No es una API REST accesible a través de la red.

Inicio rápido​

Para usar la API de JavaScript, necesitarás:

  • Un elemento <iframe>
  • El cliente de JavaScript de Playground, cargado desde playground.wordpress.net o instalado con npm

Cargar el cliente desde playground.wordpress.net​

Puedes cargar el cliente directamente desde https://playground.wordpress.net/client/index.js. No necesitas instalar paquetes con npm ni compilar el proyecto. Usa un elemento <script type="module"> para importar el cliente y usar await.

Guarda el siguiente ejemplo como index.html y ábrelo mediante un servidor web local, o pégalo en un editor HTML en línea como CodePen o JSFiddle:

<iframe id="wp" style="width: 100%; height: 300px; border: 1px solid #000;"></iframe>
<script type="module">
	const { startPlaygroundWeb } = await import('https://playground.wordpress.net/client/index.js');

	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp'),
		remoteUrl: 'https://playground.wordpress.net/remote.html',
	});
	// Espera a que Playground termine de cargar
	await client.isReady();
</script>

La importación carga el cliente de JavaScript en tu página. A continuación, startPlaygroundWeb() carga WordPress en el iframe mediante remoteUrl y devuelve un cliente que permite controlarlo.

/remote.html es una URL especial

/remote.html es una URL especial que carga el punto de acceso a la API de Playground en lugar de la aplicación de demostración con su interfaz de navegación. Consulta la diferencia entre / y /remote.html.

Usa https://playground.wordpress.net/remote.html en remoteUrl para conectarte a Playground. Las páginas de WordPress se cargan desde wpsandbox.wordpress.net automáticamente. No necesitas configurar esa dirección.

Instalar el cliente con npm​

Si tu aplicación usa un empaquetador de módulos (bundler), instala el paquete del cliente:

npm install @wp-playground/client

Después, sustituye la importación por URL del ejemplo anterior por esta importación en tu módulo de JavaScript:

const { startPlaygroundWeb } = await import('@wp-playground/client');

Para usar el entorno alojado en https://playground.wordpress.net/remote.html, usa la importación por URL anterior para mantener el cliente y el entorno sincronizados. Con npm, usa versiones correspondientes del cliente y del entorno y actualiza ambos a la vez.

Controlar el sitio web​

Ahora que tienes un objeto client, puedes usarlo para controlar el sitio web dentro del iframe. Hay tres formas de hacerlo:

Depuración y pruebas​

Para realizar pruebas y depurar rápidamente, el cliente de API de JavaScript está disponible como window.playground tanto en index.html como en remote.html.

> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']

En index.html, playground es un objeto Proxy y el navegador no ofrece autocompletado. En remote.html, playground es una instancia de clase y puedes usar el autocompletado del navegador.