Saltar al contenido

Cómo agregar menús de navegación personalizados en temas de WordPress

Add Navigation Menu to Themes

¿Desea agregar menús de navegación personalizados en su tema de WordPress? Por defecto, muchos temas de WordPress vienen con ubicaciones y diseños de menú predefinidos. En este artículo, le mostraremos cómo agregar más menús de navegación en su tema de WordPress.

Agregar menú de navegación a temas

¿Cuándo necesita este tutorial del menú de navegación de WordPress?

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 dentro de su área de administración de WordPress.

Si solo desea agregar menús de navegación en su sitio web, siga nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

Este tutorial está dirigido a usuarios de bricolaje que están creando un tema de WordPress personalizado o alguien que necesita agregar ubicaciones de menú adicionales a un tema de WordPress existente.

Dicho esto, echemos un vistazo a cómo agregar menús de navegación personalizados de WordPress en su tema.

Crear menús de navegación personalizados en temas de WordPress

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('my-custom-menu',__( 'My Custom Menu' ));
}
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 opción de ubicación del tema.

Menú personalizado como ubicación del tema

Si desea agregar más de una nueva ubicación del menú de navegación, necesitará usar un código como este:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Una vez que haya agregado la ubicación del menú, continúe y agregue algunos 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 que muestra el menú en su tema.

Mostrar menús de navegación personalizados en temas de WordPress

A continuación, debemos mostrar el nuevo menú de navegación en su tema de WordPress. El lugar más común donde generalmente 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ú.


 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

La ubicación del tema es el nombre que seleccionamos en el paso anterior.

La clase contenedor es la clase CSS que se agregará a su menú de navegación. Su menú aparecerá como una lista con viñetas en su sitio web.

Menú personalizado que se muestra como lista simple

Puede usar la clase CSS .custom_menu_class para diseñar sus menús. Aquí hay un ejemplo de CSS para ayudarlo a comenzar:

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

Si necesita más ayuda con el CSS y los diseños de menú, le recomendamos que utilice uno de estos temas iniciales de WordPress para crear sus temas personalizados.

Creación de menús adaptables para dispositivos móviles en WordPress

Con el aumento en el uso de dispositivos móviles, es posible que desee que sus menús sean aptos para dispositivos móviles agregando uno de los muchos efectos populares.

Demostración del complemento de menú receptivo

Puede agregar un efecto deslizante (arriba), un efecto desplegable e incluso un efecto de alternar para los menús móviles.

Tenemos una guía detallada paso a paso sobre cómo preparar menús de WordPress receptivos para dispositivos móviles.

Haga más con los menús de navegación de WordPress

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 solo 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 te haya ayudado a aprender cómo agregar un menú de navegación en WordPress. También puede ver nuestra lista de los 25 widgets de WordPress más útiles para su sitio.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

.