WP pagina navigatie toevoegen

Wil je een pagina navigatie (breadcrumb)  op je pagina’s of berichten toevoegen ga dan als volgt te werk.

Je ziet wel eens op een pagina Home>>Onderdeel>>Waarvan>>Auto

Je kan dus zien waar je je bevindt op de website en de mappen/pagina’s erboven zijn klikbaar !

Zet het volgende script in je functions.php

function the_breadcrumb() {
 global $post;
 echo '<ul id="breadcrumbs">';
 if (!is_home()) {
 echo '<li><a href="';
 echo get_option('home');
 echo '">';
 echo 'Home';
 echo '</a></li><li class="separator"> &raquo; </li>';
 if (is_category() || is_single()) {
 echo '<li>';
 the_category(' </li><li class="separator"> &raquo; </li><li> ');
 if (is_single()) {
 echo '</li><li class="separator"> &raquo; </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="separator">/</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>Archive for "; the_time('F jS, Y'); echo'</li>';}
 elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
 elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
 elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
 elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
 elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
 echo '</ul>';
}

Je kan een en ander opmaken via je ccs stylesheet , als voorbeeld hieronder


#breadcrumbs{
 list-style:none;
 margin:5px 0;
 overflow:hidden;
 font-size:10px;
 letter-spacing:-0.5px;
 align:left;
 color:#999;
}

#breadcrumbs a {color:#ccc;}
#breadcrumbs a:hover {color:#990000;}

#breadcrumbs li{
 float:left;
 margin-right:5px;
}

#breadcrumbs .separator{
 font-weight:400;
 font-size:10px;
 color: #999 ;
}

Je kan uiteraard het css gedeelte naar eigen smaak aanpassen

Dan komt het volgende .

In je Header.php of page.php of waar je dan ook wil dat je pagina navigatie wordt weergegeven plaats je hetvolgende

<div><?php the_breadcrumb(); ?></div>

Zelf gebruik ik mijn eigen website ook als naslagwerk , indien dit is wat je zocht wens ik je weer succes met het bouwen van je wordpress website

 

Reacties gesloten.