Pular para o conteúdo principal

Guia rápido para desenvolvedores

WordPress Playground foi criado como uma ferramenta programável. A seguir você irá encontrar alguns exemplos de como você pode fazer isso. Cada API discutida será descrita em detalhes na Sessão de APIs:

Incorporar WordPress no seu site​

O Playground pode ser incorporado no seu site usando a tag HTML <iframe> da seguinte forma:

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

Cada visitante receberá sua própria instância privada do WordPress gratuitamente. Você pode então personalizá-la usando uma das APIs do Playground.

Careful with the demo site

The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.

If you need certain availability, you should host your own WordPress Playground.

Controlar o site incorporado​

O WordPress Playground fornece três APIs que você pode usar para controlar o site incorporado em iframe. Todos os exemplos nesta seção são construídos usando uma delas:

  • Query API enable basic operations using only query parameters
  • Blueprints API give you a great degree of control with a simple JSON file
  • JavaScript API give you full control via a JavaScript client from an npm package

Saiba mais sobre cada uma dessas APIs na seção de visão geral das APIs.

Apresentar um plugin ou tema do diretório WordPress​

Você pode instalar plugins e temas do diretório WordPress apenas com parâmetros de URL. Por exemplo, este iframe viria com os plugins coblocks e friends pré-instalados, bem como o tema pendant.

This is called Query API and you can learn more about it here.

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

Apresentar qualquer plugin ou tema​

E se seu plugin não estiver no diretório WordPress?

Você ainda pode apresentá-lo no Playground usando JSON Blueprints. Por exemplo, este Blueprint baixaria e instalaria um plugin e um tema do seu site e também importaria algum conteúdo inicial:

{
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/your-plugin.zip"
			}
		},
		{
			"step": "installTheme",
			"themeData": {
				"resource": "url",
				"url": "https://your-site.com/your-theme.zip"
			}
		},
		{
			"step": "importWxr",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/starter-content.wxr"
			}
		}
	]
}

Veja começando com Blueprints para saber mais.

Visualizar pull requests do seu repositório​

Veja o exemplo ao vivo do visualizador de PR do Gutenberg.

Você pode usar o Playground como um visualizador de Pull Request se:

  • Seu plugin ou tema WordPress usa um pipeline de CI
  • Seu pipeline de CI empacota seu plugin ou tema
  • Você pode expor publicamente o arquivo zip gerado pelo seu pipeline de CI

Esses pacotes zip não são diferentes dos plugins WordPress regulares, o que significa que você pode instalá-los no Playground usando a API JSON Blueprints. Depois que você expuser um endpoint como https://your-site.com/pull-request-1234.zip, o seguinte Blueprint fará o resto:

{
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/pull-request-1234.zip"
			}
		}
	]
}

A demonstração oficial do Playground usa esta técnica para visualizar pull requests do repositório Gutenberg:

{
	"landingPage": "/wp-admin/plugins.php?test=42test",
	"steps": [
		{
			"step": "login",
			"username": "admin",
			"password": "password"
		},
		{
			"step": "mkdir",
			"path": "/wordpress/pr"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/pr/pr.zip",
			"data": {
				"resource": "url",
				"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
				"caption": "Downloading Gutenberg PR 47739"
			},
			"progress": {
				"weight": 2,
				"caption": "Applying Gutenberg PR 47739"
			}
		},
		{
			"step": "unzip",
			"zipPath": "/wordpress/pr/pr.zip",
			"extractToPath": "/wordpress/pr"
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "vfs",
				"path": "/wordpress/pr/gutenberg.zip"
			}
		}
	]
}

Construir um ambiente de teste de compatibilidade​

Uma demonstração ao vivo de plugin com PHP e WordPress configuráveis faz um excelente ambiente de teste de compatibilidade.

Com a API de Query, você simplesmente adicionaria os parâmetros de consulta php e wp à URL:

<iframe src="https://playground.wordpress.net/?php=7.4&wp=6.1"></iframe>

Com JSON Blueprints, você usaria a propriedade preferredVersions:

{
	"preferredVersions": {
		"php": "8.0",
		"wp": "6.8"
	}
}

Executar código PHP no navegador​

A API JavaScript fornece o método run() que você pode usar para executar código PHP no navegador:

<iframe id="wp"></iframe>
<script type="module">
	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp'),
		remoteUrl: 'https://playground.wordpress.net/remote.html',
	});
	await client.isReady;
	await client.run({
		code: `<?php
		require("/wordpress/wp-load.php");

		update_option("blogname", "Playground is really cool!");
		echo "Site title updated!";
		`,
	});
	client.goTo('/');
</script>

Combine isso com um editor de código como Monaco ou CodeMirror, e você terá snippets de código ao vivo como neste artigo!