Añadir un elemento al menú primario de Genesis Framework solo en móviles

Descubre en este tutorial cómo agregar un elemento (o varios) al menú primario de Genesis Framework para que solo se muestre en dispositivos móviles mediante código.

¿Quieres añadir un elemento complejo, como un shortcode, al final del menú primario?

Pues en este tutorial te voy a enseñar como puedes añadir cualquier elemento al final del menú primario. Como ejemplo, vamos a ver cómo añadir un shortcode que muestra un menú de idiomas que creamos en un tutorial anterior.

Este sería el resultado final:

Esto es solo un ejemplo para que puedas tomarlo como idea y aplicarlo a tu proyecto.

¿Te interesa?

Snippet para insertar un elemento al final del menú primario que solo se muestra en móviles

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

En este código utilizas los filtros genesis_nav_items y wp_nav_menu_items para concatenar el elemento que te interesa al final del menú.

Eso sí, ten en cuenta que dependiendo del tema y el menú que estés utilizando, necesitarás ajustar el nombre de ‘primary’ al que corresponda o al que te interese:

if ( 'primary' !== $args['theme_location']  )

Por otro lado, ten en cuenta que estás usando la función wp_is_mobile() para que solo se ejecute en dispositivos móviles, los cuales incluyen tablets. Si quieres evitar que se muestre tabletas tendrás que ocultando usando CSS (media-queries).

Si por el contrario quieres que lo que añadas se vea independientemente de la resolución de pantalla, puedes eliminar esta parte:

	if ( ! wp_is_mobile() ) {
		return $menu;
	}

Por último, en este caso has concatenado el shortcode que creamos en un tutorial anterior, pero puede ser cualquier otro elemento.

$lang_switcher = apply_shortcodes ('[lang_switcher]'); return $menu . '<hr>' . $lang_switcher;

Aunque este tutorial está realizado para Genesis Sample (3.4), puedes aplicarlo a cualquier otro child theme de Genesis.

En cualquier caso, si tienes dudas sobre cómo conseguirlo en un child theme concreto, cuéntamelo en los comentarios.

Ya sabes, ventajas de suscriptor. 😉

Conclusión

Si quieres añadir un elemento al menú primario de Genesis que solo se muestre en móviles, este tutorial te da opción de hacerlo con unas pocas líneas de código.

¿Alguna sugerencia para próximos tutoriales? Envíamela a través del formulario de contacto (solo para suscriptores).