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.

Um comentário

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *