Cómo agregar BreadCrumb sin utilizar un plugin en WordPress


Publicado el: 4 de enero, 2010

Bread Crumb IMGLos BreadCrumbs son esenciales en cualquier sitio ya que el usuario puede saber fácilmente donde se encuentra. Existen varias opciones para poder implementar los BreadCrumbs en WordPress, ya sea con plugins (Yoast BreadCrumbs) o sin ellos; pero el uso de plugins tiende a volver a WordPress mucho más lento (excluyendo a plugins de caché) es por eso que se debe tratar de utilizar la menor cantidad posible de plugins.

En EGRACE CREATIVE nos dieron un ejemplo claro de cómo crear BreadCrumbs sin utilizar un plugin. Este script utiliza la variable $_SERVER[«REQUEST_URI»] (que nos devuelve algo parecido a «/categoria/nombre-del-post/»), la separa por los «/» que contiene. Al utilizarlo solemos tener algunas fallas cómo por ejemplo:

  • No funciona correctamente al ser utilizado en una instalación WordPress dentro de una carpeta del tipo «www.example.com/blog»
  • Problemas con los links en los comentarios del tipo «www.example.com/post-name/comment-page-1/#comment-1»
  • El script está optimizado para permalinks del tipo «/%year%/%monthnum%/%day%/%postname%/»
  • Este script no soporta las subcategorías produciendo links a páginas inexistentes «www.example.com/cat_1/sub_cat_1»

Por lo que modifiqué el código para una instalación de WordPress con los permalinks de tipo «/%category%/%postname%/» (que es uno de los más utilizados).

Paso 1: Crear breadcrumbs.php

Para poder utilizar este script debes crear un archivo llamado breadcrumbs.php en el directorio de tu theme y colocar el siguiente código en el archivo.

<div class="breadcrumbs">
<?php
function breadcrumbs() {
	$url = get_bloginfo('url');
	$a = explode("/",$url);
	$b = explode("/",$_SERVER["REQUEST_URI"]);
	//intersección de arrays para poder quitar la URL
	$c = array_intersect($a, $b);
	$url_array = array_diff($b, $c);
	//quitamos el nombre del post del array
	array_pop($url_array);
	//para quitar las "/page/2"
	if(preg_match('@(/page/)([0-9])@',$_SERVER["REQUEST_URI"])) {
		array_pop($url_array); //quitamos sacar el "/2"
		array_pop($url_array); //quitamos sacar el "/page"
	}
	//para quitar los comentarios "/coment-page-"
	if(preg_match('/comment-page-/',$_SERVER["REQUEST_URI"]) || preg_match('/?/',$_SERVER["REQUEST_URI"])) {
		//sacamos el post ya que ya sacamos el comentario
		array_pop($url_array);
	}
	echo 'Estás en <a href="'.$url.'/" rel="home">Inicio</a>';
	$dir = $url.'/';
	if(is_single() || is_category()) {
		//algoritmo para single.php
		$category = 'category';
		foreach($url_array as $folder) {
			if($folder != 'category'){
				$category .= '/'.$folder;
				//hay confusion con las categorias hijos
				$dir = $url.'/'.$category.'/';
				//con URL para que jale del URL al que pertenece
				echo ' &raquo; <a href="'.$dir.'" rel="category tag">'.ucwords(str_replace("-", " ", $folder)) . '</a>';
			}
		}
	} else {
		//para page.php y otros (archivos)
		foreach($url_array as $folder) {
			if($folder != 'tag' && $folder != 'author'){
				if(!is_numeric($folder)){
					$dir = $dir.$folder.'/';//los folders se van acoplando
					echo ' &raquo; <a href="'.$dir.'">'.ucwords(str_replace("-", " ", $folder)) . '</a>';
				}
			}
		}
	}
	echo wp_title();
}
breadcrumbs();
?>
</div>

Paso 2: Modificar el código en Single.php y Page.php

Después de haber creado el archivo debemos llamarlo desde los archivos single.php y page.php (pueden probar también en archive.php) para que estos desplieguen el breadcumb. Debemos colocar el código preferentemente antes de que se despliegue el título dentro del Loop.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php include ( TEMPLATEPATH . '/breadcrumbs.php'); ?>
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

Paso 3: Estilizando al Breadcumb

Que puede ir bien con el siguiente código CSS:

.breadcrumbs {
background:#f7f6ed;
padding:10px;
}
.breadcrumbs a {
/*También podemos utilizar uppercase*/
text-transform:capitalize;
color:#666;
font-weight:700;
}

Notas

Las tildes de los títulos se perderán y todo dependerá del slug que utilicemos en las categorías.

Update

Estoy utilizando la función «ucwords» en el código. Básicamente el código agarra el URL y lo secciona con el criterio «/». El resultado es un array con caracteres en minúscula. Este problema lo solucionaba con CSS (text-transform:capitalize), pero olvidé que a Google no le importa el código CSS, así que lo indexaba en minúscula.

Update 2

Actualizé el código por si colocan el código en «archive.php», todavía lo sigo probando en este archivo. Por el momento funciona sin problemas para las categorías, author pages y tag pages.

Update 3

Corrección de los permalinks (post-name a postname) gracias a Jose David Cortes.

Custom Solutions for your business

Experience, Quality and Security

Contact us