<div class="c-form-contato">

</div>

<style>
 .c-form-contato input::-webkit-input-placeholder { /* WebKit browsers */
   color: #ccc!important;
   opacity: 1;
 }
.c-form-contato input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc !important;
  opacity: 1;
}
.c-form-contato input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc!important;
  opacity: 1;
}
.c-form-contato input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  opacity: 1;
}
</style>

O post Contact Form 7 Placeholder – Tudo o que você precisa saber apareceu primeiro em Nano Academy.

Quando inserimos uma imagem com link para ela mesma em nosso site WordPress por padrão ao clicar na imagem o usuário será direcionado para o link da imagem do servidor perdendo totalmente o acesso ao site, o efeito lightbox faz com que a imagem seja mostrada em tamanho maior, porém sem sair do site e se for uma galeria de fotos você já terá os botões de navegações sem precisar configurar nada.

Agora que você já viu um geralzão do que vamos aprender, pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Efeito lightbox nas imagens do site com WP Featherlight no WordPress

Instalando o plugin WP Featherlight

O plugin WP Featherlight será o nosso escolhido para inserir o efeito lightbox em nosso site, eu gosto bastante desse plugin por ele ser bem leve, simples, não faz requisições no banco de dados e faz o que tem que fazer de uma maneira bem objetiva.

Acesse o painel administrativo do seu site, vá no menu Plugins e em seguida clique em Adicionar novo, na barra de pesquisa digite WP Featherlight, agora é só clicar em Instalar e depois em Ativar.

Maravilha, agora que o seu plugin está instalado e ativado, navegue no seu painel administrativo até a página que você deseja inserir uma foto/galeria e vamos fazer as configurações necessárias. No meu exemplo eu vou criar uma galeria de fotos, porém funciona também apenas com uma foto.

Criando uma galeria de fotos e configurando o Efeito Lightbox

Agora meu “pácero” vamos criar uma galeria de fotos simples utilizando o editor padrão do WordPress.

No seu editor clique em Adicionar mídia e siga o processo abaixo:

1 – Clique em adicionar galeria

2 – Selecione as imagens que você deseja inserir em sua galeria

3 – Clique em Criar uma nova galeria

Nesse momento será mostrada a janela para configurarmos a galeria:

1 – Para o efeito funcionar perfeitamente o apontamento de TODAS as imagens do site devem estar para Arquivo de mídia, conforme mostrado na imagem acima;

2 – Defina a quantidade de itens por linha da sua galeria de fotos;

3 – Clique em inserir galeria e em seguida Salve sua página e vamos ver o resultado

Veja abaixo como ficou o efeito no meu projeto:

E aqui finalizamos mais um tutorial, espero que você tenha obtido mais clareza e aprendido a fazer o processo de inserir efeito lightbox nas imagens do site com WP Featherlight no WordPress e se ficou alguma dúvida é só deixar nos comentários que eu terei o maior prazer em ajudar!

Assista ao vídeo do processo no topo desse tutorial para fixar ainda mais o aprendizado.

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????
• Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7

O post Efeito lightbox nas imagens do site com WP Featherlight no WordPress apareceu primeiro em Nano Academy.

Esse recurso é muito utilizado quando você tem uma página customizada para mostrar algo ao usuário depois que ele enviou um contato. Por exemplo: Quem nunca preencheu um formulário de contato de algum empreendedor digital e após o envio do formulário foi redirecionado para uma página na qual é mostrado um “Conteúdo secreto” somente para a lista vip de contatos? =D

Agora que você já sabe do que vamos falar nesse post, vamos ao que interessa.

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Como criar redirecionamento de página no Contact Form 7

Eu vou partir do princípio de que você já tem um conhecimento básico de contact form 7 e de como criar páginas no WordPress

Sendo assim segue uma visão geral do processo:

Com base na imagem acima, você irá acessar o formulário do Contact Form 7 que deseja inserir e redirecionamento, depois na aba Formulário você irá inserir o script abaixo no topo do editor de campos do CF7 :

<script>
 document.addEventListener('wpcf7mailsent', function (Event) {
   location = 'http://seu-dominio.com.br/sua-pagina-customizada';
 }, false);
</script>

Agora é só substituir o link de exemplo pelo seu link oficial, salvar, inserir o shortcode do seu formulário na página que deseja, testar e VRAU!

E aqui finalizamos mais um tutorial, porém, por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7

O post Criar redirecionamento de página no Contact Form 7 WordPress apareceu primeiro em Nano Academy.

O post Formulário de depoimentos com Strong Testimonials WordPress apareceu primeiro em Nano Academy.

Criar e configurar uma view para mostrar os seus depoimentos

Após criar a categoria, eu continuo o processo criando a view mais indicada para o projeto que estou desenvolvendo.

Uma view é o modelo geral de todos os depoimentos que fazem parte dela, por exemplo: Eu posso ter uma view para mostrar os depoimentos em formato de slide, outra pra mostrar apenas 3 depoimentos e outra view que será o formulário para o usuário enviar um depoimento. Ou seja podemos ter diversos estilos para mostrar nossos depoimentos e o melhor de tudo, segmentados =D

Vamos ao processo: Descrição dos passos acima: 1 - Clique no item Views no submenu do Testimonials; 2 - Clique em Add New para adicionar uma nova view; 3 - Informe um nome para sua view; 4 - Escolha um tipo para sua view; Um pouco sobre os tipos de view Display -  Mostra seus depoimentos em cards, um ao lado do outro; Slideshow -  Cria um Slideshow para exibir os depoimentos (usarei esse); Formulário - Cria um formulário para o usuário inserir um depoimento; Single Template PRO - Se adquirir a versão PRO, você tem acesso à um acervo com diversos templates prontos criados pela equipe que desenvolveu o plugin. Nessa etapa temos que configurar alguns "Grupos" responsáveis pelo funcionamento da view.

Query

No primeiro grupo nós temos a Query, que é responsável por fazer a consulta nos depoimentos cadastrados com base nas condições dos campos e trazer depoimentos específicos para essa view. Um pouco sobre cada campo: Categorias - Para mostrar depoimentos de uma ou mais categorias específicas, basta escolher a opção select do menu para ter acesso a todas as categorias criadas. *É por esse motivo que eu começo criando as categorias, pois na hora de criar a view eu já escolho a categoria certa. Ordenar -  Para ordem aleatória, escolha "Random", para a ordem ser com base no número definido na hora de cadastrar o depoimento, escolha "Menu order", para mostrar os depoimentos recentes primeiro, escolha "Newerest first" e para mostrar os mais antigos primeiro, escolha "Oldest first". Quantity - Permite você limitar a quantidade de depoimentos que será mostrado nessa view

Slideshow

Nesse grupo iremos fazer as configurações gerais de nosso Slideshow. Um pouco sobre os itens da imagem acima (as configurações acima são as que eu fiz no meu projeto) Show - Aqui nós configuramos como os itens serão mostrados no slide, se você escolher a opção "Single" será mostrados apenas 1 depoimento por slide, caso você queira assim como eu, 3 depoimentos por slide é só escolher a opção "Multiple". A opção Multiple mostra uma caixa para você configurar a quantidade de depoimentos mostrados por slide em cada dispositivo. *se você entende de media query fique a vontade para fazer suas alterações nos breakpoints, caso ao contrário deixe as configurações padrões e só mude a quantidade na coluna "Show" da tabela. Transition - Configura o tempo em que slide ficará parado na tela, qual será animação de transição e quanto tempo ela levará até chegar os novos depoimentos. Behavior - Esse item configura os principais comportamentos do slide e dos controles de navegações - Start automatically - Inicia o slide automaticamente; - Pausa em foco - Pausa a contagem do tempo da transição do slide quando o mouse está em cima de um depoimento; - Stop on interaction - Pausa a contagem do tempo da transição do slide quando há qualquer iteração com o slide; Abaixo dos cheks tem uma opção muito interessante, ela nos permite definir se os "box" onde fica cada depoimento serão da mesma altura ou não. Navigation - Nos permite escolher se queremos que mostre as setas de navegação e se terá paginação. (faça o teste com os estilos para ver qual fica mais legal no seu contexto).

Campos

Nesse grupo nós vamos configurar como e quais informações do nosso cliente será mostrada no depoimento. Vamos conhecer um pouco sobre cada opção desse grupo: Título - Define se irá aparecer no depoimento o título que você inserir na hora de cadastrar um depoimento. *Eu prefiro não colocar pois eu uso os campos personalizados pra isso. Imagem em destaque - Marque esse item se você pretende pedir uma foto para a pessoa que lhe enviar o depoimento. Se você escolher por usar a foto em destaque você pode: - Escolher o tamanho que a imagem será exibida; - Escolher se ao clicar na imagem, ela será exibida em um lightbox ou não; - Escolher a ação caso não tenha foto para algum depoimento. Content - Aqui configuramos o que será exibido sobre o depoimento na listagem - Entire content - Mostra na listagem todo o conteúdo que for cadastrado no depoimento. (se tiver mil linhas, nas listagem aparecerá às mil.) - Automatic excerpt - Pega o começo do depoimento e insere como um resumo na listagem. - Manual excerpt - Permite você criar um resumo manual do depoimento do cliente (caso você tenha uma página de detalhes para o depoimento). * Normalmente eu trabalho com depoimentos pequenos em sites que não tem um página de detalhe do depoimento, eu uso a opção Entire content sabendo que tenho que ter discernimento na hora inserir um depoimento. Campos personalizados - Aqui nós definimos quais informações iremos querer sobre a pessoa que enviar o depoimento, você pode clicar em "Add Field" e conferir as opções de campos que você tem. *Essas opções aparecem na hora de cadastrar um depoimento para a categoria escolhida na view.

Style

No grupo Style nós podemos configurar um pouco da aparência do nosso slideshow. Eu recomendo você testar os itens desse grupo para ver qual modelo pre-pronto mais te agrada. Vou falar um pouco sobre os itens do style: Template - Permite você escolher um dos modelos pre-prontos do plugin ou se manjar de CSS, escolha o template Unstyled para ter mais liberdade de edição; Background - Permite você escolher uma cor de fundo para o item de depoimento. Eu gosto do single color e um cinza bem clarinho #f4f4f4; Font Color - A opção custom, permite você colocar uma cor personalizada para o depoimento, senão será pego a cor padrão do site. Css Classes - Pra quem conhece de CSS é só você inserir uma classe aqui e poderá estilizar os depoimentos tendo essa classe como "pai". Depois de fazer todas suas configurações é só clicar em Salvar Alterações.

O post Depoimentos no WordPress com Strong Testimonials apareceu primeiro em Nano Academy.

Se você está interessado em envolver os visitantes do seu site WordPress com apresentações de slides que contenham imagens, textos e vídeos. Então este Tutorial é para você!

A partir de agora você irá aprender como criar um slide com o Revolution Slider no WordPress e cativar os visitantes do seu site de uma maneira simples, prática e funcional.

Essa série será um projeto prático com o Revolution Slider composto por 4 vídeos nos quais aprenderemos a:

• Criar um slider e sua principais configurações;
• Criar um slide com imagens, textos, animações, timeline da animação e movimentos parallax;
• Criar um slide com vídeo de background, textos e botão de ação;
• Utilizar o recurso de transições de slides;
• Como configurar e ajustar o slide em notebooks, tablets e celulares.

Para agilizar o seu aprendizado e proporcionar mais proveito no que interessa, eu preparei um pacote com algumas imagens entre backgrounds e elementos em png para você treinar e seguir esse tutorial com mais facilidade. Clique no botão abaixo e receba o seu material exclusivo.

Baixar arquivos facilitadores >>

Agora que você já baixou as suas imagens, abra o seu painel do WordPress, instale o seu Revolution Slider e vamos começar!!

Parte 01 – Configurações gerais de um slider – Revolution Slider

Nesse primeiro vídeo nós iremos passar pelas principais configurações de um slider deixando-o estruturado e pronto para receber os slides com imagens, textos, animações e vídeos.

Principais pontos abordados nesse vídeo:

• Conhecendo os tipos de sliders;
• Aprendendo a definir o tamanho do slider em todos os dispositivos;
• Como fazer as configurações padrões dos slides como por exemplo: Duração, transição, background e progress bar;
• Como configurar os controles de navegações do slider;
• Como ativar o parallax para criar efeitos de movimentos nos elementos,
• Inserindo o slider em páginas do site.

Parte 02 – Como criar um slide com o Revolution Slider que tenha elementos animados, transições e parallax

Agora que já definimos as configurações gerais do Slider é hora de criarmos o nosso primeiro slide. Essa parte é muito legal, pois aqui você aprenderá a dar vida para o seu slide e fazer as coisas acontecerem.

Ao final dessa segunda parte você aprenderá:

• Como criar um slide;
• Como inserir elementos no slide (imagens e textos);
• Como animar entrada e saída dos elementos no slide;
• Como criar um parallax em um elemento que se move de acordo com o mouse,
• Como trabalhar com a timeline do Revolution Slider.

Maravilha, espero que você esteja gostando e entendendo os vídeos até aqui. Lembre-se, caso você esteja com alguma dúvida deixe nos comentários que eu responderei o mais rápido possível! Te desejo foco para continuar e vamos nessa, estou com você!

Parte 03 – Como criar um slide com vídeo background, textos animados e botões – Revolution Slider

Depois de aprender a trabalhar com elementos e criar um slide bem legal é hora de subir um nível, vamos aprender a como inserir um vídeo de background em seu slide e colocar texto e botão com link sob o vídeo para assim causar um impacto visual enorme no visitante do seu site.

Nessa terceira parte você aprenderá:

• Como inserir um vídeo de background no slide;
• Como criar um botão,
• Como inserir links.

Muito bem, agora vamos para a última parte do nosso projeto.

Parte 4 – Como configurar os slides em notebooks, tablets e celulares (mobile) – Revolution Slider

Nos dias de hoje, de nada adianta você ter um slide muito legal com animações vídeos e tudo mais se ele não for responsivo. Nessa última parte do nosso projeto vamos aprender como configurar os elementos dos slides no mobile.

É isso ai querido Incuber, chegamos ao fim de mais um projeto prático, e como você pode notar projetos assim mesmo que simples demandam planejamento e tempo para serem criados, e para saber se estamos no caminho certo, o seu feedback é muito importante para nós. Deixe o seu comentário sobre o que você achou do projeto, suas dúvidas e sugestões, somente assim conseguiremos melhorar cada vez mais a qualidade dos artigos aqui no blog.

• Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

O post Como criar um slide com o Revolution Slider no WordPress apareceu primeiro em Nano Academy.

O reCAPTCHA é um recurso para proteger o seu site dos boots que ficam tentando acessar suas informações sem sua permissão e também que ficam enviando spans para o seu site. O Google desenvolveu seu próprio reCAPTCHA e que na minha opinião é o mais seguro e eficiente, além de ser muito simples de utilizar.

Nesse post você aprenderá:

• Como gerar a chave (key) do Google reCAPTCHA;
• Como adicionar o Google reCAPTCHA sem plugin;
• E como inserir o Google reCAPTCHA na tela de login do WordPress.;
• Como incluir  o Google reCAPTCHA no Contact Form 7.

Como gerar Google reCAPTCHA Key

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como gerar o Google reCAPTCHA key.

Primeiramente é necessário criar uma conta no www.google.com/recaptcha com uma conta do gmail.
– Clique em My reCaptcha no canto superior da tela;
– Coloque o e-mail e senha do seu e-mail;

Configurando o domínio do seu site para receber o Google reCaptcha

– Preencha os campos seguindo o exemplo da imagem abaixo;
– O domínio deve ser inserido sem o http//www. ou seja somente o domínio.com.br sem / no final;

Pegar a chave gerada pelo Google reCAPTCHA

A próxima tela irá mostrar a chave gerada pelo Google e também algumas maneiras de você inserir o reCAPTCHA em seu site através do código.
Para ficar mais sussa vamos utilizar um plugin simples para funcionar nosso reCAPTCHA sem precisar mexer no código, assim vamos utilizar somente o site key e a secret key.
Deixe a tela Google reCAPTCHA aberta, pois utilizaremos ela em breve.

Agora que você gerou a sua chave, vamos aprender como utilizá-la em seu site.

Como inserir o Google reCAPTCHA sem plugin

Inserir o Google reCAPTCHA sem nenhum plugin do WordPress com certeza é a melhor opção em termos de performance.

Dentro da Nano Incub temos a política de utilizar o mínimo de plugins possível, pois os plugins necessitam de atualizações de geralmente vem com muitas coisas que não utilizamos e isso acaba atrasando o carregamento do site.

E como fazer isso?

É bem simples. O WordPress por padrão já possui uma opção de integração externa.

Vá até a aba > CONTATO >> INTEGRAÇÃO.

Agora é só clicar em CONFIGURAR CHAVES e inserir os dados do reCAPTHCA Key que você captou acima.

Muito simples não é mesmo?

Como inserir Google reCAPTCHA na tela de login do WordPress.

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como inserir o reCAPTCHA na tela de login do WordPress.

Para fazer esse processo iremos utilizar o plugin “Google Captcha (reCAPTCHA) by BestWebSoft” que em minha opinião é o melhor, ou pelo menos o mais utilizado, tendo hoje mais de 100K de instalações ativas.
Instale e ative o plugin no seu WordPress.

Depois de ativar clique no novo item do menu que foi criado pelo plugin:

Preencha os campos conforme mostrado na imagem abaixo:

No card do WordPress default, marque em quais formulários de login e registro você deseja colocar o reCAPTCHA, o mais importante para esse tutorial é o Login form.

Você pode expandir o card de External Plugins e instalar o plugin da Bestwebsoft para contact form 7, eu particularmente prefiro instalar o plugin de reCAPTCHA do próprio CF7 que será o próximo processo.
*É apenas uma questão de gosto, fique a vontade para escolher entre usar o plugin da Bestwebsoft para CF7 ou continue comigo para ver como utilizar o plugin feito pela equipe do CF7.

Se você passar pelas opções contidas nessa tela, verá que é possível esconder o reCAPTCHA para usuários específicos, mudar o tema e colocar uma mensagem customizada para Whitelist Notivication.
Agora é só salvar as alterações.

Faça o logout no seu site e veja se deu tudo certo.

Maravilha, agora se você quiser inserir o reCAPTCHA no CF7 é só continuar aqui comigo.

Como inserir reCAPTCHA no Contact Form 7 – (Atualizado)

O Contact form 7 assim como todo Pokémon evoluiu (atualizou), antes ele aceitava o Google reCAPTCHA V2 (usado no tutorial) e hoje (11/19) ele não aceita mais o V2, somente o V3 e isso gerou diversos comentários no vídeo antigo de que não estava dando certo, acompanhe o vídeo atualizado “Como inserir reCAPTCHA V3 no Contact Form 7” a aprenda a fazer o processo atualizado.

Já que estou atualizando o processo no Contact Form 7, vamos iniciar o tutorial após você fazer o login na sua conta do Google reCaptcha.

O Processo é bem parecido com o do V2, o que muda é que temos que marcar a opção reCAPTCHA V3.

Depois é só inserir o domínio do seu site, aceitar os termos e clicar em Enviar.

Após isso, será mostrada a tela com as suas chaves:

Agora vá no seu painel do WordPress e siga os passos destacados na imagem abaixo para chegar até o local de inserir as chaves do reCAPTCHA no Contact Form 7.

Após clicar em Definir Integração, aparecerá a tela para você inserir as chaves geradas.

Maravilha, agora é só clicar em Salvar alterações e ver o resultado em seu site.
Se tudo correu como o esperado é pra aparacer um ícone semelhante ao da imagem abaixo no canto inferior direito do seu site:

É isso ai Incuber, espero que esse post tenha ajudado a esclarecer suas dúvidas sobre Inserir google reCAPTCHA no WordPress, caso você tenha ficado alguma dúvida, se você tiver alguma sugestão ou opinião, deixe ai nos comentários, pois sua participação é o que nos move a produzir conteúdos cada vez mais elaborados e assertivos.

• Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

O post Como inserir Google reCAPTCHA em formulários e na tela de login do WordPress apareceu primeiro em Nano Academy.

Neste tutorial eu vou ensinar como salvar contatos enviados pelo Contact form 7 no WordPress de uma maneira bem simples e rápida, esse recurso é excelente pra você que gosta de ter as informações do seu site centralizadas no WordPress.

Pegue o seu café, aperte o play e bons estudos!

Tutorial Salvar contatos enviados pelo Contact form 7 no WordPress

Se você tem dúvidas sobre Como instalar e configurar o plugin Contact form 7 no WordPress clique no link e assista os 2 vídeos nos quais ensino tudo o que você precisa saber sobre o Contact form 7 para deixar ele funcionando corretamente em seu projeto com as Configurações de SMTP para contact form 7 

Para salvar os contatos iremos utilizar o plugin “Advanced contact form 7 DB“, vamos ao que interessa:

No menu esquerdo do WordPress vá em “plugins” e clique em “Adicionar novo“;

Pesquise por Advanced contact form 7 DB, Instale e ative o plugin.

No menu principal foi criado uma opção com o nome de Advanced CF7 DB

Envie um contato de teste, depois clique na opção, selecione qual é o formulário que você deseja ver.

Agora vamos dar uma passada pelas opções de ações que o plugin oferece

1 – Selecione qual é o formulário que você deseja ver os contatos;

2 – Você pode filtrar os contatos por data para ter o número de quantos contatos mensais o seu site está recebendo por exemplo;

3 – Pesquise por palavras contidas dentro das mensagens dos contatos;

4 – Apaga os filtros inseridos;

5 – Você pode deletar todos os contatos ou selecionar alguns e apagar de uma vez;

6 – Exporte os seus contatos para Excel, CSV ou PDF e crie uma lista de contatos para mandar conteúdos por e-mail,

7 – Lista de todos os contatos enviados por esse formulário, para visualizar o contato completo é só clicar em cima do ícone do lápis.

Eu fico por aqui nesse tutorial, espero ter lhe ajudado com o processo de salvar contatos enviados pelo Contact form 7 no WordPress

• Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

O post Salvar contatos enviados pelo Contact form 7 no WordPress apareceu primeiro em Nano Academy.

Dessa vez iremos companhar um tutorial do Duplicator, um plugin para WordPress que te possibilita fazer o backup do seu site ou colocar um projeto online depois de ter sido desenvolvido no localhost.

Neste tutorial você aprenderá:

• Instalar o plugin Duplicator;
• Gerando pacote do Duplicator (criando cópia/backup do site);
• Colocar a cópia online com o Duplicator;
• Como instalar um site com o Duplicator no WordPress.

Aperte o play e bons estudos!

Como instalar o Duplicator WordPress

Vamos começar com a instalação do plugin Duplicator.

No menu esquerdo do painel, pare o mouse na opção “Plugins” e clique em “Adicionar novo“, digite na pesquisa do lado direito “Duplicator“.

Clique em “Instalar” e depois em “Ativar“. Maravilha o plugin foi instalado.

Gerando pacote do Duplicator (criando cópia/backup do site)

Depois de instalar o plugin você terá a opção Duplicator no menu esquerdo, pare o mouse em cima dela e clique em “Packages”

Agora nós iremos criar um pacote e configurar a nossa cópia do projeto, clique no botão “Create new” do lado direito da tela, assim nós iremos criar uma nova cópia.

Hora de fazer as configurações principais do Duplicator.

Informe um nome para a sua cópia, no meu exemplo eu coloquei – copia_exemplo_duplicator;

Muitas vezes temos em nossa pasta raiz do servidor arquivos que o site não depende deles para funcionar, o Duplicator nos permite inserir filtros de arquivos para que seja compactado somente os arquivos necessários.

Em “Archive” clique na opção “Enable File Filters” depois clique em “root path” e na frente do caminho digite “/wp-snapshots” para que a pasta wp-snapshos não seja compactada, essa pasta guarda outros backups do site feito pelo duplicator e não é necessária em uma cópia. Depois é só clicar em “Next“.

Nesse momento o Duplicator irá escanear o seu projeto para ver se o projeto é compatível, entre outras validações. Aguarde!

Após o escaneamento, o Duplicator irá mostrar o resumo e se tudo ocorreu bem, caso tenha algum Warning de Open Base dir, pode ignorar a mensagem. Depois é só clicar em “Build”

Quando você clicou em “Build” o Duplicator começou a construir o pacote do seu site, onde ele irá compactar todos arquivos, exportar o banco de dados e tudo o que for necessário, depois disso será disponível a opção para você fazer o download dos arquivos.

Agora é só fazer o download dos arquivos e você terá o backup do site.

*Salve o arquivo “installer.php” e o arquivo .zip em uma pasta para ter como backup!

Muito bem, o processo parar criar um backup do site é esse, mas se você quer aprender a como colocar o backup online continue comigo neste tutorial!

Como migrar site em WordPress

Agora que já temos o nosso backup, vamos aprender a colocar esse backup em produção novamente, esse processo ajuda muito quando finalizamos o desenvolvimento de um projeto em WordPress desenvolvido no localhost e precisamos colocar esse projeto online para o cliente aprovar ou quando vamos lançar o site oficialmente no domínio do cliente.

Nesse exemplo nós iremos colocar o site em uma hospedagem na internet, para isso você precisará:

• Ter instalado em seu computador o Filezilla (download) para acessar o FTP da hospedagem;
• Ter os dados de acesso da sua hospedagem.

A primeira coisa que vamos fazer é criar um banco de dados para que o WordPress funcione. O processo para criar o Banco de Dados variaria de acordo com a sua hospedagem, eu vou mostrar o processo no phpMyAdmin pois é nele que configuro os Bancos de Dados da minha hospedagem.

Segue abaixo uma lista de links para como criar um banco de dados nas principais hospedagens:

• Criando Banco de Dados Locaweb
• Criando Banco de Dados KingHost
• Criando Banco de Dados HostGator
• Criando Banco de Dados Godaddy

Para quem usa o phpMyAdmin segue como criar um banco de dados:

Acesse o phpMyAdmin da sua hospedagem e no menu esquerdo clique na opção “Novo BD”

Agora informe um nome para o seu Banco de Dados, se você não souber a colação fique tranquilo e deixe como estar. Clique em “Criar”

Maravilha, agora guarde bem o nome do banco de dados, o usuário e a senha pois vamos utilizá-los em breve.

Abra o seu Filezilla e vamos acessar o ftp do nosso site:

Para inserir os dados de ftp do seu site no filezilla vá no menu “Arquivo” e clique em “Gerenciador de sites”

Agora é só inserir os seus dados de FTP, caso você saiba como fazer isso segue uma lista de fazer o processo nas principais hospegens:

• Ver dados de FTP Locaweb
• Ver dados de FTP KingHost
• Ver dados de FTP HostGator
• Ver dados de FTP GoDaddy

Preencha corretamente os campos no Filezilla e clique em “Conectar”

Agora que você está acessando a sua hospedagem via FTP navegue até a pasta que você deseja instalar o seu site, no meu caso eu criei uma pasta chamada tutorial, depois coloque os 2 arquivos gerados pelo Duplicator no local da instalação no FTP:

Muito bem! finalizamos a primeira parte do processo.

Como instalar um site com o Duplicator no WordPress

Depois de colocar o seu projeto no ftp vá até o seu navegador e digite na url o endereço em que os arquivos do site estão e chame o installer.php, no meu caso ficou assim: 3w.nanolab..com..br/tutoriais/installer.php

Depois de apertar “Enter” se deu tudo certo você verá a tela de apresentação do resumo da instalação, nessa tela é só aceitar os termos e clicar em “Next“.

Caso você queira saber mais sobre os Warnings do duplicator é só acessar a documentação aqui

Nesse momento você precisa informar os dados do seu Baco de Dados para que o duplicator possa instalar o banco de dados do site.

A opção “Connect and Remove All Data” irá apagar tudo o que tiver no banco de dados e substituir pelos novos arquivos.

O Host você encontra dentro do painel da sua hospedagem, qualquer dúvida é só perguntar no suporte, mas é bem simples encontrar.

Depois de colocar os dados corretamente, clique em “Test Data Base“, se você configurou certo irá aparecer a seguinte mensagem:

Agora é só clicar em “Next“.

Confira os dados, e depois clique em “Next”

Se tudo ocorreu bem você verá a seguinte tela:

Clique em “Site Login” e acesse o seu site para ver se tudo ocorreu bem!

Veja o meu projeto rodando agora na hospedagem:

*Provavelmente esse endereço não existe mais.

Agora para deixar tudo redondo na instalação do seu site, é preciso mandar o Duplicator apagar os arquivos desnecessários daqui para frente, é muito importante excluir esses arquivos pois eles deixam o site pesado e com arquivos que facilitam a invasão do seu site!

Clique em “Remove Installation Files Now!” para excluir todos os arquivos!

É isso ai pessoal, espero que este tutorial tenha te ajudado a conhecer o Duplicator, fazer o backup do seu site e também a migrar o seu site feito com WordPress!.

• Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

O post Tutorial Duplicator – Aprenda a migrar sites em WordPress apareceu primeiro em Nano Academy.