Como redesenhar um site WordPress: a lista de verificação definitiva

Aaah, o redesenho de um site WordPress…

Quando você pensa nas diferentes questões que esta missão envolve, geralmente tende a se estressar um pouco.

Quem não sonha, neste momento chave, em fazer um simples Command + Option + Escape ou Ctlr + Alt + Del em seu servidor, e recomeçar facilmente?

Infelizmente, redesenhar seu site é sempre um pouco mais complexo do que isso . E um descuido, um erro, um erro, acontece tão rapidamente…

O WPMarmite queria compartilhar com você suas melhores práticas para abordar este grande projeto com tranquilidade.

Você está pronto? Neste post, detalho todos os elementos que você precisa pensar para redesenhar seu site WordPress , desde a estratégia upstream até o lançamento online.

Seus melhores projetos WordPress precisam do melhor host!

O WPMarmite recomenda Bluehost: ótimo desempenho, ótimo suporte. Tudo o que você precisa para um ótimo começo.

Experimente o Bluehost

Para saber como criar um site WordPress do zero, confira nosso guia completo .

Os 4 passos antes do redesenho do seu site WordPress

Antes mesmo de colocar as mãos no WordPress para redesenhar seu site, você precisará trabalhar em vários elementos estruturais.

Isso mesmo: você não achou que começaria sem saber no que estava se metendo?

1. Defina os objetivos do seu redesenho

Como qualquer projeto, para redesenhar um site WordPress, você precisa ter objetivos, que você precisa definir com precisão (se você é um freelancer, uma agência web ou um webmaster não profissional).
São esses objetivos claros e concisos que guiarão seus próximos passos .

Tudo se resume a se fazer a seguinte pergunta: por que você quer redesenhar seu site? Pode haver muitas razões para isso:

• Altere o design do seu site , selecionando um novo tema ou optando por um construtor de páginas.
• Atualize a administração do seu site . Este pode ser o caso se seus plugins ou sua versão do WordPress CMS nunca foram atualizados, se houver conflitos entre plugins diferentes ou se seu tema tiver sido modificado de forma irregular. Estas são todas as preocupações que podem afetar o desempenho do seu site e a sua gestão diária.
• Otimize seu SEO . Uma meta para perguntar a si mesmo, especialmente se seu tráfego caiu ou não está decolando, se sua experiência de usuário está instável no momento ou se seu código HTML não está otimizado para os robôs do Google.
• Adicione novos recursos ao seu site que seu design atual não pode acomodar. Você também pode querer torná-lo mais intuitivo e fácil de usar para seus visitantes.
• Melhore a estrutura técnica do seu site (ou comércio eletrônico) para reforçar sua segurança, melhore sua velocidade de carregamento e modifique sua estrutura em árvore.
• Migre seu site para outro servidor de hospedagem na web .
• Faça mais vendas , especialmente se você tiver uma loja WooCommerce.
• Atualize seu site com a concorrência , que oferece sites mais atualizados. Você vai aproveitá-lo para melhorar sua imagem de marca e sua reputação.

Anote, em um documento bem estruturado, esses diferentes objetivos. Você verá que eles serão elementos estruturantes, para organizar o redesenho do seu site.

2. Estruture seu projeto de redesenho

Agora que você tem uma ideia clara do objetivo do seu redesenho, vamos falar sobre as diferentes etapas que determinam as linhas principais do seu projeto.

Crie seus wireframes

O termo wireframes soa um sino?

Uma rápida revisão do assunto é necessária, pois esta etapa é crucial.

Wireframes são maquetes estruturais que ajudam você a organizar os diferentes elementos de suas páginas da web em um único documento.

A ideia é realmente estabelecer a estrutura das diferentes páginas do seu site, para ter uma ideia clara da experiência do usuário que você criará.

Eu dei um exemplo neste artigo, e aqui está novamente para ilustrar meu ponto:

Se o método millennium papel + lápis pode ser suficiente para um leve redesenho, ainda recomendo que você use uma ferramenta digital para projetar seus wireframes .

Isso não apenas permitirá modificá-los facilmente, se necessário, mas também compartilhar esses wireframes com sua equipe (ou com seu primo que trabalha em marketing na web).

Só posso recomendar várias ferramentas para fazer isso :

• Balsamiq Wireframes : É um software pago, mas a versão de avaliação gratuita de 30 dias oferece muito tempo para projetar wireframes bem elaborados.
• MockFlow : Esta é uma ferramenta online freemium útil. Sua versão gratuita permite criar até 3 páginas, para começar.
• Sketch : Uma plataforma de web design colaborativa muito poderosa, desde que você saiba como usá-la corretamente. Ele oferece uma versão de avaliação gratuita de 30 dias, depois uma oferta paga a partir de US$ 9/mês.
• Canva : Não é uma ferramenta dedicada ao wireframe, mas permite que você se aproxime dele graças aos seus inúmeros recursos. E, acima de tudo, possui uma versão gratuita com muitos recursos.

E neste ponto, você tem uma ideia mais clara do que esperar para redesenhar seu site WordPress.

Projetando suas maquetes

Onde os wireframes lhe darão uma visão da estrutura de suas páginas redesenhadas, os mockups integrarão o próprio design .

Criado por meio de um software de layout de página (como o InDesign), o layout de suas páginas da Web pode exigir um certo tecnicismo e é uma etapa bastante demorada.

Então a pergunta é: você realmente precisa criar maquetes gráficas para o seu redesign? A resposta é simples:

• Sim, se você quiser criar seu próprio tema . Nesse caso, você terá que projetar seu site redesenhado do zero e, assim, visualizar facilmente todos os elementos gráficos.
• Não, se você quiser apenas usar um tema existente e redesenhá-lo. Uma solução mais simples. Mas neste caso, certifique-se de escolher seu novo tema de acordo com seus objetivos.
  Para te ajudar, o WPMarmite tem o recurso que você precisa: uma lista dos melhores temas gratuitos. Aproveitar!
  

Junte-se aos assinantes do WPMarmite

Obtenha os últimos posts do WPMarmite (e também recursos exclusivos).

INSCREVA-SE AGORA

Pense na sua nova estrutura de árvore

Sim, garanto a você, ainda estamos falando de reformulação do site, não de horticultura!

Projetar sua estrutura em árvore significa imaginar os links que existirão entre as diferentes páginas e pensar em todas as maneiras pelas quais um visitante pode se orientar no site.

Resumindo, ao criar sua estrutura em árvore, você pensa nos diferentes caminhos de navegação de seus usuários.

Então, como fazê-lo?

Projete uma estrutura de árvore e lembre-se de incluir:

• Seu menu de navegação principal, bem como seus menus secundários em potencial.
• Seu rodapé e os links que ele pode conter.
• Suas barras laterais possíveis, especialmente em seu blog.
• As diferentes categorias do seu blog etc.

Com esse diagrama, não há como esquecer de criar uma malha bem elaborada entre suas diferentes páginas , o que garantirá uma experiência de usuário tranquila.

Assim como os wireframes, você pode criar este diagrama em uma folha de papel ou usar uma ferramenta online como GlooMaps ou Octopus.

Projetando sua especificação

Bem, nesta fase, você está bem suprido de elementos estruturantes. Agora é hora de reunir tudo isso em um documento chave: uma especificação.

A especificação do redesenho do seu site é um documento muito extenso, que permite direcionar as diferentes expectativas que você tem para redesenhar seu site.

Você encontrará na web muitos modelos de especificações. No entanto, o seu deve conter imperativamente:

• Uma descrição do seu projeto web e da sua empresa , bem como o papel que o seu site desempenha neste projeto.
• O público-alvo do seu novo site , descrito com precisão, se possível.
• Os objetivos do seu redesenho , ilustrados o máximo possível com figuras. Se um dos seus objetivos é, por exemplo, aumentar seu tráfego, lembre-se de especificar o tráfego do seu site atual.
• Os elementos a serem recuperados do seu site atual : o conteúdo de suas páginas, as imagens possíveis, etc.
• Os caminhos gráficos que você deseja seguir . Para fazer isso, integre seus wireframes e mock-ups em suas especificações, bem como seu guia de estilo (que define sua identidade visual).
• Os novos elementos funcionais do seu site redesenhado, como a adição de uma loja de comércio eletrônico, um blog, um módulo opt-in, uma nova administração (back-office), etc.
• Os principais marcos do seu projeto de redesign : quando você quer ter uma prévia do seu site? Quando você quer que ele seja lançado?

Ficou muito mais claro agora, não é?

3. Pense nos recursos à sua disposição

Agora é hora de começar a trabalhar.

Seu desafio, se você aceitar, é agora listar os recursos que você tem à sua disposição em termos de :

• Orçamento : quanto você quer investir no seu redesign?
• Tempo : quanto tempo você tem disponível para redesenhar seu site WordPress?
• Habilidades : você tem a capacidade de alcançar todos os seus objetivos sozinho?
• Ferramentas : plugins, temas, construtores de páginas… Esses tipos de ferramentas podem ajudá-lo a atingir seus objetivos, mesmo que você tenha habilidades técnicas limitadas na web?

Esta lista permitirá que você saiba se terá que recorrer a um provedor externo ou se sente que pode trabalhar de forma independente, com membros de sua equipe ou por seus próprios meios.

Encontre os melhores especialistas em WordPress

Codeable é dedicado a combiná-lo com especialistas que podem ajudá-lo com qualquer coisa, desde o design ou instalação do tema WordPress até o desenvolvimento de plugins personalizados.

Experimente Codificável

4. Crie um plano de redirecionamento

“Ok, aqui vamos nós, é isso!”

Fácil! Há um último passo que muitas vezes é negligenciado durante o redesenho do seu site: a criação do seu plano de redirecionamento .

Deixe-me explicar.

Muitas vezes, no redesenho de um site, haverá alterações de URL. Este será particularmente o caso se você criar novas páginas.

Mas o que acontece se você colocar seu novo site online sem pensar em fazer seus redirecionamentos? 404 erros em abundância, o que afetará seu SEO e a navegação de seus visitantes.

Para projetar seu plano de redirecionamento, nada poderia ser mais fácil. Abra o Excel ou o Google Sheets e crie uma tabela da seguinte forma:

Quando seu site estiver online, você poderá configurar o plug-in de redirecionamento e importar essa tabela diretamente.

Inteligente, não é?

Tudo bem: respire fundo e vamos falar sobre o redesenho em si.

Acelere seu site com o WP Rocket

Transforme seu site em um foguete com o plugin de cache mais poderoso reconhecido por especialistas em WordPress.

Experimente o WP Rocket

Os 3 passos para lançar seu redesenho

Então, como você faz isso, agora que seu projeto está bem estruturado e organizado? Estes 3 passos essenciais irão guiá-lo.

1. Escolha trabalhar localmente ou diretamente em seu site atual

Antes de entrar no aspecto técnico, comece escolhendo trabalhar:

• Seja diretamente no seu site atual , e integre as alterações “ao vivo”.
• Ou em servidores de desenvolvimento e pré-produção , para testar seu novo site antes de entregá-lo ao seu público.

O que essas duas opções implicam?

Trabalhar online diretamente em seu site é bárbaro.

Nesse caso, todos os seus visitantes veem as mudanças ao vivo e atuam como “cobaias” de seus novos recursos… com todos os bugs que isso pode induzir.

Observe também que, se ocorrer um erro durante as modificações, isso afetará o site até que você detecte e resolva o problema. Site indisponível, funcionalidade não funcionando…

Para evitar todos esses problemas, você pode redesenhar seu site localmente.

As vantagens de trabalhar localmente são inúmeras:

• Faça suas modificações com segurança.
• Teste seus plugins sem risco.
• Tenha uma prévia da renderização final antes de ficar online.

Também é a solução ideal se você deseja manter a administração do WP como você o configurou atualmente. Em outras palavras, você poderá modificar um site WordPress sem excluir o existente.

No entanto, se você deseja começar do zero, em uma administração completamente nova, veja como você deve proceder para instalar o WordPress localmente.

Dica do WPMarmite : “Claro, você pode recuperar elementos do seu site antigo, graças a um plugin como UpdraftPlus ou Duplicator. Esses plugins permitem que você importe de volta para o seu administrador o que você deseja: seu conteúdo, seus temas, seus plugins, sua mídia etc.”

2. Adquira as ferramentas necessárias para o redesenho

Agora é hora de você listar e obter tudo o que você precisa para assumir a reformulação do seu site WordPress.

Lembre-se: você os listou em suas especificações.

Isso pode incluir :

• Um novo tema , se um dos muitos disponíveis no diretório oficial chamou sua atenção (como o muito popular Astra).
• Um construtor de páginas , como Elementor ou Beaver Builder, se você quiser evitar colocar as mãos no código.
• Novos plugins , para integrar recursos incríveis.

Não tem certeza de quais plugins usar? Talvez você encontre o que procura em nossa lista de itens obrigatórios.

Sua caixa de ferramentas está pronta? Vamos configurar tudo e passar para a última etapa crucial do seu redesenho: o conteúdo.

3. Prepare o conteúdo do seu novo site

Em primeiro lugar, um ponto crucial a não esquecer.

Durante o redesenho de um site, inevitavelmente há conteúdos do site anterior que podem ser recuperados.

Configuração de imagens, textos, plugins: pense nisso!

Portanto, faça um backup do seu site WordPress atual e mantenha em segredo o que deseja colocar em seu redesenho.

No entanto, imagino que, se você fizer um redesenho, também é para modificar o conteúdo do seu site, para torná-lo mais relevante, mais atraente para seus públicos-alvo… e para os mecanismos de pesquisa, é claro!

Portanto, pense na sua estratégia de SEO , tão importante para classificar bem o seu novo (incrível) site.

Se for complexo resumir os passos a seguir, posso, no entanto, dar-lhe as principais linhas aqui:

• Por um lado, defina as palavras-chave nas quais você deseja classificar . Estas são as expressões que os seus alvos inserem espontaneamente no Google, para encontrar a informação que procuram.
• Por outro lado, determine onde você precisa integrá-los, em cada página . Suas tags de título (hn) , ou o texto alternativo das imagens, devem, por exemplo, ser otimizados para SEO: o Google gosta deles, é aí que ele tentará entender seu site primeiro!
• Uma vez que esses novos conteúdos estejam integrados ao site redesenhado, você pode verificar se tudo está bem no lugar . Pense em particular nos nomes das imagens, títulos e meta descrições de páginas, que são muitas vezes negligenciados.

Para ajudá-lo com o SEO on-page do seu site (otimização de conteúdo), conte com um plugin de SEO dedicado.

O WPMarmite usa o mais famoso deles, o Yoast SEO, mas não é o único a ser eficaz no mercado. Descubra nossa comparação detalhada de seus concorrentes neste artigo.

Uma coisa levando a outra, em seu servidor de desenvolvimento, localmente e com todas as ferramentas necessárias do WordPress, você pode ver seu projeto progredindo… e seu lançamento online está se aproximando.

Os 3 passos para um lançamento bem sucedido do seu site

Eu posso sentir você ficando animado em revelar seu novo site WordPress para o mundo.

Reserve um tempo para olhar para estes 3 passos e siga-os cuidadosamente: você ficará feliz por ter feito isso, eu prometo.

1. Escolha um servidor de produção direta ou de pré-produção

O termo “servidor de pré-produção” não significa nada para você? Não se preocupe, vamos fazer uma pausa rápida para uma definição.

Um servidor de pré-produção compartilha o mesmo servidor em que seu site estará quando for lançado . Se o WPMarmite o redesenhasse, Alex poderia, por exemplo, optar por colocar sua pré-produção em preprod.wpmarmite.com : este seria o mesmo ambiente que wpmarmite.com .

Então, por que você usaria este servidor de pré-produção?

• Para validar seu redesign com seu cliente, se você for um desenvolvedor WordPress.
• Para testar bugs antes do site entrar no ar.
• Para ajustar sua estratégia de SEO, certifique-se de que todas as suas palavras-chave sejam incluídas em cada página.

Depois que tudo isso for validado, só então você poderá entrar no ar e implantar seu novo site. Se você estiver confiante, é claro que pode optar por ir diretamente para a produção.

2. Teste seu novo site em busca de possíveis problemas

Do seu servidor de pré-produção (ou ao vivo, se você for um aventureiro do WordPress), você precisará testar seu novo site.

A chave para testar com sucesso os problemas é se colocar no lugar de um visitante médio , clicar e observar os problemas que encontrar…

Você provavelmente verá problemas de design e estrutura. Mas não se esqueça de verificar também:

• Redirecionamentos que não foram feitos e geram links mortos ou páginas brancas.
• O desempenho do site , testando-o no GTMetrix, Pingdom ou no teste PageSpeed ​​Insights do Google.
• Os pontos opt-in , verificando se funcionam bem.
• Formulários de contato, formulários de cotação…
• Pagamento , se você tiver um site de comércio eletrônico (incluindo e-mails de confirmação, acesso ao site do membro…).

Tudo é bonito, funcional, bem conectado e bem montado? Parabéns! O último passo irá realçar o grande sorriso que vejo em seus rostos daqui.

3. Reative e reconecte todos os serviços de terceiros

Vamos lá, você está quase lá!

Agora você pode reativar todos os serviços e plugins vinculados ao seu site WordPress . Pense em particular sobre:

• Seu plug-in de cache.
• Plugins que usam o Google Analytics, como MonsterInsights.
• Plugins que usam redes sociais, como Facebook ou Instagram.
• As várias chaves de licença para seus plugins e temas.

E como a segurança é da conta de todos (e especialmente sua), lembre -se de reativar todos os elementos que protegem seu site .

Pronto para ir? Em seguida, comece a indexar seu novo site no Google Search Console. Essa manipulação força os robôs do Google a visitar seu novo bebê e, assim, indexá-lo mais rapidamente em sua nova versão.

Tadam! Redesenhado, com melhor desempenho, mais impactante, melhor estruturado, seu novo site está pronto para receber o tráfego que merece. Foi um trabalho árduo, mas valeu a pena, não foi?

E você, realizou recentemente uma reformulação de um site WordPress?

Quais são os problemas que você encontrou, ou o orgulho que você teve disso?

Conte-nos tudo nos comentários: a equipe do WPMarmite os lê com atenção.