Tutorial WordPress: Diseñar breadcrumbs con HTML básico y CSS simple

Introducción: ¿Por qué usar breadcrumbs en WordPress?

Breadcrumbs (migas de pan) mejoran la navegación, la usabilidad y el SEO de un sitio WordPress. Permiten al usuario entender su posición dentro de la jerarquía del sitio y facilitan el rastreo por parte de los buscadores. Este tutorial muestra cómo diseñar breadcrumbs con HTML básico y CSS simple, y cómo integrarlos en un tema de WordPress sin depender de plugins pesados.

Conceptos clave antes de comenzar

Accesibilidad: los breadcrumbs deben ser fáciles de leer por lectores de pantalla y navegadores.
Semántica: usar una lista ordenada (ol) para reflejar la jerarquía.
Integración: el código PHP irá en el tema (functions.php o plantilla) y el CSS en el archivo style.css o en una hoja específica.

Estructura HTML recomendada

Una estructura simple, semántica y accesible usa una lista ordenada. Aunque aquí mostramos el HTML como ejemplo, el código real en WordPress se generará desde PHP.

Ejemplo de HTML básico para breadcrumbs

ltol class=breadcrumbs aria-label=Breadcrumbgt
  ltli class=breadcrumb-itemgtlta href=/gtIniciolt/agtlt/ligt
  ltli class=breadcrumb-itemgtlta href=/categoriagtCategoríalt/agtlt/ligt
  ltli class=breadcrumb-item active aria-current=pagegtEntrada Actuallt/ligt
lt/olgt

CSS simple para diseñar breadcrumbs

El siguiente CSS crea una apariencia limpia, con separadores utilizando ::before y una versión responsiva. Es intencionalmente simple y fácil de adaptar.

Ejemplo de CSS

.breadcrumbs{
  list-style: none
  padding: 0
  margin: 0
  display: flex
  flex-wrap: wrap
  font-size: 0.95rem
  align-items: center
}
.breadcrumb-item{
  margin: 0
  padding: 0
  display: inline-flex
  align-items: center
}
/ Separador mediante pseudo-elemento excepto en el primer elemento /
.breadcrumb-item   .breadcrumb-item::before{
  content: ›
  margin: 0 0.6rem
  color: #bbb
  font-size: 0.9rem
}
/ Enlaces /
.breadcrumb-item a{
  color: #0073aa
  text-decoration: none
}
.breadcrumb-item a:hover{
  color: #005177
  text-decoration: underline
}
/ Ítem activo (página actual) /
.breadcrumb-item.active{
  color: #333
  font-weight: 600
}
/ Responsive: en pantallas pequeñas mostrar separación más pequeña /
@media (max-width: 480px){
  .breadcrumb-item   .breadcrumb-item::before{
    margin: 0 0.35rem
  }
  .breadcrumbs{
    font-size: 0.85rem
  }
}

Generador sencillo de breadcrumbs en PHP para WordPress

Este fragmento PHP muestra una función ligera para construir breadcrumbs según el tipo de vista: inicio, categoría, entradas, páginas y búsqueda. Se puede pegar en functions.php o en un archivo de utilidades del tema.

Ejemplo de función PHP

/ Función simple para breadcrumbs /
function mi_tema_breadcrumbs() {
  if (is_front_page()) { return } // no mostrar en la portada si no se desea

  echo ltol class=breadcrumbs aria-label=Breadcrumbgt

  // Enlace a inicio
  echo ltli class=breadcrumb-itemgtlta href= . esc_url(home_url(/)) . gtIniciolt/agtlt/ligt

  if (is_home()  is_front_page()) {
    // nada más
  } elseif (is_category()  is_single()) {
    if (is_single()) {
      cats = get_the_category()
      if (cats) {
        cat = cats[0]
        cat_link = get_category_link(cat->term_id)
        echo ltli class=breadcrumb-itemgtlta href= . esc_url(cat_link) . gt . esc_html(cat->name) . lt/agtlt/ligt
      }
      // título del post actual
      echo ltli class=breadcrumb-item active aria-current=pagegt . get_the_title() . lt/ligt
    } else {
      // archivo de categoría
      category = get_queried_object()
      echo ltli class=breadcrumb-item active aria-current=pagegt . esc_html(category->name) . lt/ligt
    }
  } elseif (is_page()) {
    // páginas jerárquicas: recorrer padres
    global post
    if (post->post_parent) {
      ancestors = array_reverse(get_post_ancestors(post->ID))
      foreach (ancestors as ancestor_id) {
        title = get_the_title(ancestor_id)
        permalink = get_permalink(ancestor_id)
        echo ltli class=breadcrumb-itemgtlta href= . esc_url(permalink) . gt . esc_html(title) . lt/agtlt/ligt
      }
    }
    echo ltli class=breadcrumb-item active aria-current=pagegt . get_the_title() . lt/ligt
  } elseif (is_search()) {
    echo ltli class=breadcrumb-item active aria-current=pagegtResultados de búsqueda para:  . get_search_query(false) . lt/ligt
  } elseif (is_tag()) {
    tag = get_queried_object()
    echo ltli class=breadcrumb-item active aria-current=pagegt . esc_html(tag->name) . lt/ligt
  } elseif (is_author()) {
    author = get_queried_object()
    echo ltli class=breadcrumb-item active aria-current=pagegtAutor:  . esc_html(author->display_name) . lt/ligt
  } else {
    // otras vistas: archivo, 404, etc.
    if (is_archive()) {
      the_archive_title( ltli class=breadcrumb-item active aria-current=pagegt, lt/ligt )
    } elseif (is_404()) {
      echo ltli class=breadcrumb-item active aria-current=pagegt404 - No encontradolt/ligt
    }
  }

  echo lt/olgt
}

Cómo llamar a la función desde la plantilla

Inserta la llamada en el lugar apropiado de tu tema, por ejemplo en header.php o en la plantilla single.php justo después del título o del contenedor principal:

lt?php if (function_exists(mi_tema_breadcrumbs)) { mi_tema_breadcrumbs() } ?gt

Mejoras y buenas prácticas

Escapar salidas: usa esc_html(), esc_url() y otros métodos de escape como en el ejemplo.
Microdatos/JSON-LD: considera añadir marcado estructurado para mejorar el renderizado en resultados de búsqueda. Esto se puede añadir dentro del HTML de la lista o mediante JSON-LD en la cabecera.
Ocultar en móviles: si el espacio es limitado, puedes ocultar parte del breadcrumb y mostrar solo el inicio y la página actual mediante CSS o truncado via JS.
Cache: si tu función es costosa y tu sitio tiene mucho tráfico, cachea la salida por URL.

Ejemplo rápido de CSS para ocultar tramo intermedio en pantallas pequeñas

/ Mostrar solo primer y último en móvil /
@media (max-width: 420px){
  .breadcrumb-item:not(:first-child):not(:last-child){
    display: none
  }
  .breadcrumb-item   .breadcrumb-item::before{
    / Ajustar separador cuando algunos items están ocultos /
    margin: 0 0.4rem
  }
}

Tabla resumida de propiedades CSS útiles

Propiedad	Uso
display:flex	Permite alinear ítems horizontalmente y manejar el wrapping
list-style:none	Oculta viñetas predeterminadas de la lista
::before	Crear separadores sin agregar elementos extra al HTML
aria-current=page	Mejora la accesibilidad indicando la página actual

Compatibilidad y consideración SEO

Los breadcrumbs construidos con una lista son amigables para SEO. Si añades microdatos o JSON-LD, sigues las recomendaciones de Google para breadcrumbs. No uses demasiadas rutas profundas que compliquen la estructura del sitio.

Resumen práctico

Define una estructura HTML semántica (ol gt li) para breadcrumbs.
Aplica CSS simple para separación y estilo, usando pseudo-elementos para los separadores.
Genera el HTML desde PHP en tu tema de WordPress, escapando todas las salidas.
Considera accesibilidad y marcado estructurado para SEO.

Fragmentos finales

Los ejemplos anteriores proporcionan una base clara y ligera para implementar breadcrumbs sin plugins. Se pueden adaptar y ampliar según la complejidad del sitio y las necesidades de diseño.

SushiHost