Mostrar un menú de WordPress con un Shortcode

Los Shortcodes aparecieron por primera vez en la versión 2.5 de WordPress el 29 de marzo de 2008 y son una excelente forma de incluir funcionalidades extra en nuestra página web.

Se suelen usar sobre todo cuando el tema que estamos usando no incluye una funcionalidad especifica que queremos incluir y su mayor ventaja es que WordPress soporta el uso de Shortcodes en casi cualquier lugar :

• En páginas y articulos en el anterior editor y también en el nuevo editor Guenberg.
• En los Widgets que normalmente suelen ser las barras laterales o Sidebars. Para este caso necesitas activar el soporte de Shortcodes en lo widgets si tu tema no lo trae ya activado.
• Directamente en código mediante el comando do_shortcode();

A continuación os traigo un Shortcode muy útil que os da la posibilidad de mostrar cualquier menú que habéis creado en vuestro WordPress.

Código del Shortcode para mostrar el menú de WordPress

Aquí abajo tienes el código que te permitirá mostrar el menú y lo único que tienes que hacer es copiarlo y pegarlo en el archivo functions.php de tu tema hijo.

/**
 * Shortcode para mostrar un menú de WordPress
 */
function rv_print_menu_shortcode( $atts ) {

	/**
	 * Normalize
	 *
	 * Como medida de seguridad limpiamos los atributos
	 * introducidos al escribir el Shortcode.
	 */
	$atts = array_change_key_case( (array) $atts, CASE_LOWER );
	$atts = array_map( 'sanitize_text_field', $atts );

	/**
	 * Atributtes
	 *
	 * A continuación guardamos los atributos en 2 variables
	 */
	$menu_name  = $atts['name'];
	$menu_class = $atts['class'];

	/**
	 * Creamos la variable $menu_output que va a retornar todo
	 * lo que conforma nuestro menú y llamamos a la función
	 * de WordPress wp_nav_menu() y le pasamos como
	 * parámetros nuestros atributos.
	 */
	$menu_output = '<div class="shortcode-menu">';

	$menu_output .= wp_nav_menu( array(
		'menu'       => esc_attr( $menu_name ),
		'menu_class' => 'menu ' . esc_attr( $menu_class ),
		'echo'       => false
	) );

	$menu_output .= '</div>';

	return $menu_output;

}

add_shortcode( 'print-menu', 'rv_print_menu_shortcode' );

Como puedes mostrar el menú de WordPress

Para que puedas usar el Shortcode anterior y mostrar el menú solo tienes que copiar y pegar la siguiente linea donde quieras que se vea.

[print-menu name="nombre-menu"]

Y tan solo tienes que cambiar el parámetro name=»nombre-menu» cambiando nombre-menu por el nombre que le has puesto a tu menú de WordPress.

A mododde ejemplo y creo que ya lo sabes y si no te lo digo, los menús se encuentran dentro del administrador de WordPress en la sección Apariencia -> Menús.

Por ejemplo como puedes ver en la siguiente imagen yo tengo una menú de WordPress que se llama prueba.

Y el Shortcode que tengo que escribir es el siguiente:

[print-menu name="prueba"]

Y el resultado final que es el contenido de mi menú.

El Shortcode no incluye CSS, asi que la apariencia se tengáis vosotros va ha depender del tema que estáis usando y puede que se vea diferente al menú que me sale a mi en esta imagen.

Lo bueno es que la parte más importante y «difícil» ya la tenemos hecha, que es mostrar nuestro menú, ahora solo queda ponerlo a nuestro gusto.

Añadir clases CSS al menú

Para que puedas tener un mayor control y te sea más fácil personalizar el menú se incluye la posibilidad de que puedas añadir tus propias clases CSS. Estas clases se añaden a la etiqueta ul del menú.

Para ello solo tienes que añadir un parámetro mas llamado class=»nombre-clase» tal como aparece en la imagen de abajo.

[print-menu name="nombre-menu" class="nombre-clase"]

También puedes añadir varias clases a la vez incluyendo un espacio entre cada una de ellas.

[print-menu name="nombre-menu" class="nombre-clase1 nombre-clase2"]

Con tus propias clases y con un poco de conocimiento de CSS espero que te sea mucho más facil personalizar la apariencia del menú.

+ Bonus – Incluir Shortcodes en los Widgets de WordPress

Algunos me habeis preguntado que no se mostraba el menú y salia el código del shortcode tal cual como lo poneis.

Lo que esta ocurriendo es que por defecto WordPress no trae activado el uso de Shortcodes en los Widgets asi que tenemos que activar esta opción nosotros si el tema que estamos usando no lo ha hecho.

Para poder usar Shortcodes en los widgets de WordPress tan solo teneis que añadir el siguiente código:

add_filter('widget_text', 'do_shortcode');

++ Bonus – Código Css para hacer el menú horizontal

Para que os sea todavía más facil y en el caso de querer que vuestro menú se vea en formato horizontal, aqui os dejo este código de Css para conseguirlo:

.shortcode-menu ul li {
	display: block;
	position: relative;
	float: left;
}
.shortcode-menu li ul {
	display: none;
}
.shortcode-menu ul li a {
	display: block;
	padding: 5px 15px 5px 15px;
	margin-left: 1px;
	white-space: nowrap;
}
.shortcode-menu li:hover ul {
	display: block;
	position: absolute;
}
.shortcode-menu li:hover li {
	float: none;
	padding: 0;
}

Espero os haya servido tanto el Shortcode como el código CSS y cualquier duda comentarla, hasta la próxima!