Como adicionar migalhas de pão ao seu site WordPress

O termo “breadcrumbs” refere-se a uma ferramenta de navegação de site eficiente que (como Hansel e Gretel nos ensinaram) se destina a ajudar a rastrear os passos de alguém até a “casa” (ou homepage) de um site. Eles permitem que os usuários vejam como a página atual se encaixa em toda a estrutura do site, fornecendo uma faixa embutida de links (ou rótulos) que levam de volta à página inicial.

Página de produto da Home Depot com breadcrumbs

As migalhas de pão são, na verdade, mais importantes para o seu site WordPress do que você imagina. Eles não apenas melhoram a experiência do usuário, mas também podem dar ao seu site um aumento nas classificações de pesquisa. O Google gosta desse elemento estrutural em um site, e os visitantes terão uma ajuda crucial na navegação ao se deparar com uma de suas páginas organicamente (reduzindo sua taxa de rejeição).

Você pensaria que adicionar tal sistema integrado de nativação ao seu site seria difícil, mas na verdade é muito simples com o uso de um plugin. Na verdade, se você estiver usando o plugin Yoast SEO, terá uma vantagem inicial porque a funcionalidade de breadcrumbs já está incorporada ao Yoast! E adicionar migalhas de pão por meio do Yoast é definitivamente um dos métodos preferidos por aí. Além do Yoast SEO, o plugin Breadcrumb NavXT é outra ótima opção que é altamente personalizável e também funciona bem com nosso próprio Divi Theme.

Inscreva-se no nosso canal no Youtube

Como adicionar breadcrumbs ao seu site WordPress usando Yoast

Para adicionar migalhas de pão ao seu site WordPress usando Yoast SEO, você precisará seguir três etapas simples:

• Instalar e ativar o plugin Yoast SEO
• Adicionando o snippet de código Breadcrumbs ao seu tema WordPress
• Ativar / configurar breadcrumbs o Yoast Breadcrumbs nas configurações do plugin

Instale e ative o plugin Yoast SEO

Para instalar o plugin Yoast SEO, vá para o painel do WordPress e navegue até Plugins> Adicionar novo. Em seguida, procure o repositório do WordPress para “yoast”. Ao ver o plugin Yoast SEO, clique para instalar e ativar o plugin.

Adicione o trecho de código breadcrumbs ao seu tema filho do WordPress

Em seguida, precisamos adicionar um pequeno trecho de código aos arquivos de tema do WordPress. Portanto, se ainda não o fez, é uma boa ideia criar um tema filho. Para este exemplo, vou mostrar como adicionar o trecho de código breadcrumbs a um tema padrão do WordPress TwentyNineteen. Você pode adicionar o código a qualquer arquivo / modelo de tema, mas na maioria das vezes, você desejará adicioná-lo ao seu arquivo single.php (para aparecer em todos os posts), arquivo page.php (para aparecer em todas as páginas ) ou para o arquivo header.php (para aparecer em todo o site).

Para este exemplo, vou adicionar o código breadcrumbs ao arquivo header.php do meu tema filho. Depois de copiar o arquivo header.php do tema pai, abra para editar o arquivo em um editor de código de sua escolha.

Então, na parte inferior do arquivo header.php, adicione o seguinte snippet php fornecido pelo Yoast para ativar a funcionalidade Breadcrumbs:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Isso exibirá breadcrumbs diretamente sob o cabeçalho de todas as páginas, um posicionamento comum para breadcrumbs.

Habilite e configure o Yoast Breadcrumbs nas configurações do plugin

Uma vez que o trecho de código foi adicionado ao seu tema WordPress Child, tudo o que você precisa fazer é ativar o Breadcrumbs nas configurações do plug-in Yoast SEO. Para fazer isso, vá para o painel do WordPress e navegue até SEO> Aparência da pesquisa e clique na guia Breadcrumbs. Nas configurações de breadcrumbs, certifique-se de habilitar breadcrumbs alternando a opção para “habilitado”. Em seguida, você pode definir as configurações de breadcrumb de acordo com suas necessidades. Você também pode escolher uma taxonomia para mostrar em migalhas de pão para sua postagem. Para este exemplo, vou definir minhas postagens para mostrar categorias na localização atual.

Agora, vamos ver como fica a localização atual em uma das postagens que criei no tema TwentyNineteen.

Esta é a aparência da postagem antes de ativar a localização atual.

Esta é a aparência da postagem após ativar a localização atual. Este exemplo de postagem em particular tem uma categoria (“WordPress”) e uma categoria pai (“Web Design”) para mostrar a taxonomia da categoria da localização atual que escolhi nas configurações de localização atual.

Pode ser necessário ajustar o estilo de sua localização atual usando algum CSS externo. Para fazer isso, você pode usar o CSS ID “breadcrumbs” que foi incluído no código php. Abra o arquivo style.css do seu tema filho (ou você pode adicioná-lo no personalizador de temas em CSS adicional) e adicionar o seguinte:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

Para o tema TwentyNineteen, posso querer combinar a margem do texto do meu cabeçalho adicionando o seguinte CSS personalizado:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Se quiser ter mais controle sobre a localização específica de sua localização atual, você também pode usar o seguinte código de acesso para postagens ou páginas individuais.

[wpseo_breadcrumb]

Adicionando breadcrumbs ao seu site WordPress usando Breadcrumb NavXT

Se você não quiser instalar o Yoast SEO por algum motivo ou se estiver procurando por outra opção simples, o plugin Breadcrumb NavXT é uma excelente escolha.

Para instalar o plug-in, vá para o painel do WordPress e navegue até Plug-ins> Adicionar novo. Em seguida, pesquise no repositório do WordPress por “breadcrumb navxt”. Depois de ver o plug-in, clique para instalá-lo e ativá-lo.

Para chamar os breadcrumbs para que eles sejam exibidos em seu site, você pode usar o widget integrado Breadcrumb NavXT fornecido na página de widgets. Isso permitirá que você arraste o widget para as várias áreas de widget fornecidas pelo seu tema. Para fazer isso, vá para o painel do WordPress e navegue até Aparência> Widgets. Em seguida, arraste o widget para a área de widgets ou de sua escolha e atualize as configurações do widget.

Para este exemplo, estou usando o tema Divi para exibir as migalhas de pão na parte superior da minha barra lateral. Aqui está o que parece em uma postagem.

Semelhante ao exemplo do Yoast Breadcrumb, você também pode chamar a trilha de navegação do seu site adicionando o código necessário ao seu tema filho. Aqui está o código que eles fornecem que é compatível com o schema.org breadcrumblist:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Como estou usando o tema Divi para este exemplo, adicionarei o código ao arquivo Single.php do meu tema Divi Child logo acima da tag do artigo. Isso exibirá as migalhas de pão no topo de todas as minhas postagens.

Esta é a aparência de uma postagem após adicionar o código.

Configurando o Breadcrumbs usando as configurações do plugin

O plugin Breadcrumb NavXT tem algumas opções poderosas para configurar suas breadcrumbs. Você pode personalizar todo o modelo de sua localização atual para diferentes taxonomias e muito mais. Você pode obter acesso a essas configurações no painel do WordPress navegando em Configurações> Breadcrumb NavXT.

Estilizando as migalhas de pão

Se quiser definir o estilo das trilhas de navegação, você pode direcionar a classe chamada “trilhas de navegação” que está incluída no código.

Basta adicionar o seguinte CSS ao arquivo style.css do tema filho ou ao CSS adicional do personalizador de tema:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Se desejar usar o widget de localização atual com o tema Divi, você também pode usar o módulo da barra lateral do Divi para adicionar estilo à localização atual no Divi Builder.

Pensamentos finais

Breadcrumbs são uma parte importante de um site, tanto para usabilidade quanto para SEO. Portanto, se você está pensando em adicionar breadcrumbs ao seu site WordPress, sugiro que comece com os métodos fornecidos pelos plug-ins mencionados neste artigo (Yoast SEO e Breadcrumb NavXT). Faz mais sentido usar o Yoast breadcrumbs se você já está aproveitando o plugin de SEO deles, pois ele já está à sua disposição. No entanto, o Breadcrumb NavXT também é uma opção altamente personalizável. Claro, você pode ter que acessar seus arquivos de tema, mas em suma, o processo é simples. Espero que isso ajude a aliviar a dor de obter migalhas de pão em seu próprio site WordPress.

Estou ansioso para ouvir de você nos comentários.

Saúde!