WordPress Playground – Como usar o WordPress em seu navegador

Muitos leitores nos perguntaram se poderiam experimentar o WordPress, testar plug-ins ou brincar com temas sem configurar um site completo ou bagunçar seu site ativo. Boas notícias: existe o WordPress Playground, uma ferramenta que permite fazer tudo isso diretamente em seu navegador.

O WordPress Playground é muito fácil de usar, mas ainda recebemos muitas perguntas sobre ele. Também notamos que muitas pessoas não estão usando todos os seus recursos interessantes.

É por isso que criamos este guia. Não importa se você está apenas começando a usar o WordPress, se deseja experimentar com segurança novos plug-ins ou temas em seu site ou se é um desenvolvedor que precisa de um local rápido para testar coisas. Este artigo mostrará a você como usar o WordPress Playground como um profissional.

O que é o WordPress Playground e como ele funciona?

O 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 uma caixa de areia on-line onde você pode fazer todos os tipos de desenvolvimento do WordPress sem afetar seu site real.

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: instalar novos plug-ins, experimentar novos temas, adicionar novas páginas 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 fazer o download de sua instância do WordPress e carregá-la novamente no WordPress Playground.

Como funciona o WordPress Playground?

O WordPress Playground é executado em algumas tecnologias interessantes que permitem que você use o WordPress sem a configuração usual do servidor da Web e do banco de dados:

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

Essas tecnologias também permitem que os desenvolvedores integrem o WordPress Playground com node.js, Visual Studio Code e uma ferramenta CLI chamada wp-now.

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

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

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

• Sem acesso direto ao diretório de temas e plug-ins – Você terá que instalar temas e plug-ins fazendo download e upload manualmente. Dito isso, um recurso beta de acesso à rede visa a resolver esse problema.
• As personalizações no WordPress Playground são temporárias – se você decidir não salvar as alterações no navegador, terá de tomar cuidado para não atualizar a página acidentalmente para evitar perder seu progresso.
• Problemas de 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é o não funcionamento do iFrame.
• Éum recurso relativamente novo – nem tudo funcionará corretamente, portanto, você pode esperar alguns contratempos aqui e ali ao explorar o ambiente.

Dito isso, o Playground é um projeto WordPress relativamente novo. Portanto, você pode esperar que a equipe lance novos recursos e correções de bugs para melhorar a experiência do usuário.

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

Como usar o WordPress Playground

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

Quando você estiver no site, aguarde alguns instantes para que o Playground seja configurado. Em seguida, você verá o front-end do site usando um tema padrão do WordPress.

Se 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 menu que diz ‘PHP X WP X – Storage: None”.

A primeira configuração que você deve fazer é o tipo de armazenamento. Há três opções.

“Nenhum” significa que todas as alterações serão perdidas na atualização da página. Enquanto isso, “Browser” significa que as alterações serão armazenadas no navegador, mas desaparecerão se você fechar a guia do navegador ou limpar o cache.

Você também pode salvar as alterações em seu computador selecionando “Dispositivo”. Essa opção permitirá que você selecione uma pasta em seu computador para armazenar os arquivos do WordPress Playground, semelhante à criação de um site WordPress local.

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

Recomendamos que seja a mesma versão do PHP que você usa em seu site. Dito isso, talvez você não encontre versões do PHP anteriores à 7.0 aqui.

Abaixo disso, você pode ativar opcionalmente as configurações “Carregar extensões: libxml, openssl, mbstring, iconv, gd” e “Acesso à rede (por exemplo, para plug-ins de navegação)”.

A primeira configuração carregará essas extensões PHP específicas (libxml, openssl, mbstring, iconv e gd) para aprimorar o WordPress Playground. Mas elas não são necessárias.

A segunda configuração é chamada de “Acesso à rede”. É um recurso beta e conectará seu WordPress Playground ao diretório oficial de plug-ins para que você possa instalar temas e plug-ins do WordPress diretamente do ambiente.

Por fim, você pode selecionar uma versão do WordPress para o Playground. Você deve escolher a versão que usa atualmente para seu blog ou site do WordPress.

O WordPress também disponibiliza a versão “WordPress Nightly”. Essa é a versão de desenvolvimento do WordPress que inclui as alterações mais recentes 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.

Quando terminar de definir essas configurações, clique em “Aplicar alterações”.

E isso é tudo para as configurações. Agora, você pode ir para a área de administração para começar a testar a sandbox.

Para abrir a área de administração, passe o mouse sobre o menu do título do site e clique em “Dashboard”. Ou você também pode acessar o Editor de site completo clicando em “Editar site”.

Como instalar temas e plug-ins no WordPress Playground

Há duas maneiras de instalar um plug-in ou tema do WordPress no WordPress Playground. Uma delas é acessar a página de um plugin ou tema no WordPress.org e clicar no botão “Download”.

Isso salvará o arquivo zip do plug-in ou do tema em seu computador.

Em seguida, você pode continuar com a instalação manual normal do WordPress para plug-ins e temas. Você pode ler nossos guias para obter mais instruções:

• Como instalar um plug-in do WordPress (passo a passo para iniciantes)
• Como instalar um tema do WordPress (guia para iniciantes)

Esse método também funciona para testar plug-ins premium do WordPress e temas premium do WordPress.

Para plugins, basta acessar o painel do WordPress Playground e navegar até Plugins ” Add New Plugin.

Depois disso, clique no botão “Upload Plugin” e selecione “Choose File” (Escolher arquivo) para carregar o arquivo zip do plug-in que você baixou anteriormente. Por fim, clique em “Install Now”.

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

Mas se você quiser usar um novo tema gratuito do WordPress, poderá baixá-lo manualmente do diretório de temas do WordPress. Em seguida, no Playground, vá para Appearance ” Themes (Aparência ” Temas ) e clique em ‘Add New Theme’ (Adicionar novo tema).

Na tela seguinte, clique no botão “Upload Theme” (Carregar tema).

Depois disso, escolha o arquivo do tema que você baixou anteriormente e clique em “Install Now” (Instalar agora).

Se esse processo parecer um pouco tedioso, não se preocupe. O WordPress está trabalhando em um recurso beta que permite que o Playground se conecte ao diretório do plugin ou do tema. Isso deve ser ativado se você escolher “Acesso à rede” durante a configuração anterior.

Dessa forma, o Playground funciona como qualquer painel de controle típico do WordPress e você pode instalar temas e plug-ins gratuitos sem precisar salvá-los primeiro no computador.

Outra maneira de instalar temas e plug-ins no painel do WordPress é usar a API de consulta do WordPress Playground. Ela funciona exigindo 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, poderá acessar a página do AIOSEO no WordPress.org. Depois disso, anote o slug do URL do AIOSEO.

Agora, em uma nova guia 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 plug-in AIOSEO instalado.

Se você quiser instalar o tema, basta substituir o parâmetro do plug-in por tema, da seguinte forma:

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

Você pode até combinar vários parâmetros de consulta se quiser instalar vários plug-ins ou temas além do núcleo do WordPress. Apenas certifique-se de separar cada parâmetro com o sinal de “e comercial” e ” & “.

Esta é a aparência do URL se você estiver instalando os plug-ins AIOSEO e MonsterInsights, bem como o tema Astra:

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

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

Ao clicar nele, será aberto um novo ambiente do WordPress Playground com o plug-in ou o tema instalado. Ele simplifica o método de parâmetro de consulta.

Como exportar/importar um site criado com o WordPress Playground

Digamos que você tenha brincado com o WordPress Playground, adicionado alguns novos posts usando o editor Gutenberg e talvez até criado um site inteiro. Seria um desperdício simplesmente fechar a guia e perder todo o seu progresso para sempre.

Felizmente, você pode exportar seu site do WordPress Playground e salvá-lo em seu computador. Sempre que abrir o Playground novamente, você poderá carregar o arquivo zip exportado para continuar de onde parou.

Para fazer isso, navegue até o menu superior do Playground e clique no menu de três linhas no canto superior direito. Em seguida, clique em “Download as .zip”.

Seu navegador começará a fazer o download do arquivo para o seu computador.

Para carregar o arquivo no WordPress Playground, basta abrir o site do Playground e clicar novamente no menu de três linhas. Depois disso, clique em “Restore from .zip”.

Uma janela pop-up solicitará que você escolha um arquivo que tenha sido exportado anteriormente.

Depois de selecionar o arquivo, basta clicar em “Importar”.

Se o arquivo for válido, você verá uma janela pop-up informando que a importação foi bem-sucedida e o Playground será atualizado com a nova instância.

Basta clicar em “OK” para fechar a janela pop-up.

Importar/Exportar o WordPress Playground para o GitHub

Se você tiver uma conta no GitHub, também poderá exportar e importar seu site do WordPress Playground. O GitHub é uma excelente plataforma que permite acompanhar as alterações no seu site, fazer backup dos seus arquivos e colaborar com outros usuários.

Para exportar um site do WordPress Playground para o GitHub, clique no menu de três linhas e selecione ‘Export Pull Request to GitHub’.

Na próxima janela pop-up, você verá que o WordPress recomenda salvar seu site no 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 “Connect to your GitHub account” (Conectar à sua conta do GitHub).

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

Basta clicar em “Authorize adamziel” para continuar.

Nessa etapa, vá em frente e selecione o tipo de arquivo que está exportando: plug-ins, temas ou diretório wp-content. Se quiser exportar plug-ins, temas, arquivos de mídia, widgets, menus e fontes, selecione a última opção.

Você também precisará especificar a URL do repositório do GitHub para o qual deseja exportar o site. Em seguida, clique no botão “Next step” (Próxima etapa).

Depois de fazer isso, você precisa escolher se está criando um novo pull request ou atualizando um 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 confirmadas.

Você também precisará inserir uma mensagem de confirmação para especificar quais alterações foram feitas usando o WordPress Playground.

Com tudo isso feito, clique em “Create Pull Request”.

Se a exportação for bem-sucedida, o WordPress mostrará uma janela pop-up com um link para a nova solicitação 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 novamente no menu de três linhas.

Em seguida, selecione “Import from GitHub” (Importar do GitHub).

Se estiver abrindo um ambiente do WordPress Playground completamente novo, talvez seja necessário fazer todo o processo de autorização do GitHub Playground novamente.

Depois disso, basta clicar na URL do repositório do GitHub do qual você deseja importar. O WordPress fornece alguns exemplos se você não tiver certeza.

Em seguida, é necessário especificar quais arquivos você está importando: temas, plug-ins ou todo o diretório wp-content.

Você também pode inserir o caminho do repositório do qual está importando. Quando terminar, basta clicar em “Importar”.

Se a importação funcionar, você verá uma mensagem pop-up de sucesso, confirmando que o WordPress Playground será atualizado com a nova instância.

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

Para fazer isso, você pode clicar novamente no botão do menu de três linhas e selecionar ‘Preview WordPress Pull Request’.

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

Depois disso, clique em “Go” (Ir).

Como usar o WordPress Playground Blueprints

No WordPress, o blueprint é um arquivo JSON simples que ajuda você a configurar um ambiente personalizado do WordPress de forma rápida e fácil. Isso inclui configurações como a versão do WordPress e do PHP a ser usada, quais plug-ins e temas instalar e qual deve ser a página inicial.

Se você clicar no menu de três linhas na parte superior da página do WordPress Playground, poderá selecionar “Edit the Blueprint” para modificar a versão do código do seu ambiente.

Esta é a aparência da página do Blueprint.

A partir daí, você pode modificar o código, salvá-lo no computador para compartilhá-lo posteriormente ou até mesmo executar o Blueprint de outro usuário. Apenas certifique-se de conhecer os conceitos básicos de codificação com o WordPress para que o Blueprint funcione corretamente.

Você pode conferir os exemplos de outras pessoas na WordPres Blueprints Gallery.

Como incorporar o WordPress Playground em seu site

Se você estiver escrevendo um tutorial do WordPress, provavelmente incluirá capturas de tela do painel do WordPress para orientar os usuários em suas instruções. No entanto, às vezes as capturas de tela 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 à sua página ou postagem, proporcionando aos usuários uma experiência de leitura mais interativa. Eles podem acompanhar suas instruções usando o Playground.

Primeiro, você precisa abrir o editor de blocos do Gutenberg para uma página ou postagem. Uma vez lá, clique no botão “+” adicionar 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 esse URL, conforme mostramos anteriormente.

Depois disso, clique em “Publish” (Publicar) ou “Update” (Atualizar) para ativar as alterações.

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

No nosso caso, ele não parecia estar alinhado com os blocos acima dele, e o elemento em si era muito pequeno para interagir.

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

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

Aqui, a tag iFrame é envolvida em tags div para fazer com que a incorporação do Playground siga o preenchimento e a margem do contêiner.

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

Esta é a aparência da parte frontal:

Como relatar um erro no WordPress Playground

Se você tiver algum problema no WordPress Playground, poderá relatá-lo à equipe do WordPress para que esses erros sejam corrigidos. Para fazer isso, clique no menu de três linhas na parte superior da página e clique na opção “Reportar erro”.

Agora, você deverá ver uma janela pop-up na qual poderá descrever como o erro ocorre. Você também deve inserir o URL do seu ambiente do WordPress Playground para que a equipe possa ver o que aconteceu exatamente.

Depois disso, basta clicar em “Reportar erro”.

Além disso, o WordPress Playground permite que você visualize os registros de erros do seu ambiente.

Para fazer isso, clique novamente no menu de três linhas e selecione “View logs”.

Uma janela pop-up será exibida e mostrará a lista de erros.

Veja como ele se parece:

Perguntas frequentes sobre o WordPress Playground

Vamos abordar algumas perguntas frequentes sobre o WordPress Playground.

Você pode usar o WordPress em seu navegador?

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

Posso instalar temas e plug-ins personalizados no WordPress Playground?

Sim, você pode instalar e alterar temas ou plug-ins no WordPress Playground para ver se eles funcionam na área de administração e se são compatíveis com determinadas versões do WordPress.

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

Tecnicamente, você pode exportar seu site do WordPress Playground e importá-lo para sua conta de hospedagem do WordPress. No entanto, como o WordPress Playground usa o banco de dados SQLite, talvez seja necessário converter o banco de dados para MySQL para que o site seja executado em um servidor da Web.

Como faço para executar plug-ins e temas do WordPress localmente?

Se quiser executar plug-ins e temas do WordPress em um ambiente de desenvolvimento local, primeiro será necessário criar um site local do WordPress. Você pode ler nosso tutorial sobre como criar um site local do WordPress para obter instruções passo a passo.

Esperamos que este artigo tenha ajudado você a saber o que é o WordPress Playground e como usá-lo em seu navegador. Talvez você também queira dar uma olhada em nosso artigo sobre os melhores construtores de páginas do WordPress do tipo arrastar e soltar e em nosso guia sobre como adicionar conteúdo dinâmico no WordPress.

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