Megamenu para tu tema de WordPress

Los menús de navegación son elementos fundamentales en cualquier sitio web, ya que guían a los visitantes a través del contenido y les permiten acceder fácilmente a las diferentes secciones. En este articulo, veremos como crear un megamenu para tu tema de WordPress, con texto y navegacion con titulo. A su vez, vamos a ver como podemos agregar un widget ademas de la navegacion.

Este es un ejemplo de como podemos agregar un megamenu a un tema de wordpress, el cual incluye widgets y como agregaremos un titulo al menu.

Como crear un megamenu de navegacion en tu tema de wordpress

Para crear un megamenu en tu tema de WordPress, tienes que comenzar con agregar la informacion dentro del fichero functions.php. Esta informacion te dara acceso a crear el menu en el customizer. Si abres el fichero functions.php, busca dentro un codigo que comienza con register_nav_menus(), y agrega el nuevo menu.

register_nav_menus(
			array(
				'menu-01' => esc_html__('Primary', 'textdomain'),
				'nuevo-menu' => __('NUevo Menu', 'text-domain'),
			)
		);

Ahora que tenemos el menu creado en el fichero functions.php, vamos a llamar al menu en ela zona en la que deseemos crearlo. En el caso de este tutorial, sera en el fichero header.php, asi que busca este fichero, abrelo y elije el lugar en el que insertaras el nuevo menu. En cuanto tengas el lugar idoneo para tu nuevo menu, agrega esto.

<?php wp_nav_menu(array('menu'=>'nuevo-menu', 'menu_class'=>'tuclase', 'container'=>'ul')); ?>

Este menu lo vamos a incluir dentro de un megamenu que estaremos creando de forma estatica dentro del fichero header. Asi que con esto en mente, vamos a crear un menu simple en donde agregar nuestro menu mas el widget que estaremos creando mas adelante.

<nav role="navigation">
	<ul role="menubar">
		<li><a href="" aria-haspopup="true">Primer Menu</a>
			<div>
				<?php wp_nav_menu(array('menu'=>'nuevo-menu', 'menu_class'=>'tuclase', 'container'=>'ul')); ?>
			</div>
		</li>
		<li><a href="" aria-haspopup="true">Segundo menu</a>
			<?php wp_nav_menu(''); ?>
		</li>
		<li><a href="" aria-haspopup="true">Tercer menu</a>
			<?php wp_nav_menu(''); ?>
		</li>
	</ul>
</nav>

Como pueden ver, aqui he argegado un menu principal que continene tres enlaces y cada uno va a tener un menu. Yo estare presentando el primero, pero pueden desarrollar los otros dos usando la misma metodologia que aqu presento.

Como Agregar un titulo dentro del menu

Para esta parte usaremos las opciones que tiene wp_nav_menu(), en particular, estaremos haciendo uso de la opcion: items_wrap, la cual segun WordPress, permite encapsular todo el menu segun el estilo que queramos crear. Para esto agregaremos la opcion a la funcion wp_nav_menu(), agregando ademas, un titulo para nuestro menu como primera opcion.

<?php wp_nav_menu(array('menu'=>'nuevo-menu', 'menu_class'=>'tuclase', 'container'=>'ul', 'items_wrap'=>'<ul class="%2$s"><li><h3>Get Started</h3></li>%3$s</ul>')); ?>

Para darle estilo al menu, pueden abrir el fichero de estilo y comenzar a agregar contenido a la clase ‘tuclase‘.

Como agregar un widget al megamenu

Supongamos que queremos agregar contenido que podamos editar en el customizer y que este se muestre al lado del menu. Para esto vamos a usar un widget que agregaremos en la pocision correcta. Pero primero crearemos el widget, asi que abre nuevamente el fichero functions.php y busca por la funcion que contenga ‘register_sidebar()‘. Si no tienes una puedes crear una funcion para agregar widgets a tu tema de esta manera:

Primero crea una funcion que contendra todos los widgets para tu tema.

function mis_widgets(){
  
}
add_action('widgets_init', 'mis_widgets');

function mis_widgets(){
  
  register_sidebar();
}
add_action('widgets_init', 'mis_widgets');

...
register_sidebar(array(
  'name'	=> __('Menu Zone', 'text-domain'),
  'id'	=> 'menu_wg',
  'description'	=> __('Content aside the menu', 'text-domain'),
  'before_widget'	=> '<div>',
  'after_widget'	=> '</div>',
));

<nav role="navigation">
	<ul role="menubar">
		<li><a href="" aria-haspopup="true">Primer Menu</a>
			<div>
                               <?php if(is_active_sidebar('menu_wg')) : dynamic_sidebar('menu_wg'); endif; ?>
				<?php wp_nav_menu(array('menu'=>'nuevo-menu', 'menu_class'=>'tuclase', 'container'=>'ul')); ?>
			</div>
		</li>
		...
	</ul>
</nav>