La poderosa guía de usuarios para menús de navegación de WordPress

El humilde menú de navegación. Es una parte importante de su sitio de WordPress que permite a los visitantes encontrar su camino y lo ayuda a estructurar su contenido. Cada tema tendrá una ranura en algún lugar en la parte superior de cada página. ¿Pero son los menús de navegación solo para el encabezado de su sitio? La verdad es que pueden hacer mucho más. En esta publicación, le mostraré algunas de las opciones que tiene disponibles para usar menús de navegación. Le mostraré cómo puede crear más menús de navegación para su sitio. Le mostraré dos formas de agregar esos menús adicionales al front-end de su sitio, uno usando un widget y el otro código. La opción de widget es, con mucho, la más fácil si no está acostumbrado a escribir código, pero depende de la existencia de áreas de widget adecuadas. Por lo tanto, si su tema no incluye un área de widget donde desea colocar un menú, le mostraré Cómo codificar ese menú en su tema.
Así que comencemos creando algunos menús. Creación de más menús de navegación Mi sitio tiene un menú de navegación principal que ya he creado. Verá en la captura de pantalla que tiene algunos niveles, el elemento de menú con sub-Artículos.

Para este menú, marcé la opción del menú principal, lo que significa que mi tema (veinte dieciséis) mostrará el menú en la ranura principal:

Pero no me limito a este menú. Para crear otro, vuelvo a la pantalla Menús del administrador y hago clic en el enlace Crear un nuevo menú:

Aquí agregas el nuevo menú. La mía será para las páginas de servicio, por lo que los llamaré a los servicios y haré clic en Crear menú para crearlo. Luego le agregaré esas páginas: una vez que el menú esté listo con las páginas que necesita, haga clic en Guardar menú para guardarlo. Nota: No marque el cuadro de selección del menú principal: si lo hace, este menú reemplazará el que ya ha creado en el encabezado de su sitio, agregaremos este menú en otro lugar. Si lo desea, puede hacer todo esto a través del personalizador. Abra el personalizador, haga clic en la opción Menús a la izquierda y verá todos los menús mostrados:

Desde aquí puede agregar un nuevo menú usando el botón Agregar un menú o puede seleccionar uno de los menús existentes para editarlo.

Agregar menús usando un widget para que ahora tenga el menú configurado adicional, agréguelo al sitio. Es útil agregar un menú al sótano del sitio, porque eso significa que cuando las personas corren hasta la parte inferior de una página, no deben volver a correr para navegar en otra página del sitio, muy útiles en pantallas pequeñas. . Mi tema no tiene un área de widget en el sótano, pero tiene un área de widget desde abajo, por lo que lo usaré. Puede usar cualquier área de widget de su tema. Se adapta mejor a sus necesidades.
Para agregar el menú a un widget, puede usar el personalizador o la pantalla de widgets en el administrador, por apariencia> widgets. Esta vez, usemos el personalizador. Abra el personalizador y seleccione la opción Widgets en el menú izquierdo:
Seleccione el área del widget al que desea agregar el widget del menú y haga clic en el botón Agregar un widget. Se le ofrecerá la opción de widgets para agregar: seleccione el widget de menú personalizado, luego elija el menú que desea agregar. Dale un título también:

Después de haber hecho esto, haga clic en el botón Guardar y publique para guardar sus cambios. Luego revise el menú en el frente del sitio:

Si desea agregar más menús, ya sea en la misma área de widgets o en diferentes, simplemente siga los mismos pasos para crear cuántos menús necesita, luego agréguelos a múltiples widgets en esa área de widgets u otros.

Agregar un menú adicional a su tema Si su tema no tiene un área de widget adecuada para incluir un widget de menú, puede codificar su nuevo menú en su tema. Por lo tanto, en lugar de usar el área de widget en mi tema, codificaré el menú de servicio En el sótano de mi tema. Mientras uso el tema veintiún años, crearé un tema infantil para hacer esto. Esto se debe al hecho de que cualquier cambio que realice en un tema se perderá en la próxima actualización. Si trabaja con su propio tema, puede editar directamente archivos con el tema.

Nota: Puede encontrar los archivos de origen para esto en GitHub. Así que crearé un nuevo tema en mi carpeta WP-Content/Themes, con solo dos archivos. Estas son la hoja de estilo, style.css, que le dice WordPress que este es un tema infantil y el archivo del sótano, footer.php, que reemplazará el archivo del sótano de mis padres. WordPress usará archivos de plantilla del tema principal para cualquier otra cosa. Nota: Para obtener más información sobre el tema del niño, consulte a nuestra guía para trabajar con temas para padres e hijos. Creando el tema del niño primero, agregue esto a la hoja de estilo del tema infantil para decir WordPress de que este es un tema infantil: el esencial DF79E89260460D94C8B13A50CE389DB está cargado.

Guarde la hoja de estilo. Nota: Salta sobre este paso si trabaja con su propio tema. Agregar el menú al sótano para agregar el menú, deberá editar el archivo Footer.php. Si trabaja con un tema infantil, haga una copia del archivo Footer.php del tema principal en el niño y edítelo en su lugar. Abra el archivo del sótano y agréguelo inmediatamente a la etiqueta de apertura :
Cargue el esencial DF79E89260460D94C8B13A50CE389DB
Tenga en cuenta que incluimos la babosa del menú (servicios) como uno de los parámetros para la función wp_nav_menu (): si ha llamado al menú, deberá usar esto. También incluí la clase de widget para estilo, lo que significa que mi menú se parece un poco a un widget en el frente:
No se ve demasiado bien: está justo al lado del texto del crédito del sótano, que parece discapacitado. Así que agregemos algo de estilo. La estilización del menú guarde el archivo Footer.php y abra la hoja de estilo nuevamente. Agregue eso bajo el código existente:
Los elementos esenciales de DF7E9E89260460D94C8B13A50CE389DBAcest resuelven el problema del ancho, pero hace que el menú todavía esté a la izquierda, con mucho espacio en blanco:
Remedicemos esto, flotando los elementos en la lista uno al lado del otro. Agregue eso a su hoja de estilo:

Cargue el esencial DF79E89260460D94C8B13A50CE389DB
Es mejor de esta forma. Ahora tenemos un menú de sótano que está bellamente alineado en pantallas más grandes:
Sin embargo, no es genial en pantallas más pequeñas:

Así que agregemos un claro al artículo después, nuevamente en la hoja de estilo:
Cargue el esencial DF79E89260460D94C8B13A50CE389DB
¿Cómo se ve esto ahora?

Es mejor de esta forma. Ahora tenemos nuestro menú de servicio en el sótano del sitio. Siempre que tenga que agregar nuevos enlaces, no debe tocar los archivos de plantilla, simplemente edite ese menú en la pantalla de administración de menús. ¡Simple! Los menús pueden hacer más de lo que cree que los menús de navegación pueden funcionar en más lugares que solo el encabezado de su sitio. Puede crear otros adicionales y luego puede agregarlos a otras ubicaciones, como las áreas de widgets y su sótano, puede crear menús específicos para la barra lateral y los diferentes para su sótano o en otro lugar para su base o puede agregar más menús a un área de widgets. ¡La decisión es tuya!

¿Cómo se usa los menús de navegación? ¡Dinos en los comentarios!
Etiquetas:
menús

navegación