Breadcrumbs in Thesis zonder plugin
8 juni, 2010 · Printen
Breadcrumbs zijn goed voor je SEO en geven een snel overzicht voor de gebruikers waar ze zitten en waar ze heen kunnen. Ik had al een aantal keer een plugin geïnstalleerd maar nu blijkt dat dit ook zonder kan in Thesis.
Wat natuurlijk beter is omdat dit de snelheid verhoogt van je website, zie ook ‘Betere performance, hogere conversie‘.
Zo werkt het
Plaats de volgende code in custom_functions.php (in je thesis custom folder):
/* Breadcrumbs */
function universal_breadcrumbs() { ?>
<div id="breadcrumbs">
<a href="<?php bloginfo('home'); ?>">Home</a> <?php
if (!is_front_page()) {
echo ' > ';
if (is_category() || is_single()) {
the_category(' > ','multiple','');
if (is_single()) {
echo ' > ';
the_title();
}
} elseif (is_page()) {
the_title('<a href="'.get_permalink() .'">','</a>');
}
}
?>
</div>
<?php }
add_action('thesis_hook_before_content', 'universal_breadcrumbs');
En nog wat code voor de vormgeving, CSS file.
Open hiervoor de file custom.css (in je thesis custom folder):
/* breadcrumbs */
#breadcrumbs {
/* heignt and width of the container box */
height: 12px;
width: 600px;
/* border for testing */
/*border: 1px solid #000000;*/
/* moving text within the container box */
padding: 8px 5px 0px 20px;
/* moving the container box around*/
position: relative;
/*top: 0px;*/
/*left: 0px:*/
/* to keep the breadcrumbs from showing under another object */
z-index: 100;
/* font properties */
color: black;
font-size: 1em;
text-align: left;
}
/* link and visited properties of fonts */
#breadcrumbs a:link,
#breadcrumbs a:visited {
color: black;
font-size: 1em;
font-weight: bold;
text-decoration: none;
}
/* hover properties of fonts */
#breadcrumbs a:hover {
color: red;
font-size: 1em;
font-weight: bold;
text-decoration: underline;
}
Je kunt de bovenstaande code aanpassen naar believen, wat goed past in jou vormgeving.
Klaar is kees, de boel saven en uploaden en het resultaat op je website bewonderen.




Commentaar
Heb je iets te vragen en/of toe te voegen?