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:
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:
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.
Muito Obrigado!