Como testar WooCommerce localmente

Antes do lançamento público oficial de sua loja Woo, às vezes é útil fazer uma configuração inicial em seu computador pessoal. Você pode fazer isso transformando seu computador em um servidor web e executando WordPress e Woo a partir daí. Neste artigo, discutirei esse processo e como testar o WooCommerce localmente. Mais do que isso, explicarei como você pode testar essa instalação local em diferentes dispositivos da sua rede e da web global.

Instalando um servidor web PHP em seu computador local

O núcleo do WordPress é construído usando a linguagem de programação PHP, por isso precisa de um servidor PHP executar. Claro, também é carregado com muito HTML, CSS e JavaScript. Mas, sem um servidor PHP para rodar, o WordPress simplesmente não funcionará.

Na maioria das vezes podemos usar WordPress e WooCommerce sem saber que o PHP está escondido nos bastidores. E essa é uma das coisas maravilhosas do WordPress. Ele adiciona camadas de abstração aos bits, bytes e pixels que compõem nossos sites. Mas, quando queremos o luxo de brincar com ele localmente, pelo menos saber que o PHP é necessário pode levá-lo na direção certa.

Há uma variedade de ferramentas gratuitas e pagas disponíveis para instalar um servidor PHP

Há uma grande variedade de maneiras de executar um servidor PHP em sua máquina local, independentemente do sistema operacional. Algumas soluções são projetadas especificamente para usuários do WordPress. PressServer tem um exemplo. Local mais um.

Trabalhei com várias ferramentas para instalar um servidor PHP. As etapas a seguir podem funcionar sem modificações para uso com qualquer uma delas. Recentemente, tenho usado o XAMPP para testes locais, então discutirei o processo assumindo que o XAMPP também está em uso por você. Mas como eu disse, é de natureza geral o suficiente para funcionar da mesma forma, mesmo quando se usa Local, ServerPress ou outros.

Captura de tela do servidor web XAMPP local em execução.

A propósito, acho que XAMPP se pronuncia ZAMP, mas poderia ser Ex-AMP, não tenho certeza.

Existem links para as etapas de instalação do XAMPP na mesma página do download

Para instalar o XAMPP, visite o link acima. Um download estará disponível para todos os sistemas Windows, Mac e Linux. Também há links para perguntas frequentes sobre cada sistema operacional. No FAQ você verá os passos para instalação. Acho que não faz muito sentido repeti-los aqui.

Captura de tela com links para a documentação do XAMPP.

Você também verá a menção de Bitnami . Isso pode ser usado para facilitar a instalação do WordPress. Eu pessoalmente faço isso manualmente, então explicarei esse processo abaixo.

Uma observação rápida: existem 5 módulos diferentes disponíveis ao instalar o XAMPP. Apache e My SQL são tudo o que você precisa para colocar o WordPress e o Woo em execução. Portanto, a instalação de FileZillaMercury e Tomcat são opcionais.

Coloque o WordPress e o WooCommerce em funcionamento

Estas etapas são certamente específicas do XAMPP (sem Bitnami). As outras ferramentas mencionadas instalarão o WordPress para você (veja bem, provavelmente uma versão antiga do WordPress e com todo o histórico de temas padrão do WordPress instalados, mas tudo bem).

Por padrão, pelo menos no Windows, o XAMPP é instalado em C:xampp. A pasta htdoc será a raiz do site para o qual o localhost aponta. Esse é o diretório onde o WordPress pode ser instalado.

Captura de tela do Gerenciador de arquivos do Windows com arquivos WordPress na pasta htdocs do XAMPP.

Uma discussão rápida sobre como manter limpas várias instalações do WordPress ao usar o XAMPP

Provavelmente é demais para este pequeno artigo, mas se você planeja ter várias instalações do WordPress, existe uma maneira mais limpa de fazer isso. Aqui está um exemplo rápido.

Digamos que você tenha 3 sites… wootest1, woo-avaliações-de-clientes-loja de flores irritada.

Você pode criar pastas exclusivas dentro do htdocs e também usar domínios locais para cada uma. Portanto, em vez de instalar htdocs do WordPress, você pode ter pastas que correspondam aos nomes dos sites mencionados acima. Para isso, eu não usaria localhost e talvez me referisse a sites como http://wootest.dev, http://woo-customer-reviews-test.dev e http://flower-shop.dev .

No entanto, dito isto, os detalhes são provavelmente demais para este artigo simples. Então, vamos instalar o WordPress e o WooCommerce, certo?

Etapas para instalar WordPress e WooCommerce localmente

Ok, com o XAMPP instalado, siga estes passos abaixo:

1. Baixe o WordPress do site oficial WordPress.org.
2. Descompacte-o na pasta htdoc que o XAMPP criou para você. A extração criará uma pasta chamada “wordpress” com o número da versão adicionado. Nele haverá uma pasta chamada “wordpress”. São os arquivos da pasta final “wordpress” que você deseja copiar para o htdocs.
3. Inicie o XAMPP, inicie o Apache e o MySQL.
4. Clique no botão Administrador para MySQL. Isso provavelmente deve levá-lo para localhost/phpmyadmin/. Isso espero.
5. Clique em Novo à esquerda, adicione um nome na caixa de texto Nomeie o banco de dados e clique em Criar . Tome nota do nome base de dados, você precisará deles em breve.
6. Agora você pode fechar a aba na qual o phpMyAdmin foi iniciado. No entanto, mantenha o XAMPP em execução.
7. Em seguida, abra C:xampphtdocswp-config-sample.php em um editor de texto simples.
8. Edite o valor DB_NAME pelo nome do seu banco de dados, algo como define( ‘DB_NAME’, ‘flower-shop’ ).
9. Por agora, DB_USER Provavelmente é enraizado DB_SENHA está vazio como define( ‘DB_PASSWORD’, ” ).
10. Use localhost para DB_HOST .
11. Salve o arquivo e renomeie-o como wp-config.phpe removendo a parte -sample.

Captura de tela com as etapas para criar um banco de dados WordPress no phpMyAdmin.

Você deveria fazer isso. O banco de dados é criado e o WordPress saberá disso durante a instalação devido às edições feitas no arquivo WP Config. Legal. Agora, no seu navegador acesse http://localhost/ e siga os passos para configurar o WordPress. Este é essencialmente o instalação do WordPress. As etapas acima apenas colocam os arquivos no lugar.

A partir daí, é claro, instale o WooCommerce na tela Acessórios . Além disso, instale quaisquer outros plug-ins que queira experimentar. No entanto, testar gradualmente seria meu conselho.

Fazendo o WordPress usar URLs relativos

O WordPress deve funcionar bem para você como está. Provavelmente você pode encontrá-lo na mesma máquina em que o software do servidor está instalado. E tudo provavelmente parece esperado no front-end.

No entanto, se você quiser testar a instalação do WooCommerce em outros dispositivos na mesma rede ou compartilhar o link com outras pessoas para visitá-lo na web, o WordPress ficará um pouco estranho.

URLs relativos versus absolutos para testes locais

Você pode configurar arquivos host em máquinas da sua rede local ou navegar até o site usando o nome da máquina onde o servidor está . Isso pode funcionar para você. Pode ser apenas uma questão de brincar com algumas configurações de permissão no firewall. Não tenho certeza. Quase nunca exatamente a mesma situação.

Acho que uma maneira mais simples é criar um túnel para o site e atribuir a ele um nome de domínio público temporário. Este processo é explicado na próxima seção. No entanto, o problema com isso é que o WordPress usa muitos URLs absolutos. Isso quer dizer… se o endereço do seu site local for http://flower-shop.dev/, quando mudamos o nome de domínio para um público, as coisas começam a falhar.

A solução é alterar todos os URLs para relativos, de modo que os links http://flower-shop.dev/wp-content/themes/storefront/style.css simplesmente tornem /wp-content/themes/storefront/style.css o domínio o nome é menos relevante neste cenário.

Adicione algum código para alterar o WordPress para usar URLs relativos

Estamos um pouco confusos aqui porque este código para forçar o WordPress a usar URLs relativos só é relevante depois de seguir as etapas da próxima seção. No entanto, estou fazendo isso dessa maneira para evitar a sensação desanimadora de ver seu site entrar em colapso em HTML sem qualquer estilo.

Esta etapa envolve adicionar algum código. Criei um post no passado sobre a criação de um plugin escrevendo código personalizado. Então, se quiser, você pode dar uma olhada rápida nele. Outra maneira rápida de adicionar algum código é usar este plugin legal de trechos de código.

Aqui está um link para o código que uso para corrigir o problema de URL absoluto:
WP-Ngrok-Local.

O que é NGrok Local para WordPress?

NGrok Local é um repositório antigo no Github, mas funciona. Verifique se o NGrok está em uso e, em caso afirmativo, altere o WordPress para usar URLs relativos. NGrok é a ferramenta que pedirei para você instalar na seção abaixo. É o que fará com que seu site de teste WooCommerce local obtenha o domínio público temporário que um túnel para o seu computador.

O código PHP no link acima pode ser adicionado como um trecho de código no WordPress, ou como um plugin, você decide. Destina-se a ser usado localmente para testes ao usar o NGrok.

Criando uma URL pública temporária para testar o WooCommerce

Com todas as etapas acima concluídas, mesmo se você adicionar o código NGrok acima, o WordPress deverá se comportar conforme o esperado em sua máquina local. Agora, forneceremos um URL acessível publicamente para facilitar a visualização em outros dispositivos da sua rede, bem como na web. Isso é útil para compartilhamento público, testes móveis, etc.

Neste ponto, você deve instalar o NGroken em seu computador. Você deve criar uma conta ou fazer login com sua conta do Google ou Github, se desejar.

O download será um arquivo zip contendo o executável do ngrok. Você pode executá-lo de qualquer lugar em seu computador. Também é útil adicioná-lo ao PATH para que possa ser iniciado a partir de qualquer pasta na linha de comando. Eu pessoalmente criei uma pasta em C:grok e copiei o executável lá.

Agora, no prompt de comando, você pode ir para essa pasta para executá-lo. Abaixo está uma captura de tela usando CMD no Windows. Neste exemplo, ele não está incluído no PATH, então naveguei até a pasta C:grok e digitei ngrok http 80 para executá-lo. Estou assumindo o valor padrão da porta 80 aqui.

Captura de tela do prompt de comando do Windows prestes a iniciar o NGrok.

Obtenha URL temporário do NGrok para uso público

NGrok estará ciente do localhost e é aí que o URL público que você criar será conectado. Há um comando diferente para usar com domínios .dev locais, mas não o abordamos completamente, então deixarei esse tópico de lado.

Captura de tela do NGrok finalmente sendo executado no prompt de comando do Windows.

Isso lhe dará um URL assimilado . Você pode ver que no meu exemplo é http://c038f20a395d.ngrok.io. Seu link Gr ok, agora você deve apontar para a instalação do WordPress a partir de qualquer dispositivo na internet ou na sua rede local. Feche o prompt de comando e o tunelamento será interrompido.

Você está recebendo um erro “muitas conexões”?

Este exemplo demonstra o uso do Grok com a versão gratuita. Existem algumas limitações, como o número de conexões por minuto. Entenda que qualquer página da web que tenha links para imagens, arquivos CSS, JavaScript e similares contém vários conexões . Cada link É uma conexão.

WordPress muitas vezes tem muitos conexões. Esse número cresce dependendo dos plugins e tema em uso. Portanto, é muito possível que o número alocado de conexões por minuto expire. É muito para entrar aqui, mas é possível inserir CSS etc. para limitar conexões. Além disso, você pode escolher um plano pago para Grok.