Apesar do nome mundano, breadcrumbs são ferramentas muito úteis para melhorar a experiência do usuário (UX) e Otimização de mecanismos de pesquisa (SEO). Habilitá-los é simples com a ajuda de um plugin ou um pequeno código personalizado.

Nesta postagem, vamos apresentar a você Breadcrumbs do WordPress e explicar como eles funcionam. Em seguida, mostraremos como adicioná-los ao seu site, estilizá-los e removê-los. Há muito o que abordar, então vamos começar!

O que são breadcrumbs do WordPress?

Breadcrumbs, conforme se relacionam com o WordPress (ou qualquer site), são links de navegação que aparecem na parte superior de uma postagem ou página. Eles mostram aos usuários o categorias de nível superior que os levou ao conteúdo que estão visualizando no momento e também permitem uma fácil navegação de volta às páginas visualizadas anteriormente.

Por exemplo, considere o seguinte exemplo:

kinsta breadcrumbs example

Breadcrumbs no blog Kinsta

No lado esquerdo, logo abaixo do cabeçalho, você pode ver as palavras Home> Centro de Recursos> Blog Kinsta. Cada um é um link de volta para sua página correspondente da postagem atual. Isso permite que os leitores no nosso blog para navegar para qualquer uma dessas áreas-chave de conteúdo com um único clique, em vez de ter que usar o De volta botão, o cardápio, ou o recurso de pesquisa.

É assim que breadcrumbs tem seu nome: eles criam uma trilha que leva os usuários de volta para "casa". Eles são particularmente úteis para sites como blogs e Lojas online, onde os visitantes podem querer alternar entre postagens individuais, páginas de produtose arquivos de categorias onde podem encontrar conteúdo semelhante.

Como funcionam os breadcrumbs do WordPress?

Existem três tipos diferentes de breadcrumbs do WordPress. Todos incorporam links de navegação conforme descrito acima, mas de maneiras ligeiramente diferentes:

  • Baseado em hierarquia: Essas localizações atuais mostram aos usuários onde eles estão na estrutura do seu site, como no exemplo acima.
  • Baseado em atributos: Usados principalmente em sites de comércio eletrônico, esses breadcrumbs exibem os atributos que o usuário pesquisou que o levou ao produto que está visualizando no momento.
  • Baseado em história: Conforme os usuários se movem de uma página para outra em seu site, essas migalhas de pão o levarão de volta ao caminho de onde vieram.

Cada variedade de migalhas de pão é útil para finalidades diferentes. No entanto, todos podem melhorar a navegação e por extensão UX.

Eles também são benéfico para fins de SEO. A localização atual mostra claramente as relações entre diferentes partes do conteúdo em seu site. Dessa forma, eles tornam mais fácil para os rastreadores do mecanismo de pesquisa ou 'bots' entender como o seu site está estruturado.

Isso permite que esses bots indexem as páginas do seu site com mais precisão. Os motores de busca também podem exibir o seu breadcrumbs nas listas de resultados, para que os usuários possam ver conteúdo adicional em seu site relacionado às informações que procuram.

Como adicionar breadcrumbs do WordPress ao seu site (4 métodos)

Quer você seja um gênio da codificação ou um iniciante em WordPress, pode adicionar migalhas de pão ao seu site de forma rápida e fácil em apenas algumas etapas. Aqui estão quatro maneiras diferentes de realizar essa tarefa.

1. Habilite a localização atual no Yoast SEO

Yoast SEO é um plugin popular que ajuda os usuários do WordPress a aproximar suas classificações em mecanismos de pesquisa e otimizar seu conteúdo de acordo. Ele também inclui alguns outros recursos para aumentar a visibilidade do seu site, incluindo breadcrumbs.

Se ainda não o fez, instale e ative o plug-in no seu Painel WordPress:

install yoast seo

Instalando o plugin Yoast SEO

Em seguida, você precisará adicionar este trecho de código para o seu tema:


 ','

'); }?>

Especificamente, onde você adiciona, depende de você. Se quiser usar trilhas em suas postagens de blog, você pode adicioná-lo ao seu single.php arquivo de modelo.

Como alternativa, cole-o no final do seu header.php arquivo adicionará breadcrumbs a todo o seu site:

edit header php

Adicionando o código de ativação Yoast breadcrumb

Lembre-se de que as atualizações futuras do tema podem substituir esse código personalizado. Você precisará entrar em contato com o desenvolvedor do tema para obter informações sobre como evitar este problema ou simplesmente use um tema infantil. Assim que o snippet estiver no lugar, navegue até SEO> Aparência da pesquisa> Breadcrumbs no seu painel:

yoast breadcrumbs settings

As configurações de localização atual do Yoast SEO

Alterne o Configurações de breadcrumbs troque para ativado. Em seguida, visualize seu site:

live breadcrumbs example

Pão ralado ao vivo adicionado com Yoast SEO

Agora você deve ver a localização atual nas partes relevantes do seu site, com base em onde você adicionou o snippet de código.

2. Habilite breadcrumbs com um plug-in do WordPress Breadcrumbs

Adicionar breadcrumbs com Yoast é especialmente conveniente se você já estiver usando esse plugin para fins de SEO. No entanto, se você preferir um plugin diferente para otimizando seu conteúdo, a abordagem acima é menos útil. Felizmente, existem vários outros plug-ins disponíveis que são voltados especificamente para adicionar migalhas de pão ao WordPress.

Breadcrumb NavXT

O plugin mais popular para adicionar migalhas de pão ao WordPress além do Yoast é Breadcrumb NavXT:

breadcrumb navxt

O plugin Breadcrumb NavXT

Este plug-in fornece um widget de breadcrumbs que você pode adicionar a qualquer área de widget que seu tema fornecer, como uma barra lateral ou rodapé. É altamente personalizável, permitindo que você escolha quais páginas e categorias exibir na trilha. Breadcrumbs NavXT também inclui marcação de esquema para melhorar o SEO.

Para adicionar breadcrumbs usando este plugin, navegue até Aparência> Widgets. Você verá um novo Breadcrumb NavXT widget, que você deseja arrastar para a área do widget onde deseja que apareça:

breadcrumb navxt widget

Adicionando o widget Breadcrumb NavXT à área de rodapé

Clique na seta suspensa para abrir as configurações do widget e preencha os campos necessários:

breadcrumb navxt fields

As opções do widget Breadcrumb NavXT

Certifique-se de selecionar as caixas de seleção conforme necessário para adicionar links à sua localização atual, determinar sua ordem, ocultá-los na página inicial e ignorar o armazenamento em cache. Quando terminar, clique no Salve  botão e, em seguida, verifique o front end do seu site:

breadcrumb navxt live

Breadcrumbs criados com o widget Breadcrumb NavXT

Sua localização atual agora deve estar visível em qualquer área de widget que você escolheu para eles.

Pão Ralado Flexy

Como uma alternativa, Pão Ralado Flexy é o plug-in mais bem avaliado para adicionar breadcrumbs ao WordPress:

flexy breadcrumb

O plugin Flexy Breadcrumb

Quando este plugin é instalado e ativado, você pode adicionar breadcrumbs ao seu site usando o shortcode [flexy_breadcrumb]. Isso dá a você um pouco mais de flexibilidade sobre onde suas trilhas aparecerão. Você também terá mais controle sobre os componentes de estilo, como tamanho da fonte, cor e ícones.

Depois de instalar o Flexy Breadcrumbs, você verá um novo item na barra lateral do painel:

flexy breadcrumb dashboard

O link Flexy Breadcrumb na barra lateral do painel do WordPress

Então, você terá algumas configurações para definir. No Geral guia, você pode alterar o texto e o ícone de sua página inicial, definir o limite de caracteres e determinar a hierarquia:

flexy breadcrumb general

As configurações gerais do Flexy Breadcrumb

No Tipografia guia, você também pode ajustar a cor e o tamanho da fonte para sua localização atual:

flexy breadcrumb typography

As configurações de Flexy Breadcrumb Typography

Depois de personalizar sua trilha, você precisará adicionar o shortcode [flexy_breadcrumb] onde quiser que sua localização atual apareça. Embora seja possível fazer isso em cada postagem individual que você publica em seu site, é mais eficiente adicionar o shortcode a um Widget WordPress:

flexy breadcrumb live

Uma trilha Flexy Breadcrumb no frontend

Se você verificar o front-end do seu site, deverá conseguir ver a localização atual exibida sempre que tiver adicionado o código de acesso.

Breadcrumb WooCommerce

Para varejistas online, Breadcrumbs WooCommerce é uma maneira fácil de adicionar links de navegação às páginas de seus produtos:

woocommerce breadcrumbs

O plugin WooCommerce Breadcrumbs

Se você está administrando sua loja online com o popular plugin WooCommerce, esta pode ser a melhor opção para você. Ele permite que você ative a localização atual das páginas de seus produtos, a fim de melhorar a navegação do cliente em seu site.

Após a instalação e ativação, você pode navegar para Configurações> Pão Ralado WC para personalizar suas trilhas de navegação:

woocommerce breadcrumbs settings

A página de configurações de breadcrumbs do WooCommerce

A configuração mais importante a considerar é o Ativar breadcrumbs caixa de seleção. Você precisa ter certeza de que está selecionado para exibir sua localização atual. Em seguida, verifique uma das páginas do seu produto:

woocommerce breadcrumbs live

Página do produto WooCommerce com breadcrumbs habilitados

Sua trilha de navegação deve estar visível na parte superior da página.

Migalhas de pão

Finalmente, Migalhas de pão é um plug-in leve que permite adicionar breadcrumbs em qualquer lugar do seu site usando códigos de acesso:

breadcrumb

O plugin Breadcrumb

Este plugin tem as configurações mais extensas de qualquer um listado neste post. Você pode acessá-los clicando em Migalhas de pão na barra lateral do painel do WordPress:

breadcrumb dashboard link

O link Breadcrumb na barra lateral do painel do WordPress

A primeira guia é rotulada Opçõese inclui algumas configurações gerais, como texto personalizado, separadores e limites de caracteres:

breadcrumb general settings

A página de configurações do plugin breadcrumb

Há também uma guia inteira dedicada às opções de estilo. Existem vários botões de seta para escolher, bem como tamanhos e cores de fonte:

breadcrumb styling settings

As opções de estilo do plugin breadcrumb

Se você tiver algumas habilidades de codificação e quiser mais controle sobre seu estilo, também pode usar o CSS customizado aba:

breadcrumb custom css

O campo CSS personalizado do plugin Breadcrumb

Finalmente, é importante visitar o Código curto guia para adicionar sua localização atual ao seu site:

breadcrumb shortcode options

O código de acesso do plugin breadcrumb e opções de snippet

Você pode usar o shortcode em qualquer lugar do seu site, assim como com os outros plug-ins que abordamos. No entanto, Breadcrumb também fornece um trecho de código que você pode adicionar a um de seus arquivos de modelo para incorporar suas trilhas em seu cabeçalho, rodapé ou em outro lugar.

3. Use um tema que inclua breadcrumbs

Embora geralmente sejam considerados no contexto de controlar a aparência do seu site, os temas do WordPress também podem influenciar a funcionalidade do seu site. Uma maneira de fazer isso é adicionando migalhas de pão às suas páginas.

A desvantagem de usar um tema WordPress para adicionar migalhas de pão a um site WordPress existente é que isso envolve a alteração da aparência do seu site também. Se você tem uma marca e uma identidade de site estabelecidas, essa não é uma solução prática e provavelmente ficará melhor com um plug-in.

No entanto, se você está começando um novo site WordPress ou estão executando uma reformulação do site, escolhendo um tema que incorpora breadcrumbs é um método de baixo esforço para adicioná-los ao seu site. Além disso, existem várias opções disponíveis gratuitamente no WordPress Theme Directory.

OceanWP

OceanWP é um dos temas multiuso mais populares do WordPress:

oceanwp theme

O tema OceanWP

Ele inclui um código de acesso que você pode usar para aplicar facilmente trilhas de navegação às suas páginas. Existem também vários demos disponíveis para uso com OceanWP que incorpora migalhas de pão. Para usar o shortcode, basta adicionar [oceanwp_breadcrumb] a uma postagem, página ou widget de texto:

add oceanwp shortcode

Adicionando o código de acesso do OceanWP breadcrumbs a um widget de texto

Você pode personalizar sua localização atual usando os seguintes parâmetros:

  • Classe: incorpora uma classe CSS personalizada.
  • Cor: altera a cor do texto.
  • Cor do cursor: altera a cor do texto quando os usuários passam o mouse sobre a localização atual.

Basta adicionar qualquer um ou todos esses parâmetros diretamente entre os colchetes do código:

Lutando com o tempo de inatividade e problemas com o WordPress? Kinsta é a solução de hospedagem projetada com desempenho e segurança em mente! Confira nossos planos

oceanwp breadcrumb parameters

Customizando breadcrumbs OceanWP com parâmetros de shortcode

Agora você deve ver sua localização atual nas páginas relevantes.

Astra

Da mesma forma, Astra também facilita a adição de migalhas de pão ao seu site:

astra theme

O tema Astra

A maneira mais direta de ativar a localização atual com o Astra é por meio do Customizador. Com o tema instalado e ativado, navegue até Aparência> Personalizar:

astra access customizer

Acessando o Customizador a partir do painel do WordPress

Em seguida, selecione o Migalhas de pão aba:

astra customizer breadcrumbs

A guia de localização atual do Astra no Customizador

Aqui, você verá um menu suspenso que permite escolher onde deseja exibir sua localização atual na página:

astra breadcrumb position

Selecionando a posição da localização atual para o tema Astra

Depois de fazer sua seleção, algumas opções de estilo também aparecerão:

astra breadcrumb styling

As opções de estilo de localização atual do Astra no Customizador

Certifique-se de clicar no Customizador Publicar botão para salvar suas alterações.

4. Adicionar breadcrumbs manualmente

Plug-ins e temas são parte do que torna o WordPress uma plataforma acessível e amigável. No entanto, para alguns usuários e desenvolvedores mais avançados, eles podem parecer uma limitação. O código pode ser um meio muito criativo e ter a capacidade de escrever livremente suas próprias migalhas de pão pode ser atraente para você.

Para exibir a localização atual manualmente, você precisará fazer duas coisas. Primeiro, você tem que adicionar uma função ao seu functions.php arquivo para habilitá-los. Aqui está um exemplo do código que você pode usar:


função get_breadcrumb () {echo ' Home '; if (is_category () || is_single ()) {echo “» ”; the_category ('•'); if (is_single ()) {echo “» ”; o título(); }} elseif (is_page ()) {echo “» ”; echo the_title (); } elseif (is_search ()) {echo “» ”; Resultados da pesquisa para… echo '“ '; echo the_search_query (); echo ' ”'; }}

Depois que a função for adicionada, você precisará chamá-la nos arquivos de modelo onde deseja que a localização atual apareça. Chamando a função em single.php fará com que a localização atual apareça em suas postagens, chamando header.php exibe-os em todos os lugares em que seu cabeçalho aparece e assim por diante.

O código que você usará deve ser semelhante a este:



Modificar esses arquivos exibirá migalhas de pão em seu site, mas não permite que você os estilize de forma que correspondam ao design. Para isso, você também precisará sujar as mãos com alguns CSS.

Como estilizar suas migalhas de pão do WordPress

Definir o estilo de suas migalhas de pão é necessário se você mesmo estiver codificando-as. No entanto, também pode ser útil se você estiver usando um plug-in ou um tema para adicioná-los. O estilo padrão que essas ferramentas fornecem pode não ser adequado para o seu site; nesse caso, você pode querer ajustá-lo para manter a consistência.

Você pode adicionar CSS personalizado para definir o estilo de sua localização atual na folha de estilo do seu tema (style.css) ou na área CSS adicional do Customizador:

customizer additional css

Incorporar CSS adicional para definir a localização atual por meio do Customizador

Há muitas maneiras de adaptar sua localização atual para combinar com o design de seu site, por exemplo, ajustando sua fonte, tamanho e cor. Você também pode considerar elementos como margens, preenchimento, borda e ícones.

Aqui está um exemplo de CSS que pode ser usado para definir o estilo de sua localização atual:


.breadcrumb {preenchimento: 8px 15px; margin-bottom: 20px; estilo de lista: nenhum; cor de fundo: #f5f5f5; raio da borda: 4px; } .breadcrumb a {color: #428bca; decoração de texto: nenhum; }

tem muitas possibilidades quando se trata de CSS. Portanto, pode ser necessário alguns experimentos para que as migalhas de pão pareçam exatamente como você deseja.

Como remover migalhas de pão do WordPress do seu site

Embora haja muitos benefícios em adicionar migalhas de pão ao seu site, isso não significa que sejam para todos. Algumas pessoas podem considerá-los confusos ou achar que eles tornam as páginas do site muito confusas.

Se quiser remover migalhas de pão do seu site WordPress, você pode fazer isso usando qualquer método que faça sentido com base em como você os adicionou originalmente. Por exemplo, se você codificou de forma personalizada seus breadcrumbs, você pode simplesmente remover o código adicionado dos arquivos de seu tema.

Desativar trilhas de navegação adicionadas com um plug-in geralmente é tão simples quanto desativar o plug-in. No caso do Yoast SEO, você pode navegar até o Migalhas de pão guia no Aparência de pesquisa configurações e alterne a chave relevante para Desabilitar.

O mesmo pode ser dito para temas que permitem breadcrumbs por meio de uma configuração ou Códigos de acesso do WordPress. No entanto, existem alguns temas que adicionam breadcrumbs por padrão. Removê-los pode ser um pouco mais complicado, especialmente se você não tiver muita experiência com código.

Se esta for a sua situação, você precisará navegar até o seu site header.php Arquivo. Lá, execute um comando de pesquisa por “breadcrumb”. Isso deve destacar o código que chama a função que adiciona breadcrumbs ao seu site (se houver):

find breadcrumb code

Encontrar código de breadcrumbs no arquivo de modelo de cabeçalho do tema

Exclua esta linha de código para remover migalhas de pão de seu site. Se você não encontrou o código correto, pode tentar esse processo novamente em seu single.php e page.php arquivos, para ver se a função é chamada em um desses modelos.

Se tudo mais falhar, entre em contato com o seu desenvolvedor do tema para suporte. Observe que atualizando seu tema WordPress pode substituir quaisquer alterações feitas em seus arquivos. É por isso que as práticas recomendadas sugerem o uso de um tema infantil por este motivo, a fim de preservar suas personalizações indefinidamente.

/ * Clique para twittar * /
body a.novashare-ctt {
display: bloco;
background: #00abf0;
margem: 30px automático;
preenchimento: 20px 20px 20px 15px;
cor: #ffffff;
decoração de texto: nenhum! importante;
sombra da caixa: nenhum! importante;
-webkit-box-shadow: nenhum! importante;
-moz-box-shadow: nenhum! importante;
fronteira: nenhum;
border-left: 5px solid #00abf0;
}
body a.novashare-ctt: hover {
cor: #ffffff;
borda esquerda: 5px sólido #008cc4;
}
body a.novashare-ctt: visitado {
cor: #ffffff;
}
body a.novashare-ctt * {
eventos de ponteiro: nenhum;
}
body a.novashare-ctt .novashare-ctt-tweet {
display: bloco;
tamanho da fonte: 18px;
altura da linha: 27px;
margin-bottom: 10px;
}
body a.novashare-ctt .novashare-ctt-cta-container {
display: bloco;
estouro: oculto;
}
body a.novashare-ctt .novashare-ctt-cta {
flutuar: certo;
}
body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
flutuar: esquerda;
}
body a.novashare-ctt .novashare-ctt-cta-text {
tamanho da fonte: 16px;
altura da linha: 16px;
alinhamento vertical: meio;
}
body a.novashare-ctt .novashare-ctt-cta-icon {
margem esquerda: 10px;
display: bloco embutido;
alinhamento vertical: meio;
}
body a.novashare-ctt .novashare-ctt-cta-icon svg {
alinhamento vertical: meio;
altura: 18px;
}
/ * Simples + Temas Alternativos Simples * /
body a.novashare-ctt.novashare-ctt-simple {
fundo: nenhum;
preenchimento: 10px 0px 10px 20px;
cor: inicial;
}
body a.novashare-ctt.novashare-ctt-simple-alt {
plano de fundo: #f9f9f9;
preenchimento: 20px;
cor: inicial;
}
body a.novashare-ctt.novashare-ctt-simple: hover, body a.novashare-ctt.novashare-ctt-simple-alt: hover {
borda esquerda: 5px sólido #008cc4;
}
body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
cor: #00abf0;
}
body a.novashare-ctt.novashare-ctt-simple: hover .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt: hover .novashare-ctt-cta {
cor: #008cc4;
}

Resumo

UX e SEO fortes são essenciais para um website de sucesso. Ativar a localização atual do WordPress pode tornar mais fácil para os visitantes navegar em seu site, ao mesmo tempo que ajuda os mecanismos de pesquisa a entender sua estrutura e indexar suas páginas com precisão.

Nesta postagem, cobrimos quatro métodos para adicionar breadcrumbs ao seu site WordPress:

  1. Ativar breadcrumbs em Yoast SEO.
  2. Instale e configure um plug-in breadcrumbs do WordPress.
  3. Use um tema que inclui migalhas de pão.
  4. Adicione sua localização atual manualmente usando o código.

Você tem alguma dúvida sobre a localização atual do WordPress ou como usá-la? Deixe-nos saber na seção de comentários abaixo!