Como Adicionar um Botão 'Ir para a Receita' no WordPress (2 Maneiras Fáceis)

Blogueiros de culinária frequentemente nos perguntam sobre recursos que fazem a maior diferença para seus leitores.

Após observar muitos blogs de culinária ao longo dos anos, descobrimos que adicionar um botão 'ir para a receita' é uma das melhorias mais eficazes que você pode fazer.

É uma pequena mudança que faz uma grande diferença em ajudar os visitantes a encontrar rapidamente o que procuram. Além disso, é simples de configurar em qualquer site WordPress.

Testamos diferentes soluções e encontramos dois métodos confiáveis que funcionam consistentemente bem. Ambos os métodos são amigáveis para iniciantes e farão seu botão 'ir para a receita' funcionar em apenas alguns minutos.

Por que Adicionar um Botão 'Ir para a Receita' em Posts de Blogs de Culinária?

Um botão "Pular para a Receita" é um link de navegação colocado no topo de um post de blog. Tecnicamente, ele funciona como uma âncora HTML que rola instantaneamente o navegador para baixo até o card da receita, pulando o conteúdo introdutório.

Leitores frequentemente reclamam de ter que rolar por longas histórias e anúncios para encontrar os ingredientes. Embora o conteúdo de formato longo ajude na monetização, muitos visitantes precisam de acesso imediato às instruções enquanto cozinham ou fazem compras.

Adicionar este botão permite que você atenda a ambos os tipos de leitores. Você pode manter sua narrativa pessoal para fãs leais, enquanto fornece um atalho rápido para usuários que precisam de respostas rapidamente.

Isso melhora a experiência geral do usuário (UX) em seu site. Quando os usuários podem encontrar o que precisam facilmente, é menos provável que eles retornem aos resultados de pesquisa.

Com isso em mente, mostraremos 2 maneiras fáceis de adicionar um botão Pular para a Receita ao seu blog de culinária: usando um plugin de criação de receitas para WordPress e código personalizado. Você pode usar os links rápidos abaixo para pular para o seu método preferido:

Método 1: Use o WP Tasty Recipes para Adicionar um Botão Pular para a Receita (Recomendado)

A maneira mais fácil de adicionar um botão Pular para a Receita no WordPress é usando o WP Tasty Recipes.

Este plugin de cardápio e criador de receitas foi extensivamente testado por nós, e descobrimos muitos recursos que o tornam um favorito entre os blogueiros de culinária.

Além do botão Pular para a Receita, o Tasty Recipes permite que você torne suas receitas imprimíveis e as converta para a unidade de medida preferida do leitor sem esforço.

Além disso, você pode exibir claramente dados nutricionais, tempo de cozimento, tamanho da porção e avaliações dos usuários, tudo de forma organizada e concisa.

Se você estiver interessado em aprender mais sobre as capacidades do plugin e como ele pode beneficiar seu blog, certifique-se de conferir nossa análise completa do WP Tasty.

Uma desvantagem deste plugin de receitas é que ele não vem com uma versão gratuita, mas é um ótimo investimento para blogueiros de culinária sérios que desejam ganhar dinheiro online.

Agora, para usar o plugin, você primeiro precisa comprar um plano pago. Você pode optar pelo Pacote WP Tasty All Access ou pelo plugin Tasty Recipes individual.

Depois de fazer uma compra, você pode baixar o plugin e instalá-lo em seu site WordPress. Você pode ler nosso guia sobre como instalar um plugin do WordPress para mais informações.

Depois disso, vá para WP Tasty » Dashboard no seu painel do WordPress e clique em ‘Enter License.’

Em seguida, insira a chave de licença do seu plugin, que a WP Tasty deve ter enviado para o seu e-mail após a compra.

Em seguida, selecione ‘All Plugins’ ou ‘Tasty Recipes’ no menu suspenso Plugin(s) to activate. Clique em ‘Save License.’

Com isso feito, vá para a página WP Tasty » Tasty Recipes no seu painel do WordPress e mude para a aba ‘Settings’.

Por padrão, as opções para os botões Jump to Recipe e Print Recipe estarão marcadas, então você pode deixá-las como estão.

Uma coisa que você pode mudar sobre os botões é o Quick Links Style.

A WP Tasty também pode exibir a opção Jump to Recipe como um link de texto normal em vez de botões. Se preferir, você pode selecionar ‘Links’.

Mas é claro, você também pode simplesmente escolher a opção Buttons se essa for a sua preferência.

A opção Buttons também é mais chamativa, facilitando para os leitores a identificação.

Na verdade, há muitas outras configurações para experimentar aqui, como habilitar caixas de seleção para a lista de ingredientes e dimensionamento de receitas. Certifique-se de marcar as opções que melhor se adequam ao seu blog.

Quando terminar, basta rolar a página para baixo e clicar em ‘Save Changes.’

Agora, sempre que você usar o card de receita da WP Tasty, os botões Jump to Recipe e Print Recipe no topo aparecerão.

Para usar o card de receita, você pode criar uma nova postagem de receita ou editar uma existente usando o editor de blocos Gutenberg. Em seguida, você pode seguir este guia passo a passo sobre como adicionar um bloco de card de receita no WordPress para mais informações.

Um benefício de usar o Tasty Recipes para adicionar o link de salto é o efeito de rolagem suave. Dessa forma, os leitores podem navegar diretamente para as instruções da receita sem saltos bruscos na página.

Usar código personalizado para obter esse efeito é complicado porque geralmente requer JavaScript ou a edição de arquivos do tema. É por isso que recomendamos o método do plugin para a maioria dos usuários.

Dito isso, se você quiser adicionar um botão Pular para a Receita gratuitamente, pode tentar este próximo método.

Método 2: Use Código Personalizado para Adicionar um Botão Pular para a Receita (Grátis)

Adicionar um botão Pular para a Receita manualmente pode parecer intimidante para iniciantes completos, mas não se preocupe, pois o guiaremos cuidadosamente por cada etapa.

Se esta é a primeira vez que você está adicionando código personalizado ao WordPress, sugerimos usar um plugin de snippet de código como o WPCode.

Testamos o plugin extensivamente e ele oferece uma maneira segura e direta de inserir snippets de código sem editar os arquivos do tema. Isso minimiza o risco de quebrar acidentalmente o layout ou a funcionalidade do seu site.

Curioso sobre o que mais o WPCode pode fazer? Confira nossa revisão fácil de seguir, onde detalhamos seus recursos e explicamos por que é uma ótima ferramenta para usuários do WordPress.

Para usar o WPCode, prossiga e instale o plugin no seu painel de administração do WordPress. Você pode ler nosso guia passo a passo sobre como instalar um plugin do WordPress para mais detalhes.

Em seguida, vá para Snippets de Código » + Adicionar Snippet. Aqui, selecione ‘Adicionar seu código personalizado (Novo Snippet)’ e clique em ‘Usar snippet’.

Existem dois snippets de código que você precisa adicionar separadamente ao WPCode. Vamos passar por eles um por um:

Adicionar um Código para Inserir Automaticamente o Botão Pular para a Receita

O primeiro trecho de código adicionará automaticamente o botão Pular para a Receita em todas as postagens do blog que contêm uma seção de receita. Para isso, você pode nomear seu trecho como ‘Adicionar Botão Pular para Receita Automaticamente’.

Em seguida, selecione ‘Trecho PHP’ no menu suspenso Tipo de Código.

Na caixa de Visualização de Código, insira as seguintes linhas de código:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Vamos analisar como este código funciona.

A primeira parte do código verifica o conteúdo da sua postagem do blog. Ele procura especificamente por uma tag de título (H1 a H6) que tenha um ID de âncora definido como ‘recipe’.

A segunda parte, a função chamada add_jump_to_recipe_button, é responsável por adicionar o botão real à sua postagem.

Se o código encontrar o ID de âncora ‘recipe’, ele criará o código HTML para o botão de salto. Em seguida, ele inserirá esse código logo antes do conteúdo da sua postagem do blog.

Dessa forma, o código pode verificar automaticamente o título da receita e adicionar o botão, se necessário.

Dito isso, você terá que adicionar uma âncora #recipe à seção de receita da sua postagem do blog. Não se preocupe, mostraremos como fazer isso mais tarde.

Agora, role para baixo até a seção ‘Inserção’ e certifique-se de que o método ‘Inserir Automaticamente’ esteja selecionado. Quanto à Localização, você pode escolher ‘Somente Frontend’ para que o código seja executado apenas na parte visível do seu site WordPress.

Em seguida, ative o botão no canto superior direito para tornar o código ‘Ativo’ e clique em ‘Salvar Trecho’.

Adicionar um Trecho de Código para Estilizar o Botão Pular para a Receita

Agora, adicionaremos código CSS personalizado para estilizar seu botão de call-to-action. Prossiga e repita os passos para criar um novo snippet de código personalizado no WPCode e dê a ele um nome simples, como 'Estilizar Botão Ir para Receita'.

Quanto ao Tipo de Código, selecione ‘Trecho CSS’.

Agora, criamos um código CSS que tornará nosso botão verde e o texto nele branco. Assim:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

Se você quiser usar cores diferentes, basta substituir os códigos hexadecimais no código acima.

Depois de inserir o código, role para baixo até a seção Inserção e selecione ‘Inserção Automática’ como Método de Inserção. Em seguida, escolha ‘Cabeçalho de Todo o Site’ como Localização.

Tudo o que você precisa fazer a seguir é ativar o snippet de código e clicar em 'Salvar Snippet'.

Adicione a Âncora #recipe aos Seus Posts de Blog de Receitas

Mesmo que você tenha ativado os dois snippets de código, o botão de salto não aparecerá a menos que você adicione uma âncora #recipe à seção de receitas dos seus posts de blog do WordPress. Então é isso que vamos fazer agora.

Primeiro, crie um novo post de blog de receita ou abra um existente no editor de blocos.

Agora, em nosso exemplo, estamos usando uma tag de título (H2) para sinalizar a seção de receitas de nossa postagem de blog. Sugerimos que você faça o mesmo, apenas para que seja mais fácil para os usuários encontrá-la ao ler sua postagem. Os mecanismos de pesquisa também apreciam quando o conteúdo do seu blog tem uma estrutura organizada.

Vá em frente e clique no bloco de Título da sua seção de receita. Em seguida, na barra lateral de configurações do Bloco, abra o menu ‘Avançado’. Em seguida, digite ‘recipe’ no campo Âncora HTML. Certifique-se de usar apenas letras minúsculas.

Isso servirá como um link de âncora para o botão de salto.

Com isso feito, clique em ‘Publicar’ ou ‘Atualizar’.

Se você visualizar seu site no celular ou desktop, agora você deverá ver um botão Pular para Receita no topo do conteúdo do seu blog após o título da postagem.

Dicas Bônus para Melhorar a Experiência do Usuário do Seu Blog de Culinária

Além do botão Ir para a Receita, existem outros elementos de design que você pode usar para tornar seu blog de culinária mais fácil de usar. Aqui estão algumas melhorias de alto impacto:

Perguntas Frequentes Sobre Botões do WordPress

Aqui estão algumas perguntas que nossos leitores fizeram frequentemente sobre como adicionar botões no WordPress:

Como adiciono links a botões no WordPress?

Para adicionar um link, selecione o bloco Botões dentro do editor do WordPress. Clique no ícone de link na barra de ferramentas que aparece acima do botão e, em seguida, cole seu URL de destino no campo.

Como adiciono um botão "Ir para o Topo" no WordPress?

O método mais fácil é instalar um plugin como o WPFront Scroll Top. Uma vez ativado, ele adiciona automaticamente um botão que aparece quando um usuário rola para baixo, permitindo que ele retorne rapidamente ao topo da página.

Para começar, veja nosso tutorial sobre como adicionar um efeito de rolagem para o topo no WordPress.

Como adiciono um botão de seguir em um blog do WordPress?

Você pode adicionar botões de seguir usando o bloco Ícones Sociais integrado no editor de blocos. Simplesmente pesquise por "Ícones Sociais", adicione o bloco e clique no ícone de "mais" para selecionar quais plataformas de mídia social você deseja vincular.

Para mais informações, confira nosso guia sobre como adicionar um botão de seguir do Facebook para autores no WordPress.

Como coloco um popup no WordPress?

Recomendamos o uso do OptinMonster para adicionar popups. Ele permite que você crie popups personalizados usando um construtor de arrastar e soltar e controle exatamente quando eles aparecem, como quando um usuário está prestes a sair do seu site.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar um botão 'Pular para a Receita' no WordPress. Você também pode querer conferir nosso guia sobre elementos chave de design para um site WordPress eficaz e como configurar pedidos de comida online no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.