Escrito por Matias Adrian Romero

06 Abr 2020

Activar las migas de Pan en WordPress

¬°Hola lector! ¬ŅHas o√≠do hablar de las migas de pan? Imagino que s√≠, por eso est√°s aqu√≠. No son las que utilizaban Hansel y Gretel para marcar el camino de vuelta cuando se adentraron en el bosque.

A√ļn que, al igual que en el cuento, la funcionalidad es bastante parecida, las migas de pan en una p√°gina web sirven para que los usuarios naveguen entre sus contenidos de una manera m√°s f√°cil e intuitiva.

Además de mejorar la experiencia de usuario también favorece al posicionamiento seo de tu web. Las migas de pan o breadcrumbs no dejan de ser enlaces internos, y estos enlaces permiten distribuir mejor el pagerank entre las distintas páginas de tu web.

Te voy a explicar dos m√©todos muy sencillos para que a√Īadas las migas de pan en tu WordPress. El primero es aprovechando una funcionalidad del plugin Yoast SEO y el segundo con Breadcrumb NavXT.

‚Ćõ¬†Tiempo estimado del tutorial: 10 minutos

Cómo agregar las migas de pan con YoastSEO

Si a√ļn no tienes instalado Yoast y no utilizas ning√ļn otro plugin de SEO en tu sitio web, esta es una buena oportunidad para que empieces a usarlo.

Lo puedes instalar y activar desde el repositorio de plugins de WordPress:

instalar yoast seo wordpress

Agregar código PHP en nuestro tema WordPress

No te asustes, es mucho m√°s f√°cil de lo que parece. Simplemente vamos a a√Īadir unas l√≠neas de c√≥digo a nuestro tema para que muestre correctamente las migas de pan.

A√Īade este c√≥digo en tu tema hijo o child theme, no lo edites en el tema principal ya que si lo haces as√≠ se te borrar√°n estos cambios cuando haya una nueva actualizaci√≥n.

Primero tenemos que elegir donde queremos que se muestren estas migas de pan, en función de eso debemos elegir editar un archivo u otro:

header page y single php

Header.php: Edita este archivo si quieres que las migas de pan aparezcan en todo tu sitio web.

Single.php: Si quieres que las migas solo aparezcan en las entradas de tu blog entonces edita este archivo.

Page.php: A√Īadiendolo en este archivo, aparecer√°n en todas las p√°ginas de tu WordPress.

Este es el c√≥digo que debemos a√Īadir:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
a√Īadir codigo migas de pan headerphp

Habilitar migas de pan desde Yoast

Una vez hayamos agregado el c√≥digo, vamos a nuestro panel WordPress > SEO > Apariencia de b√ļsqueda > Migas de Pan

Y marcamos el botón de activar.

Podemos configurar y personalizar distintas opciones a nuestro gusto:

– Separador
– Texto del enlace para la p√°gina de inicio
– Prefijo de la ruta de las migas de pan
– Prefijo para los archivos
– Prefijo para las p√°ginas de b√ļsqueda
– Mensaje de error en resultados 404

activar migas de pan yoast seo

En este ejemplo voy a utilizar el tema por defecto que trae WordPress pero funciona con cualquier tema, incluso en Divi o Astra.

Aquí podemos ver como ya aparecen las migas de pan en nuestra web justa por encima de la entrada y por debajo de la cabecera.

ver migas de pan wordpress

Modificar apariencia migas de pan WordPress

Podemos aplicarle un estilo personalizado e incluso ajustar los m√°rgenes, para ello vamos accedemos desde la barra superior a Personalizar > CSS Adicional

#breadcrumbs {
 
/*A√Īade el c√≥digo personalizado aqui*/
 
}

En este ejemplo lo que he hecho es aplicarle un margen para que se ajuste con el título de las entradas. Pero le puedes aplicar cualquier tipo de estilo css.

editar apariencia migas de pan

Cómo se agregan las migas de pan utilizando un shortcode

Si quieres insertar el cajón de las migas en cualquier localización de tu web puedes utilizar el shortcode de Yoast.

[ wpseo_breadcrumb ] *Sin espacios entre los corchetes y el texto

A√Īadir las migas de pan con Breadcrumb NAVXT

De igual manera que con Yoast, lo primero es instalar y activar el plugin.

En cuanto esté instalado lo siguiente será agregar el código correspondiente en nuestro editor de temas.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Una vez hayamos a√Īadido este c√≥digo en cualquiera de los 3 archivos que he mencionado anteriormente (header.php page.php o single.php) veremos como aparece en la parte superior de nuestra web.

Para esta prueba he utilizado otro de los temas que vienen por defecto en WordPress, pero como te he comentado antes, funciona en cualquier tema.

a√Īadir migas de pan breadcrumb navxt

Configurar el plugin breadcrumbs WordPress

Desde el Ajustes > Breadcrumb Nav XT podemos acceder al panel de configuración de este plugin.

configurar plugin breadcrumb navxt

Nos permite editar de manera independiente las plantillas que se utilizarán en las migas de pan en función de la localización donde se muestre.

Ya sea en entradas, p√°ginas, medios, taxonom√≠as y b√ļsquedas.

Cambiar apariencia con estilos CSS

Igual que con Yoast seo tenemos la posibilidad de aplicarle estilos CSS personalizados. En este caso el código que debemos utilizar desde la opción de Personalizar > CSS Personalizado

.breadcrumbs {
 
/*a√Īade aqu√≠ tu estilo CSS Personalizado*/
 
}
4/5 (1 Review)

No te vayas a√ļn, hay mucho m√°s…

Adaptación RGPD Plugin WordPress

Adaptación RGPD Plugin WordPress

Adapta tu WordPress a la nueva normativa RGPD con este Plugin gratuito. Crea en minutos los textos necesarios para la Política de Privacidad y Aviso Legal.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

web design agency 2

¬ŅQuieres triunfar con tu p√°gina web?

Suscribete y recibe las mejores gu√≠as de Dise√Īo Web con WordPress

¬°Enhorabuena! Te has suscrito correctamente a nuestro bolet√≠n de articulos de dise√Īo web.

Chat Whatsapp
Acepte nuestra política de privacidad primero para comenzar una conversación.