Como exibir links de navegação em Breadcrumb no WordPress

Se estiver procurando uma maneira de facilitar a navegação no seu site WordPress, recomendamos adicionar links de migalhas de pão.

A navegação em breadcrumb informa aos usuários onde eles estão em um site em relação à página inicial. Essa trilha de migalhas de pão também é exibida nos resultados de pesquisa, o que faz com que seu site se destaque.

Usamos breadcrumbs em nossos próprios sites e descobrimos que esse recurso facilita a movimentação dos leitores pelas diferentes páginas. Neste artigo, mostraremos a você como exibir links de navegação de migalhas de pão no WordPress.

O que é a navegação em Breadcrumb e por que você precisa dela?

Navegação Breadcrumb é um termo usado para descrever um menu de navegação hierárquico apresentado como uma trilha de links. Geralmente é usado como uma navegação secundária que permite que os usuários subam na hierarquia de páginas do site.

Os links de navegação Breadcrumb são diferentes do sistema de menu de navegação padrão do WordPress.

A navegação Breadcrumb ajuda os usuários a navegar pelo seu site e ajuda os mecanismos de pesquisa a entender a estrutura e a hierarquia dos links em uma página da Web.

Se os breadcrumbs estiverem configurados da maneira correta, os mecanismos de pesquisa, como o Google, os exibirão junto com o título da página nos resultados de pesquisa. Isso dá ao seu site mais visibilidade nos resultados de pesquisa e aumenta a taxa de cliques.

Os métodos deste guia o ajudarão a configurar adequadamente os breadcrumbs usando a marcação de esquema. O esquema é um código de marcação inteligente que ajuda o Google a identificar suas migalhas de pão para que elas sejam exibidas nos resultados de pesquisa.

Dito isso, vamos dar uma olhada em como adicionar links de navegação breadcrumb no WordPress. Mostraremos dois métodos, e você poderá escolher o que funciona melhor para você:

Método 1: Adicionar navegação Breadcrumb no WordPress usando o All in One SEO (recomendado)

Esse método é mais fácil e recomendado para todos os usuários do WordPress.

Para esse método, usaremos o All in One SEO for WordPress, que é o melhor plugin de SEO para WordPress do mercado. Ele ajuda você a melhorar facilmente o SEO do WordPress sem nenhuma habilidade técnica. Ele também vem com um recurso de migalhas de pão fácil de usar.

Após a ativação, você será levado ao assistente de configuração do plug-in. Siga as instruções na tela para configurar o plug-in.

Precisa de ajuda com a configuração? Veja nosso tutorial passo a passo sobre como instalar e configurar o All in One SEO.

Em seguida, você precisa visitar a página All in One SEO ” General Settings (Configurações gerais do All in One SEO ) e alternar para a guia “Breadcrumbs” (Migalhas de pão).

A marcação de esquema de migalhas de pão é adicionada automaticamente pelo All in One SEO ao código do seu site para que os mecanismos de pesquisa possam encontrá-lo.

No entanto, se você também quiser exibir links de navegação de migalhas de pão em seu site, precisará ativar a opção “Enable Breadcrumbs” (Ativar migalhas de pão).

Alternar a alternância permite que você veja as diferentes configurações de exibição de migalhas de pão que podem ser usadas em seu site do WordPress.

Há quatro maneiras de exibir a trilha de navegação breadcrumb em seu site WordPress.

1. Adição de navegação Breadcrumb usando o código curto

O método de shortcode é fácil e permite que você exiba links de navegação de migalhas de pão em seus posts e páginas do WordPress ou páginas de produtos em sua loja on-line.

Basta editar o post, a página ou o produto e adicionar o seguinte shortcode no local em que deseja exibir a trilha de navegação do breadcrumb:

[aioseo_breadcrumbs]

Se você estiver usando o editor de blocos padrão, o shortcode será convertido automaticamente no bloco Shortcode.

Agora você pode salvar seu post ou página e visualizá-lo para ver o menu de navegação em forma de migalhas em ação.

Veja como ficou em nosso site de teste.

2. Adição de navegação Breadcrumb usando o bloco Gutenberg

Agora, se você não quiser usar a opção de código de acesso ou não se lembrar do código de acesso, poderá exibir a navegação de migalhas de pão usando o bloco AIOSEO – Breadcrumbs.

Basta editar o post ou a página em que você deseja exibir a navegação de migalhas de pão e adicionar o bloco AIOSEO – Breadcrumbs.

Em seguida, o plug-in carregará uma visualização ao vivo dos links de navegação do breadcrumb e a exibirá na área de conteúdo.

Não se esqueça de atualizar ou publicar suas alterações.

3. Adição de navegação Breadcrumb usando o widget

Os dois métodos acima exigem que você adicione um shortcode ou bloco em cada post ou página em que deseja exibir os links de navegação de localização atual.

E se você quisesse exibir breadcrumbs automaticamente para cada post ou página?

O widget AIOSEO Breadcrumbs permite que você faça isso facilmente.

Basta acessar a página Appearance ” Widgets e adicionar o bloco de widget AIOSEO – Breadcrumbs. Você pode adicioná-lo à barra lateral, ao rodapé ou a qualquer área de widget do seu site.

Você pode fornecer um título para o widget ou deixá-lo em branco, se preferir.

Não se esqueça de clicar no botão “Update” (Atualizar) para armazenar suas configurações.

Agora você pode acessar seu site e ver o menu de navegação em forma de migalhas de pão em todos os posts e páginas.

4. Adição de navegação Breadcrumb usando código

Esse método permite exibir links de navegação de migalhas de pão exatamente onde você deseja. No entanto, ele exige que você adicione código aos arquivos de tema do WordPress.

Se você ainda não tiver feito isso, não se esqueça de ver nosso artigo sobre como adicionar trechos de código no WordPress.

Primeiro, você precisa decidir onde exibir os links de breadcrumb. O local mais comum é abaixo do título individual do post, da página ou do produto.

Os temas do WordPress usam arquivos de modelo para exibir diferentes seções do seu site. Por exemplo, muitos temas usam um arquivo chamado content-single.php localizado dentro da pasta template-parts do seu tema.

Consulte nossa folha de dicas para saber quais arquivos devem ser editados em um tema do WordPress.

Depois disso, você precisa editar o arquivo do tema usando um cliente FTP. Consulte nosso guia sobre como usar o FTP para fazer upload de arquivos no WordPress para obter instruções.

Em seguida, insira o código a seguir no local em que deseja exibir os links de navegação do breadcrumb:

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Não se esqueça de salvar as alterações e fazer o upload do arquivo de volta para o seu site.

Agora você pode visitar seu site para ver os links de navegação em ação.

Alterar a forma como os links de navegação são exibidos no AIOSEO

Por padrão, o All in One SEO usa um modelo para exibir os links de navegação do breadcrumb. Ele contém um link para a página inicial, a categoria, a página principal e o título da postagem ou da página, separados pelo símbolo “”.

Você pode alterar isso visitando a página All in One SEO ” Configurações gerais e indo até a guia “Breadcrumbs”. Em seguida, basta rolar para baixo até a seção Breadcrumb Settings (Configurações de migalhas de pão).

A partir daí, você pode alterar o separador, mostrar ou ocultar o link da página inicial, adicionar um prefixo e muito mais.

Quando terminar, não se esqueça de armazenar suas configurações.

Método 2: Adicionar navegação em Breadcrumb com o Breadcrumb NavXT

Esse método pode ser usado com qualquer outro plugin de SEO do WordPress. É fácil de usar se você tiver um tema compatível, mas, se não tiver, precisará editar os arquivos do tema para exibir os links de navegação do breadcrumb.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Breadcrumb NavXT. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Settings ” Breadcrumb NavXT para definir as configurações do plug-in.

As configurações padrão devem funcionar para a maioria dos sites. No entanto, você pode personalizar as configurações conforme necessário.

A página de configurações é dividida em diferentes seções. Na guia de configurações gerais, você pode alterar o estilo e as configurações dos breadcrumbs.

Você também notará que esses modelos de link usam a marcação Schema.org na tag de link.

A guia Post Types (Tipos de post) nas configurações do plug-in permite que você configure links de breadcrumb para posts, páginas e quaisquer tipos de post personalizados.

Você pode escolher como deseja exibir sua hierarquia de posts. Por padrão, o plug-in usará a hierarquia “Título do site > Categoria > Título do post”.

Você pode substituir categorias por tags, datas ou post pai e alterar o separador.

As guias Taxonomias e Diversos têm modelos semelhantes para os links de navegação de localização atual.

Não se esqueça de salvar suas alterações quando terminar.

O Breadcrumb NavXT oferece várias maneiras de exibir links de navegação em forma de migalhas de pão em seu site.

1. Exibir navegação em Breadcrumb com suporte a temas

Alguns dos temas mais populares do WordPress vêm com uma opção incorporada para exibir a navegação em breadcrumb, escolhendo Breadcrumb NavXT ou seu plug-in de SEO do WordPress como a fonte.

Por exemplo, se estiver usando o Astra, vá para a página Appearance ” Customize (Aparência ” Personalizar ) e clique no menu “Breadcrumbs” (Migalhas de pão).

A partir daí, você escolherá onde deseja que os breadcrumbs sejam exibidos no menu suspenso “Header Position” (Posição do cabeçalho).

Em “Breadcrumb Source”, você precisará escolher “Breadcrumb NavXT”.

Se estiver visualizando um único post ou página, você verá uma visualização ao vivo dos links de navegação do breadcrumb.

Não se esqueça de clicar no botão “Publicar” para salvar suas alterações.

2. Exibir links de navegação com o bloco de trilha Breadcrumb

Você também pode exibir os links de navegação de breadcrumbs usando o bloco Breadcrumb Trail.

Basta acessar o editor de conteúdo do WordPress e adicionar o bloco Breadcrumb Trail onde você deseja exibir os links de navegação.

Em seguida, você pode atualizar ou publicar seu conteúdo.

Depois disso, visite seu site para ver os links de navegação em ação.

3. Adição de navegação Breadcrumbs usando um widget

O plug-in também fornece um widget que você pode usar para exibir a navegação por breadcrumb na barra lateral ou em qualquer área preparada para widgets.

Primeiro, vá para a página Appearance ” Widgets e adicione o bloco de widgets “Breadcrumb Trail” à área de widgets do seu site, como a barra lateral ou o rodapé.

As configurações padrão do widget funcionariam para a maioria dos sites, mas você pode alterá-las, se necessário. Por exemplo, talvez você queira ocultar a trilha na página inicial.

Não se esqueça de clicar no botão “Update” (Atualizar) para armazenar as configurações do widget.

4. Adição de navegação Breadcrumb usando código

O plug-in também oferece um método de código para exibir links de navegação de breadcrumb para usuários avançados.

Primeiro, você precisa se conectar ao seu site WordPress usando um cliente FTP. Depois disso, navegue até a pasta do tema atual do WordPress, localizada no diretório /wp-content/themes/.

Os temas do WordPress usam arquivos de modelo para exibir diferentes seções do seu site. Por exemplo, muitos temas usam um arquivo chamado content-single.php localizado dentro da pasta template-parts do seu tema.

Consulte nossa folha de dicas para saber quais arquivos devem ser editados em um tema do WordPress.

Abra o arquivo de modelo para editá-lo e, em seguida, coloque o seguinte código onde deseja exibir a trilha de migalhas de pão:

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

Não se esqueça de salvar as alterações e fazer o upload do arquivo de volta para o seu site.

Agora você pode visitar seu site para ver a trilha de links de navegação em ação.

Tutorial em vídeo

Esperamos que este artigo tenha ajudado você a aprender como exibir links de navegação de breadcrumb no WordPress. Talvez você também queira ver nosso guia sobre como mostrar menus diferentes para usuários conectados no WordPress ou como adicionar um mega menu ao seu site WordPress.

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