Los 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 ' » <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 ' » <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.
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
@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 Silva — septiembre 10, 2010 @ 8:08 am
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.
Fliberty — noviembre 22, 2010 @ 11:21 pm
@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 Silva — noviembre 23, 2010 @ 9:54 am
@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…
Fliberty — abril 6, 2011 @ 2:34 pm
@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 Silva — abril 7, 2011 @ 10:17 am
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 Colima — agosto 14, 2011 @ 12:26 am
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 Cortes — octubre 11, 2011 @ 8:50 am
Te agradezco, me ha servido mucho
Luis Hendrix — noviembre 8, 2013 @ 1:41 pm
René! has salvado mi vidaaaaa!!!! muchisimas gracias por este aporte :) muy feliz!
Cindy — julio 25, 2014 @ 11:44 am