Como adicionar Breadcrumbs ao seu site WordPress

A navegação é uma parte vital de qualquer site e há mais de uma maneira de fornecê-la. O menu principal do seu site é a principal ferramenta de navegação que leva os usuários ao conteúdo que desejam. No entanto, ele não informa a seus clientes onde eles estão atualmente em seu site.

Um menu breadcrumb é um sistema de navegação secundário que informa a seus clientes onde eles estão em relação à sua página inicial. Isso os ajuda a navegar pelas páginas do seu site com facilidade e evitar que se percam.

Neste artigo, veremos o que são breadcrumbs e como eles beneficiam seu site. Em seguida, mostraremos como adicionar breadcrumbs ao seu site WordPress. Vamos começar!

O que são Breadcrumbs no WordPress?

Breadcrumbs é o termo usado para descrever um menu de navegação hierárquico. Esse tipo de menu envolve uma trilha de links, não muito diferente da trilha de navegação deixada por Hansel e Gretel:

Como muitos usuários não acessam seu site WordPress pela página inicial, a navegação por breadcrumb os ajuda a entender onde eles chegaram. Os mecanismos de pesquisa também usam breadcrumbs para entender melhor a hierarquia de suas páginas da web.

Benefícios de adicionar farinha de rosca

Adicionar menus breadcrumb do WordPress ao seu site oferece vários benefícios. O Google adora breadcrumbs, por exemplo, então esse recurso pode melhorar sua otimização de mecanismo de busca (SEO) e trazer mais visitantes ao seu site.

Os menus de navegação estrutural também podem reduzir as taxas de rejeição, porque melhoram a experiência do usuário (UX) do seu site. Quando os usuários podem navegar facilmente em seu site, é mais provável que passem mais tempo nele.

Como adicionar Breadcrumbs no WordPress

Você pode adicionar breadcrumbs ao seu site WordPress de duas maneiras. O método mais fácil é usar um plug-in do WordPress, mas você também pode codificar breadcrumbs no arquivo header.php do seu site. Antes de usar qualquer método, você deve criar um backup do seu site para o caso de algo dar errado.

Método 1: Usando um Plug-in

A maneira mais fácil de adicionar migalhas de pão ao WordPress é com um plug-in de migalhas de pão. Existem muitos plugins que você pode usar, incluindo Breadcrumb NavXT e Yoast SEO:

O Yoast SEO geralmente é a melhor opção, porque provavelmente é um plug-in que seu site já usa.

Passo 1: Baixe o plugin Yoast SEO

Como o Yoast é um plug-in de SEO, ele oferece uma ampla gama de funcionalidades. Isso inclui a criação e o estilo da navegação breadcrumb.

Para usar este plug-in, você precisará baixá-lo do diretório de plug-ins do WordPress. Você pode simplesmente acessar a página de Plugins do seu site, procurar por “Yoast SEO” e instalar e ativar o plugin como qualquer outro.

Etapa 2: adicione uma função ao seu arquivo header.php

Após a ativação do plug-in, você deve adicionar uma função ao arquivo header.php do seu site. Para acessar este arquivo, navegue até Appearance > Theme Editor e selecione o arquivo para abri-lo.

Em seguida, adicione o seguinte código sempre que desejar que o menu de configuração de breadcrumb apareça:

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

Em geral, você deseja colocar esse código no final do arquivo header.php . No entanto, você pode experimentar o posicionamento do menu, verificando o front-end do seu site para ver como fica o resultado.

Você pode até mesmo adicionar a função acima ao arquivo single.php ou page.php do seu tema, se quiser habilitar a função breadcrumb para aparecer em outro lugar da página. Apenas certifique-se de adicioná-lo apenas em um lugar.

Etapa 3: ativar o suporte de navegação atual

Finalmente, você precisará ativar o suporte breadcrumb. No Yoast SEO, isso significa navegar para SEO > Aparência da pesquisa > Breadcrumbs :

Basta alternar a chave para “Ativado” e pronto! Seu menu de navegação do WordPress estará configurado e pronto para uso.

Método 2: codificando sua própria trilha de pão

A adição de breadcrumbs do site também pode ser feita manualmente por meio de codificação. Se você não quiser usar um plugin de breadcrumb, você pode adicionar breadcrumbs sem um. Antes de tentar isso, você pode querer ler sobre microdados, a fim de aproveitar totalmente o potencial de SEO das migalhas de pão do WordPress.

Etapa 1: criar uma função de esqueleto

Para adicionar breadcrumbs ao WordPress manualmente, você precisará criar uma função PHP. A primeira etapa na criação dessa função é construir o esqueleto. Sua função de esqueleto precisará de um nome exclusivo para evitar conflitos com outras funções.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

A função acima é o esqueleto, e o resto do código breadcrumbs será colocado dentro dos colchetes.

Etapa 2: adicionar regras básicas

Depois de criar o esqueleto, você precisará adicionar regras à função. As regras devem ser colocadas na seção breadcrumb:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

As regras acima geralmente usam variáveis, então elas podem ser alteradas posteriormente. As duas primeiras variáveis ​​usam booleanos, onde “0” é falso e “1” é verdadeiro.

Etapa 3: adicionar a instrução ' if else '

Abaixo das variáveis, você precisa adicionar uma declaração 'if else'. Esta instrução verificará se um usuário está na página inicial do seu site ou não. Com base nessas informações, a instrução determinará se a trilha de navegação será exibida ou não:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Se esta instrução não for adicionada à função, as configurações de breadcrumbs podem ou não aparecer quando você quiser.

Etapa 4: adicionar função ao cabeçalho do tema

Assim que sua função breadcrumbs estiver completa, você pode adicioná-la ao arquivo header.php do seu site. Navegue até Appearance > Theme Editor para abrir o arquivo e adicione a função no final.

Em seguida, salve suas alterações e verifique o novo menu de navegação do site no front-end. Você pode continuar ajustando a função e seu posicionamento até que o menu pareça correto (ou desativar a trilha de navegação quando necessário).

Personalize seu site com o WP Engine

Os menus de navegação estrutural ajudam os visitantes do seu site a encontrar o caminho. Eles também tornam mais fácil para os mecanismos de pesquisa entender a hierarquia do seu site. Um plug-in como o Yoast SEO é a maneira mais fácil de adicionar breadcrumbs ao seu site, mas você também pode codificá-los manualmente.

Usar o host certo pode ajudar a garantir o desempenho do seu site, deixando você com tempo para se concentrar no desenvolvimento e na experiência do usuário. O WP Engine pode oferecer a você os melhores planos de hospedagem WordPress gerenciados e os melhores recursos para criar uma experiência incrível no site!