Agregar un Breadcrumb (migas de pan) a WordPress

Código para generar los enlaces de navegación en nuestro blog y los datos estructurados JSON, para que se muestren en los resultados de búsqueda de Google.

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.
No es el caso de este blog, que está integrado dentro del sitio NorfiPC, como se puede comprobar en el Breadcrumb en la parte inferior.
Es opcional también minimizar el JSON previamente.
La validez de los datos estructurados, se debe comprobar con la herramienta que proporciona Google.

Estoy en: NorfiPC | Notas | WordPress | Agregar un Breadcrumb (migas de pan) a WordPress



Páginas relacionadas

Buscar con Google