Pular para o conteúdo principal

WordPress Playground for Theme Developers

O WordPress Playground é uma ferramenta inovadora que permite aos desenvolvedores de temas construir, testar e exibir seus temas diretamente em um ambiente de navegador.

Este guia mostrará como usar o WordPress Playground para melhorar seu fluxo de trabalho de desenvolvimento de temas, criar demonstrações ao vivo para exibir seu tema e simplificar o processo de revisão de temas.

info

Descubra como Construir, Testar e Lançar seus produtos com o WordPress Playground na seção Sobre o Playground

Iniciando uma instância do Playground com um tema​

Temas no diretório de temas do WordPress​

Com o WordPress Playground, você pode iniciar rapidamente uma instalação do WordPress usando qualquer tema disponível no Diretório de Temas do WordPress. Simplesmente passe o parâmetro de consulta theme para a URL do Playground assim: https://playground.wordpress.net/?theme=disco.

Você também pode carregar qualquer tema do diretório de temas do WordPress definindo o passo installTheme de um Blueprint passado para a instância do Playground.

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "twentytwenty"
			},
			"options": {
				"activate": true,
				"importStarterContent": true
			}
		}
	]
}

   Executar Blueprint   

Temas em um repositório GitHub​

Um tema armazenado em um repositório GitHub também pode ser carregado em uma instância do Playground com Blueprints.

Na propriedade themeData do passo blueprint installTheme, você pode definir um recurso url que aponta para a localização do arquivo .zip contendo o tema que você deseja carregar na instância do Playground.

Para evitar problemas de CORS, o projeto Playground fornece um proxy GitHub que permite gerar um .zip de um repositório (ou mesmo uma pasta dentro de um repo) contendo seu tema.

dica

O proxy GitHub é uma ferramenta incrivelmente útil para carregar temas de repositórios GitHub, pois permite carregar um tema de uma branch específica, um diretório específico, um commit específico ou um PR específico.

Por exemplo, o seguinte blueprint.json instala um tema de um repositório GitHub aproveitando a ferramenta https://github-proxy.com:

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=Automattic/themes&branch=trunk&directory=assembler"
			},
			"options": {
				"activate": true
			}
		}
	]
}

   Executar Blueprint   

Um blueprint pode ser passado para uma instância do Playground de várias maneiras.

Configurando um tema de demonstração com Blueprints​

Ao fornecer um link para uma instância do WordPress Playground com um tema específico ativado, você também pode querer personalizar a configuração inicial para esse tema. Com os Blueprints do Playground, você pode carregar, ativar e configurar um tema.

dica

Algumas ferramentas e recursos úteis fornecidos pelo projeto Playground para trabalhar com blueprints são:

  • Verifique a Galeria de Blueprints para explorar exemplos de código reais de uso do WordPress Playground para iniciar um site WordPress com várias configurações.
  • A ferramenta Biblioteca de Passos do WordPress Playground fornece uma interface visual para arrastar ou clicar nos passos para criar um blueprint para o WordPress Playground. Você também pode criar seus próprios passos!
  • A ferramenta Construtor de Blueprints permite editar seu blueprint online e executá-lo diretamente em uma instância do Playground.

Através de propriedades e steps no blueprint, você pode configurar a configuração inicial do seu tema na instância do Playground.

info

Para fornecer uma boa demonstração do seu tema via Playground, você pode querer carregá-lo com conteúdo padrão que destaque os recursos do seu tema. Confira o guia Fornecendo conteúdo para sua demonstração para saber mais sobre isso.

resetData​

Com o passo resetData, você pode remover o conteúdo padrão de uma instalação do WordPress para importar seu próprio conteúdo.

"steps": [
	...,
	{
		"step": "resetData"
	},
	...
]

   Executar Blueprint         Ver blueprint.json   

writeFile​

Com o passo writeFile, você pode escrever dados em um arquivo em um caminho especificado. Você pode querer usar este passo para escrever código PHP personalizado em um arquivo PHP dentro da pasta mu-plugins da instância WordPress do Playground, para que o código seja executado automaticamente quando a instância WordPress for carregada. Uma das coisas que você pode fazer através deste passo é habilitar permalinks bonitos para sua instância do Playground:

"steps": [
	...,
	{
		"step": "writeFile",
		"path": "/wordpress/wp-content/mu-plugins/rewrite.php",
		"data": "<?php /* Use pretty permalinks */ add_action( 'after_setup_theme', function() { global $wp_rewrite; $wp_rewrite->set_permalink_structure('/%postname%/'); $wp_rewrite->flush_rules(); } );"
	},
	...
]

   Executar Blueprint         Ver blueprint.json   

updateUserMeta​

Com o passo updateUserMeta, você pode atualizar qualquer metadado de usuário. Por exemplo, você pode atualizar os metadados do usuário admin padrão de qualquer instalação do WordPress:

"steps": [
	...,
	{
		"step": "updateUserMeta",
		"meta": {
			"first_name": "John",
			"last_name": "Doe",
			"admin_color": "modern"
		},
		"userId": 1
	},
	...
]

   Executar Blueprint         Ver blueprint.json   

setSiteOptions​

Com o passo setSiteOptions, você pode definir opções do site como o nome do site, descrição ou página para usar para posts.

"steps": [
	...,
	{
		"step": "setSiteOptions",
		"options": {
			"blogname": "Rich Tabor",
			"blogdescription": "Multidisciplinary maker specializing in the intersection of product, design and engineering. Making WordPress.",
			"show_on_front": "page",
			"page_on_front": 6,
			"page_for_posts": 2
		}
	},
	...
]

   Executar Blueprint         Ver blueprint.json   

Há também uma abreviação siteOptions que pode ser usada em vez do passo setSiteOptions.

plugins​

Com a abreviação plugins, você pode definir uma lista de plugins que deseja que sejam instalados e ativados com seu tema na instância do Playground.

"plugins": ["todo-list-block", "markdown-comment-block"]

   Executar Blueprint         Ver blueprint.json   

Você também pode usar o passo installPlugin para instalar e ativar plugins para sua instância do Playground, mas a forma abreviada é recomendada.

login​

Com a abreviação login, você pode iniciar sua instância do Playground com o usuário admin logado.

 "login": true,

   Executar Blueprint         Ver blueprint.json   

Você também pode usar o passo login para iniciar sua instância do Playground logado com qualquer usuário específico.

dica

Os exemplos "Stylish Press" e "Carregando, ativando e configurando um tema de um repositório GitHub" da Galeria de Blueprints são ótimas referências para carregar, ativar, importar conteúdo e configurar um tema de blocos em uma instância do Playground.

Desenvolvimento de temas​

Desenvolvimento e teste local de temas com o Playground​

A partir da pasta raiz do código de um tema de blocos, você pode carregar rapidamente uma instância do Playground localmente com esse tema carregado e ativado. Você pode fazer isso iniciando, em um diretório de tema, o comando @wp-playground/cli do seu programa de linha de comando preferido ou a extensão do Visual Studio Code do IDE Visual Studio Code.

Por exemplo:

git clone git@github.com:WordPress/community-themes.git
cd community-themes/blue-note
npx @wp-playground/cli server --auto-mount

Projete seu tema usando a interface do WordPress e salve suas alterações como Pull Requests​

Você pode conectar sua instância do Playground a um repositório GitHub e criar um Pull Request com as alterações que você fez através da interface do WordPress na instância do Playground, aproveitando o plugin Create Block Theme. Você também pode fazer alterações nesse tema e exportar um zip.

Observe que você precisará do plugin Create Block Theme instalado e ativado na instância do Playground para usar este fluxo de trabalho.

dica

Confira Sobre o Playground > Construir > Salvar alterações feitas em um Tema de Blocos e criar Pull Requests do GitHub para mais informações.