¿Cómo añadir Migas de pan o Breadcrumbs en GeneratePress?

En este tutorial, vamos a aprender a añadir las migas de pan – Breadcrumbs en inglés – en el tema de GeneratePress. Te voy a mostrar utilizando el Elemento Hook (Gancho), que es una característica de la versión Premium de GeneratePress, y el plugin Yoast SEO.

GeneratePress es un tema gratuito y ligero que puede ser ampliado mediante la instalación de un plugin Premium que permite añadir muchas características y funciones. Es un tema receptivo personalizable y bien codificado construido con un enfoque en la velocidad y la usabilidad.

Una de las muchas cosas que puedes hacer con el plugin GP premium es usar los Elementos Hook para enganchar tu propio código personalizado en varias áreas del tema sin cambiar los archivos del tema principal.

En este blog, estoy usando la versión premium de GeneratePress que incluye características como Elementos, Site library (diseño predeterminado), tipografía, secciones y muchas otras características.

Qué son las migas de pan y cómo mejoran tu SEO

Escribí una guía más detallada sobre este tema, a continuación te dejo un resumen.

La miga de pan es un camino situado en la parte superior de la publicación que proporcionan a los usuarios una visión general fácil de entender sobre dónde se encuentran en tu página web.

Los Breadcrumbs son una parte importante del SEO.

Entre los más de 200 factores de posicionamiento, Google incluyó Breadcrumbs como uno. Además, Google incluye las migas de pan de nuestro sitio web en las páginas de resultados de los motores de búsqueda (SERP).

breadcrumbs en los serp de google

Ayudan en la estructura de enlaces internos, una característica del SEO On Page muy importante para Google. Mediante estos enlaces internos, ayudan también a mejorar el tiempo de permanencia y a disminuir la tasa de rebote en un sitio web.

Habilitar las migas de pan con el plugin Yoast SEO

Los siguientes pasos asumen que estás usando el plugin de Yoast SEO en tu sitio web. Si estás usando este plugin, entonces es una excelente opción. Manejo el SEO de mi página web usando la versión gratuita de Yoast SEO y estoy muy satisfecho de lo que ofrece.

Lo primero que tienes que hacer es activar las migas de pan en los ajustes de Yoast. Para hacerlo, accede a Yoast SEO en la barra lateral > Apariencia en el buscador > Migas de pan.

Haz clic en el botón Activo y rellena el resto de los ajustes de la forma que prefieras para tu propio sitio web.

ajustes de las migas de pan con el plugin yoast seo

Un punto importante a señalar aquí es la Taxonomía a mostrar en las migas de pan para los tipos de contenido. Personalmente prefiero que el nombre de la categoría se incluya en los Breadcrumbs, ecpecialmente en las SERPs de Google. Simplemente selecciona Categoría en la lista desplegable Entradas (posts) y pulsa el botón Guardar cambios.

Añadir las migas de pan en el tema de GeneratePress

Como mencioné en la introducción, no necesitas instalar ningún plugin para añadir las migas de pan. Se recomienda usar la menor cantidad de plugin posible para que tu página web se cargue más rápido.

1 – Crea un elemento Hook

Para este método, necesitas habilitar el módulo de Elementos en la configuración del tema Premium de GeneratePress.

Apariencia > GeneratePress > Módulos > Elementos > Activar

De la misma manera que para Google Analytics, el primer paso es crear un nuevo elemento Hook. Ingresa a tu área de administración de WordPress y haz clic en Apariencia > Elementos en la barra izquierda y luego haz clic en Añadir un nuevo Elemento arriba y selecciona Hook en la lista desplegable.

crear un nuevo elemento hook en generatepress

En la pantalla que sigue, puedes editar tu nuevo elemento Hook.

2 – Añade la función PHP de Yoast SEO

Agrega un título al Hook, en este caso «Breadcrumbs» o «Migas de pan».

añadir las migas de pan en generatepress con la funcion de yoast seo

En el cuadro de edición, copia y pega el código de Breadcrumbs de Yoast SEO como se indica a continuación.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

3 – Configura los ajustes del Hook

Elige la ubicación del Hook que quieras a través del menú desplegable de selección para mostrar las migas de pan en tu sitio web.

Elegí estar en generate_before_main_content y puedes ver cómo se ve arriba de esta página.

ajustes del hook de generatepress para mostrar los breadcrumbs

Como puedes ver, la lista tiene muchas opciones. Puedes consultar la lista de posiciones de Hook en este gráfico visual creado por GeneratePress y seleccionar el posicionamiento requerido para tu sitio.

Te dejo acá la captura de pantalla de las principales posiciones que se usan para las migas de pan.

posiciones para el hook en generatepress

En la pestaña Reglas para Mostrar, junto a Posición, selecciona Entrada y All Entradas para que se muestran en los artículos del blog.

configurar la posicion de las migas de pan en las entradas

Esta sección te permite que las migas de pan aparezcan donde quieras. Personalmente, sólo quiero que aparezcan en las entradas del blog, pero si quieres que también aparezcan en las páginas, sólo tienes que Añadir regla de ubicación.

Incluso puedes Añadir regla de exclusión. Por ejemplo, si tienes una página de destino (Landing page), puedes añadir una regla para no tener migas de pan en esa página específica.

4 – Publica el Elemento Hook

Ahí está, has creado un Elemento Hook para mostrar las migas de pan en las entradas del blog.

Ahora sólo tienes que pulsar el botón de publicación y deberías poder ver las migas de pan en tu sitio.

publicar el elemento hook

Echa un vistazo y mira cómo son las migas de pan. Lo más probable es que quieras cambiar un poco el estilo, que afortunado eres es lo que explicaré en el siguiente paso.

alojamiento wordpress webempresa

servidor wordpress webempresa

Cambiar el estilo de las migas de pan usando CSS

El último paso de este tutorial es el estilo de la miga de pan.

La forma más fácil es dentro del Customizer que puedes encontrar en la barra lateral Apariencia > Personalizar > CSS Adicional.

Escribe el siguiente código CSS y pulsa guardar.

#breadcrumbs {
	font-size: 16px;
	letter-spacing: 2px;
        padding-left: 10px;
        padding-right: 10px;
}


@media all and (max-width:768px) {
	#breadcrumbs {
	font-size: 14px !important;
        padding-left: 30px;
        }
        .breadcrumb_last{
        display:none;
	}
}

Este es el código CSS específico de mi sitio. Como puedes ver, he añadido un estilo para posicionar las migas de pan de cierta manera en relación con el resto de la página. También cambié el tamaño de la tipografía para que sea un poco más pequeño que el tamaño de la tipografía dentro del contenido, y agregué espacios entre las letras.

¡Muy importante! El primer CSS es general, pero el siguiente @media es específico para los celulares. Hoy en día, la mitad de las búsquedas se hacen en dispositivos móviles, así que nunca olvides configurar tu CSS para que tu sitio web sea responsivo. En este ejemplo he reducido el tamaño del texto para que ocupe menos espacio en la pantalla y borré el título de la página para guardar Inicio > Categoría y justo debajo el título principal de la entrada del blog.

Por supuesto, puedes ajustar el código CSS anterior de acuerdo a tus necesidades.

Conclusión

Así de simple se agregan las migas de pan al tema de GeneratePress. No se necesitan plugins adicionales y no hay códigos complejos.

Si no estás usando el plugin Yoast SEO, entonces puedes encontrar un método similar para añadir migas de pan en GeneratePress, la función PHP será diferente. Necesitas verlo con tu plugin de SEO.

Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.

Deja un comentario