WordPress e GitHub: Integração perfeita para devs!

Foto do autor

By luis

No universo do desenvolvimento web, os termos GitHub e WordPress são frequentemente encontrados. A integração entre WordPress e GitHub pode otimizar o fluxo de trabalho de um desenvolvedor, impulsionando a produtividade.

O GitHub é uma plataforma baseada na nuvem, que possibilita o controle, a gestão e o armazenamento do código-fonte. Já o WordPress é um sistema de gerenciamento de conteúdo (CMS) amplamente utilizado para a criação de websites.

Por que a integração é importante?

  • Controle de Versão: Através do GitHub, você pode rastrear cada alteração no código-fonte do WordPress ao longo do tempo. Isso simplifica a gestão de temas, plugins e códigos personalizados.
  • Ramificação: Ao integrar WordPress e GitHub, você elimina a necessidade de manter seu site em modo de ‘manutenção’ durante o desenvolvimento. Crie ramificações separadas para trabalhar em novos recursos, testá-los e implementá-los quando estiverem prontos.
  • Colaboração: Projetos maiores, que envolvem múltiplos desenvolvedores, se beneficiam da colaboração facilitada pelo GitHub. Ele permite integrar sua equipe e atribuir diferentes funções aos seus membros.
  • Revisão de Código: Bugs e erros são comuns durante o desenvolvimento. O GitHub possibilita a revisão de todo o código alterado no WordPress, antes de sua implementação, reduzindo riscos.
  • Backup e Recuperação: O armazenamento do código-fonte do WordPress em seu computador pode ser arriscado. O GitHub oferece armazenamento em nuvem, possibilitando a recuperação do código em caso de falhas ou perdas.
  • Transparência e Rastreabilidade: O GitHub oferece um registro claro de todas as mudanças realizadas no código-fonte do WordPress e quem as realizou, aumentando a transparência e a responsabilidade.

O que é WordPress?

WordPress é um sistema de gerenciamento de conteúdo de código aberto, que permite que mesmo pessoas sem experiência em programação construam seus próprios sites. Originalmente criado para blogs, o WordPress evoluiu e hoje possibilita a criação de lojas virtuais, fóruns, redes sociais, aplicativos móveis e sites institucionais.

O fato de o WordPress ser de código aberto o torna muito atrativo para desenvolvedores e designers, que podem baixar, modificar e redistribuir seu código-fonte. Entretanto, para publicar seu site online, é necessário adquirir um nome de domínio e hospedagem.

Por que usar WordPress?

  • Facilidade de Uso: O WordPress foi projetado para ser intuitivo e fácil de usar, tanto para iniciantes quanto para especialistas. Seu editor permite criar sites profissionais sem escrever uma linha de código.
  • Variedade de Temas: O WordPress oferece milhares de temas, que podem ser adaptados às suas necessidades. Você também pode criar um tema personalizado e utilizá-lo em seu site.
  • Diversidade de Plugins: Você não precisa criar tudo do zero, pois pode usar plugins para adicionar funcionalidades. Por exemplo, é possível integrar seu site com gateways de pagamento usando plugins.
  • Comunidade Ativa: Se você tiver dúvidas ou enfrentar problemas, pode contar com a vasta comunidade WordPress, que oferece diversos recursos para solucionar problemas e resolver desafios.

O que é GitHub?

GitHub é uma plataforma de desenvolvimento de software baseada na nuvem. Ela oferece armazenamento, rastreamento e ferramentas de colaboração para diversos projetos de desenvolvimento. No GitHub, os usuários podem criar contas gratuitas, criar repositórios e convidar colaboradores para participar de projetos. A plataforma se integra perfeitamente com o Git, um sistema de controle de versão que permite o rastreamento de alterações no projeto localmente.

O GitHub também oferece hospedagem gratuita para sites estáticos através do GitHub Pages, sendo uma boa opção para portfólios online. Além disso, ele funciona como uma plataforma de rede social, onde você pode exibir projetos publicamente e explorar projetos de código aberto para contribuir.

Por que usar o GitHub?

  • Fácil de usar: Criar uma conta no GitHub é um processo simples, mesmo para pessoas sem experiência técnica.
  • Baseado na Nuvem: O GitHub armazena seu código-fonte na nuvem, permitindo acesso remoto e recuperação dos arquivos mesmo em caso de falha do seu computador.
  • Controle de versão: O GitHub rastreia todas as mudanças feitas no código-fonte e permite criar ramificações para facilitar o controle.
  • Colaboração: Você pode convidar colegas para colaborar em projetos do GitHub e criar organizações para atribuir diferentes funções e direitos aos membros.

Como usar o GitHub com WordPress

Antes de integrar o WordPress com o GitHub, é recomendável criar um servidor de desenvolvimento local.

Existem várias ferramentas para criar um servidor de desenvolvimento local, mas neste artigo usaremos o Local WP.

Requisitos para a integração

  • Git: Já vem pré-instalado em sistemas Linux ou macOS mais recentes. Você pode verificar sua versão utilizando o comando: `git –version`.
  • Conta ativa no GitHub: Se você ainda não tem Git e GitHub, este guia pode ajudar.
  • Conhecimento básico de WordPress: É útil ter alguma familiaridade com a estrutura e o funcionamento do WordPress.

Instale o Local WP

  • Acesse a página de download e selecione a versão compatível com seu sistema operacional (neste exemplo, Ubuntu).
  • Após o download, siga as instruções de instalação para seu sistema operacional.

  • O Local WP pode pedir que você crie uma conta gratuita. Se desejar, pule essa etapa clicando no botão “X”.

  • Selecione a opção para criar um novo site WordPress.

  • Escolha seu ambiente de desenvolvimento. Selecione “Preferencial” para este exemplo.

  • Defina o nome de usuário e a senha para seu site.

  • Instale uma extensão para seu editor de código. Na barra lateral do Local WP, clique no ícone de extensões. Se você usa VS Code, instale a extensão correspondente.

Agora você tem um site WordPress configurado para desenvolvimento local. O próximo passo é integrar este site ao GitHub.

Como conectar o WordPress ao GitHub

Na interface do Local WP, clique em “Ir para a pasta do site”, como mostrado na imagem abaixo:

Isso abrirá a pasta com o código-fonte do seu site WordPress. Se você usa VS Code, a estrutura de pastas será semelhante a esta:

Neste momento, não se preocupe com as diferentes pastas e arquivos.

Crie um repositório no GitHub

Assumindo que você já configurou o Git e o GitHub, siga estes passos para criar um repositório e começar a usar o Git como sistema de controle de versão:

  • Faça login no GitHub e clique em “Novo”.

  • Dê um nome memorável ao seu repositório, marque as caixas relevantes e clique em “Criar repositório”.

  • Inicialize seu código-fonte na pasta do projeto WordPress. O GitHub fornece uma série de comandos que você pode copiar e colar no terminal para começar. Os comandos serão similares a este exemplo:
echo "# GitHub-WordPress" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:username/repository-name.git
git push -u origin main

Substitua “nome de usuário” e “nome do repositório” pelas suas informações corretas.

  • Envie a pasta de código do WordPress para o GitHub usando os seguintes comandos:

git add . (Organiza todos os arquivos do seu projeto)

git commit -m "commit da pasta do projeto"

git push (Envia todos os arquivos para o GitHub)

Seguindo esses passos, você terá integrado o site WordPress local ao GitHub.

Veja esta imagem:

Observe a estrutura de pastas similar àquela que tínhamos ao abrir o código-fonte no editor.

Agora sua equipe pode clonar o repositório para suas máquinas locais, criar ramificações para trabalhar em recursos separados, fazer commits e enviá-los para o GitHub para armazenamento.

Edite seu site WordPress

A maior parte do desenvolvimento ocorrerá na pasta de temas, localizada em: `app/public/wp-content/themes`

Minha pasta tem três temas, e eu seleciono o mais recente. O site aparece assim antes de qualquer edição:

Ao acessar o caminho: `app/public/wp-content/themes/templates/home.html`, posso editar o conteúdo da página inicial.

Posso mudar o conteúdo do <H1> na página inicial para “Este é um exemplo de integração WordPress-GitHub”.

Ao atualizar o conteúdo no servidor local, o resultado será:

Como enviar alterações para o GitHub

As alterações feitas acima estão disponíveis apenas localmente. Para enviar as alterações para o GitHub, siga estes passos:

  • Execute o comando: git status

Como pode ver, existem arquivos não rastreados em `app/public/wp-content/themes/twentytwentythree/templates/home.html`

  • Prepare as edições usando: git add .
  • Faça o commit usando: git commit -m "este commit edita a página inicial"
  • Envie as alterações para o GitHub usando: git push

Ao retornar ao repositório no GitHub, você verá o novo commit, como mostra esta imagem:

Agora sua equipe pode obter as alterações, editar os arquivos e enviá-los para este repositório.

Melhores práticas para uma integração fluida com o GitHub

  • Aproveite o controle de versão: O maior benefício da integração entre WordPress e GitHub é o controle de versão. Rastreie todo o código que você escreve ou modifica usando o Git.
  • Crie um ambiente de testes: O servidor de desenvolvimento local é seu ambiente de testes. Verifique todas as mudanças no WordPress no ambiente local antes de enviá-las para o site ativo.
  • Use o recurso .gitignore: Nem todas as pastas e arquivos precisam ser rastreados no desenvolvimento de um site WordPress. Concentre-se nos temas e utilize o .gitignore para rastrear apenas as alterações relevantes.
  • Use ramificações: Se múltiplos desenvolvedores estão trabalhando em recursos diferentes, use ramificações para cada recurso e as mescle com a ramificação principal após testá-las.
  • Desenvolva um fluxo de trabalho: Crie um fluxo claro que mostre todos os passos do desenvolvimento. Inclua quando testar, implementar e os critérios a serem seguidos.
  • Automatize os testes: Use pipelines de integração contínua (CI) e entrega contínua (CD), como o Jenkins, para testar o código automaticamente durante o desenvolvimento.
  • Documente seu trabalho: A documentação deve indicar a função de cada recurso em seu código do WordPress.

Conclusão

Integrar o WordPress com o GitHub é um processo simples quando você segue os passos indicados. O próximo passo é compartilhar o link do repositório GitHub com sua equipe e atribuir os recursos em que cada um deve trabalhar. Se você lidera a equipe, pode revisar cada commit antes de aprová-lo. O GitHub facilita o acesso ao código-fonte, já que ele fica armazenado na nuvem.

Com o WordPress rodando na sua máquina local, você também pode hospedá-lo nas páginas do GitHub se busca um site estático ou instalar diversos plugins de seus repositórios em seu ambiente de desenvolvimento local.

Você pode conferir nosso artigo sobre GitHub vs. GitLab.