Por si no lo sabías los breadcrumbs o migas de pan en el idioma de cervantes, es un método de navegación usado en muchos sitios y foros web , seguro que te suena esta imagen en tus visitas por Internet:
Si tu sitio en wordpress no dispone de breadcrumbs sería buena idea que te lo plantearas.
Esto ayudaría a que tus visitantes no naveguen a ciegas y se pierdan en un sinfín de páginas y categorías anidadas , lo que muy probablemente lleve al usuario a perderse y abandonar tu sitio .
Tenemos varias opciones para implementar esto en wordpress.
1.Utilizar plugins.
Podemos utilizar varios plugins que hay en el repositorio que nos ayudarían a esta tarea , entre ellos:
Breadcrumb NavXT
Es uno de los más populares y usados por los usuarios de wordpress.
Uno de sus defectos es que no usa shortcodes.
Breadcrumb Trail
Otro plugin que está muy bien valorado pero necesita de editar insertar código en los archivos de la plantilla , por lo que no es apto para usuarios que solo quieran hacer click y instalar y con eso ya este todo hecho.
Breadcrumb
Plugin de pago con muchas opciones e integraciones, incluso una lista de temas para hacerlos más visual.
No voy a dar más detalles sobre características de ningún plugin porque nadie mejor para hacerlo que sus autores y disponemos de toda la documentación en los enlaces a ellos.
2.Si utilizas Yoast SEO…
Si ya utilizas el famoso plugin para seo en wp Yoast SEO lo tienes más fácil ya que entre sus características dispone de soporte a breadcrumbs , solo tenemos que activarlas así:
y después según la documentación debemos añadir este fragmento de código en los archivos del tema que nos indica.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
con esto ya dispones de tu barra de navegación en tu sitio.
3.Por medio de código y sin plugins.
He dejado para el final la opción que más me gusta a mi y es que no soy muy asiduo al uso de plugins para cualquier cosa (siempre que pueda evitarlo).
Utilizando esta función que muestro a continuación en nuestro functions.php y llamándola desde los archivos archive.php, index.php, page.php y single.php también se puede hacer el trabajo.
En este caso sería crear una acción en functions.php:
if( !function_exists('hikari_breadcrumbs') ):
function hikari_breadcrumbs(){
if(get_theme_mod('hikari_breadcrumbs',true)):
$separator= ' / ';
$blogname = get_option( 'page_for_posts' )==0 ? 'Blog': get_the_title(get_option( 'page_for_posts' ));
$bloglink = get_option( 'page_for_posts' )==0 ? esc_url( home_url( '/' ) ) : get_permalink( get_option( 'page_for_posts' ) );
echo '<div id="h_breadcrumbs">';
printf('<a href="%1$s" >%2$s</a>%3$s',get_option('home'),get_bloginfo('name'), $separator);
if (!is_home()){
/* no es el blog index.php*/
if (is_category() || is_single()) {
/* Es category.php o es single.php por lo tanto estan dentro del blog */
$categories = get_the_category('');
printf('<a href="%1$s">%2$s</a>%3$s',$bloglink,$blogname,$separator);
printf('<a href="%1$s" >%2$s</a>',esc_url(get_category_link($categories[0]->term_id)),esc_html($categories[0]->cat_name));
if (is_single()) {
/* Es solo single.php , imprimimos el titulo del post y el separador*/
the_title($separator,'');
}
} elseif (is_page()) {
/* Es page.php , imprimimos el nombre de la pagina*/
the_title();
}
}else{
/* Es el blog index.php, imprimimos el inicio con el nombre del blog*/
printf('<a href="%1$s" >%2$s</a>',$bloglink,$blogname);
}
echo '</div>';
endif;
}
add_action( 'hikari_action_breadcrumbs','hikari_breadcrumbs');
endif;
Hikari es el nombre del tema que yo realice para este trabajo pero le podéis poner el prefijo que vaya mejor.
Después llamáis a la acción desde alguno de los archivos citados anteriormente con la particularidad que siempre se debe hacer antes del loop de wordpress , osea antes del algún código parecido a esto:
while ( have_posts() ) : the_post();
Entonces la llamada en mi single.php seria asi:
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
/* breadcrumbs*/
do_action( 'hikari_action_breadcrumbs');
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
the_post_navigation( array(
'prev_text' => __( 'Previous <span>%title</span>' ,'hikari' ) ,
'next_text' => __( 'Next <span>%title</span>' ,'hikari' ),
'screen_reader_text' => __( 'Continue Reading','hikari' ),
) );
Una vez implementado solo nos queda darle estilo y que sea acorde al diseño de nuestra web. Podemos utilizar el personalizador de wp donde una sección es CSS Adicional.
y hay, suponiendo que dominamos algo css, darle estilo al breadcrumb que hayamos elegido.
Conclusión:
Casi todas las opciones nos hacen tener que editar archivos del tema , algo no muy recomendable porque cuando se actualice el tema estos cambios desaparecerán y no servirá de nada.
Por lo tanto también se me ocurre que si no queremos tocar archivos del tema (por las desventajas que comentado antes) podemos utilizar un complemento llamado Code Snippets para incluir nuestra funcione en el functions.php sin riesgo que desaparezca al actualizarse el tema , este si es un plugin de los que no tengo reparos en utilizar por su utilidad.
Al final debemos velar por la comodidad de nuestros usuarios y esto seria una tarea mas para ello, seguro nos lo agradecerán.
Si te ha gustado o no el artículo o quieres compartir algo sobre el tema, deja tus comentarios , un saludo.