Agregar un Breadcrumb (migas de pan) a WordPress

En la web se usa el termino Breadcrumb (en inglés migas de pan), para referirse a un grupo de enlaces en las páginas, creados para facilitar la navegación y mostrar la estructura del sitio.
Son de gran utilidad, para orientar a los lectores e incluso nos ayudan con los buscadores
En sitios con varios niveles de directorios pueden ser varios, pero en WordPress, solo se necesitan tres.
Por ejemplo: Home – > Categoría – > Pagina actual.
En este artículo explico cómo insertarlos de forma automática mediante un script, de forma sumamente sencilla y así evitar tener que instalar ningún plugin adicional.
Además los datos estructurados necesarios en formato JSON, para que el mismo Breadcrumb aparezca encima el cuadro de resultado de las búsquedas en Google.

Como crear un Breadcrumb o enlaces de navegación

Para implementar este método se necesita agregar el script que comparto, en el archivo de configuración “functions.php”, creado previamente en una la carpeta Child del tema activo.
También se puede agregar en un plugin personal.
Posteriormente debemos insertar la función que lo llama y lo escribe, en el sitio exacto de la plantilla necesaria.

Código para crear el Breadcrumb o Migas de pan

Copia y pega el siguiente código en “functions.php” o en un plugin personal.

function agregar_breadcrumb() {
echo '<a href="'.home_url().'">Home</a>';
if ( is_single() || is_category()) {  
echo " | ";     
     the_category(' - ');  
if (is_single()) {	 
       echo " | ";
       the_title();
 }}
 elseif (is_page()) {
 echo " | ";
echo the_title();
} 
}

Este Breadcrumb extremadamente sencillo, se puede mostrar en (posts) publicaciones, en páginas y categorías.

Insertar y escribir el Breadcrumb en posts

El grupo de enlaces que deseamos mostrar se puede situar en varios sitios, dependiendo de nuestro gusto y del tema usado.
En este blog lo sitúo inmediatamente bajo el contenido del post o publicación.
Para eso se debe hacer una copia de la plantilla “single.php” en la carpeta Child indicada.
Seguidamente editarla y situar la siguiente instrucción, después del cierre del Loop.
También se puede situar en páginas o categorías, siempre antes de la etiqueta de cierre </main>.

<div class="breadc"><?php agregar_breadcrumb(); ?></div><br/>

También es posible situarla de forma contraria, sobre el contenido.
Para eso se debe insertar antes del comienzo del Loop.
En otros temas diferentes al que uso, se puede agregar el Breadcrumb en el archivo “header.php”.

Personalizar el estilo del Breadcrumb

Los que deseen pueden agregarle unas reglas CSS al archivo “style.css” del tema Child, para darle un estilo que lo distinga del resto del contenido.
En este caso yo uso las siguientes instrucciones.

.breadc{font-size:0.9em;background-color:#eeeeee;padding:12px;margin:0px;}
.breadc a{text-decoration:underline;}

Agregar los datos estructurados en formato JSON

El siguiente método es opcional.
Permite agregar la información requerida por Google, para que el Breadcrumb también aparezca sobre el cuadro con el resultado de búsquedas de nuestras páginas en el buscador.
Para lograrlo agrega el siguiente código bajo el anterior.

//Agregar metadatos JSON busqueda 
function agregar_breadcrumb_json() {
$category = '';
$catename = '';
$category_id = '';
foreach((get_the_category()) as $category){
$catename = $category->name;
$category_id = get_cat_ID( $catename );
$category_link = get_category_link( $category_id );
}
	 if ( is_single() ) {
	?>	
	<script type="application/ld+json">
		{	
	 "@context": "http://schema.org",
	 "@type": "BreadcrumbList",
	 "itemListElement":[
	  {
	   "@type": "ListItem",
	   "position": 1,
	   "item":
	   {
        "@id": "<?php echo home_url(); ?>",
	    "name": "<?php echo bloginfo( 'name' ); ?>"
	    }
	  },
	  {
	  "@type": "ListItem",
	  "position": 2,
	  "item":
	   {
	    "@id": "<?php echo esc_url(get_category_link( $category_id )); ?>",
	    "name": "<?php echo $catename; ?>"
	   }
	  },	  
	  {
	  "@type": "ListItem",
	  "position": 3,
	  "item":
	   {
	     "@id": "<?php echo get_permalink(); ?>",
	     "name": "<?php echo get_the_title(); ?>"
	   }
	  }]
	  }
	</script>
	<?php 
}
}
add_action('wp_footer','agregar_breadcrumb_json');    

La sección del código entre las etiquetas “script”, se puede minimizar usando herramientas como JSON Minifier.
El resultado se puede comprobar mirando el código fuente con el navegador (Control + U) de cualquier entrada del blog y sus datos deben coincidir con lo que muestra el Breadcrumb en la página.
Este código ha sido creado para los sitios instalados en la raíz del servidor.
Es opcional también minimizar el JSON previamente.
La validez de los datos estructurados, se debe comprobar con la herramienta que proporciona Google.

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales