Como usar reCaptcha no formulário HTML

Depois de ver como é fácil configurar e instalar o reCaptcha no WordPress (link aqui) , vamos a um passo adiante, que é configurar o reCaptcha no seu formulário HTML. Pode ser feito com PHP ou ASP, depende da programação. Mas é necessário aqui usar uma das duas linguagens de back-end.

Como exemplo, vamos usar um formulário bem simples, como abaixo:

Entre as tags <head> e </head>, vamos acrescentar a função JS do reCaptcha e o script que faz a chamada ao submeter o formulário:

 <script src="https://www.google.com/recaptcha/api.js"></script>
 <script>
   function onSubmit(token) {
     document.getElementById("form1").submit();
   }
 </script>

E vamos modificar o botão, acrescentando a primeira CHAVE do reCaptcha, chamada SITEKEY:

<button class="g-recaptcha" 
        data-sitekey="6Le9kHcdAAAAALC1bQh4YE7UXkSmLljhnLC8GG8X" 
        data-callback='onSubmit' 
        data-action='submit'>OK</button>

Não precisa se preocupar em “esconder” essa chave, ela não pode ser usada em outro domínio, somente naquele que foi criado para usá-la. Portanto, se você usar mais de um domínio, ou domínios canônicos, será preciso cadastrar mais chaves.

Depois de acrescentar esse botão, vamos ver como a página ficou:

Depois de incluir o código, a página passa a mostrar esse selo de “protegido por reCAPTCHA

Agora vamos preparar a página de retorno. Veja o exemplo que fiz em PHP, na página resposta.php:

<?php
  if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
  $secretKey = "XXXXXXXXXXXXXXXXXXXXXXXXXX";
		
  if ($captcha) {
        $ip = $_SERVER['REMOTE_ADDR'];
        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . ($secretKey) . '&response=' . ($captcha) . '&remoteip=' . urlencode($ip);
        $response = file_get_contents($url);
        $responseData = json_decode($response);
        if($responseData-> success):
             print_r("Form OK!"); exit;
        else:
             print_r("Chave Inválida"); exit;
        endif;
    } else {
        print_r("reCaptcha não funcionou"); exit;
    }

  
?>

Basicamente o código faz o seguinte: verifica se a resposta do reCaptcha foi positiva, submete a resposta junto com a chave secreta para nova verificação. O reCaptcha retorna com uma resposta JSON e novamente ela é interpretada para o segundo teste, inclusive retornando o “score”, que diz a probabilidade do usuário ser Robô ou Humano. Nesse exemplo, caso tenha retornado Sucesso, basta aplicar o que deve ser feito no form, seja enviar e-mail ou gravar os dados do contato.

O JSON ficou assim:

{
  "success": true,
  "challenge_ts": "2021-12-08T14:26:05Z",
  "hostname": "www.animecomics.com.br",
  "score": 0.9,
  "action": "submit"
}

Adicionalmente, a página do reCaptcha mostra quantos SPAMs foram filtrados. Veja o relatório que recebemos em um formulário de contato:

Veja que o relatório é bem completo, dizendo até mesmo o score médio dos usuários, e a filtragem por dia / semana / mês.

Bom, é isso, vamos todos contribuir para acabar com o SPAM!

Como usar o reCaptcha no seu formulário

Acredito que todo mundo que navega na internet já se deparou com uma dessas perguntas estranhas:

Pois é, as perguntas sobre semáforos ou sobre as placas de sinalização são desafiadoras! Mas todos os exemplos mostrados acima tem uma finalidade: mostrar ao site ou ao servidor que a pessoa que está respondendo é real, e não um robô / script automático programado para preencher formulários, ou burlar votações virtuais. É um método controverso, porém necessário. Foi a solução que especialistas encontraram para evitar por exemplo que um programa fique tentando diversas senhas até conseguir entrar na conta de alguém, ou de mandar diversos spams de formulário (como mostramos em outra matéria: Como proteger seu formulário contra Spams – WordPress ou HTML) ou de manipular uma votação de Big Brother.

Esse tipo de método é chamado de Captcha. Só por curiosidade, o CAPTCHA é sigla de Completely Automated Public Turing test to tell Computers and Humans Apart, ou algo como “teste automatizado para diferenciar humanos e computadores”. O mais famoso Captcha é chamado de reCaptcha, que hoje é de propriedade do Google, disponível em versões gratuitas e pagas. Vamos abordar aqui a versão gratuita mais recente!

Como criar o reCaptcha

  1. O Primeiro passo é acessar a página do reCaptcha com sua conta Google: https://www.google.com/recaptcha/about/
    Clique no link V3 Admin Console, caso contrário você entrará na versão Enterprise (paga)

2. No primeiro acesso, serão solicitados seus dados e dados do site onde será instalado o reCaptcha. Será perguntado sobre usar a versão V2 ou V3, a diferença entre elas é que a V2 já começa com o desafio de clicar na caixa, digitar palavra ou de contar semáforos, enquanto que a V3 pode passar desapercebido pelo usuário na primeira vez, e nas demais, quando perceber que o usuário já preencheu mais vezes o mesmo formulário, ele pode pedir um dos desafios da versão 2.

3. Serão gerados 2 linhas de código criptografados. Copie essas duas linhas em um bloco de notas, para usarmos depois.

A instalação dependerá do seu site, se usa uma plataforma como WordPress ou programação HTML + PHP ou ASP. Aqui explicaremos esses 2 métodos:

Como Instalar o reCaptcha no WordPress

Se você utiliza o WordPress, a instalação é muito fácil. Seu site deve estar utilizando um plugin de formulário como Contact Form 7, ou WP Forms que são os mais comuns. Não importa qual, os plugins mais comuns de WordPress têm suporte ao reCaptcha, o que torna o trabalho muito simples. Nosso exemplo usa o WP Forms, e basta entrar na configuração que logo aparecerá a opção “Captcha”. Você tem a opção de usar o Captcha próprio do WP Forms, ou usar o reCaptcha do Google. Vamos nessa segunda opção:

Aqui é a hora de colar as duas chaves que copiamos do Google. Chave do Site e Chave secreta. Além disso, pode-se limitar uma pontuação: numa escala de 0,0 (mais provável que seja robô) a 1,0 (mais provável que seja humano), pode deixar o padrão 0,4. A não ser que você precise de uma segurança muito grande como por exemplo uma senha de acesso, que é recomendado deixar no mínimo 0,7.

Salve a configuração e teste seu formulário!

Como proteger seu formulário contra Spams – WordPress ou HTML

Quando você cria um formulário em seu site, a expectativa otimista é que ele seja bem aproveitado, preenchido por várias pessoas interessadas em seu negócio e que gere muitos contatos, para que alimente o seu cadastro. Mas aí que vem um grande problema: assim que seu site começa a ser divulgado no Google, logo começam os Spams! E se o formulário direciona um e-mail direto para você, aí seus problema são dobrados, além de gerar um spam no seu cadastro também gera um e-mail indesejado, com links, com vírus, com conteúdo enganoso, etc.

Como acontecem os Spams de formulário?

As mensagens de Spams são geradas automaticamente por programas ou scripts criados com esse propósito. Esses programas buscam sites que contenham formulários e preenchem automaticamente com os dados que eles quiserem. Esses programas são capazes de enviar centenas de mensagens por minuto. Se você já criou seu blog em WordPress e ativou os comentários, com certeza sabe do que estamos falando.

Como se proteger contra o Spam de formulário?

Existem algumas boas práticas para proteger seu formulário. Vamos explicar 3 delas:

1) Validação no preenchimento: com programação Javascript / Ajax, é possível validar o preenchimento de certos campos, por exemplo validar o campo de E-mail, limitar caracteres especiais, evitar letras em campo de telefone, impedir números em campos de texto, etc.

2) Validação na execução: essa validação é feita após o preenchimento dos campos, antes dos campos serem gravados no banco de dados ou enviados por e-mail. A idéia aqui é evitar caracteres especiais, códigos maliciosos inseridos no meio da mensagem, e bloquear mensagens que tenham “http” ou “ftp” entre elas.

3) Validação Captcha: é um tipo de validação que tem como objetivo verificar se o formulário está sendo preenchido por uma pessoa real ou por um script ou programa automático. Ele evita que o usuário utilize esses scripts e tenha que preencher manualmente, ou desista de fazer Spam. Costuma ser bem eficaz, apesar dos spammers estarem sempre buscando novas alternativas para burlar o sistema.

A vantagem de utilizar URL Amigável

O que é URL Amigável?

A URL amigável é aquela que mostra exatamente o assunto da página. Por exemplo a URL dos posts do Blog Nishiweb:

Uma URL Amigável pode ser organizada de modo ainda melhor, mostrando categorias. Imagine no caso de uma marca de sapatos, pode ser organizado dessa forma: http://lojadesapato.com/masculino/couro/marca/modelo

Ou no nosso caso, no site AnimeComics, ela é usada para mostrar o personagem e o grupo ao qual pertence:

http://animecomics.com.br/personagem/X-Men/Wolverine/

Quais as vantagens da URL Amigável?

A primeira vantagem é a facilidade de organizar as páginas dentro de seu site. Se usar uma estrutura de diretório, por exemplo, o programador consegue rapidamente entender a estrutura do site.

A segunda vantagem é o compartilhamento da informação. Ao transmitir a URL, é muito mais fácil compartilhar uma URL Amigável do que uma URL cheia de números, letras maiúsculas e caracteres especiais.

E se você ainda não ficou convencido até aqui, saiba que a terceira e principal vantagem é a Indexação do Google. Sites com URL amigáveis são melhores rankeadas no Google, que além de considerar a tag TITLE e META tags, ainda leva em conta a URL (talvez até acima dos demais elementos).

Como faço para ter uma URL Amigável em meu site?

Se o seu site é HTML puro, você precisa renomear cada arquivo e criar uma estrutura de diretórios a fim de deixar a URL com os nomes de arquivos correspondente ao assunto da página. Se for em ASP ou ASP.NET, da mesma forma, mesmo que utilize banco de dados, é possível deixar o assunto como parâmetro de URL.

Já se o seu site é escrito em PHP, é preciso o conhecimento um pouco mais avançado para criar uma estrutura usando .htaccess e arquivos de inclusão. Mas o resultado é bem mais satisfatório do que nas linguagem citadas acima, pois elimina o “.htm” ou “.php” do final do arquivo.

Mas se você usa o WordPress, assim como esse blog, esse processo é bem simples! Vou explicar aqui como fazer, e com um “macete”, acho que é uma falha do WordPress. Primeiro, no seu Painel de Controle, entre no menu Configurações > Link Permanentes

Configurações –> Links Permanentes (Permalink)

Selecione Estrutura personalizada e escreva exatamente no exemplo acima: /index.php/%postname%/ Essa dica é essencial para funcionar, pois sem o index.php, acontece algum bug que o WordPress ainda não resolveu. Salve as alterações e vá para seu site testar!

Google Meu Negócio – Para que serve?

Toda empresa que deseja estar no Google, precisa ter uma conta no Google Business – chamado também de Google Meu Negócio. Mesmo que não tenha endereço físico, como é meu caso, e o caso de agências que trabalham de modo virtual, lojas de e-commerce, consultoria on-line, etc., também é possível ter uma conta no Google Business e aparecer como o caso abaixo:

A sua página do Business aparecerá sempre que alguém procurar pelo nome da sua empresa. Podem ser incluídas várias informações relevantes, como telefone, site, horário de funcionamento, redes sociais e mapa de localização (se tiver um endereço físico). Se o usuário estiver acessando de um celular e clicar no botão Ligar, ele fará a chamada automaticamente. Se clicar no botão Rotas, ele inicia o Google Maps traçando a rota até sua empresa. Também pode-se colocar uma galeria de fotos da sua empresa e fotos de produtos separados em categorias que você mesmo cria. São muitas possibilidades.

Bom, tenho algumas ressalvas quanto ao serviço de fotos de produtos e postagens: tive dificuldades para incluir postagens de alguns clientes, pois nas diretrizes do Google, determina-se que as fotos não podem conter área de texto superior a 10% da imagem e não podem conter rostos de pessoas. E o texto das postagens não pode conter números de telefone, emojis, e nem caracteres especiais em excesso.

Como começar

O endereço para começar é este: https://www.google.com/intl/pt-BR_br/business/

Você deve fazer o login com sua conta Google, e depois é só seguir as instruções. Em determinado momento, será solicitado para Confirmar o seu negócio. Isso antes podia ser feito via ligação telefônica, mas ultimamente está sendo feito somente por carta.

Funciona assim: você fornece o endereço, que pode ser da sua empresa, ou mesmo da sua residência, e dentro de 5 a 10 dias, receberá um cartão-postal do Google com um código. Basta fazer login novamente no Google Meu Negócio e informar o código que está no postal, confirmando assim que o endereço físico é seu mesmo. Depois disso sua empresa já faz parte do Google.

Landing Pages – O que são?

As Landing Pages são parte de uma estratégia de Marketing muito difundida nos últimos anos, chamado Inbound Marketing. O objetivo aqui não é explicar a fundo o Inbound Marketing, mas sim mostrar como uma Landing Page pode ajudar no seu negócio, de forma objetiva.

Landing Page basicamente é uma página com formulário que oferece um brinde em troca do cadastro do usuário. Esse brinde pode ser um e-book, um vídeo, um conteúdo exclusivo, o acesso a uma imagem, sendo que o mais comum é oferecer um e-book em PDF. Este e-book pode conter dicas sobre um produto, dicas sobre design, enfim, algo relacionado ao seu negócio e cujo valor possa ser trocado pelo cadastro do cliente.

Uma dica: esse cadastro deve ser breve, solicitando informações básicas para não assustar o usuário. Nunca deve pedir documentos como CPF, RG, e dados pessoais que não são relevantes. Pode e deve incluir: Nome, E-mail, Celular / WhatsApp, e pode conter perguntas relacionadas ao seu negócio, como por exemplo no caso de uma Clínica de Cirurgia Plástica: “qual parte do corpo gostaria de melhorar?” ou então “qual sua maior dúvida referente a cirurgia plástica”.

Veja um exemplo de Landing Page:

Veja que a Landing Page é um formulário básico, com um título chamativo (atenção para o “gratuito”) e um breve resumo do que a pessoa irá receber caso preencha o cadastro. Depois de preencher o breve cadastro, a pessoa terá acesso direto ao e-book ou poderá receber por e-mail.

A finalidade de obter o cadastro da pessoa (também chamada de Lead) é posteriormente utilizar em uma comunicação mais direta, como um e-mail oferecendo outro conteúdo, ou uma promoção do seu negócio, ou até mesmo uma abordagem mais direta, via WhatsApp, oferecendo seu produto/serviço. Os dados ficam armazenados em um banco de dados para serem usados em futuras ações de Inbound Marketing.

Como instalar botão flutuante de WhatsApp

Hoje vamos explicar como instalar um botão flutuante como este da imagem abaixo, usando um plugin do WordPress:

No Painel de Controle, vá em Adicionar novo Plugin, e pesquise pelo plugin chamado “Click to Chat“.

Clique para instalar o primeiro resultado, do logotipo verde (pode ser que mude com o tempo). Meu critério para instalar plugins é a frequência de atualização e a quantidade de avaliações positivas. Já havia tomado conhecimento deste através de outro site em que trabalhei. É um plugin simples de instalar e muito fácil de configurar. Depois de instalado, clique em Ativar. Localize o plugin no menu esquerdo do WordPress e clique em Settings. Será aberta a tela abaixo:

Logo de cara, a única coisa que precisa mesmo ser alterada é o número do WhatsApp. Digite seu número com DDD e código do país As demais configurações são padrões, e podem ser usadas do jeito que estão, mas vamos mudar algumas coisas:

Ative o checkbox mostrado na tela, ele será útil para economizar um clique do usuário. Desta forma, se o usuário estiver usando desktop, será direcionado para o WhatsApp Web, e se estiver usando celular, será direcionado para o App.

Logo abaixo tem configurações bem interessantes de layout, que determinam o formato e a posição do botão em relação à tela. Escolhi deixar no canto inferior direito.

Salve as alterações e pronto!

Em outro momento, vou mostrar como colocar um botão similar mas sem utilizar plugin, ou seja, no código do seu site.

Subdomínios no Site

Um subdomínio é uma parte do seu domínio, ou seja, uma parte do seu site. Na prática, ele representa um prefixo do seu domínio. Um dos portais que mais utiliza esse recurso, de forma bem compreensível, é o site da Globo.com. Exemplos:

ge.globo.com
g1.globo.com
gshow.globo.com

Não necessariamente precisa ter o www na frente, essa é outra questão que explicaremos em outra oportunidade.

Alguns sites podem se beneficiar bastante do subdomínio, como por exemplo:

  1. Site de moda que decidiu ter uma loja para vender seus produtos, pode usar um subdomínio do tipo loja.site.com.br .
  2. Um artista que além de expor seu portifólio, quer ter um blog para escrever matérias, pode ter um domínio separado para seu blog.
  3. Uma loja multimarcas, pode criar um subdomínio para cada marca, para que o cliente encontre facilmente os produtos que deseja.

O subdomínio não precisa ser registrado no Registro.br nem no Register.com e na maioria dos provedores de hospedagem, não é preciso pagar a mais para ter subdomínios. Ele é gratuito (normalmente).

Para se criar um subdomínio na Locaweb, que é o provedor de hospedagem que utilizamos, é um processo muito simples, feito em questão de minutos. No Painel de Controle, acesse a opção Hospedagem > Domínios > Adicionar novo domínio. Selecione o botão Subdomínio:

Nesta tela, bem intuitiva, basta preencher o nome do subdomínio e a pasta para onde será direcionado o subdomínio. O importante é verificar se o subdomínio está dentro do seu site ou se está em local externo. A Locaweb ainda oferece a opção de redirecionar para uma página em construção ou para a raiz do site. No nosso caso, vamos criar um subdomínio para o nosso Blog, assim quando o usuário acessar blog.nishiweb.com.br, será direcionado para nosso Blog Nishiweb.

Pronto! Depois de alguns minutos o subdomínio começará a funcionar! Se quiser testar, clique no recém-criado subdomínio:

blog.nishiweb.com.br

Segurança SSL em Subdomínios

Se por um lado a criação de Subdomínios não tem custos na hospedagem, por outro lado o certificado SSL tem custos. Como explicamos anteriormente no texto sobre Certificado SSL, dependendo da sua contratação, os subdomínios não estarão inclusos, apenas os subdiretórios. Assim, será necessário contratar um novo certificado para cada subdomínio ou procurar um plano abrangente para cobrir todos os eventuais subdomínios que deseja criar.

SEO de Subdomínio ou Subdiretório

Uma dúvida comum em termos de SEO é: qual é mais importante, o subdomínio ou o subdiretório? Na teoria, o algoritmo do Google considera o subdomínio mais importante que o subdiretório, mas é bem verdade que na prática, o mais relevante é mesmo o conteúdo da página. Não basta ter um subdomínio chamado “webdesign” por exemplo, para aparecer de uma hora para outra nas primeiras posições do Google. É necessário trabalhar o seu conteúdo e ter autoridade sobre o assunto, até se atingir um patamar maior, é um trabalho de construção muitas vezes demorado. Mas a organização do seu site em subdomínios pode ajudar!

Open Graph: dicas de compartilhamento em Redes Sociais

Se você é usuário do Facebook e do Twitter, já deve ter percebido que, quando compartilhamos um artigo de um site externo (normalmente site de notícias), muitas vezes aparece uma foto e uma breve descrição do artigo, deixando o post mais atrativo. Veja o exemplo abaixo:

Exemplo de post do Facebook

Isso se deve a uma informação na programação do site chamada Open Graph, representada pela tag <og>. Em HTML é relativamente simples de se fazer, mas hoje vamos ensinar como fazer isso no WordPress de modo ainda mais fácil do que no HTML. Existem diversos plugins que fazem bem esse tipo de tarefa, mas decidimos usar um dos mais populares, chamado Open Graph and Twitter Card Tags. Basta procurar na lista de Plugins, instalar e ativar. Não é necessário mudar nenhuma configuração. Assim que ativado, na página de edição de Posts ou Páginas, aparecerá esse novo formulário:

São dois novos campos, um para inserir a imagem de compartilhamento e outro para o resumo. O tamanho recomendado da imagem é 1200 x 630 pixels, e o texto pode ter até 300 caracteres. Caso fiquem em branco, será usada a primeira imagem do post e parte do conteúdo. Em nosso exemplo, editamos o post sobre Certificado SSL, incluímos uma imagem e um breve resumo.

Depois de Salvar e Publicar o post, experimente compartilhar o link da sua postagem no Facebook. O resultado será semelhante a este:

Assim que colar o digitar a URL do seu post, aparecerá o preview logo abaixo, para poder saber como ficará a postagem antes de publicar.

No Twitter, o resultado será esse:

Uma última dica: após publicar a imagem no Facebook, notamos que o texto no fundo chapado não fica uniforme, perde muita resolução. Então optamos por usar uma imagem de fundo. Por isso a imagem do Twitter ficou com fundo de madeira.

Continue nos acompanhando para mais dicas, na nossa jornada para construir um site completo no WordPress.

Customização do WordPress

Vamos à segunda parte da nossa demonstração de site WordPress, que é a Customização. Na primeira parte, já havíamos escolhido um tema, o Radiate. Foi escolhido por ser simples, clean, e atendia aos requisitos.

Este é o Blog atualmente. Se vocês estão acompanhando, perceberam que não mudei praticamente nada, apenas incluí um artigo sobre Certificado SSL. E também alterei o favicon que é o ícone que aparece na aba do navegador, mas isso não foi através do WordPress.

Hoje queremos mudar os itens visuais:
• Logotipo,
• Estilo do Menu
• Cores de fundo
• Imagem do Cabeçalho

Logotipo

Acabei de descobrir que o tema escolhido tem uma parte de customização que é paga. Porém pode ser feita de outra forma, através de programação. Pode ser um problema se você não é familiarizado com Temas de WP, pois a alteração requer algum conhecimento de HTML e da estrutura de WordPress.

No Painel de Controle, escolha Aparência > Editor de temas.

Aparecerá um menu de arquivos do Tema na direita. Escolha o Cabeçalho do tema (header.php). Este é um arquivo padrão para todos os temas, sempre existe um header.php

Localize no código a tag <header>. Esta tag é padrão de HTML, todos os sites mais recentes tem essa tag, serve para indicar onde será o cabeçalho do site que inclui Logotipo, Menu e às vezes um banner.

Neste tema, perceba que há uma div com a classe “site-branding”, que indica que o nome do site / logotipo é definido aqui.

Todo esse código dentro da div “site-branding” deve sumir

Vou substituir esse código PHP por uma tag simples:

<a href="/default.asp"><img src="/images/logo.png"></a>

Então é só salvar e ver como ficou:

Parte do logo ficou “invisível” pois a imagem foi projetada para fundo escuro. Então vamos resolver logo esse fundo.

Cores de Fundo e Estilo do Menu

As cores do site são fáceis de se mudar, em Aparência > Personalizar > Cores. Só que, mais uma vez, o tema escolhido não permite customizar tudo na versão free, então vamos ter que editar manualmente o CSS. Após salvar as cores básicas, vamos para Aparência > Editor de Temas e dessa vez vamos escolher o arquivo style.css

Aqui devemos procurar a classe que define a cor de fundo do menu. Uma dica: para achar a classe mais facilmente, utilize o Chrome, clique com o botão direito no menu e selecione “Inspecionar”. Vai abrir o debug daquele elemento, mostrando a classe. No nosso exemplo, a classe a ser alterada é a header-wrap. Voltando ao editor de temas, é só procurar essa classe e alterar a cor de fundo (background-color).

Aproveitando que estamos em estilos, também vamos alterar a cor da fonte do menu, pois como eu vou deixar o fundo preto, a fonte deve ser uma cor clara. Usando o mesmo método de inspecionar, encontrei a classe do botão “Home” e alterei. Depois de salvar, o resultado foi esse:

O Logotipo da Nishiweb ficou bom no contraste com o preto

Imagem do Cabeçalho

A imagem padrão do tema, essa bela foto de NYC, combinou com o nosso site. Porém como prometido, vamos trocar a imagem. Essa troca fica em Aparência > Personalizar > Mídia do cabeçalho.

O tema escolhido permite utilizar mais de uma imagem no cabeçalho, porém nos testes que fizemos não funcionou. Posteriormente vou mostrar como se inclui um banner rotativo no lugar de uma imagem fixa. É recomendado utilizar uma imagem de 1500 x 450 pixels (jpeg ou png), mas para efeitos de teste, usei uma imagem pequena que ficou estourada.

Por ora, o resultado é este:

Adicionalmente, troquei a imagem de fundo da página, para ficar com uma identidade parecida com o site da Nishiweb. Fica em Aparência > Imagem de fundo . Selecionei a opção “preencher toda a tela” para que cubra todo o fundo sem cortes.

Espero que tenha ajudado! Em breve mais customizações de WordPress