Como inserir Google reCAPTCHA em formulários e na tela de login do WordPress

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

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 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;

Cadastrando o seu domínio do Google reCAPTCHA

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.

Pegar chave do Google para reCAPTCHA

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.

Integração do Google reCAPTCHA com WordPress sem plugin
Integração do Google reCAPTCHA com WordPress sem plugin

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.

Google reCAPTCHA Best Web Soft

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

Menu Google Captcha

Preencha os campos conforme mostrado na imagem abaixo:

Configurações para inserir reCAPTCHA na tela de login do WordPress
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.

ReCAPTCHA na tela de login do WordPress

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.

Informações para gerar as chaves do Google reCAPTCHA V3

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.

Caminho para inserir as chaves do reCAPTCHA no CF7

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

Inserindo chaves no CF7

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:

Ícone Google reCAPTCHA

É 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!

Tutorial Gutenberg WordPress – Guia passo a passo

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

Nesse post você irá conhecer os principais recursos do novo editor do WordPress o Gutenberg.

Introdução ao Gutenberg WordPress

Atualmente (agosto de 2018) o Gutenberg está disponível como um plugin para que os usuários do WordPress possam ir se acostumando com o editor que será nativo a partir do WordPress 5.0.

O próprio time do WordPress não indica que você use o editor em produção no seu site. Use apenas para testar e conhecer a nova experiência.

Para instalar e testar o editor em forma de plugin é bem simples, vá em adicionar novo plugin no seu painel do WP e pesquise por Gutenberg e ai é só instalar, ativar e conhecer.

Baixar plugin Gutenberg WordPress

O editor Gutenberg está chegando para substituir o atual editor WYSIWIG e oferecer uma experiência bem mais intuitiva e visual para se criar páginas e postagens com layouts exclusivos e sem complicação comparado a forma atual que o WP realiza esse processo sem plugins de Page Builder’s.

Veja como é a diferença visual entre os dois editores:

Diferença visual entre editor Wysiwig e Gutenberg WordPress

O Gutenberg é a melhor opção para construção de sites?

Não, pois o projeto ainda tem muito o que amadurecer em termos de grid mais flexíveis, opções avançadas de customização, custom post, custom field, taxonomia etc…

Porém para criar postagens de blog o editor oferece uma facilidade sensacional para você criar layouts bem trabalhados e em poucos cliques.

Eu acredito que futuramente o Gutenberg será um Page Builder fódão =D, mas por hora ele não é a melhor opção para layoutar o seu site.

Como o Gutenberg trabalha?

Ele trabalha com layout construído a partir de blocos, esse conceito de bloco consiste em não precisar criar linhas e colunas e sim inserir um elemento na tela e ajustar ele como você deseja, mas se você gosta de coluna o Gutenberg tem um bloco que possibilita você criar colunas para seus elementos, no decorrer deste tutorial esse conceito ficará bem claro pra você.

Segue uma lista com os principais tipos de blocos que o Gutenberg oferece até o momento que podem ser inseridos com apenas 2 cliques:

– Títulos;
– Imagens;
– Galeria de imagens;
– Botões;
– Widgets (você pode colocar widgets dentro do conteúdo da sua postagem no lugar em que achar melhor),
– Tabelas.

Agora que você já sabe um pouco mais sobre esse novo editor que promete revolucionar o WordPress vamos ver como ele funciona na prática.

Eu criei um tutorial em vídeo para completar esse artigo, para melhor entendimento da ferramenta eu sugiro que você leia o artigo para ter uma noção teórica sobre o Gutenberg e assista ao vídeo para aprender na prática como o editor funciona.

Aperte o play e bons estudos!

Tutorial Gutenberg WordPress – Guia passo a passo

Antes de mais nada vamos ver uma visão geral dos recursos e mudanças que o Gutenberg trouxe para o WordPress na hora de criar uma postagem:

Visão geral editor Gutenberg WordPress

1 – Ao clicar nessa opção você verá as opções de blocos para inserir em suas postagens, você pode optar pelo menu superior ou pelo atalho que sempre fica ao lado esquerdo de cada bloco;

2 – Esse recurso permite você Desfazer / Refazer alguma ação, é como se fosse o Ctrl+Z e Ctrl+Y da maioria dos editores de imagens;

3 – Para agilizar o processo, o Gutenberg disponibiliza uma opção de blocos rápidos, esse recurso mostra os 3 últimos blocos que você utilizou anteriormente, e você pode inserir um novo bloco rapidamente;

4 – Você pode ver como o post está ficando no “Preview” e pode Publicar ele ao final da edição;

5 – Mostra e oculta as opções “Document” e “Block“;

6 – Define algumas configurações de exibição, você escolhe para ver o código fonte da postagem clicando na opção “Code editor“;

7 – Mostra as configurações do post, se será público, privado ou rascunho, inserir categorias, tags, imagem destacada etc.. É bem parecido com a sidebar atual do WP, uma das mudanças é que agora o Resumo do post fica nesse menu e não mais no final da página como é atualmente;

8 – Ao selecionar um bloco esse menu mostra as configurações gerais (tamanho da fonte, cores, classes css etc..) do bloco em questão.

Agora que já vimos uma visão geral dos recursos do Gutenberg vamos então praticar um pouco.

Como inserir um bloco no Gutenberg

Como dito anteriormente para inserir um bloco basta clicar no sinal de mais (+) no topo esquerdo para ver as opções de blocos disponíveis, os blocos ficam separados por categorias conforme imagem abaixo:

Inserindo blocos no Gutenberg WordPress

Most Used (mais usados) – Mostra os blocos que você mais utiliza;

Common Blocks (Blocos Comuns) – Mostra os blocos de elementos básicos como Imagem, galeria, título, subtítulo, parágrafo etc..

Formating (Formatação) – Mostra os blocos relacionados a formatação da postagem como por exemplo tabela, bloco de código HTML, habilitar o editor clássico somente para um bloco etc…

Layout Elements (Elementos de layout) – Mostra blocos relacionados ao layout da página como por exemplo inserir colunas, botões, quebra de página, separador de seção etc…

Widgets – Mostra os widgets disponíveis para você inserir no meio da postagem como por exemplo lista de postagens, lista de categorias, shortcode etc…

Embeds – Mostra todas as integrações disponíveis para você incorporar vídeos, instagram, facebook e muito mais dentro da sua postagem.

Como reutilizar blocos no editor Gutenberg WordPress

Um recurso muito interessante é a possibilidade de você reutilizar os blocos que você já criou em suas postagens, vamos supor que você tenha um CTA (Chamada para a ação) que você usa em diversas postagens e sempre dá um trabalhão inserir esse CTA, o Gutenberg facilita esse processo com a possibilidade de você criar um bloco e torná-lo reutilizável para outras postagens.

Vamos ao processo:

Primeiro crie o seu bloco, e pare o mouse em cima dele, irá aparecer uma opção com 3 pontinhos ao lado direito do bloco, clique ali e escolha a opção “Add to reusable blocks“.

Criando um bloco reutilizável no Gutenberg WordPress

Após isso é só dar um nome para o seu bloco reutilizável:

Inserindo um nome para o bloco reutilizável

Maravilha, o seu bloco foi criado, agora reutilizá-lo é bem simples, vá na postagem que você deseja inserir novamente esse bloco e clique para inserir um novo bloco, se você notar na lista de categorias de blocos foi inserida a categoria “Reusable“, nessa aba ficará todos os blocos que você definir como Reutilizável. Agora é só clicar no bloco e pronto, bloco inserido!

Como ver os blocos reutilizáveis no Gutenberg

Conclusão sobre o editor Gutenberg WordPress

É difícil ter uma opinião formada por algo que ainda está sendo testado e amadurecido, essa ainda não é a versão oficial do editor, mas seguindo a linha do que tem hoje eu acredito que o Gutenberg vai facilitar a vida dos usuários comuns que desejam de forma simples criar layouts mais complexos para as suas postagens, em contra partida para nós desenvolvedores não é o melhor dos mundos ainda, pois temos que esperar alguns plugins que utilizamos hoje se adaptarem ao novo editor para que assim possamos ter uma experiência mais agradável na hora criar layouts de páginas com recursos mais avançados.

Agora é esperar as novas atualizações de recursos e integrações que estão por vir até que o WordPress 5.0 seja lançado.

É isso ai Incuber, espero que esse post tenha ajudado a esclarecer suas dúvidas sobre o novo editor do WordPress, caso você tenha alguma dúvida, 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!

 

Salvar contatos enviados pelo Contact form 7 no WordPress

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

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.

Plugin advanced contact form db wordpress

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

Menu 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

Salvar contatos enviados pelo Contact form 7 no WordPress

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!