Crear un menú simple sin plugins en WordPress

Replay


Existen múltiples plugins para añadir un menú nuevo a nuestra web en WordPress, como para hacer que este se encargue de nuestro menú principal. Algunos de ellos nos proporcionan herramientas muy potentes y prácticas para que el menú de nuestra página web luzca tal y como teníamos pensado añadiendo iconos, efectos y demás opciones de personalización.

En este post vamos a ver como crear un menú secundario o primario simple en nuestro sitio. De la forma en que lo vamos a hacer, podrás añadir elementos a este nuevo menú como se hace normalmente en WordPress ya que este método no trata de como crear un menú con código Html sobre las plantillas de nuestro theme.

 

Pasos para crear un nuevo Menú

 

 En primer lugar debemos hacer que wordpress entienda que existe un nuevo menú en nuestro tema. Para ello, se lo indicamos en el archivo que utilizan los themes de WordPress para su funcionamiento. Añadimos el siguiente código al archivo functions.php del tema de WordPress que estemos utilizando:

function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'New Menu' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

 

 Con el código anterior, nuestro WordPress ya sabe que hay un posible nuevo menú. Ahora vamos a Apariencia > Menús desde nuestro panel de administrador de WordPress.

 

Ya en la sección de menús, seleccionamos la opción crea un nuevo menú. A continuación, en la parte inferior marcamos la opción Nuevo menú (este es el nuevo menú que acabamos de crear en el archivo function.php del paso anterior).

En este paso podemos agregar los elementos o enlaces que tendrá el nuevo menú si lo deseamos.

 

 En los pasos anteriores hemos indicado a nuestro tema activo que vamos a crear un nuevo menú, así que ahora es el momento de ubicarlo en la plantilla de nuestro theme. Para esto vamos a los archivos del theme que estemos usando y copiamos el siguiente código en el lugar que queramos que parezca:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

Dependerá del tema que estemos usando, pero para por ejemplo que nuestro nuevo menú apareciera en todas las páginas de nuestra web, tendríamos que añadir el código anterior al archivo llamado header.php después de la etiqueta <body>.

 

 Por último, sólo nos quedaría aplicarle un CSS a nuestro nuevo menú para dejarlo con la apariencia que queramos. Te compartimos este ejemplo de un caso que acabamos de realizar en el que hemos añadido un menú secundario con las letras del abecedario y su correspondiente CSS.

#menu-2{
	list-style-type: none;
	background-color: #00bad2;
  min-width: 300px;
  padding: 2px 16px;
  z-index: 1;
	text-align:center;
}
#menu-2 li{
	display: inline;
	margin-left:8px;
	
}
#menu-2 li a{
    padding: 2px;
    color:white;
}