2Novatos

Es posible que te entre la duda… ¿Qué es un Breadcrumb?
Un breadcrumb es como una guía de navegación que orientará al usuario durante toda la visita de tu blog. Seguramente lo habrás visto en muchos otros blogs y páginas, y en general habrá ayudado a moverte y ubicarte durante la navegación en el sitio.

Generalmente tienen el siguiente formato:

Inicio > Categoría > Subcategoría > Título del post

¿Cómo añadirlo en tu blog WordPress?

Para añadir ésta funcionalidad en tu blog, puedes hacerlo de varias formas:

• Instalando un plugin (Ej. Breadcrumb NavXT)
• Creando una función en WP

En 2Novatos vamos a explicar el segundo método. A nuestra forma de verlo, cuantos menos plugins haya ralentizando la renderización del blog, mejor. Otra forma de verlo es, que siempre es mejor saber cómo funciona y qué hace cada cosa. Qué mejor forma que añadiendo y modificando la función a tu gusto.

Estuvimos buscando un breadcrumb que cumpliera nuestras necesidades, es decir, que funcionara en todo el blog y que en los post pusiera la categoría, y en caso de que ésta tuviera una ‘categoría padre’, que se mostrara también. Encontramos un ejemplo en el blog de Arie Putranto [en] que cumplía todo lo que necesitamos, os lo compartimos a todos.

Éste método incluye el breadcrumb a posts, páginas, categorías, subcategorías, resultados de búsquedas, autores… básicamente en todo el blog.
Para empezar, debes añadir la siguiente función en el archivo ‘functions.php‘ de tu theme. Si no existe el archivo, crealo en la carpeta del theme.

<?php
function wp_breadcrumb() {
	global $cat,$s,$post,$wp_locale;
	if ( get_the_category() ) $category = get_the_category();
	if ( is_tag() ) $tag = get_term($tag_ID, 'post_tag', OBJECT, 'display');
	if ( is_author() ) $userdata = get_userdata($author);
	?><div id="breadcrumb"><ul><li class="start"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('name'); ?>"><?php echo __('Home'); ?></a></li><?php
	if ( have_posts() ) :
		// Display breadcrumb for category and sub-category archive
		if ( is_category() ) {?><li><?php echo substr(get_category_parents($cat,true,'</li><li>'),0,-9); ?></li><?php }

		// Display breadcrumb for calendar archive
		elseif ( is_day() ) {?><li><a href="<?php echo get_year_link(get_the_time('Y')); ?>"><?php the_time('Y'); ?></a></li><li><a href="<?php echo get_month_link(get_the_time('Y'),get_the_time('m')); ?>"><?php the_time('F'); ?></a></li><li><a href="<?php echo get_day_link(get_the_time('Y'),get_the_time('m'),get_the_time('d')); ?>"><?php the_time('d'); ?></a></li><?php }
		elseif ( is_month() ) {?><li><a href="<?php echo get_year_link(get_the_time('Y')); ?>"><?php the_time('Y'); ?></a></li><li><a href="<?php echo get_month_link(get_the_time('Y'),get_the_time('m')); ?>"><?php the_time('F'); ?></a></li><?php }
		elseif ( is_year() ) {?><li><a href="<?php echo get_year_link(get_the_time('Y')); ?>"><?php the_time('Y'); ?></a></li><?php }

		// Display breadcrumb for single post and attachments
		elseif ( is_single() ) {?><li><?php echo substr(get_category_parents($category[0]->cat_ID,true,'</li><li>'),0,-9); ?></li><?php if($post->post_parent ) {?><li><a href="<?php echo get_permalink($post->post_parent); ?>"><?php echo get_the_title($post->post_parent); ?></a></li><?php } ?><li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php }

		// Display breadcrumb for pages
		elseif ( is_page() ) {if ( $post->post_parent ) {?><li><a href="<?php echo get_permalink($post->post_parent); ?>"><?php echo get_the_title($post->post_parent); ?></a></li><?php } ?><li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php }

		// Display breadcrumb for search result page
		elseif ( is_search() ) {?><li><a href="<?php echo clean_url( get_pagenum_link() ); ?>" title="<?php echo __('Search result for') . ' ' . wp_specialchars(get_query_var('s')); ?>"><?php echo __('Search result for') . ' ' . wp_specialchars(get_query_var('s')); ?></a></li><?php }

		// Display breadcrumb for tag archive
		elseif ( is_tag() ) {?><li><a href="<?php echo clean_url( get_pagenum_link() ); ?>" title="<?php echo __('Archive for tag') . ' ' . $tag->name; ?>"><?php echo __('Archive for tag') . ' ' . $tag->name; ?></a></li><?php }

		// Display breadcrumb for author archive
		elseif ( is_author() ) {?><li><a href="<?php echo clean_url( get_pagenum_link() ); ?>" title="<?php echo __('Article posted by') . ' ' . $userdata->display_name; ?>"><?php echo __('Article posted by') . ' ' . $userdata->display_name; ?></a></li><?php }

		// Display breadcrumb for page which got split
		if ( get_query_var('page') ) {?><li><a href="<?php get_permalink(); ?>" title="<?php echo __('Part'); ?> <?php echo get_query_var('page'); ?>"><?php echo __('Part'); ?> <?php echo get_query_var('page'); ?></a></li><?php }

		// Display breadcrumb for paged archives
		if ( get_query_var('paged') ) {?><li><a href="<?php get_permalink(); ?>" title="<?php echo __('Page'); ?> <?php echo get_query_var('paged'); ?>"><?php echo __('Page'); ?> <?php echo get_query_var('paged'); ?></a></li><?php }
	endif;
	?></ul>
	</div>
	<?php
}

?>

Una vez has añadido la función en su archivo correspondiente (functions.php). Debes modificar el archivo ‘header.php‘ de tu theme y añadir el siguiente código al final del archivo:

<?php
wp_breadcrumb();
?>

Una vez ésto está hecho, ya puedes ver que el breadcrumb sale en todo tu blog.
Ahora solo queda ponerle algo de CSS para que se adapte a tu diseño. Ésta parte la dejamos en tu mano, ya que cada diseño es diferente.

#breadcrumb { }
#breadcrumb ul { }
#breadcrumb ul li { }

Esperamos que te sea de utilidad, cualquier duda con el código no dudes en contactar-nos.

Arie Putranto [en]