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?

Uma das reclamações mais comuns que vimos em blogs de culinária é que os leitores precisam rolar por longas histórias e anúncios antes de chegar à receita real.

Embora essas histórias ajudem com SEO e monetização, e muitos leitores fiéis gostem do toque pessoal, nem todo mundo tem tempo para ler tudo.

Pense nisso: alguém pode estar no supermercado verificando ingredientes, ou em sua cozinha pronto para começar a cozinhar. Eles só querem acesso rápido às instruções da receita.

É aí que um botão 'Ir para a Receita' é útil. Ele oferece aos visitantes apressados uma maneira rápida de pular para a receita, permitindo que você mantenha o estilo de contar histórias e a estratégia de monetização do seu blog.

Dessa forma, você mantém ambos os tipos de leitores felizes – aqueles que gostam do seu conteúdo e aqueles que precisam apenas da receita rapidamente.

Adicionar este botão pode melhorar a experiência do usuário em seu site e potencialmente manter os visitantes engajados por mais tempo, aumentando suas visualizações de página e reduzindo as taxas de rejeição.

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 para Adicionar um Botão Pular para a Receita (Recomendado)
• Método 2: Use Código Personalizado para Adicionar um Botão Pular para a Receita (Grátis)
• Dicas Bônus para Melhorar a Experiência do Usuário do Seu Blog de Culinária

Método 1: Use o WP Tasty 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.

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 WP Tasty permite que você torne suas receitas imprimíveis e as converta na 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 WP Tasty e como ele pode beneficiar seu blog, certifique-se de conferir nossa análise completa do plugin.

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 WP Tasty, você primeiro precisa comprar um plano pago. Você pode optar pelo WP Tasty All Access Bundle ou pelo plugin WP Tasty 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 WP Tasty 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 é um pouco mais complicado, especialmente para iniciantes.

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 em Todas as Postagens de Receitas

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, a função chamada has_recipe_anchor, verifica se há uma tag de título (H1 a H6) em sua postagem do blog que tenha uma âncora definida como ‘recipe’. A função preg_match procura em seu texto por esse padrão específico.

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

Se a função has_recipe_anchor da etapa anterior encontrou um título com a âncora da receita, ela cria o código HTML para o botão de salto. Em seguida, insere esse código bem antes do conteúdo da sua postagem do blog.

A última linha de código, add_filter('the_content', 'add_jump_to_recipe_button');, essencialmente diz ao WordPress para executar a função add_jump_to_recipe_button sempre que ele recuperar o conteúdo de uma 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 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 em background-color (para a cor do botão), color (para o texto) e background-color sob .jump-to-recipe-button:hover (para a cor do botão quando o cursor paira sobre o botão).

Depois de inserir o código, role para baixo até a seção Inserção e selecione 'Inserir Automaticamente' como Método de Inserção. Em seguida, escolha 'Rodapé do Site Inteiro' 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 receitas. Em seguida, na barra lateral de configurações do Bloco, abra o menu ‘Avançado’ e digite ‘receita’ no campo Âncora HTML.

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 de um botão Pular para a Receita, existem outros elementos de design do WordPress que você pode usar para aprimorar a experiência do usuário em seu blog de culinária.

Por exemplo, destacar texto em suas postagens pode ser uma ótima maneira de chamar a atenção para informações importantes ou dicas de culinária. Isso pode incluir ingredientes específicos, tempos de cozimento ou substituições alternativas.

Notas de rodapé são outra ferramenta útil. Elas permitem que você elabore sobre um passo específico da receita ou ingrediente sem interromper o fluxo de suas instruções principais.

Muitos usuários navegarão em suas receitas de seus telefones ou tablets. Um design responsivo para dispositivos móveis garante que seu conteúdo seja formatado corretamente e fácil de ler em vários tamanhos de tela.

Finalmente, links de navegação de breadcrumb podem melhorar a navegação do site. Esses pequenos links na parte superior da página mostram aos usuários sua localização atual na hierarquia do seu site. Isso facilita para eles encontrarem o caminho de volta para seções anteriores ou navegarem por receitas relacionadas.

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.