Como adicionar Breadcrumbs ao WordPress para ajudar os usuários a navegar melhor no seu site

Publicados: 2019-11-20

Se você administra um site rico em conteúdo ou se está se perguntando como, este artigo o ajudará a aprender como adicionar migalhas de pão ao WordPress.

No conto de fadas alemão, “ João e Maria ”, o irmão e a irmã mais novos – ouvindo o plano de sua madrasta malvada de jogá-los na floresta para se defenderem – pegou uma fatia de pão e deixou um rastro de migalhas de pão que eles seguir de volta para casa uma vez que seus pais os abandonaram.

Na edição moderna; na web ou software ou documentos, breadcrumbs também são usados ​​para ajudar o leitor a encontrar o caminho de volta para casa. Ou pelo menos ser capaz de refazer seus passos com base em onde eles estão.

Breadcrumbs são elementos de navegação secundários em um site que mostram a localização de um visitante.

Você está lendo este artigo, porque você sabe o que é, mas caso você esteja se perguntando o que parece, você pode ir ao eBay e ver o deles.

Um comprador que visualiza um suporte de base de carregamento rápido sem fio Qi para Galaxy S9 + iPhone X XS Max, sabe facilmente onde eles estão e como obter as diferentes categorias em que seu produto está listado.

Nesse caso, há um link para a página inicial, depois um link para a categoria principal de um produto listado – Celulares e Acessórios, seguido de uma subcategoria – Acessórios para Celulares e outra subcategoria – Carregadores e Bases .

eBay

Por que adicionar migalhas de pão a um site WordPress?

Observando a estrutura do eBay acima, você pode ver como as migalhas de pão são excelentes para a experiência do usuário em sites em camadas ou hierárquicos. Um visitante sabe onde está a qualquer momento enquanto navega em um site. Se eles precisarem ir para a categoria pai onde o produto ou artigo que estão visualizando está listado, eles só precisarão clicar no link nas trilhas de navegação.

O que nos leva a outro benefício de adicionar breadcrumbs a um site WordPress, um usuário não precisa clicar no botão voltar de um navegador, apenas no breadcrumb.

Breadcrumbs permitem a descoberta de conteúdo em um site. Considere um visitante enviado para um artigo de um mecanismo de pesquisa ou um link em outro site. Quando um usuário lê o artigo, o breadcrumb oferece ao usuário mais opções para ir para uma categoria mais alta para visualizar conteúdo semelhante. Isso, como você pode imaginar, leva o usuário a passar mais tempo em um site, o que leva a taxas de rejeição reduzidas.

Os breadcrumbs não apenas ajudam os usuários a navegar em um site, mas também ajudam os mecanismos de pesquisa a navegar em um site.

Qualquer coisa que melhore a experiência do usuário, qualquer coisa que reduza as taxas de rejeição, qualquer coisa que permita que os bots dos mecanismos de pesquisa rastreiem e indexem facilmente um site, ajuda um site a ganhar elogios do mecanismo de pesquisa.

Como é, adicionar breadcrumbs ajuda um site com seus esforços de otimização de mecanismos de pesquisa.

Como adicionar migalhas de pão a um site WordPress?

A maioria dos temas modernos do WordPress e quase todos os temas de comércio eletrônico têm recursos de migalhas de pão por design.

Para adicionar breadcrumbs ao seu site com esse tema, basta ativar a opção, geralmente encontrada nas opções do tema. Consulte a documentação do seu tema ou os desenvolvedores do tema quando tiver dúvidas.

Ativar breadcrumbs modificando o tema

Se o seu tema não oferece suporte nativo a breadcrumbs, você pode adicioná-los facilmente usando plugins de breadcrumbs. Você também pode usar a maioria dos plugins SEO do WordPress, como o Yoast, para adicionar migalhas de pão ao seu site.

Para este artigo, adicionaremos breadcrumbs ao WordPress com um plugin WordPress gratuito – Breadcrumb NavXT

Passo 1: Instale o plugin Breadcrumb NavXT WordPress.

Breadcrumb NavXT gera breadcrumbs com base na localização de um usuário. As trilhas podem então ser personalizadas ao seu gosto.

Vá em frente e instale o Breadcrumb NavXT.

Se você não sabe como instalar plugins no WordPress, é fácil. Faça login no seu painel, role para baixo no menu esquerdo em Plugins, clique em Adicionar novo.

Digite o plugin que você deseja instalar – Breadcrumb NavXT – na caixa de pesquisa.

Em um ou dois segundos, os resultados retornarão. Agora, clique em Instalar agora , depois disso, aguarde mais um ou dois segundos e clique em Ativar .

Instale o Breadcrumb NavXT

Passo 2: Exibindo Breadcrumb NavXT Breadcrumbs em um site WordPress.

Você pode exibir as migalhas de pão de duas maneiras.

1. Usando o widget fornecido pelo Breadcrumb NavXT

Vá para o menu principal; Aparência > Widgets.

Encontre o Breadcrumb NavXT e arraste-o para a barra lateral que você deseja que seus breadcrumbs.

Exibir widget NavXT do Breadcrumb

Agora, vá para qualquer postagem ou página em que a barra lateral apareça e você verá suas migalhas de pão.

Veja breadcrumbs no widget

Se você quiser suas migalhas de pão em qualquer lugar, menos na barra lateral, como no exemplo do eBay, precisará sujar as mãos e modificar seu tema.

2. Modifique seu tema

Os arquivos que você pode precisar modificar são os; home.php, single.php, page.php. Você também pode modificar taxonomias e qualquer outro arquivo, desde que precise de migalhas de pão lá.

Mas, antes de fazer qualquer coisa, faça backup do seu site. Nosso próprio plug-in de backup WPVivid economizará tempo e dor de cabeça se as coisas saírem pela culatra.

Em seguida, recomendo fazer alterações em um tema filho. Temos um artigo que mostrará exatamente como criar um tema filho para o seu site WordPress.

Se você fez o acima, vá em frente e adicione o seguinte código às páginas que você deseja que suas trilhas de navegação sejam exibidas.

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

<?php if(function_exists('bcn_display')) { bcn_display(); }?>

</div>

Se você for exibi-lo em um artigo, o arquivo single.php é o que você modifica. Cole o código na tag do artigo.

Exibir breadcrumbs modificando o arquivo único do tema

Salve suas alterações e vá para seus artigos.

Suas migalhas de pão devem estar na área onde você colocou seu código.

Você pode ver que no meu caso eu tenho as migalhas de pão no topo do artigo.

Ver breadcrumbs no artigo

Se seus breadcrumbs não estiverem sendo exibidos corretamente, você precisará estilizá-los com algum CSS.

Breadcrumb NavXT usa a classe css .breadcrumbs (isso também pode depender do seu tema). Você pode modificar o código CSS do seu site ou usar o personalizador do WordPress para estilizar seus breadcrumbs.

 .Migalhas de pão {

cor: #000;

margem inferior: 20px;

}

Etapa 3: Personalizando as trilhas de navegação NavXT.

Se você precisar fazer modificações em suas migalhas de pão, poderá fazer isso no painel do WordPress.

Vá para a página de configurações do Breadcrumb NavXT. Você pode encontrá-lo no menu geral do WordPress – Configurações > Breadcrumb NavXT .

Personalizar trilhas de navegação NavXT

É isso, espero que você tenha adicionado migalhas de pão com sucesso ao seu site WordPress.

Não perca seus visitantes na selva do seu site. Adicione migalhas de pão ao seu site.

A seguir, você também pode aprender como adicionar a Pesquisa personalizada do Google ao WordPress para melhorar sua navegação no site.