En WordPress, las rutas de navegación son un tipo de elemento de navegación que ayuda a los usuarios a comprender la estructura de su sitio web y su ubicación actual dentro de él.
Por lo general, se muestran como una serie de enlaces en la parte superior de una página, separados por un delimitador como un símbolo “>”.
Por ejemplo, si tiene un sitio web con una estructura como “Inicio > Blog > Categoría > Publicación”, la ruta de navegación para una publicación en particular podría verse así:
Inicio > Blog > Categoría > Publicar
Las rutas de navegación proporcionan una forma útil para que los usuarios regresen rápidamente a un nivel superior en la jerarquía del sitio web y también pueden ayudar a los motores de búsqueda a comprender la estructura de su sitio web y su contenido.
Estos son algunos fragmentos de código para generar rutas de navegación y esquemas de rutas de navegación sin un complemento de SEO.
Table of Contents
¿Por que no usar un Plugin de SEO
Hay situaciones en las que probablemente quieras codificar un complemento simple y no utilizar un complemento de SEO.
- Si eres como yo, sólo querrás utilizar complementos cuyas funciones sean tan complejas que puedan ser reemplazadas por simples fragmentos de código.
- Estás harto y cansado de los complementos de SEO que tienen un montón de funciones que realmente no necesitas.
- Probablemente tenga un complemento, pero deberá pagar una suscripción premium si necesita agregar rutas de navegación y un esquema de ruta de navegación a su sitio.
Tomemos SEOPress como ejemplo, si necesita rutas de navegación o un esquema de rutas de navegación, debe pagar $ 49 al año por esa función y otras funciones que podría necesitar o no.
Código para Crear Breadcrumbs sin un Plugin
Yo utilizo la carpeta mu-plugins para agregar fragmentos de código a mi sitio
Este es mi mu-plugin para crear breadcrumbs a mi sitio de WordPress
<?php
/*
Plugin Name: Breadcrumbs
Plugin URI: https://ticolibre.com
Description: Add breadcrumbs to posts and pages
Version: 1.0
Author: TicoLibre
Author URI: https://ticolibre.com
*/
/* Shortcode to display breadcrumbs. */
function custom_breadcrumbs_shortcode() {
// Define the separator between breadcrumbs
$separator = ' > ';
// Get the current post/page ID
$current_page_id = get_queried_object_id();
// Start the breadcrumbs output
$breadcrumbs = '<div class="breadcrumbs">';
// Add an SVG icon for Home
$home_svg_icon = '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>';
$breadcrumbs .= '<a href="' . esc_url(home_url()) . '">' . $home_svg_icon . '</a><span class="separator">' . $separator . '</span>';
// Check if it's a single post
if (is_single()) {
// Get the post categories
$categories = get_the_category();
if ($categories) {
foreach ($categories as $category) {
$breadcrumbs .= '<a href="' . esc_url(get_category_link($category->term_id)) . '">' . esc_html($category->name) . '</a><span class="separator">' . $separator . '</span>';
}
}
// Add the post title
$breadcrumbs .= esc_html(get_the_title());
} elseif (is_page()) {
// Add the page title
$breadcrumbs .= esc_html(get_the_title());
}
// End the breadcrumbs output
$breadcrumbs .= '</div>';
// Return the breadcrumbs
return $breadcrumbs;
}
// Register the shortcode
add_shortcode('custom_breadcrumbs', 'custom_breadcrumbs_shortcode');
Esto no agregará los breadcrumbs a tu publicación y páginas automáticamente, por lo que debes agregarlos a tu sección de héroe mediante un shortcode
[custom_breadcrumbs]
Debido a que uso GeneratePress y GenerateBlock, el shortcode anterior lo agrego a la sección de hero, por lo que una vez hecho esto, los breadcrumbs son agregados a mis publicaciones y paginas.
Breadcrumbs Schema without a Plugin
Este es mi mu-plugin para generar el schema para los breadcrumbs
<?php
/*
Plugin Name: Breadcrumbs Json
Plugin URI: https://ticolibre.com
Description: Add a JSON Data for Search Engines
Version: 1.0
Author: TicoLibre
Author URI: https://ticolibre.com
*/
function get_breadcrumb_json_ld() {
$home_url = get_home_url();
$post_categories = get_the_category();
$first_category = $post_categories[0];
$category_url = get_category_link($first_category->term_id);
$post_title = get_the_title();
$post_url = get_the_permalink();
$json_ld = array(
'@context' => 'https://schema.org',
'@type' => 'BreadcrumbList',
'name' => 'Breadcrumb',
'itemListElement' => array(
array(
'@type' => 'ListItem',
'position' => 1,
'name' => 'Home',
'item' => array(
'@id' => $home_url,
),
),
array(
'@type' => 'ListItem',
'position' => 2,
'name' => $first_category->name,
'item' => array(
'@id' => $category_url,
),
),
array(
'@type' => 'ListItem',
'position' => 3,
'name' => $post_title,
'item' => array(
'@id' => $post_url,
),
),
),
);
return json_encode($json_ld, JSON_UNESCAPED_SLASHES);
}
//Output JSON LD to the footer
function output_breadcrumb_json_ld() {
if ( is_single() ) {
$json_ld = get_breadcrumb_json_ld();
echo '<script type="application/ld+json">' . $json_ld . '</script>';
}
}
add_action('wp_footer', 'output_breadcrumb_json_ld');
Yo he probado el schema generado por el plugin usando validadores de schema y las pruebas de rich snippets de Google y el schema generado por el plugin pasa ambos tipos de pruebas.