Breadcrumbs en WordPress usando el complemento Breadcrumb NavXT (fortalecimiento de enlaces). Migas de pan en Yoast SEO. Pan rallado delicioso

La navegación mediante ruta de navegación permite al visitante del sitio comprender en qué parte del sitio se encuentra actualmente. Normalmente, dicha navegación consta de una línea de enlaces que se encuentran en una cadena debajo del encabezado del sitio.

Esta navegación va desde la página principal del sitio a categorías, a páginas con artículos, a páginas individuales del sitio. Todos los enlaces en las rutas de navegación están activos, excepto el último, porque aquí es donde se encuentra ahora el visitante y no se necesita un enlace a esta página del sitio.

La navegación mediante ruta de navegación agrega otro elemento a los enlaces internos del sitio y permite al visitante navegar cómodamente a través de páginas y secciones del sitio, aumentando así los factores de comportamiento.

El término “Breadcrumbs” fue tomado de un cuento de hadas alemán de los hermanos Grimm. En este cuento de hadas, los niños marcaban su camino hacia el bosque, dejando a su paso migas de pan, para que, aprovechando las migas de pan que quedaban, tuvieran la oportunidad de regresar a casa.

En mi blog ya describí la instalación de rutas de navegación usando el complemento.

Breadcrumbs se puede instalar en su sitio web sin la ayuda de un complemento especial. Esto tiene sus ventajas, ya que no aumentará la carga de su sitio. Por lo tanto, es aconsejable, siempre que sea posible, sustituir los complementos utilizados en el sitio insertando código y varios scripts.

¡Atención! Antes de instalar el código, haz copias de seguridad de los archivos en los que pegarás los códigos, para que en caso de problemas puedas restaurar la funcionalidad de tu tema de WordPress.

Para instalar migas de pan, deberá pegar algunos códigos en los archivos correspondientes de su tema.

No es necesario instalar la ruta de navegación en la página principal del blog. Un visitante que escriba el nombre de un sitio en la búsqueda, en la gran mayoría de los casos, será dirigido a la página principal del sitio en los resultados de la búsqueda.

Si un visitante procede de una búsqueda a una página específica, verá su ubicación en el sitio mediante rutas de navegación. La página principal será un hipervínculo y el visitante podrá ir a la página principal si utiliza la navegación de ruta de navegación para ello.

Instalación de rutas de navegación en el sitio

Será necesario insertar dos versiones del código en los siguientes archivos de tema: “Funciones de tema (functions.php)”, “Entrada única (single.php)”, “Plantilla de página (page.php)”, “Archivos (arhvie .php)”, “ Resultados de búsqueda (search.php)".

El primer código deberá pegarse en el archivo “Theme Functions (functions.php)” instalado en su blog temático de WordPress.

// función de migas de pan dimox_breadcrumbs() ($showOnHome = 0; // 1 - muestra migas de pan en la página principal, 0 - no muestra $delimiter = """; // divide entre "migas de pan" $home = "Home "; // enlace de texto "Inicio" $showCurrent = 1; // 1 - muestra el título del artículo/página actual, 0 - no muestra $before = " "; // etiqueta antes de la "migaja" actual $después = ""; // etiqueta después de la actual "miga" global $post; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) ( if ($showOnHome == 1) echo "

Para insertar este código en el archivo de tema instalado en su sitio, debe ingresar al “Panel de administración de WordPress” => “Apariencia” => “Editor => “Plantillas”, y allí hacer clic en el elemento “Funciones del tema (funciones. PHP) "

En la ventana "Editar temas", en el archivo "Funciones del tema ((functions.php)", deberá insertar el primer código en la parte superior del archivo, después

El nombre de la entrada de la página de inicio es "Inicio", puede cambiarlo por el nombre de su sitio si lo desea. Para hacer esto, en la línea de código correspondiente debe reemplazar la palabra "Inicio" con el nombre de su sitio.

Si desea que la página del sitio o la navegación de ruta de navegación no muestren el nombre de la página en la que se encuentra actualmente, para ello debe cambiar el número "1" por el número "0" en la siguiente línea.

Después de insertar el código y realizar cambios según sus deseos, haga clic en el botón "Actualizar archivo".

Será necesario insertar el siguiente código en varios archivos de su tema instalado: “Entrada única (single.php)”, “Plantilla de página (page.php)”, “Archivos (arhvie.php)”, “Resultados de búsqueda (búsqueda .php)” "

En el archivo “Entrada única (single.php)”, responsable de las páginas con artículos, el código se inserta en el lugar que se muestra en la imagen.

Después de insertar este código, debe hacer clic en el botón "Actualizar archivo".

En el archivo “Archivos (arhvie.php)”, pegue este código en el lugar resaltado en el marco de la imagen.

Luego haga clic en el botón “Actualizar archivo”.

En el archivo “Resultados de la búsqueda (search.php)”, que se encarga de buscar en el sitio, pegue el código en la ubicación indicada en la imagen.

Después de haber insertado el código, haga clic en el botón "Actualizar archivo".

En el archivo “Plantilla de página (page.php)”, que es responsable de las páginas estáticas, inserte el código como se muestra en la imagen.

Después de instalar el código, haga clic en el botón "Actualizar archivo".

Eso es todo, las rutas de navegación ahora están instaladas en su sitio. Debe abrir su sitio y verá la navegación instalada. Si su sitio estaba abierto en este momento, deberá actualizar la página para ver los cambios realizados.

También puedes agregar este código al archivo “Hoja de estilo (style.ccs)”:

/* Breadcrumbs */ #crumbs ( padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit- radio-borde:0 0 8px 8px;)

Este código se inserta al final del archivo "Hoja de estilo (style.ccs)" para cambiar la apariencia de la ruta de navegación instalada. El código a insertar en el archivo “Hoja de estilo (style.php)” puede tener otras características (dimensiones, sangrías, etc.). No es necesario insertar este código ni otro similar en tu blog.

En mi sitio web, en la plantilla anterior, no instalé este código; me gustó más la apariencia de las rutas de navegación sin estas mejoras.

Conclusiones del artículo.

Ahora tu blog tiene Breadcrumbs instalado sin necesidad de utilizar ningún complemento. El creador de esta función es el famoso blogger Dimox (Dmitry).

Hola, queridos lectores del blog. Hoy quiero hablaros de un complemento para WordPress, que se utiliza en mi blog para dos propósitos muy importantes.

En primer lugar, facilita la navegación y, en segundo lugar, resuelve un problema muy importante: crear enlaces internos correctos. Para no prolongar la intriga, diré de inmediato que hablaremos del complemento Breadcrumb NavXT. Pero primero lo primero.

Ya he hablado mucho sobre la necesidad de crear enlaces adecuados entre las páginas del sitio para que el peso estático transferido a través de cualquier enlace externo se distribuya uniformemente entre todas las páginas web del proyecto. Esto es especialmente importante.

¿Por qué necesitas rutas de navegación en WordPress?

La promoción a través de LF tiene una serie de ventajas, la principal de las cuales (especialmente importante para proyectos no comerciales) es que no requiere la inversión de los fondos necesarios para comprar enlaces externos. Esto se debe a que es posible avanzar en el LF sólo a través del sitio interno y creando el enlace correcto, como se describe.

Por cierto, para proyectos comerciales, la promoción de baja frecuencia también tiene una serie de ventajas, la principal de las cuales, nuevamente, es el menor costo, pero además de esto, será mucho más probable que los visitantes que provienen de los resultados de búsqueda para este tipo de consultas ser convertidos en billetes que los visitantes que provienen de consultas medias y de alta frecuencia (debido a la vaguedad de estas últimas).

La idea principal de un enlace correcto es garantizar que el peso estático transferido a las diferentes páginas del sitio (los enlaces más externos suelen conducir a la página principal) fluya sin problemas a aquellas que se promocionan directamente a lo largo del LF (donde se encuentran los artículos). están realmente ubicados).

Pero el esquema circular ideal descrito en el artículo anterior es difícil de implementar en condiciones reales, por lo que un esquema de enlace esférico sería una buena opción. En términos generales, este esquema puede exagerarse hasta el punto de que cuantos más enlaces internos haya, mejor se distribuirá el peso estático. Es como un sistema circulatorio ramificado que permite que la sangre transporte oxígeno a todos los órganos internos, incluso a los más alejados de los pulmones.

Cada vez que escribe artículos, puede agregar manualmente enlaces a otros materiales en su sitio que serán relevantes. Es cierto que te tomas muy en serio la lista de anclajes interna que creas para cada artículo. Esto debe hacerse aproximadamente de la misma manera que. No deberías usar la misma clave pura en todas las referencias, bueno, ya sabes a qué me refiero.

Este es un muy buen método, pero siempre será una buena idea ampliarlo y complementarlo utilizando métodos automáticos. Una de las opciones más comunes para organizar algo como esto son las llamadas rutas de navegación, que amplían las posibilidades de navegación en un recurso. , además de crear un bloque de enlaces a otros materiales similares de su proyecto, similares en temática a este artículo.

Hoy quiero considerar la primera opción en detalle, pero sobre materiales similares para WordPress en formato .

Para implementar rutas de navegación, utilizaremos el complemento Breadcrumb NavXT. En principio, puedes utilizar otros complementos de WordPress para estos fines, pero a mí me gustaron más estos. Incluso es posible.

Instalación del complemento Breadcrumb NavXT en WordPress

Bien, es hora de continuar con la instalación y configuración del complemento. Si de repente no sabes qué es el pan rallado, no pasa nada. En realidad, al principio tampoco lo sabía, porque este término fue tomado de la burguesía y está asociado con su cuento de hadas burgués sobre Hansel y Greta, quienes los usaban para marcar el camino.

A nuestro entender, este elemento de navegación del sitio debería llamarse "el hilo de Ariadna", porque de alguna manera está más cerca de nosotros. Bueno, está bien, así lo llamaron. Por lo tanto, suelen aparecer en algún lugar de la parte superior de la ventana del sitio y son esencialmente la ruta al artículo que estás leyendo actualmente.

Por ejemplo, me gusta mucho la navegación mediante migajas y siempre trato de encontrar su línea en cualquier sitio para saber dónde estoy realmente y cómo ir a la sección donde se encuentra este maravilloso artículo para leer más sobre el mismo tema. .

Bueno, ¿recuerdas qué es el pan rallado? Creo que lo recuerdas, pero si no, mira la parte superior de esta ventana debajo del encabezado de este blog.

Primero necesitarás descargar Breadcrumb NavXT desde aquí. La instalación del complemento en WordPress es estándar. Conéctese a su blog a través de FTP (el trabajo con el cliente FileZilla se describe en detalle) y abra la carpeta en el servidor:

/wp-content/complementos

Desempaquete el archivo con Breadcrumb NavXT y copie la carpeta resultante al servidor de alojamiento en el directorio (/wp-content/plugins). Ahora deberá ir al área de administración de WordPress, seleccionar "Complementos" en el menú de la izquierda y, en la ventana que se abre, ir a la pestaña "Inactivo". Busque la línea con lo que necesita y haga clic en el texto "Activar" ubicado justo debajo.

Llamar a Breadcrumb NavXT y personalizar la apariencia de las migajas

Eso es todo, en realidad. Ahora queda un detalle más importante: seleccione un lugar en la plantilla (tema) de WordPress donde se mostrará la línea con rutas de navegación e inserte el código de la función del complemento Breadcrumb NavXT en este lugar. La tarea no es del todo trivial para un webmaster novato que está poco familiarizado con la estructura del motor y el funcionamiento de sus temas.

Pero probablemente esto no te confunda, porque... Siempre puedes leer, afortunadamente, ahí no hay nada complicado.

Si ya está familiarizado con la estructura de los temas y conoce el propósito de ciertas plantillas, continuaremos. Pero, por lo demás, te aconsejo que te familiarices al menos superficialmente con esto, utilizando el material indicado anteriormente (o algún otro).

Entonces, nuestra tarea es identificar aquellos archivos de la carpeta con el tema que estás usando, en los que necesitaremos insertar el código para llamar a las migajas. Y luego tendrás que decidir exactamente en qué parte del código insertaremos esto:

Primero, debes conectarte a tu blog a través de FTP y abrir la carpeta con el tema que estás usando actualmente:

Wp-content/themes/nombre del tema de WordPress

Ahora déjame contarte cómo hice yo mismo la salida del pan rallado, y puedes repetir todo después de mí o usar tu propia versión de inserción.

Si intentas visualizar el propósito de las plantillas del tema, obtendrás algo como este diseño:

De este diseño podemos concluir que necesitaremos insertar el código para llamar a Breadcrumb NavXT en aquellas plantillas que se encargan de mostrar el contenido en la parte central del blog: ÍNDICE, ÚNICO, ARCHIVO, PÁGINA o BÚSQUEDA.

Es cierto que no mostré las migajas en ÍNDICE, que es responsable de crear la página principal de WordPress, porque sería innecesaria una navegación adicional allí.

Lo inserté en: SINGLE (responsable de crear páginas con artículos), ARCHIVO (forma páginas de categorías, archivos temporales, archivos de etiquetas), PÁGINA (forma páginas estáticas, por ejemplo, “Acerca del blog”).

Inserté el código para llamar a Breadcrumb NavXT en estas plantillas en el mismo lugar, al principio, justo después de la primera línea:

para que quede así:

Agregué varias propiedades CSS para la clase BREADCRUMB al archivo de hoja de estilos en cascada STYLE.CSS desde la carpeta del tema:

Breadcrumb (fuente: negrita 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; ) .breadcrumb a( color: #1B7499; ) .breadcrumb a:hover ( color: #EF0E0E; )

Estas propiedades definen la apariencia de las rutas de navegación en WordPress: , a . También determinan el color de los enlaces a partir de las rutas de navegación (.breadcrumb a) y el color de los enlaces al pasar el mouse sobre ellos (.breadcrumb a:hover). En general, te aconsejo que leas la página.

Características y configuraciones del complemento Breadcrumb

Eres libre de hacer lo que quieras. Como dicen, el amo es el amo. Pero con esto sólo determinamos la ubicación de las migas de pan y fijamos su apariencia. Pero este complemento todavía tiene muchas configuraciones.

Para hacer esto, vaya al área de administración de WordPress y seleccione "Breadcrumb NavXT" en el menú de la izquierda en el área "Configuración". En la ventana que se abre verás varias pestañas:

En la pestaña General, puede configurar los parámetros que se aplicarán a todas las páginas de su blog. En el campo "Separador", especifique un carácter que servirá como separador en el pan rallado. En mi caso, este es el símbolo “>”, que se especifica con un código especial, porque WordPress interpretará el símbolo “>”, si se coloca explícitamente, como un signo de una etiqueta HTML de apertura.

En general, existen (mnemónicos) que, por ejemplo, no se pueden insertar directamente. Éstos son algunos de ellos:

Código mnemotécnico Símbolo " " & &< < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € €

Elija cualquier símbolo que desee como separador de pan rallado.

En el campo "Longitud máxima", puede establecer la longitud del ancla (texto del enlace) en caracteres. Establecí el límite de longitud en 60 caracteres no por motivos de diseño, sino por motivos de optimización del contenido.

Los motores de búsqueda pueden ser ambivalentes acerca de los enlaces con las mismas anclas, por lo que los acorto en pequeños fragmentos para hacerlos únicos. Es posible que esto no sea realmente necesario, pero por si acaso.

En los campos "Prefijo" y "Sufijo" puede ingresar texto que precederá o seguirá al enlace a la página principal en las rutas de navegación.

Tenga en cuenta que este texto se colocará en el atributo TÍTULO de la etiqueta A y los motores de búsqueda pueden considerarlo como un ancla alternativa. Lo que quiero decir es que debes utilizar palabras clave relacionadas con la página principal de tu blog.

No olvide guardar sus cambios en la configuración del complemento Breadcrumb NavXT usando el botón del mismo nombre. A continuación, puede revisar todas las pestañas. Por ejemplo, en la siguiente página puede configurar la configuración de un enlace que le llevará a la página donde se encuentra ahora:

En la siguiente pestaña “Publicaciones / Páginas” puedes configurar la visualización de enlaces a páginas con artículos y páginas estáticas de tu blog:

Para los artículos, puse la inscripción anterior "Artículo actual" y encerré el texto entre comillas usando un código mnemotécnico (consulte la lista de códigos mnemotécnicos arriba):

Vaya a la siguiente pestaña “Categorías”. En principio, aquí se repiten los mismos ajustes que en los anteriores. No configuré un marco (prefijo y sufijo) para enlaces a categorías, pero sí configuré un marco para páginas de archivo:

Como resultado, las rutas de navegación en las páginas web de archivo se ven así:

¡Hola a todos!. Hoy en este artículo me gustaría contarte cómo puedes mejorar la usabilidad de tu sitio web utilizando el complemento Yoast SEO, del cual hablaré en detalle en uno de mis próximos artículos.

Seguramente muchos ya han oído hablar de este complemento y saben que es necesario para escribir artículos optimizados para SEO. Pero pocas personas se dan cuenta de qué más pueden hacer las migas de pan de WordPress Yoast SEO.

Primero, permítanme explicarles qué son las “migas de pan” y por qué son necesarias.

Entonces, Las "rutas de navegación" son navegación adicional página por página que muestra en qué categoría o sección se encuentra el artículo. Un visitante, al visitar alguna página de su blog, debe comprender en qué sección se encuentra y si está buscando la información que necesita en la categoría correcta. Esta navegación se puede resumir de la siguiente manera:

En nuestro sitio web se ve así:

Además, la presencia de esta navegación ayuda a los robots a comprender más claramente la estructura del sitio e indexar su blog más rápidamente. Y esto es muy importante para proyectos en línea.

"¿Por qué?" - preguntas, decidimos utilizar este complemento. La respuesta aquí será simple. Hay una gran cantidad de servicios similares en Internet que ayudarán a retirar las "migas", pero al mismo tiempo cargarán adicionalmente el sitio, lo que ciertamente no lo mejorará. Y dado que todavía usamos Yoast SEO para optimizar publicaciones, sería un pecado no aprovechar sus capacidades y no hacer una usabilidad conveniente con su ayuda.

Configurar la salida de ruta de navegación con el complemento Yoast SEO

No escribiré aquí cómo instalar este Yoast SEO. Si no sabes cómo hacer esto, lee este artículo mío "". En él cuento en detalle y muestro de qué manera puedes instalar los complementos necesarios para trabajar.

En la ventana que se abre, marque la casilla de verificación "Habilitar rutas de navegación".

Para nuestra alegría, las configuraciones se abrirán todas en ruso y son intuitivas. En el vídeo que aparecerá próximamente en este artículo, mostraré más claramente lo que sucederá cuando cambies algunos elementos de este menú. Mientras tanto, puedes experimentar fácilmente e intentar cambiar la configuración tú mismo. Es imposible hacer algo terrible aquí, ya que estos son solo ajustes visuales en nuestras "migajas".

Después de habilitar las rutas de navegación, el siguiente paso es insertar el código de activación para esta función en su plantilla de tema. Para saber qué código se debe insertar, siga el enlace que viene después de la configuración de nuestra cadena.

Después de llegar al sitio web oficial de este complemento, copiamos el código requerido y lo pegamos en el lugar de nuestro tema donde planeamos que se muestren.

No puedo recomendar un lugar universal para insertar este código, ya que depende del tema que estés utilizando. Es posible que deba escribirlo en el archivo single.php o en page.php y, en algunos casos, en header.php.

En nuestro caso, insertamos el código casi al principio del archivo single.php, que se encuentra en www/wp-content/themes/your theme/.

Nota: Tenga en cuenta que es mejor insertar el código a través de un cliente FTP. Usamos Filezilla, sobre cuyo trabajo se ha escrito en detalle. Asegúrese de leer nuestras instrucciones para evitar muchos errores de principiante.

Además, tenga en cuenta también que el código que tenemos es ligeramente diferente del que nos recomendaron los desarrolladores. Es decir, envolvimos la función de ruta de navegación en una etiqueta div. Esto se hace para que pueda configurar su propio estilo de visualización individual.

Para ello, en el archivo style.css escribimos los estilos que requerimos. En ellos podemos configurar el color, el fondo, el tamaño de fuente, el subrayado, es decir, darle un aspecto que se adapte completamente a nuestro gusto o que combine con el estilo general de la página. En nuestro caso se ve así:

En este punto, la configuración del complemento está casi completa, pero en esta versión, después de que se muestren los títulos, también se mostrará el título del artículo. Esto puede provocar un exceso de spam. Creo que estará de acuerdo conmigo en que esto es innecesario, ya que el título del artículo ya es claramente visible para el usuario y no es necesario volver a duplicarlo.

Para evitar esto, debe insertar adicionalmente un pequeño código en el archivo funciones.php.

Función ajustar_single_breadcrumb($link_output) ( if(strpos($link_output, "breadcrumb_last") !== false) ($link_output = ""; ) return $link_output; ) add_filter("wpseo_breadcrumb_single_link", "adjust_single_breadcrumb");

Ahora todos nuestros ajustes están completos. Si hizo todo correctamente, obtendrá aproximadamente lo mismo que en nuestro blog.

Si tienes alguna pregunta, ¡escribe en los comentarios!

¡Adiós a todos!

Anton Kalmykov estaba contigo

Breadcrumbs es un sistema de navegación de varios niveles que indica a los usuarios en qué parte del sitio se encuentran actualmente en relación con la página principal. En este artículo le mostraremos cómo mostrar las rutas de navegación de WordPress:

¿Qué son las migas de pan y para qué sirven?

Breadcrumbs es un término utilizado para describir un menú de navegación jerárquico presentado como una cadena de enlaces. A menudo se utiliza como menú de navegación adicional.

Las rutas de navegación son diferentes del sistema de menú de navegación predeterminado de WordPress.

El propósito de las rutas de navegación es ayudar a los usuarios a navegar por el sitio. Ayudan a comprender dónde se encuentra el usuario ahora. También ayuda a los motores de búsqueda a determinar la jerarquía de enlaces a páginas web.

Los motores de búsqueda como Google han comenzado a mostrar rutas de navegación del sitio en los resultados de búsqueda. Esto aumenta la visibilidad del sitio en los resultados de búsqueda y mejora las tasas de conversión:

Agregar rutas de navegación utilizando el complemento Breadcrumb NavXT

Este es un complemento de ruta de navegación de WordPress flexible y fácil de usar. Tiene características más diversas de las que puedas imaginar. Lo primero que debe hacer es instalar y activar el complemento Breadcrumb NavXT. Después de activarlo, debes ir a la página de configuración del complemento: Configuración - Ruta de navegación NavXT:

Para la mayoría de los sitios, la configuración predeterminada estará bien. Pero si es necesario, puedes realizar cambios en la configuración.

La página de configuración está dividida en varias secciones. En la pestaña General, puede definir cómo se comportará el complemento en el sitio.

Aquí puede cambiar la plantilla del enlace. Estas plantillas utilizan parámetros de Schema.org en la etiqueta del enlace.

En la sección "Tipos de publicaciones", puede configurar "rutas de navegación" para publicaciones, páginas y cualquier tipo de publicación personalizada. Puede optar por mostrar la jerarquía de registros. De forma predeterminada, el complemento utilizará la jerarquía " Título del sitio > Categoría > Título de la publicación».

Puede reemplazar los elementos de navegación con etiquetas, fechas o publicaciones principales. Las pestañas Taxonomías y Autores tienen plantillas similares para enlaces de menú. No olvides hacer clic en " Guardar cambios».

Mostrando Breadcrumb NavXT en su sitio

Para utilizar este complemento de ruta de navegación de WordPress, debe editar los archivos del tema. Debe agregar el siguiente código al archivo header.php del tema en el lugar donde se mostrarán las rutas de navegación:

Vaya al sitio y abra una publicación o página. Verá que ya se muestran las rutas de navegación.

Agregar rutas de navegación con el complemento Yoast SEO

Instale y active el complemento Yoast SEO. Después de activar el complemento, debe ir a la página. SEO > Avanzado y marque la casilla de la opción " Habilitar migas de pan»:

Después de esto, estarán disponibles varias opciones con las que podrá cambiar la opción de visualización de las rutas de navegación. La configuración predeterminada debería estar bien para la mayoría de los sitios, pero se puede cambiar fácilmente si es necesario.

Una vez que haya terminado, haga clic en " Guardar cambios».

Generación de rutas de navegación utilizando el complemento Yoast SEO

Algunos temas ya son compatibles con las rutas de navegación de Yoast. Vaya al sitio y abra cualquier página o publicación para ver si muestra rutas de navegación de WordPress. De lo contrario, deberá agregar un pequeño fragmento de código al tema activo.

Pega este código en el header.php de tu tema al final del archivo:

Eso es todo, ahora puede ir a su sitio web, allí ya se mostrarán las rutas de navegación.

Esperamos que este artículo te haya ayudado.

Traducción del artículo " Cómo mostrar enlaces de navegación de ruta de navegación en WordPress"fue preparado por el amigable equipo del proyecto.

Bueno Malo

¡Hola a todos!

Otra forma de mejorar los enlaces internos y la usabilidad del sitio web son las rutas de navegación. Este tipo de navegación en el sitio adquirió este nombre gracias al cuento de los hermanos Grimm sobre Hansel y Gretel. Si recuerdas, para encontrar el camino a casa, los niños dejaban migas de pan en el camino. Asimismo, el método de navegación del mismo nombre evitará que los usuarios se pierdan en su sitio. En el artículo de hoy se analizarán más detalles sobre el propósito y los métodos para agregar rutas de navegación a un blog.

Significado y ejemplo de pan rallado

Para darle una idea de cómo se ven las rutas de navegación en un sitio web, le daré un ejemplo de mi blog:

Las rutas de navegación se resaltan con un marco naranja. También se les llama pan rallado.

En la mayoría de los casos, dicha cadena se puede encontrar debajo del encabezado del sitio, inmediatamente antes del título del artículo.

De esta forma, el visitante puede comprender fácilmente en qué sección se encuentra el artículo que está viendo. La estructura general de la navegación Breadcrumb es la siguiente: Página de inicio -> Sección -> Título del artículo. Puede resultar complicado si, por ejemplo, en la sección aparece una subsección, entonces la estructura quedará así: Página de inicio –> Sección –> Subsección –> Título del artículo.

Además de la navegación del sitio, las rutas de navegación también juegan un papel importante en el SEO. Mejoran la usabilidad del sitio, los enlaces y, a veces, pueden acceder a archivos . Esto aumentará la tasa de clics en los resultados de búsqueda y también ayudará a los motores de búsqueda a reconocer rápidamente la estructura de su recurso. Esto requiere un micromarcado del pan rallado. Hablaremos de cómo hacerlo a continuación.

Breadcrumbs: ¿cómo hacerlo en tu blog?

Para agregar rutas de navegación a WordPress, puede utilizar un complemento o escribir el código necesario para mostrarlas.

Primero, veamos cómo mostrar rutas de navegación con código PHP. Diré de inmediato que se proporcionará el mismo código a continuación, pero con elementos de micromarcado, le aconsejo que lo tome de inmediato.

Aquí hay un código de muestra para pegar en su archivo funciones.php:

term_id). ""> ". $categorías->nombre . " " " ) echo "

"; hacer eco del_título(); hacer eco "

Los nombres rusos en el código se pueden reemplazar por los suyos propios. Por ejemplo, en lugar de "Inicio", sustituya el nombre del sitio.

Después de esto, debería aparecer una ruta de navegación en su sitio. Sin embargo, para obtener hermosas rutas de navegación, deberá realizar cambios en el archivo de estilos. Por ejemplo, para que se vea como en mi blog, debes insertar el siguiente código en estilos.css:

Migas de pan( margen: -5px 0 5px 3px; /* relleno */ desbordamiento: oculto; ) .breadcrumbs a ( color: #34a6d2; /* color del enlace - azul */ decoración de texto: subrayado; ) .breadcrumb > span ( color : #000; /* el color del punto final es negro */ ) .breadcrumb( float:left; )

Aquí puede ver el color y el tamaño de las fuentes, las sangrías y el color de los enlaces al pasar el cursor sobre y sin ellos. Puedes reemplazar todos estos valores por los tuyos propios y experimentar.

Migas de pan para WordPress: complemento

Los complementos más comunes para mostrar rutas de navegación: Yoast WordPress Seo, BreadCrumb NavXT. El complemento WordPress SEO by Yoast tiene muchas funciones y las rutas de navegación de su arsenal son solo una pequeña parte. Por lo tanto, si ya tiene este complemento instalado, puede utilizar esta función.

Después de la instalación, en la configuración puede configurar la opción de ruta (categorías, fechas, etiquetas), la longitud máxima del título y los caracteres entre secciones. Además, puede desactivar la visualización del título de la página en la que se encuentra el visitante, para no duplicar el título del artículo. Para que las rutas de navegación se muestren en la página, nuevamente debe escribir el código en el archivo single.php o header.php.

Puede realizar cambios en los estilos de la misma manera que se describe anteriormente.

Micromarcado de pan rallado

Los motores de búsqueda pueden aceptar automáticamente la estructura de ruta de navegación que se crea en su sitio y mostrarla en el fragmento en consecuencia. Para comprobar esto, debe utilizar los validadores de Google y Yandex.

Si los motores de búsqueda no reconocen las rutas de navegación, entonces necesitan ayuda. En mi blog utilizo el código que figura al principio del artículo. Le agregué elementos de micromarcado. Si también genera rutas de navegación usando código PHP, puede reemplazar su código con esto:

.

eco "

función my_breadcrumb() (echo "
"; $categorías = get_the_category(); if($categorías)( echo "term_id) . "" itemprop="url">

". $categorías->nombre".

» "; ) eco "

"; hacer eco del_título(); hacer eco "

No he intentado crear micromarcados para las rutas de navegación creadas con el complemento. Pero creo que no es difícil. Puede modificar el código del complemento de forma similar a mi código. Veamos el código dado.

Este código permite a los motores de búsqueda determinar que se trata de un elemento de ruta de navegación.

Cada elemento individual de la cadena está envuelto en un div que contiene el código: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .