Tutorial completo sobre cómo implementar y personalizar la navegación breadcrumb en WordPress utilizando RankMath

Image[1]-Tutorial completo: Cómo implementar y personalizar la navegación de migas de pan en WordPress con RankMath - Photon Fluctuation Network | Servicio profesional de reparación de WordPress, alcance global, respuesta rápida

Si ha instalado elRankMath SEOpuede utilizar las migas de pan que proporciona (Migas de pan) Funcionalidad. Mientras que la versión gratuita de RankMath SEO suele implementar la funcionalidad de las migas de pan a través de shortcodes, la versión RankMath SEO Pro ofrece elementos de migas de pan integrados en Elementor, lo que te permite editar su apariencia a través de Elementor. Este artículo detallará un tutorial sobre el uso de las migas de pan de RankMath para ayudarte a implementar y personalizar mejor la navegación con migas de pan en tu sitio web.

Explicación de la configuración de las migas de pan de RankMath

Antes de utilizarlo, vamos a repasar las opciones de configuración de las migas de pan en el plugin RankMath SEO. Puede configurar las migas de pan en el plugin RankMath SEO [Ajustes generales] para encontrar la opción Configuración de las migas de pan.

Paso 1: Activar las migas de pan

En primer lugar, asegúrese de que la función de migas de pan está activada:

  1. Introduzca RankMath SEO's [Ajustes generales]
Migas de pan
  1. Busque la opción Breadcrumb Settings y actívela.
imagen 23 - RankMath Breadcrumbs Tutorial (con vídeo) - NUTSWP

Paso 2: Configurar el separador de migas de pan

El separador se utiliza para separar los niveles de las migas de pan. Establezca el separador a su gusto, que puede personalizarse en el cuadro de texto.

imagen 24 - RankMath Breadcrumbs Tutorial (con vídeo) - NUTSWP

Paso 3: Establecer la etiqueta de la página de inicio y la dirección del enlace a la página de inicio

Opciones de pesta?a de inicio y dirección del enlace de inicio normalmenteMantener la configuración por defectopero puede editarse si necesita cambiarla. Sin embargo, se recomienda no cambiar la dirección del enlace de la página de inicio, ya que puede afectar a la navegación.

imagen 25 - Tutorial de RankMath breadcrumbs explicado (con vídeo) - NUTSWP

Paso 4: Establecer el prefijo de las migas de pan

Si quieres ponerte delante del pan ralladoA?adir iconos u otros elementosA continuación se muestra un ejemplo del tipo de datos que se pueden encontrar en la base de datosAjuste del prefijoRealiza la operación.

imagen 26 - RankMath breadcrumbs tutorial in detail (with video) - NUTSWP

Paso 5: Establecer formato de archivo, formato de resultado de búsqueda, opciones de etiqueta 404

Estas opciones se utilizan para establecer qué migas de pan se muestran en archivos, resultados de búsqueda y páginas 404, y normalmente están bien con la configuración predeterminada, pero puede personalizarlas según sea necesario.

imagen 27 - RankMath breadcrumbs tutorial in detail (with video) - NUTSWP

Paso 6: Ocultar el título de la entrada

Esta opción oculta los nombres de páginas, artículos y productos y no se recomienda activarla.

imagen 28 - RankMath breadcrumbs tutorial (with video) - NUTSWP

Paso 7: Mostrar opciones de categorización

Cuando esta opción está activada, el nombre de la categoría se mostrará en las migas de pan, se recomienda activarla para reflejar la relación jerárquica.

imagen 29 - RankMath Breadcrumbs Tutorial Explicado (con vídeo) - NUTSWP

Paso 8: Ocultar opciones de taxonomía

Activando esta opción se ocultan los nombres de las taxonomías, se recomienda activarla para agilizar las migas de pan.

image 30 - Explicación del tutorial RankMath Breadcrumbs (con vídeo) - NUTSWP

Después de completar los ajustes anteriores, recuerde guardar todos los cambios.

RankMath SEO Free Edition Tutorial de migas de pan

1、Función pan rallado mediante código corto

La versión gratuita de RankMath SEO ofrece una función de migas de pan donde se puede [Ajustes generalesy se llama al elemento breadcrumb mediante código o shortcode.

imagen 16 - Explicación del tutorial de RankMath Breadcrumbs (con vídeo) - NUTSWP

En el editor de Elementor, utiliza el elemento ShortCode para pegar el shortcode en el lugar donde quieras que aparezcan las migas de pan:

El RankMath SEO breadcrumb shortcode suele ser el siguiente:

[rank_math_breadcrumb]

Sólo tienes que pegar este shortcode en el elemento ShortCode de Elementor.

Imagen [11] - Tutorial completo: Cómo implementar y personalizar la navegación de migas de pan en WordPress con RankMath - Photon Fluctuation Network | Servicio profesional de reparación de WordPress, alcance global, respuesta rápida

2、Estilo de pan rallado personalizado

Las migas de pan a?adidas mediante shortcode siguen por defecto el color y estilo de fuente del tema. Si desea personalizar el estilo, puede hacerlo mediante código CSS. A continuación se muestra un código de ejemplo:

/* Modificar el color y el estilo de fuente de los enlaces en las migas de pan */
selector.rank-math-breadcrumb a{
    color: #ffdc11.
    font-size: 16px; }
}

/* Modificar el color y el estilo de fuente del separador en el breadcrumb */
selector.rank-math-breadcrumb .separator{
    color: #ffffff.
    color: #ffffff; font-size: 20px;
}

/* Modificar el color y el estilo de fuente del texto del título del último contenido del breadcrumb */
selector.rank-math-breadcrumb .last{
    color: #ffffff.
    last{ color: #ffffff; font-size: 16px; }
}

Pegue el código anterior en la configuración avanzada del elemento Elementor ShortCode.

3, la aplicación global del estilo CSS

Si desea aplicar el mismo estilo en todo el sitio, puede colocar el código en el sitio [estado exterior]-[personalización]-[Código personalizadoelimine el código que precede aselectorEl siguiente es un ejemplo:

/*Modificar el color y el estilo de fuente de los enlaces en las migas de pan**/
.rank-math-breadcrumb a{
    color: #ffdc11.
    font-size: 16px.
}
/*Modificar el color y el estilo de fuente de los separadores en las migas de pan**/
.rank-math-breadcrumb .separator{
    color: #ffffff.
    font-size: 20px;
}
/*Modificar el color y el estilo de fuente del texto del título del último contenido en las migas de pan */
.rank-math-breadcrumb .last{
    color: #ffffff.
    font-size: 16px.
}

Tutorial de migas de pan de RankMath SEO Pro Edition

image 32 - Explicación del tutorial RankMath Breadcrumbs (con vídeo) - NUTSWP

Elementos de migas de pan integrados en Elementor

RankMath SEO Proofrece una integración más sencilla de los elementos de las migas de pan. En primer lugar, asegúrese de que tiene el plugin RankMath SEO Pro instalado en su sitio web.

  • Busque el elemento RankMath SEO breadcrumb en la biblioteca de elementos de Elementor y arrástrelo y suéltelo en el lugar de la página donde desee que aparezcan las migas de pan.
  • En la configuración Contenido del elemento Migas de pan, puede ajustar el centrado del elemento y modificar las etiquetas HTML.
  • En la configuración de estilo, puede cambiar la fuente de la miga de pan, el color del texto, el color del enlace y el color del enlace flotante.
Imagen [13] - Tutorial completo: Cómo implementar y personalizar la navegación de migas de pan en WordPress con RankMath - Photon Fluctuation Network | Servicio profesional de reparación de WordPress, en todo el mundo, respuesta rápida

Preguntas frecuentes

?Por qué está atenuada la opción Activar la función de migas de pan?

image 36 - Explicación del tutorial RankMath Breadcrumbs (con vídeo) - NUTSWP

Esto se debe a que su tema ha habilitado el soporte para RankMath breadcrumbing, por ejemploTema AstraForzará la activación de la función de migas de pan de RankMath SEO. Esto no afecta al uso de las migas de pan, sólo a que no se puedan modificar las opciones de configuración. No hay necesidad de preocuparse o hacer un proceso adicional.

Con el tutorial anterior, debería ser capaz de configurar y personalizar con éxito la función de migas de pan de RankMath SEO en su propio sitio web, ya sea la versión gratuita o la versión Pro.


Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo fue escrito por: xiesong
EL FIN
Si le gusta, apóyela.
felicitaciones0compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios