Tutorial de WoodMart: Configuración de barras de navegación fijas en WordPress: guía completa

Barra de navegación fija(Navegación fija) puede mejorar la usabilidad de un sitio web, ayudando a los visitantes a navegar más fácilmente y encontrar rápidamente el contenido que necesitan. Este artículo le proporcionará un tutorial paso a paso para ayudarle a implementarlo.WordPressEstablezca una barra de navegación fija en el tema para mejorar la usabilidad del sitio web.

1. ¿Qué es una barra de navegación fija?

Una barra de navegación fija es un menú de navegación situado en la parte superior de una página, que permanece visible en todo momento mientras se desplaza la página. Esto permite a los visitantes acceder rápidamente al menú de navegación en cualquier momento, lo que mejora la experiencia de navegación y aumenta la visibilidad del contenido.

2. Definición de los menús de la barra de navegación fija

Antes de configurar una barra de navegación fija, primero debe definir unamenúEste será el contenido que se mostrará en la barra de navegación fija. Siga estos pasos:

2.1 Acceso a la configuración del tema

• Paso 1En el backend de WordPress, navega hastaAjuste temáticoPágina.
• Paso 2: BuscarBarra de navegación fijaConfigurar opciones enSeleccionar menúEn el campo, seleccione el menú que desea utilizar como barra de navegación fija.

2.2 Crear y guardar el menú

• Paso 3: Ir aApariencia > MenúSeleccione su menú. Si el menú está vacío, puede añadir categorías de productos u otro contenido relevante.
• Paso 4Después de añadir el elemento del menú, haga clic enGuardar menúAsegúrese de que los ajustes surtan efecto.

3. Configure el menú dentro de la barra de navegación fija.

A continuación, profundizarás en el menú de configuración para cumplir con los requisitos de visualización de la barra de navegación fija.

3.1 Elementos del menú de configuración

• Paso 1: AccesoApariencia > MenúSeleccione el menú que ha creado y añada los elementos de menú necesarios. Por ejemplo, puede añadircategoría de productos(matem.) géneroQuiénes somostal vezContacte con nosotrosEspere a que aparezcan los elementos del menú.
• Paso 2: ClickGuardar menúpara asegurarse de que todos los ajustes se guardan correctamente.

3.2 Añadir un menú desplegable

Para mejorar la interactividad de las barras de navegación fijas, puede añadir menús desplegables a determinados elementos del menú:

• Paso 3Insertar unBloque HTMLy ponerlo enDiseño de altura completa(Ancho: 270 píxeles, relleno: 20 píxeles).
• Paso 4: Habilitarpasar (una factura o inspección, etc.)AjaxCargar menú desplegable HTMLPara reducir la carga al cargar la página, especialmente cuando los menús desplegables contienen mucho contenido, el uso de Ajax puede optimizar el rendimiento.

4. Asegúrate de que la barra de navegación fija se muestra correctamente.

Para garantizar que la barra de navegación adhesiva se muestre correctamente, debe añadiricono (informática)responder cantandoimágenesDe esta manera, los elementos del menú se mostrarán correctamente según lo previsto.

• Paso 1Seleccione un icono o una imagen adecuados para cada elemento del menú.

• Paso 2Guarda la configuración y comprueba las páginas frontales para asegurarte de que los elementos del menú se muestran correctamente.

5. Personalizar el título de la barra de navegación fija

Puede establecer un título personalizado para la barra de navegación fija con el fin de reflejar mejor el contenido del sitio web.

5.1 Configuración del título de la barra de navegación

• Paso 1: enAjuste temáticoha dado en el clavoleyendaCampos.
• Paso 2Introduzca el título que desea mostrar (por ejemplo, «Categorías de productos»).
• Paso 3Guardar configuración: La barra de navegación fija en la página principal mostrará el título que hayas establecido.

6. Añadir información adicional a la parte inferior de la barra de navegación fija.

Si necesita añadir información en la parte inferior de la barra de navegación fija (como datos de contacto, línea directa de atención al cliente, etc.), puede hacerlo de la siguiente manera:Contenido inferiorcampo para lograr.

• Paso 1: AccesoAjuste temáticoEncuentreContenido inferiorCampos.
• Paso 2Añade cualquier información adicional que desees mostrar, asegurándote de que se ajuste al diseño del sitio web.

7. Configurar la barra de navegación fija en el generador de encabezados

En el generador de encabezados de WordPress, puedes personalizar aún más la apariencia y la funcionalidad de la barra de navegación fija.

7.1 Configuración de la barra de navegación del encabezado

• Paso 1: Accesojefe de obraModo front-end.

• Paso 2: SelecciónÁrea de visualizaciónpuede seleccionarse para mostrarSolo iconotal vezIcono + Texto.
• Paso 3Personaliza el diseño y el color de los iconos para garantizar que se ajusten al estilo del sitio web.

7.2 Personalización de los iconos del menú

• Paso 4Puede cargar un icono personalizado para sustituir el icono predeterminado del menú hamburguesa y personalizarlo.
• Paso 5: HabilitarEl evento del ratón abre el menú.Opciones, para que los usuarios puedan abrir o cerrar el menú mediante eventos del ratón.

8. Resultado final: barra de navegación fija completada.

Una vez completados todos los ajustes, la barra de navegación fija se ha configurado correctamente. Ahora, los visitantes podrán ver el menú de navegación en todo momento mientras se desplazan por la página, con elementos del menú, iconos, encabezados y otros elementos personalizados según sus especificaciones.

• Gracias a estas configuraciones, la barra de navegación fija no solo mejora la usabilidad del sitio web, sino que también permite a los visitantes acceder rápidamente al contenido deseado, mejorando así la experiencia de navegación.

alcanzar un veredicto

Barra de navegación fijaConfigurar esta función es un método eficaz para mejorar la usabilidad del sitio web. Siguiendo los pasos descritos en este artículo, podrá implementar fácilmente esta funcionalidad y proporcionar a los usuarios de su sitio web una experiencia de navegación más fluida. Si tiene alguna pregunta o necesita más ayuda, no dude en dejar un comentario a continuación y nos esforzaremos por responderle lo antes posible.

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
① 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