WordPress Playground – Como Usar o WordPress no Seu Navegador

Ao criarmos tutoriais para nossos leitores, frequentemente precisamos de maneiras rápidas de testar recursos, plugins e temas do WordPress. Afinal, recomendar soluções sem testá-las completamente primeiro não seria muito útil, seria?

Apresentamos o WordPress Playground: uma ferramenta prática que permite explorar o WordPress diretamente no seu navegador. Nenhuma configuração complexa é necessária e, o mais importante, nenhum risco para o seu site existente.

Achamos o WordPress Playground incrivelmente útil em nosso próprio processo de teste e descobrimos várias maneiras inteligentes de aproveitar ao máximo seus recursos. Se você está apenas começando com o WordPress, quer experimentar novas ferramentas com segurança ou precisa de um ambiente de teste rápido, esta ferramenta pode facilitar muito a sua vida.

Neste guia, vamos detalhar tudo o que você precisa saber sobre como usar o WordPress Playground de forma eficaz.

O Que É o WordPress Playground?

WordPress Playground é uma instância temporária do WordPress no navegador onde você pode experimentar e aprender mais sobre o sistema de gerenciamento de conteúdo.

É como um ambiente de teste onde você pode fazer todo tipo de desenvolvimento WordPress sem configurar um site real e ativo.

Tudo o que você precisa fazer é acessar o site do WordPress Playground para abri-lo. Em seguida, você pode usar o WordPress como faria normalmente: adicionar novas páginas, instalar novos plugins, experimentar novos temas, e assim por diante.

Se você atualizar a página do WordPress Playground, todas as personalizações desaparecerão. No entanto, você também pode baixar sua instância do WordPress e carregá-la novamente no WordPress Playground.

Como Funciona o WordPress Playground?

O WordPress Playground roda em algumas tecnologias interessantes que permitem testar o WordPress sem a configuração usual de servidor web e banco de dados:

1. Binário WebAssembly (Wasm): Ele permite executar código PHP diretamente no seu navegador, fazendo o WordPress funcionar sem um servidor tradicional. Ele também torna a plataforma compatível com todos os navegadores, do Chrome e Edge ao Firefox e Safari.
2. Banco de dados SQLite: Em vez de MySQL, o WordPress Playground usa um sistema de banco de dados mais leve baseado em arquivos chamado SQLite, que roda diretamente no seu navegador.
3. APIs Service Worker e Worker Threads: Essas ferramentas da web ajudam a lidar com requisições e executar scripts JavaScript em segundo plano, tornando possível que o WordPress Playground execute aplicativos PHP de forma fluida no seu navegador.

Essas tecnologias também permitem que os desenvolvedores integrem o WordPress Playground com node.js, Visual Studio Code, aplicativos CLI e até mesmo OpenAI.

Com essas ferramentas, os desenvolvedores também podem usar o WordPress Playground em uma plataforma de desenvolvimento para fins de teste ou staging.

Quais são as Limitações do WordPress Playground?

Apesar de seus benefícios, o WordPress Playground tem várias limitações, como:

• Personalizações no WordPress Playground são temporárias – Se você decidir não salvar as alterações no navegador, precisará ter cuidado para não atualizar a página acidentalmente e perder seu progresso.
• Pode ser propenso a erros – Pela nossa experiência testando plugins usando o WordPress Playground, nem tudo funcionará corretamente. Portanto, você pode esperar alguns soluços aqui e ali, mas pode fornecer feedback ao WordPress para melhorar a plataforma.
• Problemas com iFrame são comuns – Se você incorporar uma instância do WordPress Playground em sua página da web, poderá esperar alguns problemas, desde atualizações acidentais até iFrame não funcionando.

Agora que você sabe o que é o WordPress Playground, vamos ver como você pode usá-lo. Você pode usar os links rápidos abaixo para navegar em nosso tutorial:

• Como Configurar o WordPress Playground
• Como Usar os Blueprints do WordPress Playground
• Como Instalar Temas e Plugins no WordPress Playground
• Como Salvar uma Instância do WordPress Playground no Seu Navegador
• Como Baixar/Restaurar um Site do WordPress Playground
• Como Importar/Exportar o WordPress Playground para o GitHub
• Como Incorporar o WordPress Playground no Seu Site
• Como Relatar um Erro no WordPress Playground
• Perguntas Frequentes Sobre o WordPress Playground

Como Configurar o WordPress Playground

Para usar o WordPress Playground, você pode acessar diretamente este nome de domínio no seu navegador: https://playground.wordpress.net

Uma vez no site, aguarde alguns momentos para o Playground ser configurado. Em seguida, você verá o front-end do site usando um tema padrão do WordPress.

Se você estiver usando o WordPress Playground para testes, talvez queira configurar o ambiente para refletir o software WordPress do seu site real.

Para fazer isso, clique no ícone de engrenagem ‘Configurações’ no canto superior direito.

A primeira coisa que você precisa fazer é selecionar uma versão do WordPress para o Playground. Você pode escolher a versão que já está usando ou planeja usar para o seu site WordPress.

O WordPress também disponibiliza a versão ‘WordPress Nightly’. Esta é a versão de desenvolvimento do WordPress que inclui as últimas alterações feitas pela equipe de desenvolvimento do WordPress.

Você pode usar isso se for um desenvolvedor de plugins ou temas e quiser testar a compatibilidade com a próxima atualização do WordPress.

A próxima coisa que você vai querer configurar é a versão do PHP.

Recomendamos que seja a mesma que a versão do PHP que você usa para o seu site. Dito isso, você pode não encontrar versões do PHP anteriores a 7.0 aqui.

Outra coisa que você pode fazer no WordPress Playground é escolher o idioma da sua área de administração.

Existem dezenas para escolher, mas para fins de demonstração, usaremos 'English (United States)'.

Abaixo disso, você pode habilitar as configurações 'Permitir acesso à rede' e 'Criar uma rede multisite'.

Recomendamos permitir o recurso de acesso à rede porque você poderá instalar temas do WordPress e plugins diretamente do ambiente. Dessa forma, você não precisa configurá-los manualmente.

Se você quiser criar uma rede de teste multisite do WordPress, sugerimos ativar a segunda configuração.

Concluído, basta clicar em 'Aplicar Configurações e Redefinir Playground'.

Para abrir a área de administração, passe o mouse sobre o menu do título do site e clique em 'Painel'.

Ou, você também pode ir para o Editor de Site Completo clicando em 'Editar site'.

A configuração básica do WordPress Playground está completa, mas vamos explorar algumas configurações adicionais que podem aprimorar sua experiência.

Como Usar os Blueprints do WordPress Playground

No WordPress, um blueprint é um arquivo JSON simples que ajuda você a configurar um ambiente WordPress personalizado de forma rápida e fácil. Isso inclui configurações como qual versão do WordPress e PHP usar, quais plugins e temas instalar, e até mesmo quais elementos de design do WordPress ter.

Esta é uma ótima opção se você cria ambientes de teste com frequência, mas precisa configurá-los rapidamente. Ou se você precisa compartilhar configurações específicas do WordPress com outras pessoas.

Para acessar os blueprints, clique no pequeno ícone quadrado no canto superior esquerdo.

Em seguida, navegue até a aba ‘Galeria de Blueprints’.

Aqui você encontrará blueprints públicos compartilhados por outros usuários. Há muitas opções para escolher. Você pode usar a opção ‘Criar Tema de Bloco’ para construir um tema de bloco personalizado usando o plugin Create Block Theme ou experimentar ‘Stylish Press’ para configurar um site de demonstração do WooCommerce.

Nós amamos o Stylish Press em particular porque ele é realmente útil para testar plugins e temas do WooCommerce para nossos tutoriais.

Para usar qualquer blueprint, basta clicar no botão ‘Preview’ para carregá-lo no seu WordPress Playground.

Você também pode transformar sua própria instância do WordPress Playground em um blueprint.

Basta mudar para a aba ‘Temporary Playground’, clicar no botão de três pontos ao lado de ‘Homepage’ e selecionar ‘View Blueprint’.

Isso exibirá sua instância como um arquivo .json de blueprint.

Se você quiser salvar o arquivo de blueprint no seu computador, basta clicar no ícone de disquete ‘Save’.

Salvar seu blueprint é útil para referência futura, ou você pode compartilhá-lo na galeria de blueprints seguindo as Diretrizes de Contribuição.

Para carregar um blueprint salvo, clique no ícone de pasta aberta ao lado do botão de disquete.

Simplesmente selecione seu arquivo blueprint.json e o WordPress configurará automaticamente seu ambiente com base nessa configuração.

Como Instalar Temas e Plugins no WordPress Playground

Existem várias maneiras de instalar plugins e temas do WordPress no WordPress Playground. Se você habilitou o recurso de acesso à rede durante a configuração, pode instalá-los diretamente do painel do WordPress, assim como faria em um site WordPress comum.

Para instruções passo a passo sobre o processo de instalação padrão, confira nossos guias detalhados:

• Como Instalar um Plugin do WordPress (Passo a Passo para Iniciantes)
• Como Instalar um Tema do WordPress (Guia para Iniciantes)

Se você não habilitou o acesso à rede ou está instalando plugins premium do WordPress ou temas, você precisará seguir o método de instalação manual.

Primeiro, baixe o arquivo do tema ou plugin. Para opções gratuitas, vá para WordPress.org, encontre o plugin ou tema desejado e clique no botão ‘Download’. Isso salva um arquivo zip no seu computador.

Para plugins, basta ir ao painel do WordPress Playground e navegar para Plugins » Adicionar Novo Plugin.

Depois disso, clique no botão ‘Enviar Plugin’ e selecione ‘Escolher Arquivo’ para enviar o arquivo zip do plugin que você baixou anteriormente. Finalmente, clique em ‘Instalar Agora’.

Quanto aos temas, o WordPress terá um tema padrão instalado para você quando você usar o Playground pela primeira vez.

Mas se você quiser usar um tema gratuito ou até mesmo um tema premium do WordPress diferente, você pode baixá-lo manualmente da sua fonte. Em seguida, no Playground, vá para Aparência » Temas e clique em ‘Adicionar Novo Tema’.

Na tela seguinte, clique no botão ‘Enviar Tema’.

Depois disso, escolha o arquivo do tema que você baixou anteriormente e clique em ‘Instalar Agora’.

Outra maneira de instalar temas e plugins é usar a API de Consulta do WordPress Playground. Este método requer que você adicione alguns parâmetros de consulta ao URL do WordPress Playground.

Assim, por exemplo, se você quiser instalar e testar a versão gratuita do AIOSEO no WordPress Playground, você pode ir para a página do AIOSEO no WordPress.org. Depois disso, anote o slug do URL do AIOSEO.

Agora, em uma nova aba do navegador, digite o URL do WordPress Playground com o slug do AIOSEO, assim:

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

Quando você pressionar a tecla ‘Enter’, o WordPress Playground criará automaticamente um novo ambiente com o plugin AIOSEO instalado.

Se você quiser instalar o tema, basta substituir o parâmetro plugin por theme, assim:

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

Você pode até combinar vários parâmetros de consulta se quiser instalar vários plugins ou temas além do core do WordPress. Apenas certifique-se de separar cada parâmetro com o sinal de ampersand &.

Veja como ficará a URL se você estiver instalando os plugins AIOSEO e MonsterInsights, além do tema Neve:

https://playground.wordpress.net/?theme=neve&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Se você for um usuário do Chrome, também pode instalar a extensão Open in WordPress Playground. Com isso, sempre que você acessar uma página de plugin ou tema no WordPress.org, verá o botão ‘Playground’.

Clicar nele abrirá um novo ambiente do WordPress Playground com o plugin ou tema instalado. Isso simplifica o método de parâmetro de consulta.

Como Salvar uma Instância do WordPress Playground no Seu Navegador

Digamos que você tenha brincado com o WordPress Playground e criado uma página de destino de lista de espera viral ou até mesmo um site inteiro. Seria um desperdício apenas fechar a aba e perder todo o seu progresso para sempre.

Felizmente, o WordPress Playground permite que você salve sua instância no seu navegador. Para fazer isso, clique no pequeno ícone quadrado no canto superior esquerdo.

Certifique-se de estar na aba ‘Temporary Playground’.

Em seguida, clique no botão ‘Save’ e escolha ‘Save in this browser.’

Agora, espere o WordPress armazenar este playground no seu navegador. Em nossa experiência, isso levará alguns minutos.

Assim que terminar, você verá uma nova seção chamada ‘Saved Playgrounds.’ O WordPress nomeará automaticamente seu playground com um nome criativo, como ‘Happy Sunny Country’ ou ‘Calm Classic Forest.’

Você ainda pode configurar as configurações do ambiente aqui, assim como na seção anterior. No entanto, você está limitado a alterar a versão do PHP e as configurações de acesso à rede.

Após fazer quaisquer alterações, clique em ‘Save & Reload’ para abrir a instância.

Agora, o WordPress salvará todas as alterações que você fizer na instância do Playground, mesmo que você feche a aba do navegador.

O WordPress também permite que você ‘Save in a local directory.’ Basta clicar no mesmo botão ‘Save’ de antes e selecionar ‘Save in a local directory.’

O que descobrimos é que esta opção baixa todos os arquivos do Playground descompactados, assim como uma instalação WordPress normal. Você obterá pastas padrão do WordPress como wp-content, wp-admin e outras.

Recomendamos usar esta opção se você quiser fazer upload desses arquivos para um ambiente de staging ou um site vazio em um serviço de hospedagem.

É particularmente útil quando você deseja construir primeiro no WordPress Playground e, em seguida, trabalhar nele fora do ambiente do Playground.

Como Baixar/Restaurar um Site do WordPress Playground

Embora salvar seu playground no navegador seja conveniente para acesso rápido, e salvar arquivos descompactados funcione bem para sites ativos, às vezes você precisa de algo intermediário.

Baixar seu WordPress Playground como um arquivo zip oferece um backup portátil que é fácil de armazenar e compartilhar. Você também pode restaurá-lo em qualquer instância do WordPress Playground.

Para começar, clique no pequeno ícone quadrado no canto superior esquerdo.

Certifique-se de que você está na aba ‘Temporary Playground’ ou em um playground salvo. Em seguida, clique no menu de três pontos no canto superior direito, ao lado do botão ‘Homepage’.

Clique em ‘Download as .zip’ e seu navegador começará a baixar o arquivo para o seu computador.

Seu navegador então começará a baixar o arquivo para o seu computador.

Para restaurar seu playground baixado, clique no menu de três pontos acima de ‘Temporary Playground’ e selecione ‘Import from .zip.’

Um pop-up aparecerá e pedirá para você escolher seu arquivo exportado.

Selecione-o e clique em ‘Import.’

Se o arquivo for válido, você verá uma mensagem de sucesso e o Playground será atualizado com sua configuração restaurada.

Basta clicar em ‘OK’ para fechar o pop-up e começar a trabalhar com seu site restaurado.

Uma coisa legal sobre as exportações zip do WordPress Playground é que você pode usá-las com o Studio by WordPress.com, que é a ferramenta de desenvolvimento local do WordPress.com. Isso permite que você continue trabalhando em seu site em um ambiente local adequado.

Primeiro, acesse o site Studio by WordPress.com e clique em ‘Download for Windows’ ou ‘Download for Mac’, dependendo do seu computador.

Abra o arquivo baixado para iniciar a instalação.

Você verá uma janela pop-up mostrando o progresso da instalação.

Após a instalação terminar, você estará pronto para adicionar seu primeiro site.

Simplesmente arraste seu arquivo zip do WordPress Playground para o campo ‘Importar um backup’. Você pode dar ao seu site qualquer nome que ajude a identificá-lo facilmente.

Uma vez importado, você verá o painel do seu site WordPress local.

Para começar a trabalhar no seu site, clique no botão ‘Iniciar’ no canto superior direito. Isso torna seu site WordPress local ativo no seu computador.

Aguarde o botão ‘Iniciar’ mudar para ‘Executando’ e, em seguida, clique no link ‘WP Admin’ no canto superior esquerdo.

Isso abre sua página de administração do WordPress local, onde você pode continuar desenvolvendo seu site.

Como Importar/Exportar WordPress Playground para o GitHub

Se você tem uma conta GitHub, então você também pode exportar e importar seu site do WordPress Playground. O GitHub é uma ótima plataforma que permite rastrear alterações no seu site, fazer backup dos seus arquivos e colaborar com outros usuários.

Comece clicando no pequeno ícone quadrado no canto superior esquerdo.

Para exportar um site do WordPress Playground para o GitHub, clique no menu de três pontos ao lado do botão ‘Página inicial’.

Depois disso, selecione ‘Exportar para GitHub’.

No próximo pop-up, você verá que o WordPress incentiva o salvamento do seu site no seu computador como um backup. Depois de fazer isso, você pode marcar a caixa ‘Eu exportei meu Playground como zip’.

Em seguida, clique no botão ‘Conectar sua conta GitHub’.

Em seguida, você deve confirmar que está autorizando o WordPress Playground a acessar seus repositórios.

Basta clicar em ‘Autorizar adamziel’ para continuar.

Nesta etapa, prossiga e selecione quais tipos de arquivos você está exportando: plugins, temas, diretório wp-content ou caminhos específicos.

Se você deseja exportar todos os seus plugins, temas, arquivos de mídia, widgets, menus e fontes, selecione a última opção.

Você também precisará especificar o URL do repositório público do GitHub onde você gostaria de exportar o site.

Em seguida, clique no botão ‘Próximo passo’.

Depois de fazer isso, você precisa escolher se deseja criar uma nova solicitação de pull ou atualizar uma existente. Para fins de demonstração, escolheremos a primeira opção.

Depois disso, insira o caminho no repositório onde as alterações devem ser commitadas.

Você também precisará inserir uma mensagem de commit para especificar as alterações feitas usando o WordPress Playground.

Com tudo isso feito, clique em ‘Criar Solicitação de Pull’.

Se a exportação for bem-sucedida, o WordPress exibirá um pop-up com um link para a nova solicitação de pull.

Basta clicar no link para vê-lo em ação.

Agora, se você quiser importar um site do GitHub para o WordPress Playground, basta clicar no menu de três pontos acima de ‘Playground Temporário’.

Em seguida, selecione ‘Importar do GitHub’.

Se você estiver abrindo um ambiente WordPress Playground completamente novo, talvez precise fazer todo o processo de autorização do GitHub Playground novamente.

Depois disso, basta inserir o URL do repositório ou caminho do GitHub que você gostaria de importar.

Em seguida, você terá que especificar quais arquivos está importando: temas, plugins ou todo o diretório wp-content.

Você também pode inserir o caminho do repositório de onde está importando novamente, se necessário. Caso contrário, o WordPress preencherá automaticamente este campo se já souber de onde importar.

Assim que terminar, basta clicar em ‘Importar’.

Se a importação funcionar, você verá uma mensagem de sucesso aparecer.

Basta clicar em ‘OK’ para fechá-la.

Outra coisa que você pode fazer com o WordPress Playground e o GitHub é pré-visualizar um pull request existente do GitHub do projeto WordPress. Dessa forma, você pode ver quais melhorias e desenvolvimentos estão sendo feitos no WordPress e testá-los.

Observe que, no momento da escrita, este recurso funciona apenas para pré-visualizar pull requests dos repositórios WordPress Develop ou Gutenberg.

Para fazer isso, você pode clicar novamente no botão de menu de três pontos e selecionar ‘Preview a WordPress PR’ ou ‘Preview a Gutenberg PR’.

Em seguida, você pode inserir a URL ou o ID do pull request no campo apropriado.

Depois disso, clique em ‘Ir’.

Como Incorporar o WordPress Playground no Seu Site

Se você estiver escrevendo um tutorial do WordPress, provavelmente incluirá capturas de tela do painel do WordPress para guiar os usuários através de suas instruções. No entanto, às vezes, as capturas de tela simplesmente não ilustram com precisão as ações que você está descrevendo.

É aqui que o WordPress Playground pode ser útil. Você pode incorporá-lo em sua página ou postagem, oferecendo aos usuários uma experiência de leitura mais interativa. Eles podem seguir suas instruções usando o Playground.

Primeiro, você precisa abrir o editor de blocos Gutenberg para uma página ou postagem. Uma vez lá, clique no botão ‘+’ para adicionar um bloco e selecione o bloco ‘HTML Personalizado’.

Agora, copie o código abaixo e cole-o no bloco HTML:

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

Se desejar, você também pode adicionar alguns parâmetros de consulta a este URL, como mostramos anteriormente.

Depois disso, clique em ‘Salvar’ ou ‘Publicar’ para tornar as alterações visíveis.

O WordPress Playground pode ter uma aparência diferente dependendo do seu tema.

No nosso caso, ele não parecia alinhado com os blocos acima dele, e o próprio elemento era muito pequeno para interagir.

Para evitar isso, você pode usar este código em vez disso:

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

Aqui, a tag iFrame está envolvida em tags div para fazer com que o embed do Playground siga o preenchimento e margem do contêiner.

Também adicionamos o atributo style para definir a largura do iFrame como 100% do seu contêiner e a altura como 500 pixels.

Veja como fica no front-end:

Como Relatar um Erro no WordPress Playground

Se você encontrar algum problema no WordPress Playground, pode relatá-los à equipe do WordPress para que esses erros sejam corrigidos.

Para fazer isso, clique no pequeno ícone quadrado no canto superior esquerdo.

Depois disso, você pode clicar no menu de três pontos no canto superior direito da página.

Em seguida, clique na opção ‘Relatar erro’.

Você deverá ver agora um pop-up onde poderá descrever como o erro ocorre. Você também deve inserir o URL do seu ambiente WordPress Playground para que a equipe possa ver exatamente o que aconteceu.

Assim que terminar, basta clicar em ‘Relatar erro’.

Adicionalmente, o WordPress Playground permite que você visualize os logs de erro do seu ambiente.

Você pode fazer isso navegando até a seção ‘Logs’ na aba ‘Playground Temporário’ ou em um dos playgrounds que você salvou.

Perguntas Frequentes Sobre o WordPress Playground

Vamos abordar algumas perguntas frequentes sobre o WordPress Playground.

Você pode usar o WordPress no seu navegador?

Sim, o WordPress Playground permite que você use o WordPress diretamente no seu navegador. Você pode criar sites e experimentar temas e plugins antes de instalá-los no seu site ativo.

Posso instalar temas e plugins personalizados no WordPress Playground?

Sim, você pode instalar e alterar temas ou plugins no WordPress Playground para ver se eles funcionam na área administrativa e são compatíveis com certas versões do WordPress.

Posso fazer upload de um site criado com o WordPress Playground para minha conta de hospedagem?

Sim, você pode exportar seu site do WordPress Playground e importá-lo para sua conta de hospedagem WordPress. Basta salvar seus arquivos do WordPress Playground em um diretório local e, em seguida, fazer o upload deles para um site vazio em sua conta de hospedagem.

Como executo plugins e temas do WordPress localmente?

Se você deseja executar plugins e temas do WordPress em um ambiente de desenvolvimento local, você deve primeiro criar um site WordPress local. Você pode ler nosso tutorial sobre como criar um site WordPress local para instruções passo a passo.

Esperamos que este artigo tenha ajudado você a aprender o que é o WordPress Playground e como usá-lo em seu navegador. Você também pode querer conferir nosso artigo sobre os melhores construtores de páginas WordPress de arrastar e soltar e nosso guia sobre como adicionar conteúdo dinâmico no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.