Como crear y mostrar un menú de WordPress con un Shortcode #

Los Shortcodes llevan con nosotros década y media y siguen siendo una de las formas más sencillas de “llamar contenido” desde nuestro WordPress hacia nuestro WordPress. En este tutorial te enseñaré unos pasos sencillos para lograr mostrar cualquier menú en formato de Shortcode, de esta manera podemos crear todo tipo de contenidos como:

• Mapa de una web o de una tienda.
• Menús horizontales personalizados para una sección del blog o de una tienda.
• Básicamente, lo que se te ocurra que pueda usarse un menú de navegación.

La ventaja de los Shortcodes es que lo puedes utilizar en casi cualquier contenido de la web, solo necesitas el propósito e imaginación al poder.

A continuación os traigo un tutorial paso a paso para crear y mostrar cualquier menú de WordPress en cualquier parte de la web mediante un Shortcode, recuerda que puedes crear ilimitadas cantidades de menús, por lo que las posibilidades son infinitas.

Código del Shortcode en functions.php para mostrar el menú de WordPress #

Lo primero que debemos hacer es incluir estas líneas de código en el archivo functions.php de la plantilla, para hacer esta acción te recomendamos tener un Child Theme, de lo contrario perderás este trozo del código en cada actualización de tu plantilla:

1. /**
    * Como crear y mostrar un menú de WordPress con un Shortcode
    */
   function rv_print_menu_shortcode( $atts ) {
   
    /**
     * Normalize
     *
     * Por seguridad vamos a limpiar los atributos
     * que introdujimos 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' );

Ahora vamos a mostrar el menú de WordPress mediante nuestro Shortcode #

Para que puedas usar el shortcode y mostrar el menú que creamos previamente, solo tienes que copiar y pegar la siguiente línea donde quieras que se vea.

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

Y todo lo que tienes que hacer es cambiar el parámetro name=»mi-menú» donde vamos a cambiar el nombre mi-menú por el nombre que le has dado a tu menú de WordPress.

Recuerda que los menús se crean en Apariencia -> Menús, 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.

Si por ejemplo creamos el menú "Fábrica":

Debemos utilizar el Shortcode:

1. [print-menu name="fabrica"]

En principio el menú que ha sido llamado por el Shortcode no tiene CSS, así que la apariencia que tome dependerá de la plantilla que tengas instalada, ahora que acabamos con la parte complicada: hacer que se muestre el menú, ahora vamos con la parte más sencilla, darle estilos.

Ahora vamos a darle un poco de estilo a nuestro menú con clases CSS #

Las clases de CSS se agregarán directamente al Shortcode, puedes crear cuantas clases quieras separándolas con un espacio, siguiendo el ejemplo del menú fábrica quedaría de esta manera para una clase que llamaremos clase1

1. [print-menu name="fabrica" class="clase1"]

Y así si queremos que tenga clase1 y clase2

1. [print-menu name="fabrica" class="clase1 clase2"]

Ahora solo queda poner tus propias clases y estilos de CSS y lo tendríamos listo.

En caso de que necesites que el menú sea horizontal #

Si necesitas que el menú se presente en formato horizontal, este sería el código de CSS:

1. .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 que haya sido de ayuda este tutorial, hasta el siguiente, ciao.