Build your first Blueprint

Vamos construir um Blueprint elementar que

Cria um novo site WordPress
Define o título do site como "Meu primeiro Blueprint"
Instala o tema Adventurer
Instala o plugin Hello Dolly do diretório de plugins do WordPress
Instala um plugin customizado
Altera o conteúdo do site

1. Crie um novo site WordPress

Comece criando um arquivo blueprint.json com o seguinte conteúdo:

{}

Pode parecer que nada está acontecendo, mas este Blueprint já inicia um site WordPress com a versão principal mais recente.

Executar Blueprint

Autocompletar

Se você usar uma IDE, como VS Code ou PHPStorm, pode usar o Blueprint JSON Schema para uma experiência de desenvolvimento Blueprint com autocompletar. Adicione a seguinte linha no topo do seu arquivo blueprint.json:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json"
}

Veja como fica no VS Code:

Autocompletion visualized

2. Defina o título do site como "Meu primeiro Blueprint"

Blueprints consistem em uma série de etapas que definem como construir um site WordPress. Antes de escrever a primeira etapa, declare uma lista vazia de etapas:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"steps": []
}

Este Blueprint não é muito emocionante. Cria o mesmo site padrão que o Blueprint vazio acima. Vamos mudar isso!

O WordPress armazena o título do site na opção blogname. Adicione sua primeira etapa e defina essa opção como "Meu primeiro Blueprint":

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"steps": [
		{
			"step": "setSiteOptions",
			"options": {
				"blogname": "My first Blueprint"
			}
		}
	]
}

Executar Blueprint

A etapa setSiteOptions especifica as opções do site no banco de dados do WordPress. O objeto options contém os pares chave-valor a serem definidos. Neste caso, você alterou o valor da chave blogname para "Meu primeiro Blueprint". Você pode ler mais sobre todas as etapas disponíveis em Blueprint Steps API Reference.

Atalhos

Você pode especificar algumas etapas usando uma sintaxe de atalho. Por exemplo, você poderia escrever a etapa setSiteOptions assim:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"siteOptions": {
		"blogname": "My first Blueprint"
	}
}

A sintaxe de atalho e a sintaxe de etapa correspondem uma à outra. Cada etapa especificada com a sintaxe de atalho é automaticamente adicionada no início do array steps em ordem arbitrária. Qual você deve escolher? Use atalhos quando a brevidade for sua principal preocupação, use etapas quando precisar de mais controle sobre a ordem de execução.

3. Instale o tema Adventurer

Adventurer é um tema de código aberto disponível no diretório de temas do WordPress. Vamos instalá-lo usando a etapa installTheme:

{
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		}
	]
}

Executar Blueprint

O site agora deve se parecer com a captura de tela abaixo:

Site with the adventurer theme

Recursos

O themeData define um recurso e faz referência a um arquivo externo necessário para concluir a etapa. O Playground suporta diferentes tipos de recursos, incluindo

url,
wordpress.org/themes,
wordpress.org/plugins,
vfs (sistema de arquivos virtual), ou
literal.

O exemplo usa o recurso wordpress.org/themes, que requer um slug idêntico ao usado no diretório de temas do WordPress:

Neste caso, https://wordpress.org/themes/<slug>/ se torna https://wordpress.org/themes/adventurer/.

observação

Saiba mais sobre os recursos suportados em Blueprint Resources API Reference.

4. Instale o plugin Hello Dolly

Um plugin clássico do WordPress que exibe letras aleatórias da música "Hello, Dolly!" no painel de administração. Vamos instalá-lo usando a etapa installPlugin:

{
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "hello-dolly"
			}
		}
	]
}

Executar Blueprint

O plugin Hello Dolly agora está instalado e ativado.

Como o themeData, o pluginData define uma referência a um arquivo externo necessário para a etapa. O exemplo usa o recurso wordpress.org/plugins para instalar o plugin com o slug correspondente do diretório de plugins do WordPress.

5. Instale um plugin customizado

Vamos instalar um plugin customizado do WordPress que adiciona uma mensagem ao painel de administração:

<?php
/*
Plugin Name: "Hello" on the Dashboard
Description: A custom plugin to showcase WordPress Blueprints
Version: 1.0
Author: WordPress Contributors
*/

function my_custom_plugin() {
	echo '<h1>Hello from My Custom Plugin!</h1>';
}

add_action('admin_notices', 'my_custom_plugin');

Você pode usar o installPlugin, mas isso requer criar um arquivo ZIP. Vamos começar com algo diferente para ver se o plugin funciona:

Crie um diretório wp-content/plugins/hello-from-the-dashboard usando a etapa mkdir.
Escreva um arquivo plugin.php usando a etapa writeFile.
Ative o plugin usando a etapa activatePlugin.

Veja como fica em um Blueprint:

{
	// ...
	"steps": [
		// ...
		{
			"step": "mkdir",
			"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard/plugin.php",
			"data": "<?php\n/*\nPlugin Name: \"Hello\" on the Dashboard\nDescription: A custom plugin to showcase WordPress Blueprints\nVersion: 1.0\nAuthor: WordPress Contributors\n*/\n\nfunction my_custom_plugin() {\n    echo '<h1>Hello from My Custom Plugin!</h1>';\n}\n\nadd_action('admin_notices', 'my_custom_plugin');"
		},
		{
			"step": "activatePlugin",
			"pluginPath": "hello-from-the-dashboard/plugin.php"
		}
	]
}

A última coisa a fazer é fazer o login do usuário como administrador. Você pode fazer isso com um atalho da etapa login:

{
	"login": true,
	"steps": {
		// ...
	}
}

Aqui está o Blueprint completo:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"login": true,
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "hello-dolly"
			}
		},
		{
			"step": "mkdir",
			"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/plugins/hello-from-the-dashboard/plugin.php",
			"data": "<?php\n/*\nPlugin Name: \"Hello\" on the Dashboard\nDescription: A custom plugin to showcase WordPress Blueprints\nVersion: 1.0\nAuthor: WordPress Contributors\n*/\n\nfunction my_custom_plugin() {\n    echo '<h1>Hello from My Custom Plugin!</h1>';\n}\n\nadd_action('admin_notices', 'my_custom_plugin');"
		},
		{
			"step": "activatePlugin",
			"pluginPath": "hello-from-the-dashboard/plugin.php"
		}
	]
}

Executar Blueprint

Veja como fica quando você navega para o painel:

Site with the custom plugin

Crie um plugin e compacte-o

Codificar arquivos PHP como JSON pode ser útil para testes rápidos, mas é inconveniente e difícil de ler. Em vez disso, crie um arquivo com o código do plugin, comprima-o e use o arquivo ZIP como resource na etapa installPlugin para instalá-lo (o caminho na URL deve corresponder ao do seu repositório GitHub):

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"login": true,
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "wordpress.org/plugins",
				"slug": "hello-dolly"
			}
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"
			}
		}
	]
}

Você pode encurtar ainda mais esse Blueprint usando a sintaxe de atalho:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"login": true,
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"plugins": ["hello-dolly", "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"],
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		}
	]
}

Executar Blueprint

6. Altere o conteúdo do site

Por fim, vamos excluir o conteúdo padrão do site e importar um novo de um arquivo de exportação do WordPress (WXR).

Exclua o conteúdo antigo

Não há uma etapa Blueprint para excluir o conteúdo padrão, mas você pode fazer isso com um trecho de código PHP:

<?php
require '/wordpress/wp-load.php';

// Delete all posts and pages
$posts = get_posts(array(
	'numberposts' => -1,
	'post_type' => array('post', 'page'),
	'post_status' => 'any'
));

foreach ($posts as $post) {
	wp_delete_post($post->ID, true);
}

Para executar esse código durante a configuração do site, use a etapa runPHP:

{
	// ...
	"steps": [
		// ...
		{
			"step": "runPHP",
			"code": "<?php\nrequire '/wordpress/wp-load.php';\n\n$posts = get_posts(array(\n    'numberposts' => -1,\n    'post_type' => array('post', 'page'),\n    'post_status' => 'any'\n));\n\nforeach ($posts as $post) {\n    wp_delete_post($post->ID, true);\n}"
		}
	]
}

Importe o novo conteúdo

Vamos usar a etapa importWxr para importar um arquivo de exportação do WordPress (WXR) que ajuda a testar temas do WordPress. O arquivo está disponível no repositório WordPress/theme-test-data, e você pode acessá-lo através de seu endereço raw.githubusercontent.com: https://raw.githubusercontent.com/WordPress/theme-test-data/master/themeunittestdata.wordpress.xml.

Veja como fica o Blueprint final:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"login": true,
	"siteOptions": {
		"blogname": "My first Blueprint"
	},
	"plugins": ["hello-dolly", "https://raw.githubusercontent.com/wordpress/blueprints/trunk/docs/assets/hello-from-the-dashboard.zip"],
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "adventurer"
			}
		},
		{
			"step": "runPHP",
			"code": "<?php\nrequire '/wordpress/wp-load.php';\n\n$posts = get_posts(array(\n    'numberposts' => -1,\n    'post_type' => array('post', 'page'),\n    'post_status' => 'any'\n));\n\nforeach ($posts as $post) {\n    wp_delete_post($post->ID, true);\n}"
		},
		{
			"step": "importWxr",
			"file": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/WordPress/theme-test-data/master/themeunittestdata.wordpress.xml"
			}
		}
	]
}

Executar Blueprint

E pronto. Parabéns por criar seu primeiro Blueprint! 🥳

1. Crie um novo site WordPress​

2. Defina o título do site como "Meu primeiro Blueprint"​

Atalhos​

3. Instale o tema Adventurer​

Recursos​

4. Instale o plugin Hello Dolly​

5. Instale um plugin customizado​

Crie um plugin e compacte-o​

6. Altere o conteúdo do site​

Exclua o conteúdo antigo​

Importe o novo conteúdo​

1. Crie um novo site WordPress

2. Defina o título do site como "Meu primeiro Blueprint"

Atalhos

3. Instale o tema Adventurer

Recursos

4. Instale o plugin Hello Dolly

5. Instale um plugin customizado

Crie um plugin e compacte-o

6. Altere o conteúdo do site

Exclua o conteúdo antigo

Importe o novo conteúdo