X
    Mas notas de Diseño Web

Breadcrumbs para WordPress sin plugin


Para los que preferimos evitar los plugins cuanto sea posible, y meter mano en el codigo, esta función para insertar breadcrums (migas de pan), es facil de implementar.

Lo he probado en las sucesivas plantillas por defecto, incluso Twenty Fourteen, sin problemas aparentes salvo ajustes “cosmeticos” de estilo (CSS)

El siguiente código de la función, se debe añadir al final del archivo functions.php del theme en uso:

function breadcrumb() {
global $post;
echo ‘<ul id=”breadcrumbs”>’;
if (!is_home()) {
echo ‘<li><a href=”‘;
echo get_option(‘home’);
echo ‘”>’;
echo ‘Inicio’;
echo ‘</a></li><li class=”separator”> > </li>’;
if (is_category() || is_single()) {
echo ‘<li>’;
the_category(‘ </li><li class=”separator”> > </li><li> ‘);
if (is_single()) {
echo ‘</li><li class=”separator”> > </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>’;
}
[clear]

Luego buscamos la posición adecuada en el archivo header.php e insertamos la declaracion de la funcion:

<?php breadcrumb(); ?>
[clear]

Solo falta ajustar la hoja de estilos para darle nuestro toque personal:

#breadcrumbs {
list-style:none;
margin:10px 0;
overflow:hidden;
color:#eee;
float: left;
}#breadcrumbs li {
float:left;
}#breadcrumbs .separator {
color:#ccc;

El resultado final seria así:

Inicio > Categoria > Post 

Los separadores > se pueden cambiar a gusto personal, lo mismo que el nombre Inico por Home. Es fácil de reconocer en la función donde cambiar las variables.

 

Carlos Pablak: Soy experto SEO, webmaster y asesor de Marketing online. Mas de 12 años de experiencia en el comportamiento de los buscadores y tendencias de búsqueda. Social Media Manager y SEM Manager. Experto de producto Google.
Tal vez te interese...