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).
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.
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.
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».
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.
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.
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.
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.
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.
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.
