¿Desea agregar menús de navegación personalizados en su tema de WordPress? Los menús de navegación son la lista horizontal de enlaces que se muestran sobre la mayoría de los sitios web. De forma predeterminada, los temas de WordPress vienen con ubicaciones y diseños de menú predefinidos, pero ¿qué sucede si desea agregar sus propios menús de navegación personalizados? En este artículo, le mostraremos cómo crear y agregar fácilmente menús de navegación personalizados en WordPress, para que pueda mostrarlos en cualquier lugar de su tema.
Contents
La mayoría de los temas de WordPress vienen con al menos un lugar donde puede mostrar los enlaces de navegación de su sitio en un menú. Puede administrar los elementos del menú desde una interfaz fácil de usar en su área de administración de WordPress. Si solo está buscando agregar menús de navegación a su sitio web, simplemente siga nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress. El propósito de este tutorial es ayudar a los usuarios intermedios / de bricolaje a agregar menús de navegación personalizados a sus temas de WordPress. Cubriremos los siguientes temas en este artículo: Dicho esto, veamos cómo agregar menús de navegación personalizados de WordPress en su tema.
Los menús de navegación son una característica de los temas de WordPress. Cada tema puede definir sus propias ubicaciones de menú y soporte de menú. Para agregar un menú de navegación personalizado, lo primero que debe hacer es registrar su nuevo menú de navegación agregando este código al archivo functions.php de su tema. function wpb_custom_new_menu () {register_nav_menu (‘mi-menú-personalizado’, __ (‘Mi menú personalizado’)); } add_action (‘init’, ‘wpb_custom_new_menu’); Ahora puedes ir a Apariencia »Menús página en su administrador de WordPress e intente crear o editar un nuevo menú. Verá «Mi menú personalizado» como la opción de ubicación del tema.
Si desea agregar más de una nueva ubicación en el menú de navegación, debe usar un código como este: function wpb_custom_new_menu () {register_nav_menus (array (‘my-custom-menu’ => __ (‘Mi menú personalizado’), ‘extra-menu’ => __ (‘Menú extra’))); } add_action (‘init’, ‘wpb_custom_new_menu’); Una vez que haya agregado la ubicación del menú, continúe y agregue elementos de menú en el administrador de WordPress siguiendo nuestro tutorial sobre cómo agregar menús de navegación para principiantes. Esto nos permitirá pasar al siguiente paso de mostrar el menú en su tema.
A continuación, debemos mostrar el nuevo menú de navegación en su tema de WordPress. El lugar más común donde se colocan los menús de navegación es en la sección de encabezado de un sitio web justo después del título o logotipo del sitio. Sin embargo, puede agregar su menú de navegación en cualquier lugar que desee. Deberá agregar este código en el archivo de plantilla de su tema donde desea mostrar su menú.
‘mi-menú-personalizado’, ‘container_class’ => ‘clase-menú-personalizado’)); ?> La ubicación del tema es el nombre que seleccionamos en el paso anterior. La clase contenedora es la clase CSS que se agregará a su menú de navegación. Su menú aparecerá como una simple lista con viñetas en su sitio web.
Puede usar la clase CSS .custom_menu_class para diseñar sus menús. Aquí hay un ejemplo de CSS para comenzar: div.custom-menu-class ul {margin: 20px 0px 20px 0px; tipo de estilo de lista: ninguno; estilo de lista: ninguno; imagen de estilo de lista: ninguna; alineación de texto: derecha; } div.custom-menu-class li {fill: 0px 20px 0px 0px; pantalla: en línea; } div.custom-menu-class tiene {color: #FFFFFF; }
Para obtener más información sobre cómo diseñar un menú de navegación, consulte nuestro tutorial detallado sobre cómo diseñar los menús de navegación de WordPress.
Si está creando una página de destino personalizada o un diseño de página de inicio, usar un complemento de creación de páginas de WordPress lo haría mucho más fácil. Recomendamos utilizar Beaver Builder, que es el mejor creador de páginas de WordPress del mercado. Le permite crear cualquier tipo de diseño utilizando herramientas simples de arrastrar y soltar (no se requiere codificación). Esto también incluye agregar un menú de navegación personalizado a su diseño. Primero, deberá instalar y activar el complemento Beaver Builder. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe crear una nueva página o editar una página existente a la que desea agregar el menú de navegación. En la pantalla del Editor de publicaciones, haga clic en el botón «Iniciar Beaver Builder».
Si esta es una página nueva, puede usar una de las plantillas listas para usar que vienen con Beaver Builder. También puede cambiar inmediatamente su página de salida.
Luego, debe agregar el módulo Menús y arrastrarlo y soltarlo en su página donde desea mostrar el menú.
Esto abrirá la configuración del módulo de menú en una ventana emergente. Primero, debe seleccionar el menú de navegación que desea utilizar. Siempre puede crear nuevos menús o modificar un menú existente visitando Apariencia »Menús página en el área de administración de WordPress.
También puede ver otras configuraciones. Beaver Builder le permite elegir colores personalizados, fondo y otras propiedades de estilo para su menú. Una vez que haya terminado, puede hacer clic en el botón Guardar y obtener una vista previa de su menú.
A medida que aumenta el uso de dispositivos móviles, es posible que desee hacer que sus menús sean compatibles con dispositivos móviles agregando uno de los muchos efectos populares.
Puede agregar un efecto de deslizamiento (arriba), un efecto de menú desplegable e incluso un efecto de alternancia para menús móviles. Tenemos una guía detallada paso a paso sobre cómo crear menús de WordPress adaptables para dispositivos móviles.
Los menús de navegación son una poderosa herramienta de diseño web. Le permiten dirigir a los usuarios a las secciones más importantes de su sitio web. WordPress le permite hacer mucho más que mostrar enlaces en su menú. Pruebe estos útiles tutoriales para ampliar la funcionalidad de los menús de navegación en su sitio de WordPress. Eso es todo, esperamos que esta guía definitiva le haya ayudado a aprender cómo agregar un menú de navegación en WordPress. También puede consultar nuestra lista de los 25 widgets de WordPress más útiles y nuestra lista de complementos de WordPress imprescindibles. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
