Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja exibir links de navegação em forma de migalhas de pão em seu site WordPress?

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.

Neste artigo, mostraremos a você como exibir links de navegação de migalhas de pão no WordPress.

How to display breadcrumbs navigation in 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.

Navigational links preview in WPBeginner

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

A finalidade da navegação em breadcrumb é ajudar os usuários a navegar pelo seu site. Ela também 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.

Breadcrumb navigation links in search results

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ê:

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito, continue lendo.

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.

Observação: há também uma versão gratuita do All in One SEO disponível com recursos limitados, incluindo breadcrumbs. No entanto, recomendamos fazer upgrade para o plug-in pago para ter acesso a recursos premium, como assistente de links, sitemaps avançados e muito mais.

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.

All in One SEO setup

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).

Enable breadcrumbs in AIOSEO

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.

Show breadcrumbs on website options

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 em 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.

Add shortcode for breadcrumbs

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.

Preview of shortcode breadcrumbs navigational links

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.

AIOSEO breadcrumbs block

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.

AIOSEO breadcrumbs block preview

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.

Add AIOSEO breadcrumbs to widget

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.

Enter breadcrumbs widget title

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 deseja exibir os links de breadcrumb. O local mais comum para exibir links de breadcrumb é 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.

Preview of  breadcrumbs navigational links

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).

AIOSEO breadcrumbs settings

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.

Breadcrumbs NavXT settings

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.

Post types breadcrumbs settings

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 as categorias por tags, datas ou post pai e alterar o separador.

Choose post hierarchy

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”.

Adding breadcrumbs with theme customizer

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.

Add breadcrumb trail block

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.

Breadcrumb trail preview

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é.

Add breadcrumb trail widget

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.

Breadcrumb trail preview

Esperamos que este artigo tenha ajudado você a aprender como exibir links de navegação em breadcrumb no WordPress. Talvez você também queira ver nosso guia sobre como obter mais tráfego para seu site WordPress ou nosso mostruário dos melhores registradores de nomes de domínio.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

36 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Steven Jæger says

    I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.

    My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.

    • WPBeginner Support says

      You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.

      Administrador

  3. Elizabeth Morgan says

    I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:

    “Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.

    syntax error, unexpected ‘<', expecting end of file"

    What do I do about this?

  4. Andres says

    Hi WPBeginner,

    Amazing post.

    I wonder the following.

    How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.

    I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.

    Thanks a lot for your time.

  5. Manish Ransubhe says

    Hello, I am not using any plugin and I have never enabled Breadcrumbs.

    Why my search Result showing breadcrumbs help me to disable this

    Thank you

    • Ravi Singh says

      same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.

  6. Dua Centre says

    I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?

  7. Walter says

    Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.

  8. Sameer says

    Hello,

    I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.

    Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?

  9. Joshua says

    Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.

    Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.

  10. juan luis says

    Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?

  11. Nate Balcom says

    By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.

  12. Nate Balcom says

    Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.

  13. Anna says

    My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.

    I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?

  14. Abiodun says

    I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO

      • Abiodun says

        It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?

        • Michelle says

          Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.