Etapas fáceis para codificar uma página de destino personalizada do WordPress

Não é preciso muita experiência com web design para aprender que criar uma boa landing page não é fácil. Você precisa ter uma idéia clara do que sua página de destino deve ser . E você precisa entender seus visitantes e orientar sua atenção para a conversão. Felizmente, se você estiver familiarizado com o básico da codificação da web, terá a liberdade necessária para otimizar sua página como achar melhor. Com isso em mente, vamos ver o que é codificar uma landing page personalizada do WordPress .

A importância de uma página de destino

Antes de passarmos por etapas específicas de codificação, vamos primeiro explicar por que ter uma boa página de destino é importante. Dificilmente existe um guia online para a construção de sites que não mencione a importância vital de ter uma página de destino decente . Se o seu site é sobre vender um produto, oferecer um serviço ou coletar dados, você precisa ter uma boa página de destino.

Infelizmente, criar uma boa landing page não é fácil. Você precisa ter uma ideia clara de como deve ser o seu pouso. E você precisa entender seu público para orientá-lo em direção às conversões. Uma página de destino mal otimizada pode diminuir consideravelmente seu desempenho e potencialmente arruinar sua presença online estelar. Lembre-se de que a página de destino geralmente é a última etapa antes que seu visitante se converta em cliente . Então, faça o seu melhor para torná-lo o melhor possível. Felizmente, se você conhece o básico da programação da Web, pode codificar facilmente uma página de destino personalizada. Isso lhe dá uma quantidade considerável de liberdade, que normalmente é necessária para uma página verdadeiramente funcional . Então, com isso em mente, vamos passo a passo para o código necessário para criar uma landing page WP.

Codificando uma landing page personalizada do WordPress

Embora as etapas que descreveremos sejam bastante simples, você deve sempre considerar consultar um web designer profissional. Certos sites podem ser bastante complicados com vários plugins rodando em segundo plano . E alguns desses plugins podem causar ou enfrentar problemas se você não tiver certeza do que está fazendo. Embora você possa desabilitar plugins sem acesso à área de administração, você realmente deve evitar se meter em muitos problemas . Se você tiver alguma dificuldade no futuro, entre em contato com um web designer profissional para ajudá-lo.

Criar um tema filho

Embora você possa, teoricamente, criar um novo tema pai, você deve usar um tema filho. Eles são muito mais adequados para personalização, o que lhe dá mais liberdade para criar páginas de destino exclusivas. Já que abordamos como criar um tema filho, não vamos falar sobre isso novamente aqui. A única coisa que vamos mencionar é que você precisa ter os arquivos style.css e functions.php no diretório do seu tema filho para continuar.

Crie um arquivo Style.css

No arquivo style.css você só precisa adicionar o seguinte código:

/*

Nome do tema: Tema da página de destino

Descrição: Tema filho com página de destino personalizada

Autor: Escritor Padrão

URI do autor: https://www.wpfullcare.com

*/

Crie um arquivo Functions.php

No arquivo functions.php, você precisa adicionar o seguinte código. Isso permitirá que você registre seu arquivo de folha de estilo filho.

<?php

// Estilos de tema pai //

// https://codex.wordpress.org/Child_Themes //

function theme_enqueue_styles() {

$parent_style = 'estilo-pai';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'estilo filho',

get_stylesheet_directory_uri() . '/estilo.css',

array($parent_style)

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Instale e ative seu tema filho

Com isso feito, você pode prosseguir para instalar e ativar seu tema filho. Quando se trata de temas do WordPress em geral, você deseja testá-los localmente em um site WP diferente. Como mencionamos, acidentes acontecem. E você realmente deve evitar desabilitar seu site . Depois de configurar um site local do WordPress, faça o upload do seu tema. Depois de ativá-lo, verifique se o tema filho está funcionando e se você pode adicionar estilos. Vá para o arquivo style.css e altere algumas partes do código para ver se está funcionando.

Crie uma página personalizada

Se tudo estiver em ordem, você pode continuar criando uma página personalizada em seu tema filho. Para isso você precisa criar um novo arquivo no tema do seu filho. Depois de fazer isso, salve-o como page-landing.php. Nesse arquivo você precisa adicionar o seguinte código:

<?php

/**

Nome do modelo: página de destino

**/

?>

Agora, vá para o menu suspenso de modelos e escolha sua página de destino no menu. Você precisará escolher uma imagem em destaque para usar como plano de fundo ( escolha algo grande e simples por enquanto, pois você pode experimentar mais tarde ). Em seguida, adicione sua cópia e publique a página adicionada. Tentar revisar sua página agora só o levará a uma tela preta. Isso ocorre porque você ainda não adicionou a marcação a seguir ao page-landing.php.

<div id=”landing-page” class=”hfeed site”>

<div class=”site-branding”>

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel=”home”><?php bloginfo( 'nome' ); ?></a></p>

</div><!– .site-branding –>

Depois de adicioná-lo e visualizar sua página, você verá o título do site junto com um fundo branco e uma imagem de fundo grande.

Exibir conteúdo

Para exibir o restante do conteúdo em sua página de destino, você precisa adicionar a seguinte marcação ao page-landing.php. Você precisa fazer isso logo abaixo da linha <!– .site-branding –> para que funcione corretamente.

<div class=”sidebar sidebar-bribe”>

<?php if (have_posts()): ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class="landing-title"><?php the_title("); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php endwhile; ?>

<?php endif; ?> <!– mdl-cell-8 //#primary –>

</div>

A codificação de uma página de destino personalizada do WordPress está quase pronta. Tudo o que você precisa fazer é configurar o estilo para isso. A maneira mais simples de fazer isso é apenas o arquivo style.css e o código necessário para ele. Como existem opções literalmente ilimitadas para a aparência da sua página, não daremos um exemplo estrito a ser seguido. Em vez disso, recomendamos que você encontre um estilo que goste e o copie . Dessa forma você vai descobrir como diferentes aspectos de sua função.