Estás en Inicio » How To » Cómo agregar BreadCrumb sin utilizar un plugin en Wordpress

Cómo agregar BreadCrumb sin utilizar un plugin en WordPress

4/01/2010 | Categoría: Diseño Web, How to | Tags: , | Por: Rene Silva

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%/%post-name%/” (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 base después
	$c = array_intersect($a, $b);
	$url_array = array_diff($b, $c);
	//sacamos el nombre del post del array o si tiene
	//comentarios los quitamos del array
	array_pop($url_array);
	//para quitar los comentarios del array o algún pedido (parecido a ?utm...)
	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.'/">Inicio</a>';
	$dir = $url.'/';
	if(is_single())
	{
		//para posts
		foreach($url_array as $folder)
		{
			//del tipo www.example.com/categoria
			$dir = $url.'/'.$folder.'/';
			echo ' &raquo; <a href="'.$dir.'">'.ucwords(str_replace("-", " ", $folder) ). '</a>';
		}
	} else
	{
		//para paginas
		foreach($url_array as $folder)
		{
			//los folders se van acoplando
			$dir = $dir.$folder.'/';
			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 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.

Deja un comentario

Por Rene Silva

René Silva es un Desarrollador Web especializado en Tecnologías FrontEnd y Frameworks PHP. Puedes seguirlo en Twitter, en Google (Buzz) y en Friendfeed.

Email
Email Recibe las nuevas actualizaciones via Email
RSS Suscríbete por RSS