Neste artigo iremos mostrar como usar o Plugin Breadcrumb NavXT.
A Trilha de Navegação é um excelente suplemento de navegação especialmente para blogs porque ajuda na usabilidade. O plugin que nós vamos compartilhar neste artigo revela a hierarquia de cada página. É uma boa pedida para o design por causa da usabilidade e também fornece beneficios de SEO por que os links da trilha de navegação aumenta a atividade dos usuários, como também dos bots dos motores de busca ajudando na indexação do seu conteúdo.
Uso básico
Dependendo do seu tema essa seção talvez seja desnecessária. Se você tiver ativado o plugin Breadcrumb NavXT e a sua trilha de navegação não estiver aparecendo nas suas páginas e posts então talvez seu tema não tenha suporte para trilha de navegação. É necessário adicionar um pequeno código aonde você deseja que a trilha de navegação apareça no seu site.
Abra o arquivo onde você deseja adicionar a trilha de navegação (normalmente header.php, single.php, page.php). Você pode fazer isso através do painel de administração do WordPress em Aparencia > Editor ou em qualquer editor de texto como notepad++ ou bloco de notas.
Adicione o código a seguir exatamente onde você deseja que a trilha de navegação seja exibida:
|
1
2
3
|
<div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?></div> |
Salve o arquivo. Agora você deve poder ver a trilha de navegação no seu WordPress. Para personalizar a trilha de navegação você pode editar os valores padrão para as opções na área de configuração do plugin que você pode ver no vídeo abaixo. Localizado em Configuração > Breadcrumb NavXT.
Breadcrumb NavXT não vem com um estilo padrão. Você pode utilizar CSS para alterar o estilo usando o código que iremos lhe mostrar abaixo ( coloque este código em seu style.css ou no custom code do seu tema). Para adicionar estilo ao Breadcrumb NavXT você deve utilizar a classe CSS .breadcrumbs, veja o exemplo abaixo:
|
1
2
3
4
5
6
|
.breadcrumbs{font-size: 14px;color: #fff;margin: 30px 0 0 10px;position: relative;float: left; } |
O código acima em ordem de atributo faz o seguinte:
- Define o tamanho da fonte para 14px.
- Define a cor do texto para branco (#fff é o mesmo que #ffffff).
- A margem para a div esta definida para 30px para cima, 10px para o lado esquerdo, e 0px para ambos, direita e abaixo.
- A posição esta definida como relativa (a div não é absoluta a tela), isso mantém o Internet Explorer Feliz.
- A div é definida para flutuar do lado esquerdo da tela.
Você pode estudar um pouco mais de CSS para definir outras opções de acordo com o seu site e fazer com que a sua trilha de navegação fique de acordo com o esquema de cores do seu site WordPress.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
