Skip to main content

Mostrar menú de WordPress con Shortcode:

Lo primero que debemos hacer es trabajar en nuestro archivo «functions.php».

Aquí tienes el código que te permitirá mostrar el menú, solo debes 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' );

Para que puedas usar el Shortcode y mostrar el menú donde quieras, solo tienes que copiar y pegar la siguiente línea de código (shortcode)

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

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

Ejemplo:

Por ejemplo, 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"]

Agregar una clase CSS a tu menú:

Para ello solo tienes que añadir  class=»nombre-clase» tal como aparece en en siguiente ejemplo:

[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"]

Si te fue de ayuda agradécenos dando like en Facebook y/o Instagram

DEJA UN COMENTARIO