• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

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:

Menú idiomas al final del menú primario

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:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

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).

Cabecera Genesis Framework Menú PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?