Como criar um fluxo de trabalho eficaz do WordPress para desenvolvedores

O WordPress é uma ótima plataforma, mas também pode ser um pouco desorganizada às vezes – pelo menos do ponto de vista do código. Isso ocorre porque o código passou por muitas iterações e, à medida que as atualizações são lançadas, às vezes as coisas são codificadas da maneira mais eficiente possível.

Só porque o código pode estar um pouco confuso às vezes, não significa que seu processo de desenvolvimento deva seguir o exemplo. Embora o código confuso seja muitas vezes dispensado devido aos cronogramas de produção rápidos, você pode realmente ganhar mais como desenvolvedor da Web implementando um fluxo de trabalho adequado.

Neste artigo, abordaremos algumas dicas para ajudá-lo a desenvolver sites WordPress da maneira certa com as ferramentas certas à mão. Também forneceremos um passo a passo para ajudá-lo a seguir essas dicas.

Seguindo este guia, você pode evitar alguns dos problemas comuns que ocorrem ao desenvolver sites WordPress. E você também poderá criar um site fácil de manter e atualizar.

Então vamos começar!

Atributos do código de alta qualidade

Antes de nos aprofundarmos em nosso guia completo sobre como criar um fluxo de trabalho de desenvolvimento do WordPress, vamos fazer uma pausa para discutir por que o código de alta qualidade realmente importa. Muito.

Ao pensar no código do seu site, há alguns atributos importantes que você deve ter em mente. Esses atributos ajudarão a garantir que seu código seja limpo, bem organizado e fácil de entender.

Aqui estão alguns atributos de código de alta qualidade:

• Simplificado
• Fácil de seguir
• Modular
• Bem comentado
• Pode ser reutilizado e mantido facilmente

Esses atributos podem parecer muito para se ter em mente, mas não se preocupe. Abordaremos totalmente como obter cada um em nosso guia. Mas primeiro, precisamos falar sobre por que seu fluxo de trabalho de desenvolvimento simplesmente deve obedecer a esses padrões.

Por que o desenvolvimento do WordPress precisa de práticas de codificação de primeira linha

Para que um site WordPress funcione corretamente, o código que compõe o site precisa ser de alta qualidade. Isso é especialmente importante para sites do WordPress porque eles geralmente são complexos, com muitas partes móveis diferentes.

Existem muitas razões pelas quais as práticas de codificação são importantes para o desenvolvimento do WordPress:

1. Sites WordPress são complexos.
2. Uma única linha de código pode ter um grande impacto.
3. O código precisa ser bem escrito e bem testado.
4. Código de alta qualidade é mais fácil de manter.
5. O código de qualidade pode ajudar a melhorar o desempenho.

Manter esses pontos em mente à medida que avança no processo de planejamento de desenvolvimento pode ajudá-lo a ficar de olho no prêmio, por assim dizer.

Dicas para melhorar o fluxo de trabalho do WordPress

Agora que falamos sobre por que é importante ter um código bem escrito, vamos ver algumas dicas para ajudá-lo a melhorar seu fluxo de trabalho do WordPress para cada projeto. Cada uma das dicas a seguir ajudará a garantir que seu código WordPress esteja limpo e otimizado, que é sua prioridade em 2022 e além.

Utilize o teste

Um site de teste é uma cópia do seu site ativo que você pode usar para testar as alterações antes de fazê-las em seu site ativo. Esta é uma ferramenta valiosa porque permite que você experimente alterações sem afetar seu site ao vivo.

Há muitos benefícios de usar um site de teste:

1. Você pode testar as alterações antes de fazê-las em seu site ativo.
2. Você pode evitar possíveis problemas testando em um site de teste.
3. Você pode ter certeza de que suas alterações estão funcionando conforme o esperado.
4. Você pode evitar um possível tempo de inatividade em seu site ativo.
5. Você pode reduzir o risco de quebrar seu site ao vivo.

E quando você usa o complemento Premium Staging Environment para Kinsta, você pode criar automaticamente um ambiente de preparo com cada um dos seus sites WordPress sem ter que realizar nenhuma operação manual. É uma verdadeira economia de tempo.

Implementar Controle de Versão

O controle de versão é um sistema que rastreia as alterações nos arquivos ao longo do tempo. Isso é valioso para o desenvolvimento do WordPress porque permite rastrear alterações e reverter para versões anteriores, se necessário.

Para a maioria, isso significa usar o Git, que é um sistema de controle de versão popular. Se você não estiver familiarizado, Git é um sistema de controle de versão distribuído gratuito e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes com velocidade e eficiência.

É especialmente útil ao trabalhar com uma grande equipe distribuída. A última coisa que você quer encontrar são várias versões do seu arquivo functions.php , todas com nomes ligeiramente diferentes, em sua instalação do WordPress porque várias pessoas estavam fazendo alterações ao mesmo tempo.

Git vs. GitHub

Git é um sistema de controle de versão, uma ferramenta para gerenciar seu histórico de código-fonte. GitHub é uma empresa que fornece hospedagem para projetos de desenvolvimento de software que usam Git.

São duas coisas diferentes, mas a maioria das pessoas usa o termo “Git” para se referir tanto ao Git quanto ao GitHub.

Agendar backups automatizados

Um dos aspectos mais importantes do desenvolvimento do WordPress são os backups. Os backups são vitais porque permitem que você restaure seu site se algo der errado.

Existem muitas maneiras de automatizar backups, mas uma das maneiras mais fáceis é usar um plugin de backup do WordPress. Existem muitos plugins de backup excelentes disponíveis, mas recomendamos o uso do complemento Kinsta Automated External Backups.

Este complemento criará automaticamente backups diários do seu site WordPress e os armazenará em um servidor externo.

Aproveite o Linting

Linting é o processo de verificação de erros no código. Isso é valioso para o desenvolvimento do WordPress porque pode ajudá-lo a encontrar e corrigir erros em seu código.

Muitos editores de código fazem isso automaticamente, mas se você quiser ter certeza de que o seu oferece esse recurso, considere usar um dos seguintes editores de código e texto:

• Sublime Text: Este editor de código possui muitos recursos, incluindo linting.
• Atom: Este editor de código também possui linting embutido.
• Vim: Este editor de texto também oferece linting e muitos outros recursos.
• Código do Visual Studio: Este editor de código tem linting disponível por padrão.
• PHPStorm: Este é um ambiente de desenvolvimento pago que possui linting disponível.

Use um gerador de código

Um gerador de código é uma ferramenta que pode gerar código automaticamente para você. Isso é valioso para o desenvolvimento do WordPress porque pode economizar tempo e ajudar a evitar erros.

Existem muitos geradores de código disponíveis, mas alguns dos mais populares incluem:

• GenerateWP: Este gerador de código pode gerar código para tipos de postagem personalizados, taxonomias, metaboxes e muito mais.
• Hasty: Este gerador de código pode gerar código para tipos de postagem personalizados, taxonomias e campos.
• Nimbus Themes Code Generator: Este gerador de código pode gerar código para tipos de postagem personalizados, taxonomias e campos.

Usar WP-CLI

WP-CLI é uma interface de linha de comando para WordPress. Isso é valioso para o desenvolvimento do WordPress porque permite gerenciar seu site WordPress a partir da linha de comando.

Isso é especialmente útil quando você precisa realizar tarefas repetitivas ou que exigem muitas etapas. Por exemplo, o WP-CLI pode ser usado para instalar o WordPress, criar posts e páginas, instalar plugins e temas e muito mais. Também é útil quando você precisa fazer alterações em vários sites ao mesmo tempo.

Use uma estrutura de desenvolvimento do WordPress

Uma estrutura de desenvolvimento do WordPress é uma ferramenta que pode ajudá-lo a otimizar seu fluxo de trabalho. Isso é valioso para o desenvolvimento do WordPress porque pode economizar tempo e ajudar a evitar erros.

Existem muitos frameworks de desenvolvimento WordPress disponíveis, mas alguns dos mais populares incluem:

• Genesis: Esta estrutura do StudioPress foi projetada para ajudá-lo a criar sites WordPress mais rapidamente.
• Sublinhados: Esta estrutura da Automattic foi projetada para ajudá-lo a começar a desenvolver temas do WordPress rapidamente.
• Fundação: Esta estrutura da Zurb foi projetada para ajudá-lo a criar sites WordPress responsivos.
• Bootstrap: Essa estrutura do Twitter é uma maneira super útil de criar designs responsivos para sites WordPress.

Usar Executores de Tarefas

Um executor de tarefas é uma ferramenta que pode automatizar tarefas. Isso é valioso para o desenvolvimento do WordPress porque pode economizar tempo e ajudar a evitar erros. Ele também permite que você execute várias tarefas simultaneamente.

Existem muitos executores de tarefas disponíveis, mas alguns dos mais populares incluem:

• Gulp: Este executor de tarefas pode ser usado para automatizar tarefas como pré-processamento de CSS, linting de JavaScript e muito mais.
• Grunt: Grunt é um executor de tarefas Javascript que ajuda a automatizar muitas de suas tarefas mais repetitivas.
• Webpack: Este executor de tarefas pode ser usado para automatizar tarefas como agrupar arquivos JavaScript e muito mais.

Familiarize-se com o Vue.js ou reaja agora

Embora você não esteja usando Vue.js ou React imediatamente, é importante se familiarizar com esses frameworks agora. Isso é valioso para o desenvolvimento do WordPress porque eles estão se tornando mais populares e estão sendo usados ​​cada vez mais com o passar do tempo.

Vue.js é uma estrutura JavaScript que permite criar interfaces de usuário reativas. React é uma biblioteca JavaScript para construir interfaces de usuário.

Tanto o Vue.js quanto o React são escolhas populares para o desenvolvimento do WordPress porque são rápidos, leves e fáceis de usar e são essenciais para transformar o WordPress em um CMS headless.

Por que gastar tempo no planejamento de fluxo de trabalho do WordPress é vital

Os sites WordPress são complexos e é importante ter um fluxo de trabalho bem planejado antes de iniciar qualquer projeto. Ao reservar um tempo para planejar seu fluxo de trabalho, você pode economizar tempo e evitar possíveis problemas no futuro.

Há muitos benefícios em planejar seu fluxo de trabalho do WordPress:

• Você pode economizar tempo sabendo o que precisa ser feito.
• Você pode evitar problemas potenciais planejando com antecedência.
• Você pode garantir que todas as tarefas necessárias sejam concluídas.
• Você pode garantir que seu fluxo de trabalho seja eficiente e eficaz.
• Você pode evitar problemas ao entregar projetos a colaboradores ou clientes

Gastar tempo no planejamento do fluxo de trabalho do WordPress é vital porque pode economizar tempo e ajudar a evitar possíveis problemas. Ao reservar um tempo para planejar seu fluxo de trabalho, você pode garantir que todas as tarefas necessárias sejam concluídas e que seu fluxo de trabalho seja eficiente e eficaz.

O fluxo de trabalho ideal do WordPress para desenvolvimento

Existem muitas maneiras de abordar o fluxo de trabalho do WordPress, mas existem algumas etapas essenciais que devem ser incluídas no seu processo de desenvolvimento.

Etapa 1: configurar um ambiente de desenvolvimento local

A primeira etapa em qualquer fluxo de trabalho do WordPress deve ser a configuração de um ambiente de desenvolvimento local. Isso é importante porque permite que você trabalhe offline no seu site WordPress, o que pode economizar tempo e evitar erros.

Há muitas maneiras de configurar um ambiente de desenvolvimento local, depende apenas de qual configuração você prefere usar. Recomendamos o DevKinsta para isso.

Recomendamos usar Kinsta Staging e o complemento Premium Staging Environments. Isso lhe dá um ambiente de desenvolvimento WordPress completo com um clique em push to live.

Você também pode trabalhar em vários projetos ao mesmo tempo e mesclar as alterações antes de entrar no ar. Ele também vem com testes A/B integrados, testes de compatibilidade de plug-ins e testes intensivos de recursos para ajudar a garantir que suas compilações sejam estruturadas adequadamente.

Para começar a usar o complemento Premium Staging Environments, você só precisa comprá-lo através de sua conta Kinsta. Para ativar o ambiente de teste, vá para MyKinsta e clique em Ambiente > Criar novo ambiente na parte superior da tela.

Etapa 2: configurar o controle de versão

A segunda etapa em qualquer fluxo de trabalho do WordPress deve ser configurar o controle de versão. Isso é importante porque permite rastrear as alterações em seu código e reverter para versões anteriores, se necessário.

Para fazer isso, você pode usar uma ferramenta como o Git. Esse processo se parece com o seguinte

1. Crie um repositório no GitHub

Para criar um repositório no GitHub, você pode usar as seguintes etapas:

1. Faça login na sua conta do GitHub e clique no sinal + no canto superior direito.
2. Selecione Novo repositório no menu suspenso.
3. Insira um nome e uma descrição para seu repositório e clique em Criar repositório .

2. Clone o repositório para seu ambiente de desenvolvimento local

No nosso caso, usaremos o DevKinsta para nosso exemplo.

1. Na página do GitHub do seu repositório, clique no botão Clonar ou baixar .
2. Na seção Clonar com HTTPs , copie a URL do seu repositório.
3. Em seu ambiente de desenvolvimento, abra um terminal e mude para o diretório onde deseja clonar seu repositório.
4. Digite o seguinte comando, substituindo a URL que você copiou do Github:

 git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git

Isso clonará seu repositório para seu ambiente de desenvolvimento local.

3. Adicionar arquivos e confirmar alterações

1. Adicione os arquivos que você deseja rastrear com o Git ao diretório do repositório em seu computador.
2. Digite git add seguido do nome do arquivo ou use git add . para adicionar todos os arquivos no diretório.
3. Digite git commit -m seguido por uma mensagem descrevendo as alterações que você fez.
4. Para enviar suas alterações para o Github, digite git push .

Agora você pode continuar fazendo alterações nos arquivos em seu computador e enviando-os para o GitHub. Quando você deseja recuperar a versão mais recente dos arquivos do Github, pode usar o comando git pull .

Se você não estiver usando o GitHub, também poderá usar o Bitbucket de maneira semelhante.

Etapa 3: desenvolver localmente

Depois de configurar seu ambiente de desenvolvimento local e controle de versão, é hora de começar a desenvolver seu site WordPress localmente offline.

Ao desenvolver localmente, você pode testar as alterações em seu site de teste antes de enviá-las ao vivo. Isso é importante porque permite que você detecte quaisquer erros ou bugs antes que eles afetem seu site ao vivo.

Para enviar as alterações do seu ambiente de desenvolvimento local para o seu site de teste, você pode usar uma ferramenta como o DevKinsta. Essa ferramenta facilita o envio de alterações do ambiente de desenvolvimento local para o site de teste com apenas alguns cliques.

Etapa 4: fazer uso do WP-CLI

WP-CLI é uma interface de linha de comando para WordPress que permite gerenciar seu site WordPress a partir do terminal. Isso pode ser útil para tarefas como criar e gerenciar usuários, instalar e atualizar plugins e muito mais.

Para instalar o WP-CLI, siga estas etapas:

1. Baixe o arquivo phar WP-CLI .
2. Mova o arquivo para um diretório em seu PATH (por exemplo, /usr/local/bin ).
3. Renomeie o arquivo para wp .
4. Torne o arquivo executável (por exemplo, chmod +x /usr/local/bin/wp ).
5. Teste se o WP-CLI está instalado executando wp –version .

A partir daí, você pode usar o WP-CLI para gerenciar seu site WordPress a partir da linha de comando. Para obter uma lista completa de comandos, você pode conferir nosso guia detalhado para WP-CLI v2.

Etapa 5: automatize seu fluxo de trabalho com o Gulp

Gulp é um executor de tarefas que permite automatizar tarefas como minificar arquivos CSS e JavaScript, compilar arquivos Sass e muito mais.

Para usar o Gulp, primeiro você precisa instalá-lo globalmente em seu sistema. Para fazer isso, você precisará de Node.js, npm e – claro – Gulp. Execute o seguinte comando no Node.js:

 npm install gulp-cli -g

Uma vez instalado o Gulp, você pode criar um arquivo gulpfile.js na raiz do seu projeto. Este arquivo contém o código para suas tarefas Gulp.

Por exemplo, o arquivo gulpfile.js a seguir contém uma tarefa para reduzir arquivos CSS:

 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', function() { return gulp.src('src/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')); });

Para executar esta tarefa, você pode usar o seguinte comando:

 gulp minify-css

Passo 6: Use Linting

As ferramentas de linting são ferramentas de análise de código estático que ajudam a encontrar erros em seu código. Para nossos propósitos aqui, estamos usando o Atom.io com os seguintes pacotes de linting:

• embelezar o átomo
• atom-ternjs
• linter
• linter-eslint
• linter-php
• linter-sass-lint

No seu terminal, navegue até o diretório que você deseja lint e execute o seguinte comando:

 find . -name "*.js" -o -name "*.scss" | xargs eslint --fix

Isso fará o lint de todos os arquivos JavaScript e Sass em seu projeto.

Se você quiser fazer o lint de um arquivo específico, execute o seguinte comando:

 eslint --fix file-name.js

Substitua file-name.js pelo nome do arquivo que você deseja fazer o lint.

Etapa 7: usar um pré-processador CSS

Um pré-processador de CSS é uma ferramenta que permite escrever CSS em um idioma diferente e depois compilá-lo em CSS. Os dois pré-processadores CSS mais populares são Sass e Less.

Neste tutorial, usaremos Sass. Para usar o Sass, primeiro você precisa instalar a ferramenta de linha de comando Sass. Para fazer isso, execute o seguinte comando:

 gem install sass

Depois que o Sass estiver instalado, você pode usar o seguinte comando para compilar um arquivo Sass em CSS:

 sass input.scss output.css

Substitua input.scss pelo nome do seu arquivo Sass e output.css pelo nome do arquivo CSS que você deseja criar.

Se você quiser observar seus arquivos Sass para alterações e compilá-los automaticamente em CSS, você pode usar o seguinte comando:

 sass --watch input.scss:output.css

Substitua input.scss pelo nome do seu arquivo Sass e output.css pelo nome do arquivo CSS que você deseja criar.

Etapa 8: usar um plug-in de implantação

Um plug-in de implantação é uma ferramenta que permite implantar facilmente seu site WordPress de um ambiente de desenvolvimento local para um servidor ativo.

Existem várias ferramentas diferentes que você pode usar para esse fim, mas recomendamos o uso do WP Pusher. WP Pusher é um plugin de implantação gratuito que você pode usar com seu site WordPress.

Para instalar o WP Pusher, primeiro baixe o arquivo ZIP do site do WP Pusher. Em seguida, faça login no seu site WordPress e vá para Plugins > Adicionar novo . Clique no botão Upload Plugin e selecione o arquivo ZIP que você acabou de baixar. Depois que o plug-in estiver instalado e ativado, você pode ir para Configurações> WP Pusher para configurá-lo.

Depois que o WP Pusher estiver configurado, você poderá implantar plugins e temas do WordPress em seu servidor ao vivo sem precisar interagir com a interface FTP ou mexer no banco de dados do WordPress.

Etapa 9: use a API Rest do WordPress

A API REST do WordPress é uma ferramenta poderosa que permite que você interaja com seu site WordPress de fora da interface de administração do WordPress.

A API REST do WordPress pode ser usada para criar soluções personalizadas para o seu site WordPress. Por exemplo, você pode usar a API REST do WordPress para criar um aplicativo móvel para seu site WordPress ou para criar um painel personalizado.

Para começar com a API REST do WordPress, você precisará interagir com ela por meio da Interface de linha de comando do WordPress. Publicamos recentemente um tutorial sobre como configurar a API REST do WordPress que pode orientá-lo em cada etapa.

Etapa 10: criar e seguir um guia de estilo

Um guia de estilo é um conjunto de diretrizes para codificar e projetar seu site WordPress. Um guia de estilo ajuda a garantir que seu código seja consistente e fácil de ler.

Existem vários guias de estilo diferentes que você pode usar para o seu projeto WordPress. Recomendamos usar os Padrões de codificação do WordPress como ponto de partida. No entanto, você provavelmente fará inúmeras modificações e adições com o passar do tempo.

Qualquer guia de estilo que você criar provavelmente estará mudando o tempo todo. Mas o ponto importante é que ele fornece uma coleção definida de etapas a serem seguidas e diretrizes a serem seguidas para todos os desenvolvedores de sua equipe.

Essencialmente, seu guia de estilo deve ser seu fluxo de trabalho do WordPress em forma escrita.

Etapa 11: Publique seu site ao vivo

Depois de concluir todas as etapas acima, seu site WordPress está pronto para ser colocado ao vivo. Se você estiver usando um plug-in de implantação como o WP Pusher, esse processo é tão simples quanto enviar seu código para o repositório Git remoto.

Você também pode fazer isso diretamente no Kinsta, indo para MyKinsta > Sites , selecionando seu site e clicando em Ações do ambiente . A partir daí, clique em Push to Live .

Em seguida, marque a caixa ao lado de Arquivos ou Banco de Dados (para marcar os dois), digite o nome do site e clique em Enviar para Live .

Se você não estiver usando um plugin de implantação ou Git, você pode simplesmente exportar seu banco de dados WordPress do seu ambiente de desenvolvimento local e importá-lo para o seu servidor ativo. Você pode fazer isso acessando Ferramentas > Exportar no painel de administração do WordPress.

Em seguida, selecione Todo o conteúdo nas opções de exportação e clique no botão Baixar arquivo de exportação . Depois de ter seu arquivo de banco de dados, você pode importá-lo para seu servidor ativo acessando Ferramentas> Importar no painel de administração do WordPress. Selecione o arquivo de banco de dados que você acabou de exportar e clique no botão Carregar arquivo e importar .

Você também pode transferir manualmente seus arquivos do WordPress do seu ambiente de desenvolvimento local para o seu servidor ao vivo usando um cliente FTP como o FileZilla. Basta conectar-se ao seu servidor ativo usando FTP e, em seguida, arraste e solte seus arquivos do WordPress no diretório public_html .

Depois de colocar seu site WordPress ao vivo, você pode levar um tempo para testar tudo e certificar-se de que tudo está funcionando como deveria.

Este também seria um bom momento para garantir que o Kinsta AMP esteja funcionando corretamente. Essa ferramenta de monitoramento de desempenho ficará de olho no desempenho do seu servidor e garantirá que seu site esteja funcionando o mais rápido possível.

Resumo

Como você pode ver, há muito o que fazer para criar corretamente um fluxo de trabalho de desenvolvimento do WordPress. Mas seguir essas etapas ajudará a garantir que seu site WordPress seja bem organizado, fácil de gerenciar e funcione sem problemas.

E você não pode errar apoiando-se em produtos Kinsta como DevKinsta, complemento Premium Staging Environments e Kinsta AMP. Essas ferramentas tornarão seu fluxo de trabalho de desenvolvimento do WordPress ainda mais fácil e eficiente.

Você tem alguma dúvida sobre como criar um fluxo de trabalho de desenvolvimento do WordPress? Deixe-nos saber nos comentários abaixo!