Blog

Como adicionar a Trilha de Navegação (Breadcrumbs) no seu template sem usar plugin

Uma das técnicas mais importantes em um site ou blog é a trilha de navegação. Vários pesquisadores mencionam que a trilha é quase que um recurso obrigatório em qualquer site por questões de usabilidade. Para quem desconhece, o chamado breadcrumb é  o rastro de todas as “páginas pais” da página atual.

A trilha é disposta hierarquicamente, de forma que fique claro para o usuário quais as páginas anteriores à que ele está. Como exemplo, a trilha fica disposta da seguinte forma aqui no BlogLite:

breadcrumb-bloglite

Normalmente, a trilha pode ser encontrada nas páginas do post (single.php), em páginas estáticas (page.php), páginas de arquivos (archive.php, category.php, tag.php) e página de resultados de busca (search.php). Recomendamos que o breadcrumb fique entre o cabeçalho e o conteúdo do blog, local estratégico para a visibilidade imediada por parte do usuário.

Como resultado, podemos citar o aumento no tempo de navegação do usuário no site; a queda na taxa de rejeição pelo fato do usuário encontrar facilmente outras páginas do site; e melhorias em termos de SEO (otimização para motores de busca).

Para adicionar a trilha de navegação em seu tema para WordPress sem a utilização de plugins, basta copiar e colar o seguinte código em seu arquivo functions.php:

function bloglite_breadcrumb() {
global $post;
echo '<ul id="trilha">';
if (!is_home()) {
echo '<li><a href="';
echo get_option('home');
echo '">';
echo 'Página inicial';
echo '</a></li><li class="separador"> / </li>';
if (is_category() || is_single()) {
echo '<li>';
the_category(' </li><li class="separador"> / </li><li> ');
if (is_single()) {
echo '</li><li class="separador"> / </li><li>';
the_title();
echo '</li>';
}
} elseif (is_page()) {
if($post->post_parent){
$anc = get_post_ancestors( $post->ID );
$title = get_the_title();
foreach ( $anc as $ancestor ) {
$output = '<li><a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separador">/</li>';
}
echo $output;
echo '<strong title="'.$title.'"> '.$title.'</strong>';
} else {
echo '<li><strong> '.get_the_title().'</strong></li>';
}
}
}
elseif (is_tag()) { single_tag_title();}
elseif (is_day()) { echo "<li>Arquivo de "; the_time('j \d\e F \d\e Y'); echo'</li>'; }
elseif (is_month()) { echo "<li>Arquivo de "; the_time('F \d\e Y'); echo'</li>'; }
elseif (is_year()) { echo "<li>Arquivo de "; the_time('Y'); echo'</li>'; }
elseif (is_author()) { echo "<li>Arquivo do autor"; echo'</li>'; }
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { echo "<li>Arquivo do blog"; echo'</li>'; }
elseif (is_search()) { echo "<li>Resultados da pesquisa"; echo'</li>'; }
echo '</ul>';
}
?>

Em seguida, é necessário inserir o seguinte trecho onde você quer que apareça a trilha de navegação:

<?php bloglite_breadcrumb(); ?>

Normalmente, isso poderá ser inserido nos arquivos single.php, page.php, category.php, tag.php, archive.php, search.php. É claro que isso vai de acordo com cada template. Agora, um passo importante para que a trilha de navegação seja exibida de forma correta e estilizada, pode adicionar o seguinte código CSS ao arquivo style.css:

#trilha {
list-style:none;
margin:10px 0;
overflow:hidden;
}
#trilha li {
float:left;
margin-right:15px;
}
#trilha .separador {
font-weight:700;
font-size:20px;
color:#999;
}

Após isso, você vai obter um resultado semelhante à este:

breadcrumb-bloglite-2

Pronto! Agora seu tema WordPress tem a trilha de navegação sem a necessidade de instalar qualquer plugin para fazer o trabalho. Você pode modificar o código CSS para deixá-lo com outra aparência caso não queira algo tão simples.

Deixe um comentário

Hospede seu projeto em WordPress com alto desempenho