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.

WordPress es un sistema de gestión de contenido enfocado a la creación de blogs. Es utilizado también como CMS.

Ver todos los artículos acerca de Wordpress »

Hola! Soy un Desarrollador Web, trabajo con frameworks PHP y Tecnologías Front-End.

Ver todos mis artículos »

     

Comentarios

  1. Hola excelente codigo lo estoy usando para un sitio con el cual estoy aprendiendo a trabajar con wordpress. Soy nueva en esto. Pero me preguntaba si es posible con este codigo que aparezcan en el breadcrumb los hijos de las categorias y de las paginas. O sea en vez de:
    Estás en Inicio » Logotipos
    sea:
    Estás en Inicio »Portafolio » Logotipos.
    Aqui Portafolio es la categoria padre y Logotipos la hija.
    Perdon el enredo. Gracias en adelanto por cualquier ayuda.

    Azura — septiembre 9, 2010 @ 6:56 pm

  2. @Azura, el código utiliza básicamente la URL de la página en la que estas ingresando. Es decir que si nuestra URL es http://example.com/categoria1/categoria-hijo-1/post
    aparecerá “Estás en Inicio >> Categoria 1 >> Categoría Hijo 1 >> Post”, pero si ingresas a http://example.com/categoria-hijo-1/post ya no aparecerá la “Categoría 1”.

    Todo depende de la URL. Ahora existen otras soluciones via plugins ( http://wordpress.org/extend/plugins/breadcrumb-navxt/ ) o con un enfoque diferente.

    Rene Silvaseptiembre 10, 2010 @ 8:08 am

  3. Al parecer funciona bien para entradas, pero al colocarlo para el sistema de archivos, me tira un error, más o menos en la altura de la línea 41. Así que sólo lo voy a utilizar en entradas.

    Flibertynoviembre 22, 2010 @ 11:21 pm

  4. @Fliberty, hice una actualización al script. Es el mismo que estamos utilizando en los blogs de Eressea en este momento y lo coloque en single.php, page.php e incluso archive.php. No tuve problemas hasta el momento (disculpas por si el script estaba medio desactualizado).

    Rene Silvanoviembre 23, 2010 @ 9:54 am

  5. @Rene Silva, modifiqué el código del breadcrumb anterior por el que supuestamente actualizaste, (por que supongo que el que ahora se ve es el actual), bueno al acceder a un post, deberia mostrar: Estas en inicio >> category padre >> category hijo >> entrada
    ó en todo caso
    estas en inicio >> category >> entrada

    Pero el hecho es que me muestra sólo: Estás en Inicio >> Entrada

    Muchas gracias…

    Flibertyabril 6, 2011 @ 2:34 pm

  6. @Flibery, antes que nada debemos tener la siguiente estructura de permalinks “/%category%/%post-name%/”, el problema puede ser que la categoría choca con alguna de las restricciones. Sería de gran ayuda si nos pasases la URL de la categoría y el post.

    Rene Silvaabril 7, 2011 @ 10:17 am

  7. La plantilla ya tiene breadcrumbs pero me aparece “You are here Home” y luego la ruta pero no puedo cambiar este texto en español alguna idea? se los agradecería bastante.

    Pako | Paginas Web Colimaagosto 14, 2011 @ 12:26 am

  8. hola,
    creo que no todos saben de lo que hablas cuando dices: “/%category%/%post-name%/”
    Tengo dos cosas que aportar.
    1. Para poder modificar tu permalink(enlaces permanetes) debes ir a ajustes(settings) y seleccionar “estructura personalizada”
    2. en la version 3.2.1 la forma correcta de la variable es: “/%category%/%postname%/” , sin “-”

    saludos!

    Jose David Cortesoctubre 11, 2011 @ 8:50 am

  9. Te agradezco, me ha servido mucho

    Luis Hendrix — noviembre 8, 2013 @ 1:41 pm

  10. René! has salvado mi vidaaaaa!!!! muchisimas gracias por este aporte :) muy feliz!

    Cindy — julio 25, 2014 @ 11:44 am