Apesar do nome mundano, breadcrumbs são ferramentas muito úteis para melhorar a experiência do usuário do seu site (UX) e Search Engine Optimization (SEO). Habilitá-los é simples com a ajuda de um plugin ou de um pequeno código personalizado.
Neste post, vamos apresentá-lo ao WordPress breadcrumbs e explicar como eles funcionam. Em seguida, mostraremos como adicioná-los ao seu site, estilizá-los e removê-los. Há muito para cobrir, por isso vamos começar!
O que São WordPress Breadcrumbs?
Breadcrumbs, como eles se relacionam com o WordPress (ou qualquer site), são links de navegação que aparecem no topo de uma postagem ou página. Eles mostram aos usuários as categorias de nível superior que os levaram ao conteúdo que estão visualizando atualmente e também permitem uma fácil navegação de volta às páginas visualizadas anteriormente.
Por exemplo, considere o seguinte exemplo:
No lado esquerdo, logo abaixo do cabeçalho, você pode ver as palavras Home > Resource Center > Kinsta Blog. Cada um é um link de volta à sua página correspondente do post atual. Isso permite que os leitores do nosso blog naveguem para qualquer uma dessas áreas-chave de conteúdo com um único clique, em vez de ter que usar o botão Voltar, o menu ou o recurso de pesquisa.
É assim que as migalhas de pão têm seu nome: elas criam uma trilha que leva os usuários de volta para casa. Eles são particularmente úteis para sites como blogs e lojas on-line, onde os visitantes podem querer mover-se entre posts individuais, páginas de produtos e arquivos de categorias, onde podem encontrar conteúdo semelhante.
Como Funciona o WordPress Breadcrumbs?
Existem três tipos diferentes de migalhas de pão WordPress. Todos incorporam links de navegação como descrito acima, mas de formas ligeiramente diferentes:
- Baseado em hierarquia: Esses breadcrumbs 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 procurou e que o levaram ao produto que está sendo visualizado atualmente.
- Baseado na história: À medida que os usuários se movem de página em página em todo o seu site, estas migalhas de pão vão voltar para o caminho que vieram.
Cada variedade de migalhas de pão é útil para diferentes propósitos. No entanto, todos podem melhorar a navegação e por extensão UX.
Eles também são benéficos para fins de SEO. Breadcrumbs mostram claramente as relações entre as diferentes partes do conteúdo do seu site. Desta forma, tornam mais fácil para os rastreadores de motores de busca 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 suas breadcrumbs ralado em listas de resultados, para que os usuários possam ver conteúdo adicional em seu site relacionado à informação que estão procurando.
Como Adicionar o WordPress Breadcrumbs ao Seu Site (4 Métodos)
Quer seja um génio da codificação ou um principiante do WordPress, pode adicionar rápida e facilmente migalhas de pão ao seu site em apenas alguns passos. Aqui estão quatro maneiras diferentes de realizar esta tarefa.
1. Habilitar Breadcrumbs em Yoast SEO
Yoast SEO é um plugin popular que ajuda os usuários WordPress aproximar seus rankings do Search Engine e otimizar seu conteúdo em conformidade. Ele também inclui alguns outros recursos para aumentar a visibilidade do seu site, incluindo migalhas de pão.
Se ainda não o fez, instale e ative o plugin no seu painel do WordPress:
Em seguida, você precisará adicionar esse trecho de código ao seu tema:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Especificamente onde você adiciona isso, depende de você. Se você quiser usar breadcrumbs nos posts do seu blog, você pode adicioná-lo ao seu arquivo de template single.php.
Alternativamente, colando-o no final do seu arquivo header.php irá adicionar breadcrumbs a todo o seu site:
Tenha em mente que futuras atualizações de temas podem substituir este código personalizado. Você precisará entrar em contato com o desenvolvedor do tema para obter informações sobre como evitar esse problema ou simplesmente usar um tema infantil. Quando o snippet estiver no lugar, navegue até SEO > Search Appearance > Breadcrumbs no painel de instrumentos:
Alterne a chave de configurações do Breadcrumbs para habilitado. Depois, visualize o seu site:
Agora você deve ver breadcrumbs nas partes relevantes do seu site, com base em onde você adicionou o trecho de código.
2. Habilitar Breadcrumbs com um Plugin WordPress Breadcrumbs
Adicionar breadcrumbs com levedura é especialmente conveniente se você já está usando esse plugin para fins de SEO. No entanto, se você preferir um plugin diferente para otimizar seu conteúdo, a abordagem acima é menos útil. Felizmente, existem vários outros plugins disponíveis que são especificamente orientados para adicionar breadcrumbs ao WordPress.
Breadcrumb NavXT
O plugin mais popular para adicionar breadcrumbs ao WordPress além do Yoast é o Breadcrumb NavXT:
Este plugin fornece um widget de breadcrumbs que você pode adicionar a qualquer área de migalhas que seu tema fornece, como uma barra lateral ou rodapé. É altamente personalizável, permitindo-lhe escolher quais as páginas e categorias a apresentar no percurso. Breadcrumbs NavXT também inclui marcação de esquemas para melhorar o SEO.
Para adicionar breadcrumbs usando este plugin, navegue até Aparência > Widgets. Você verá um novo widget Breadcrumb NavXT, que você vai querer arrastar para a área do widget onde você gostaria que ele aparecesse:
Clique na seta drop-down para abrir as configurações do widget e preencha os campos necessários:
Certifique-se de selecionar as caixas de seleção conforme necessário para adicionar links às suas breadcrumbs, determinar sua ordem, ocultá-las na página inicial e ignorar o cache. Quando terminar, clique no botão Salvar e verifique a parte frontal do seu site:
Suas breadcrumbs devem agora ser visíveis em qualquer área de widget que você escolher para elas.
Flexy Breadcrumb
Como alternativa, Flexy Breadcrumb é o plugin mais bem avaliado para adicionar breadcrumbs ao WordPress:
Quando este plugin é instalado e ativado, você pode adicionar breadcrumbs ao seu site usando o shortcode [flexy_breadcrumb]. Isso lhe dá um pouco mais de flexibilidade quanto ao local onde suas trilhas vão aparecer. 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 de instrumentos:
Então, você terá algumas configurações para configurar. Na ficha Geral, é possível modificar o texto e o ícone da página inicial, definir o limite de caracteres e determinar a hierarquia:
Na guia Typography, você pode ajustar a cor e o tamanho da fonte para suas breadcrumbs também:
Depois de personalizar sua trilha, você precisará adicionar o atalho [flexy_breadcrumb] onde você quiser que suas breadcrumbs apareçam. Embora seja possível fazer isso em cada publicação individual que você publica em seu site, é mais eficiente adicionar o código de atalho a um widget do WordPress:
Se você verificar o front end do seu site, você deve ser capaz de ver suas breadcrumbs (breadcrumbs) exibidas onde quer que você tenha adicionado o shortcode.
WooCommerce Breadcrumb
Para varejistas online, o WooCommerce Breadcrumbs é uma maneira fácil de adicionar links de navegação às páginas de seus produtos:
Se você está executando sua loja online com o popular plugin WooCommerce, esta pode ser a melhor opção para você. Ele permite que você ative o breadcrumbs para suas páginas de produtos, a fim de melhorar a navegação do cliente em seu site.
Após a instalação e ativação, você pode navegar até Configurações > Breadcrumbs para personalizar suas trilhas de breadcrumbs:
A configuração mais importante a considerar é a caixa de seleção Enable breadcrumbs. Tens de te certificar que está selecionado para mostrares as tuas breadcrumbs. Em seguida, verifique uma das páginas dos seus produtos:
O seu rasto de breadcrumbs deve estar visível no topo da página.
Breadcrumb
Finalmente, o Breadcrumb é um plugin leve que lhe permite adicionar breadcrumbs em qualquer lugar do seu site usando atalhos:
Este plugin tem as configurações mais extensas de todos os listados neste post. Você pode acessá-los clicando em Breadcrumb na barra lateral do seu painel do WordPress:
A primeira guia é denominada Opções e inclui algumas configurações gerais, como texto personalizado, separadores e limites de caracteres:
Há também uma aba inteira dedicada às opções de estilo. Existem vários botões de seta que você pode escolher, assim como tamanhos de fonte e cores:
Se você tem algumas habilidades de codificação e quer mais controle sobre o seu estilo, você também pode usar a guia Custom CSS:
Finalmente, é importante visitar a aba Shortcode para adicionar suas breadcrumbs ao seu site:
Você pode usar o código de atalho em qualquer lugar do seu site, assim como com os outros plugins que cobrimos. No entanto, o 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 eles sejam geralmente pensados no contexto de controlar a aparência do seu site, os temas do WordPress também podem influenciar a funcionalidade do seu site. Uma forma de o fazerem é adicionando breadcrumbs às suas páginas.
A desvantagem de usar um tema WordPress para adicionar breadcrumbs a um site WordPress existente é que ele envolve mudar a aparência do seu site também. Se você tem uma identidade de marca e site estabelecida, esta não é realmente uma solução prática, e você provavelmente estará melhor com um plugin.
No entanto, se você está começando um novo site WordPress ou está executando um redesenho do site, escolher 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 diretório de temas do WordPress.
OceanWP
OceanWP é um dos mais populares temas multiuso do WordPress:
Ele inclui um código de atalho que você pode usar para aplicar facilmente breadcrumbs em suas páginas. Há também várias demos disponíveis para uso com o OceanWP que incorporam breadcrumbs. Para usar o shortcode, basta adicionar [oceanwp_breadcrumb] a uma mensagem, página ou widget de texto:
Você pode personalizar suas breadcrumbs usando os seguintes parâmetros:
- Classe: Incorpora uma classe CSS personalizada.
- Cor: Altera a cor do texto.
- Hover color: Muda a cor do texto quando os usuários passam o mouse sobre suas breadcrumbs.
Simplesmente adicione qualquer um ou todos estes parâmetros entre parênteses:
Agora você deve ver suas breadcrumbs nas páginas relevantes.
Astra
Da mesma forma, o Astra também facilita a adição de breadcrumbs ao seu site:
A forma mais simples de permitir breadcrumbs com o Astra é através do Personalizador. Com o tema instalado e ativado, navegue até Aparência > Personalizar:
Em seguida, selecione a guia Breadcrumb:
Aqui, você verá um menu suspenso que permite que você escolha onde deseja exibir suas breadcrumbs na página:
Depois de fazer a sua seleção, algumas opções de estilo também aparecerão:
Certifique-se de clicar no botão Personalizar publicação para salvar suas alterações.
4. Adicionar Breadcrumbs Manualmente
Plugins e temas são parte do que torna o WordPress uma plataforma amigável e acessível. No entanto, para alguns usuários e desenvolvedores mais avançados, eles podem se sentir limitados. O código pode ser um meio muito criativo, e ter a capacidade de escrever livremente suas próprias breadcrumbs pode lhe agradar.
Para exibir as breadcrumbs manualmente, você precisará fazer duas coisas. Primeiro, é necessário adicionar uma função ao arquivo functions.php para habilitá-los. Aqui está um exemplo do código que você pode usar:
function get_breadcrumb() {
echo 'Home';
if (is_category() || is_single()){
echo " " ";
the_category (' • ');
if (is_single()) {
echo " " ";
the_title();
}
} elseif (is_page()) {
echo " " ";
echo the_title();
} elseif (is_search()) {
echo " " ";Search Results for…
echo '"';
echo the_search_query();
echo '"';
}
}
Assim que a função for adicionada, você precisará chamá-la nos arquivos de modelo onde você quer que suas breadcrumbs apareçam. Chamar a função em single.php fará com que as breadcrumbs apareçam nas suas mensagens, chamá-las em header.php as exibirá em todos os lugares onde seu cabeçalho aparecer, e assim por diante.
O código que vais usar deve ser parecido com este:
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
Modificar esses arquivos irá exibir breadcrumbs no seu site, mas não permite que você os estilize para que correspondam ao seu design. Para isso, tens de sujar as mãos com algum CSS também.
Como Criar Seu Estilo de WordPress Breadcrumbs
Estilizar as suas breadcrumbs é necessário se você mesmo as está a codificar. No entanto, também pode ser útil se você estiver usando um plugin ou um tema para adicioná-los. O estilo padrão que essas ferramentas fornecem pode não ser um bom ajuste para o seu site, caso em que você pode querer ajustá-los para manter a consistência.
Você pode adicionar CSS personalizado para estilizar suas breadcrumbs na folha de estilo do seu tema (style.css) ou na área CSS adicional do Customizer:
Há muitas maneiras de adaptar suas breadcrumbs para combinar com o design do seu site, como 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 alguns CSS que podem ser usados para estilizar suas breadcrumbs:
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
Há muitas possibilidades quando se trata de CSS. Por isso, pode ser preciso fazer algumas experiências para que as tuas breadcrumbs vejam exatamente como as queres.
Como Remover WordPress Breadcrumbs do Seu Site
Embora existam muitos benefícios em adicionar breadcrumbs no seu site, isso não significa que sejam para todos. Algumas pessoas podem achá-los confusos ou sentir que eles tornam as páginas do site muito desorganizadas.
Se você quiser remover breadcrumbs do seu site WordPress, você pode fazê-lo usando qualquer método que faça sentido com base em como você adicionou originalmente. Por exemplo, se você codificou suas breadcrumbs, você pode simplesmente remover o código que você adicionou dos arquivos do seu tema.
Desabilitar breadcrumbs adicionados com um plugin é geralmente tão simples quanto desabilitar o plugin. No caso do Yoast SEO, pode navegar para o separador Breadcrumbs nas definições de Pesquisa de Aparência e alternar o comutador relevante para Desativar.
O mesmo pode ser dito para temas que permitem breadcrumbs através de uma configuração ou de atalhos 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 é muito experiente com código.
Se esta for a sua situação, você precisará navegar para o arquivo header.php do seu site. Aqui, execute um comando de busca para “breadcrumb”. Isso deve destacar o código que chama a função que adiciona breadcrumbs ao seu site (se ele existir aqui):
Apague esta linha de código para remover breadcrumbs do seu site. Se você não encontrou o código correto, você pode tentar esse processo novamente em seus arquivos single.php e page.php, para ver se a função é chamada em um desses modelos.
Se tudo o resto falhar, contacte o programador do seu tema para obter suporte. Observe que atualizar seu tema do WordPress pode substituir quaisquer alterações que você tenha feito em seus arquivos. É por isso que as melhores práticas sugerem o uso de um tema infantil por esta razão, a fim de preservar suas personalizações indefinidamente.
Resumo
UX forte e SEO são a chave para um site de sucesso. Habilitar o WordPress breadcrumbs pode facilitar a navegação dos visitantes pelo seu site, além de ajudar os mecanismos de busca a entender sua estrutura e indexar suas páginas com precisão.
Neste post, abordamos quatro métodos para adicionar breadcrumbs ao seu site do WordPress:
- Ligue as breadcrumbs em Yoast SEO.
- Instale e configure um plugin para WordPress breadcrumbs.
- Use um tema que inclua breadcrumbs.
- Adicione suas breadcrumbs manualmente usando o código.
Você tem alguma dúvida sobre o WordPress breadcrumbs ou como usá-los? Deixe-nos saber na seção de comentários abaixo!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
COnteúdo muito relevante! Parabens!!