Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Como Criar um Template WordPress para Landing Page

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by André Victor Ribeiro Amaral (you can also view the original English article)

Final product image
What You'll Be Creating

Um dos propósitos de um site é a geração de leads. Isso pode acontecer de muitas maneiras: você pode ter um formulário para que as pessoas entrem em contato com você por motivos específicos, você pode encorajar os visitantes a criar uma conta e comprar alguns dos seus produtos ofertados, ou você pode oferecer às essas pessoas algum "presente" digital em troca dos seus endereços de e-mail.

Se você está utilizando um essa última estratégia, ou tem uma página no seu site construída especificamente para vender algum item - seja um produto ou um serviço - então você não vai querer que as pessoas saiam do seu website antes de comprar o que você está vendendo ou antes de elas deixarem seus endereços de e-mail.

Esse tipo de página é chamada de landing page. É uma página construída para ser parte do seu funil de marketing - a fim de gerar leads ou vender algo. O propósito dessa página é muito simples, e você não vai querer que os visitantes façam algo diferente do que você planejou - uma vez que eles já acessaram a página.

Para minimizar as chances de as pessoas navegarem para fora do site antes de comprarem algo ou se cadastrarem, você quer reduzir o número de links na sua landing page. Ela não deve ter widgets ou menus de navegação. Você não quer que as pessoas deixem a página para navegar no site. Mesmo o link para a página inicial, normalmente inserido no cabeçalho, deve ser deixado de lado - junto com os links no rodapé da página.

Nesse tutorial eu vou te mostrar como criar um template de página para o seu tema que tem o objetivo de atingir esse propósito. Ele não vai conter links para nada fora da sua página. Os visitantes vão ter, somente, os botões de Comprar ou Cadastrar disponíveis.

Para fazer isso, nós vamos trabalhar com alguns arquivos no nosso tema:

  • Nós vamos criar um template de página para as landing pages.
  • Nós vamos editar o arquivo de cabeçalho; assim, quando o template for exibido, os links não aparecerão.
  • Nós vamos editar o arquivo de rodapé para remover os widgets e quaisquer outros links.

Então, vamos começar!

O Que Você Vai Precisar

Para seguir esse tutorial, você vai precisar de:

  • Uma instalação para desenvolvimento do WordPress - não adicione nenhuma landing page ao seu site antes de testá-la.
  • Um tema que você possa editar. Se o tema escolhido foi desenvolvido por terceiros, crie um tema filho e edite ele.
  • Um editor de código.

O Começo da Página

Eu criei uma página de teste no meu site para utilizar como landing page. Aqui está como ela se parece utilizando o template normal:

the landing page using a standard page template

Durante esse tutorial, eu vou remover o menu de navegação, a barra lateral e a área de widgets no rodapé - além de garantir que nada além dos botões de interesse seja um link clicável.

Criando um Template para Landing Page

Primeiro você precisa criar um template para a landing page. Faça isso de algum dos dois modos:

Se você está trabalhando com o seu próprio tema, duplique a página page.php e a renomeie.

Se você está trabalhando com um tema desenvolvido por terceiros, crie um tema filho. Crie uma cópia de page.php, a partir do tema pai, dentro do tema filho, e a renomeie.

Não dê ao arquivo um nome que comece com page-, já que isso pode confundir o WordPress à depender do que você vai fazer depois com o prefixo page-. Eu vou chamar a minha de landing-page-template.php.

Agora, abra o seu arquivo de template. Adicione essa linha de código no topo:

Salve o arquivo e você vai ver que você pode selecionar um novo template quando for criar uma nova página no seu site:

Picking a page template in the page editing screen

Agora, remova, do arquivo, a chamada para a barra lateral. Encontre essa linha:

... e a delete. Salve o arquivo. Seu novo template de página está pronto. Mas você ainda não.

Editando o Arquivo de Cabeçalho

O próximo passo é editar o arquivo header.php, para remover qualquer link enquanto você estiver utilizando esse novo template. Para isso nós vamos utilizar a tag condicional is_page_template().

Abra o arquivo header.php e encontre o trecho de código do título do seu site.

Nota: se você está utilizando um tema desenvolvido por terceiros, crie um arquivo header.php no seu tema filho que seja cópia de um que vem do tema pai - e então, o edite.

No meu tema, é dessa maneira:

Edite-o para ficar parecido com algo desse jeito (faça os ajustes de acordo com o seu tema):

Se o template de landing page está sendo utilizando, o nome do site ainda vai aparecer, mas não vai ser renderizado como um link.

Você também precisa remover as opções de navegação. Encontre o código do menu principal. No meu tema, ele se parece com:

Edite-o, para que todo o código do menu seja posicionado dentro da tag condicional que checa que nós NÃO estamos utilizando um template de landing page:

Se existirem outros menus ou links no seu arquivo de cabeçalho, envolva-os com a mesma tag condicional - o mesmo se aplica para as áreas que contêm widgets.

Agora, salve o arquivo header.php e feche-o.

Editando o Arquivo de Rodapé

A parte final que devemos conferir é se as áreas de widgets também não estão sendo mostradas no rodapé.

Nós vamos usar a mesma tag condicional para exibir as áreas de widget apenas se não estivermos utilizando um template de landing page.

Abra o arquivo footer.php (ou crie uma cópia dentro do seu tema filho).

Encontre o trecho de código que mostra seus widgets. Aqui está o meu:

Agora envolva esse pedaço de código em uma tag condicional da mesma maneira que fizemos para o arquivo de cabeçalho.

A seguir, nós vamos precisar de corrigir algumas coisas. Isso pode incluir cuidar de um link para a sua página inicial e/ou para o site do WordPress.

Aqui está o meu:

Agora, use a tag condicional para mostrar esse trecho sem os links quando estiver utilizando o template de landing page.

Confira seu arquivo de rodapé, procurando por quaisquer outras links que possam existir - se encontrar algo, envolva-os, também, com a tag condicional.

Ajustando o Estilo

Pode te acontecer de, por você ter removido a sua barra lateral para utilizar o template de landing page, ser necessário ajustar o estilo do seu conteúdo. Se a área de conteúdo continua ocupando somente dois terços da sua tela, você pode utilizar a classe body, gerada pelo WordPress, para consertar isso.

Dessa forma, vamos supor que você tem o seguinte trecho de código de estilização para o seu conteúdo e barra lateral:

Você vai precisar adicionar alguma estilização adicional abaixo disso - a fim de atingir a classe de conteúdo no seu template de landing page.

Você vai precisar ajustá-lo para levar em consideração as margens ("margins" e "paddings") que estão sendo utilizadas; mas essa é a ideia geral.

A Página Final

Aqui está a minha landing page sem nenhum link:

the landing page with all links removed

Parece um bocado vazia agora, mas você vai preenchê-la com seu conteúdo destinado a incentivar as pessoas a comprar ou se cadastrar - imagens, grandes botões vermelhos, esse tipo de coisa! E você pode ver que não há nada para distrair o visitante do conteúdo da página.

Eu espero que sua landing page te dê excelentes resultados. Boa sorte!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.