Como adicionar migalhas de pão no WordPress

Breadcrumbs podem ajudá-lo a melhorar a navegação do seu site, então se você está procurando uma maneira fácil de habilitá-los em seu site, você veio ao lugar certo. Neste guia, mostraremos como adicionar breadcrumbs no WordPress usando plugins e opções de tema.

O que são farinhas de pão?

Breadcrumbs são links que aparecem no topo da sua página. Estes são links interconectados que constituem uma parte importante da navegação do seu site. Esses links são organizados hierarquicamente, de modo que seus usuários não apenas saberão em que página estão, mas também saberão em quais categorias de páginas estão. Por exemplo, em nosso site, você pode ver as migalhas de pão no topo desta página.

Breadcrumbs ajudam seus usuários a visualizar a hierarquia da página em que estão navegando em seu site e obter links conectados para voltar às páginas superiores ou à página inicial diretamente.

Por que adicionar Breadcrumbs no WordPress?

Adicionar breadcrumbs é uma excelente opção para quem deseja melhorar a navegação do seu site . Como funciona essencialmente como uma trilha, seus usuários podem usá-lo facilmente para voltar às páginas anteriores e acompanhar em qual página estão. Isso leva a mais engajamento e mantém os visitantes informados sobre a categoria das páginas que eles visualizam.

Além disso, adicionar migalhas de pão é essencial se você tiver um site grande. Se você estiver executando uma loja de comércio eletrônico ou tiver seu conteúdo distribuído em diferentes categorias, é essencial ativar as migalhas de pão. Isso faz com que seus clientes saibam quais produtos estão em cada categoria e quais categorias eles podem retornar para ver mais produtos semelhantes.

Além disso, habilitar breadcrumbs também melhora o SEO do seu site, pois torna mais fácil para os rastreadores do mecanismo de pesquisa percorrer seus links interconectados.

Agora que entendemos melhor o que são e como podem beneficiá-lo, vamos ver como você pode adicionar breadcrumbs ao seu site WordPress e os diferentes métodos que você pode usar para fazer isso.

Como adicionar Breadcrumbs no WordPress

Existem alguns métodos diferentes para adicionar migalhas de pão ao seu site WordPress:

1. Usando Yoast SEO
2. Com plugins de breadcrumb dedicados
3. Do seu tema

Vamos dar uma olhada em cada método.

NOTA : Alguns desses métodos exigem que você modifique alguns arquivos principais. Mesmo que os snippets sejam muito simples, para evitar problemas, recomendamos que você use um tema filho. Isso torna o processo de fazer alterações em seu tema muito mais seguro e não reverterá as alterações quando você atualizar seu tema. Você pode criar um tema filho ou usar qualquer um desses plugins dedicados.

1) Como adicionar Breadcrumbs no WordPress com Yoast SEO

YoastSEO é um dos plugins mais populares e é uma solução completa de SEO para WordPress. Ele também vem com uma opção dedicada para habilitar breadcrumbs e opções avançadas para personalizá-lo ainda mais. Isso inclui alterar separadores de links, texto âncora para a página inicial, trilhas para a página 404, opções adicionais de personalização e até mesmo mostrar ou ocultar taxonomias e arquivos de tipo de conteúdo em suas trilhas.

Para acessar e habilitar as configurações de breadcrumbs no Yoast, vá para Yoast SEO > Search Appearance no seu painel de administração do WordPress (assumindo, é claro, que você já tenha o plugin Yoast SEO instalado e ativado).

Em seguida, vá para a guia Breadcrumbs e você verá as opções de breadcrumbs em Yoast SEO. Role para baixo, ative a opção que diz Enable BreadCrumbs for your theme e salve as alterações.

Depois disso, você precisa adicionar uma pequena linha de código ao seu arquivo headers.php para que seu arquivo de tema chame os breadcrumbs Yoast SEO no cabeçalho do seu site.

Para fazer isso, abra seu editor de temas clicando em Aparência > Editor de temas . Em seguida, use a lista de arquivos de tema à direita e selecione Cabeçalho do tema.

Agora, use o editor e cole o seguinte trecho no final do arquivo header.php .

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

Em seguida, clique em Atualizar Arquivo e pronto! Agora você deve ser capaz de usar suas migalhas de pão Yoast SEO.

Lembre-se de verificar as opções adicionais na guia breadcrumbs para personalizar suas breadcrumbs da maneira que desejar. O Yoast permite que você faça tudo a partir daí e é compatível com a maioria dos temas do WooCommerce.

2) Como adicionar Breadcrumbs no WordPress com Plugins dedicados

Alternativamente, se você não quiser usar o Yoast SEO, você pode usar plugins de terceiros. Nesta seção, veremos alguns plugins excelentes que você pode usar para adicionar breadcrumbs ao seu site WordPress. Todos esses plugins são gratuitos , então você pode testá-los e escolher o certo para você sem gastar um centavo.

1) Pão flexível

O Flexy BreadCrumb permite que você ative facilmente breadcrumbs em seu site usando seu código de acesso dedicado. Basta instalar e ativar o plug-in e usar seu código de acesso em qualquer parte do seu site: páginas, blogs, widgets, cabeçalhos ou rodapés. Dessa forma, você pode adicionar suas migalhas de pão a qualquer seção do seu site, para que elas se encaixem no restante do seu conteúdo.

Este plug-in gratuito também vem com opções de personalização dedicadas para que você possa alterar os separadores de trilha de navegação, texto inicial e final, cores, opções de cores para links e muito mais.

Características principais

• Shortcode dedicado para adicionar breadcrumbs a qualquer parte do seu site
• Toneladas de opções de personalização
• Muito amigável e fácil de usar

2) Breadcrumb NavXT

Breadcrumb NavXT é uma solução completa e robusta para permitir breadcrumbs totalmente funcionais. É um dos plugins de breadcrumb mais populares e por boas razões. Você pode habilitar facilmente seus breadcrumbs usando um widget dedicado ou chamando sua função diretamente em cabeçalhos, rodapés ou modelos de página específicos usando seus arquivos do WordPress.

O plug-in também vem com opções integradas para personalizar suas migalhas de pão, e o grande número de opções fornecidas é simplesmente surpreendente. Você pode configurar modelos separados para seus blogs, postagens e experimentar maneiras criativas de mostrar suas trilhas de pão de forma distinta em diferentes partes do seu site.

Características principais

• Extensa personalização de breadcrumbs e personalizações de modelos
• Widgets dedicados para habilitar breadcrumbs em qualquer lugar do seu site
• Recursos adicionais para os usuários adicionarem funções e filtros

3) Pegue a farinha de rosca

Catch BreadCrumb é um plug-in leve e bacana que permite adicionar navegação por migalhas de pão ao seu site. Você pode habilitar seus breadcrumbs rapidamente e levá-los adiante usando seu código de acesso dedicado e opções de personalização.

O Catch BreadCrumbs não é o mais completo quando se trata de recursos, mas seu pacote de opções bem projetado tem todos os recursos que você precisa sem ser esmagador, permitindo que até os usuários mais iniciantes configurem seus breadcrumbs em questão de minutos . Finalmente, você pode adicionar migalhas de pão elegantes e usar opções bacanas, como ocultar migalhas de pão em sua página inicial.

Características principais

• Leve e simples de usar
• Design responsivo com várias opções de personalização
• Opções para ocultar/mostrar breadcrumbs na página inicial ou em páginas específicas

Agora, vamos dar uma olhada em um desses plugins e ver como você pode ativá-los em seu site. Para esta demonstração, usaremos o Flexy BreadCrumbs , mas você pode usar qualquer outra ferramenta. A maioria das ferramentas é semelhante, portanto, você poderá seguir estas etapas para a maioria dos plug-ins sem problemas. No entanto, recomendamos que você tenha a documentação à mão para resolver quaisquer problemas que possa ter ao longo do caminho.

Adicione BreadCrumbs no WordPress com Flexy Breadcrumbs

Vamos começar instalando o plugin, então no seu painel de administração do WordPress, vá para Plugins > Adicionar Novo. Em seguida, use a barra de pesquisa no canto superior direito para procurar Flexy BreadCrumbs , clique em Instalar e ative-o .

Agora vamos ver como configurar e personalizar o plugin.

Usando o Shortcode Flexy BreadCrumbs e adicionando-o aos seus arquivos de tema

A maneira mais fácil de usar o Flexy BreadCrumbs é simplesmente usando seu shortcode:

 [flexy_breadcrumb]

Você pode adicionar esse código de acesso a qualquer blog, página ou widget para exibir suas migalhas de pão nele.

Por exemplo, se você deseja exibir breadcrumbs em um blog ou página de produto, basta adicionar este código de acesso a ele, conforme mostrado abaixo.

Por outro lado, se você quiser que seus breadcrumbs apareçam em todas as suas páginas e posts sem adicioná-los manualmente, você pode adicionar este shortcode aos seus arquivos de tema .

Para fazer isso, abra seu Editor de Temas clicando em Aparência > Editor de Temas , use a barra lateral Arquivos de Temas à direita e selecione seu arquivo header.php .

Agora, na parte inferior do arquivo, adicione o seguinte trecho:

 <?php
echo do_shortcode('[flexy_breadcrumb]');
?> 

Lembre-se de que, se você estiver usando outro plug-in de código de acesso, substituirá a seção [flexy_breadcrumb] do plug-in pelo código de acesso do seu plug-in.

Depois disso, clique em Atualizar arquivo e suas trilhas de navegação serão exibidas em seu site.

Mas e se você quiser personalizar suas migalhas de pão para se adequar ao seu site? Você pode fazer isso usando as opções do plugin. Basta clicar em Flexy Breadcrumb na barra lateral do WP Admin Dashboard e você verá todas as opções de personalização para alterar suas breadcrumbs. Isso inclui alterar o ícone inicial, o separador de trilha de navegação, a hierarquia de pós-tipo e até as configurações de tipografia.

3) Como adicionar BreadCrumbs no WordPress a partir do seu tema (ou removê-los)

Alguns temas vêm com suas próprias opções de breadcrumb dedicadas e geralmente você pode habilitá-los/desativá-los em suas opções de tema. Por exemplo, para o tema Elfo , podemos ir para as opções de tema acessando Aparência > Personalizar > Aba de opções de tema dedicado , que para nós é rotulado como Opções de tema de fadas . Uma vez lá, clicamos em Breadcrumbs e os habilitamos / desabilitamos com a alternância fornecida.

Alguns temas também vêm com opções adicionais para personalizar breadcrumbs para combinar com a aparência do seu site.

Bônus: Como desativar as migalhas de pão

Alguns temas vêm com breadcrumbs ativados por padrão, portanto, para desativá-los, você deve adicionar uma função aos arquivos do tema. Por exemplo, o Storefront vem com suas migalhas de pão dedicadas e você pode desativá-las usando o seguinte código:

 add_action( 'init', 'ql_remove_storefront_breadcrumbs' );
function ql_remove_storefront_breadcrumbs() {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Simplesmente adicione isso ao seu arquivo functions.php indo para Appearance > Theme Editors > functions.php .

Depois disso, lembre-se de atualizar o arquivo e pronto. Você removeu com sucesso as trilhas de navegação do seu site.

Conclusão

Em suma, o breadcrumbs pode ajudá-lo a melhorar a navegação do seu site e aprimorar a experiência do cliente.

Neste guia, vimos diferentes maneiras de adicionar migalhas de pão ao seu site WordPress :

• Usando as opções de breadcrumbs do Yoast SEO
• Com um plug-in dedicado
• Através das opções do seu tema (se tiver)

Além disso, mostramos como remover facilmente as trilhas de navegação do seu site com um snippet de código simples. Por fim, lembre-se de que pode ser necessário adicionar novamente o snippet de código para adicionar trilhas de navegação se alterar seu tema.

Para mais informações sobre como personalizar seu site e melhorar sua navegação, confira os seguintes tutoriais:

• Como editar breadcrumbs no WordPress
• Como organizar produtos WooCommerce por marca
• Como adicionar categorias de produtos WooCommerce ao menu

Você adicionou breadcrumbs ao seu site? Qual método você usou? Deixe-nos saber na seção de comentários abaixo!