WP desde cero (16): menús II

Seguimos trabajando con wp_nav_menu(), ahora para hacer un menú con un nivel de profundidad.

Roy Lichtenstein

archivado en: WordPress / 4 febrero, 2013 / taller:

Aquí estoy de nuevo. Mil disculpas para los que estáis siguiendo alguna de las series en curso, pero me entró un aluvión de curro y las últimas semanas he estado asfixiado. Trataré de postear al menos dos entradas a la semana.

Bueno, pues sigo con la serie de WordPress desde cero. En la última entrada vimos cómo hacer un menú sencillo, en esta cómo hacer uno más sofisticado.

Un menú con subniveles

Además de container, item_wrap y theme_location, en el array de wp_nav_menu() podemos definir más parámetros. Los más importantes son:

  1.  container_class: define la clase del contenedor principal. Si no se indica, por defecto pone la expresión «menu-slug del menú-container».
  2. container_id: el id del contenedor principal.
  3. menu_class: la clase o clases del tag ul.
  4. fallback_cb: llama a la función indicada cuando no hay ningún menú definido. Es decir, sirve para mostrar algo hasta que se define un menú en el back-end. Por defecto emplea la función wp_page_menu, que muestra un listado de páginas.
  5. before: para poner algo antes del tag <a> de cada menú.
  6. after: después del tag </a> de cada menú. Si antes pusimos por ejemplo un <b>, aquí lo cerramos. (Ojo, no hay que indicar ni en el before ni en el after los <li>, que esos los pone solo).
  7. depth: la profundidad del menú, es decir, el número de subniveles que admite.

En este menú, vamos a darle un nivel y definir de forma más precisa los id y las clases para trabajar luego el listado con jQuery. El objetivo es conseguir que el código final sea una lista desordenada, en la que las subopciones del menú sean una lista encadenada en su respectivo nivel superior.

Dicho de forma menos enrevesada, si tenemos un menú con esta jerarquía:

[singlepic id=64 w=482 h=394 float=center]

Es decir, esta estructura:

  • opción 1
    • subopción 1.1
    • subopción 1.2
  • opción 2
    • subopción 2.1.
    • subopción 2.2.
  • opción 3

El código final que necesitamos será similar a este:

  • <ul>
  • <li>opción 1
  • <ul>
  • <li>subopción 1.1</li>
  • <li>subopción 1.2</li>
  • </ul>
  • </li>
  • <li>opción 2
  • <ul>
  • <li>subopción 2.1.</li>
  • <li>subopción 2.2.</li>
  • </ul>
  • </li>
  • <li>opción 3</li>
  • </ul>

Para eso, NO hay que definir los parámetros after y ni before wp_nav_menu, pues WordPress ya arma las listas encadenadas de forma automática. Algo así:

  • <?php wp_nav_menu(
  • array(
  • 'container' => 'nav',
  • 'container_class' => 'barras_navegacion',
  • 'container_id' => 'barra_inferior',
  • 'menu_class' => 'barra_inferior_listado',
  • 'items_wrap' => '<ul id="menu_inferior">%3$s</ul>',
  • 'depth' => 2,
  • 'theme_location' => 'secundaria'
  • )); ?>

Añadimos este menú en el archivo functions.php:

  • register_nav_menus( array (
  • 'principal' => __( 'barra principal', 'mmfilesi-bones' ),
  • 'secundaria'=>__( 'barra secundaria', 'mmfilesi-bones' )
  • ));

Et voilà, con esto ya tendríamos las listas encadenadas. Vamos ahora a darle estilos.

Estilos

Como hicimos con el otro menú, vamos desarrollarlo en horizontal. Lo primero es quitar los estilos de la lista superior:

  • #menu_inferior {
  • list-style-type: none;
  • margin: 0;
  • padding:0;
  • }

Luego flotamos los li de la primera lista:

  • #menu_inferior > li {
  • float:left;
  • margin-right: 1em;
  • }

Y ya el menú comienza a adquirir forma...

[singlepic id=65 w=418 h=79 float=center]

Por último, quitamos el estilo de las listas del segundo nivel y las escondemos con un display none. Además, las posicionamos de forma absoluta para poder darles un z-index mayor que el resto de los elementos y que al desplegarse lo hagan por encima.

  • #menu_inferior > li ul {
  • list-style-type: none;
  • margin: 0;
  • padding:0;
  • background: #fff;
  • display: none;
  • position:absolute;
  • z-index: 3;
  • }

 

(Esta NO es la manera más razonable de trabajar con las CSS, repitiendo estilos y esas cosas, pero esta entrada no es para ver cómo hacer un menú horizontal, sino para que entendamos cómo se trabajan los menús de WordPress).

jQuery: wp_head() y wp_footer()

Ya solo falta añadir un poco de jQuery para que los submenús se desplieguen al pasar el cursor o pulsar el nivel superior correspondiente. Ya he explicado esto con algo de detalle en jQuery Blues: 5.Eventos básicos y la siguiente entrada de esa serie, por lo que voy aquí algo por encima.

Lo primero que tenemos que hacer es añadir dos funciones muy importantes:  wp_head() y wp_footer(). Sirven para anclar el jQuery y algunos plugins. Es decir, sirven para insertar en la cabecera o el pie fragmentos de código que se encuentran en otros lados.

wp_head() se coloca justo antes de la etiqueta de cierre de </head> en el archivo header.php:

  • ...
  • <?php wp_head(); ?>
  • </head>
  • ...

Y wp_footer() se pone justo antes del cierre del body en footer.php:

  • ...
  • <?php wp_footer(); ?>
  • </body>
  • </html>

Una vez puestas estas dos funciones, ya podemos ir con el jQuery. En un archivo .js que podemos llamar menu_desplegado ponemos el jQuery en modo no conflicto. (Este es un ejemplo muy sencillo cambiando las CSS, pero se puede poner una animación para que quede más chulo, claro).

  • jQuery(document).ready(function($) {
  • jQuery("#menu_inferior > li",this).hover(
  • function(){
  • jQuery("ul", this).css("display", "block");
  • },
  • function(){
  • jQuery("ul", this).css("display", "none");
  • }
  • );
  • });

Y ya por último registramos el jQuery en functions.php:

  • function carga_jqueries() {
  • wp_register_script('menu_desplegado', get_template_directory_uri() . '/js/menu_desplegado.js', array('jquery'),false);
  • wp_enqueue_script( 'menu_desplegado' );
  • }
  • add_action( 'wp_enqueue_scripts', 'carga_jqueries' );

Oki doki, pues con esto ya estaría un menú con subopciones.

Como siempre, los archivos están en git.

|| Tags: ,

valoración de los lectores sobre WP desde cero (16): menús II

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

13 respuestas a “WP desde cero (16): menús II

  1. marcos el dijo:

    Muchas gracias Frank.

    Sí, quería darle un adelanto a la serie de PHP orientado a objetos, que se la debo a un amigo, pero ya esta semana retomo esta serie.

    Un abrazo.

  2. Danivx el dijo:

    Que pena que no haya más desde marzo :(…

    Estoy tratando de hacer mi primer theme y la forma en la que explicas me estaba guiando mucho en el proceso.

    De todas formas, gracias por compartir.

  3. Muy buen aporte.
    Me preguntaba si acaba aquí o si por el contrario habrán más “capítulos” de WordPress desde cero.
    Gracias por este manual…

  4. marcos el dijo:

    Hola San, muchas gracias.

    Sí, sí que habrá más, aunque me temo que no será pronto, pues estoy hasta las cejas de curro. De todas maneras, con lo expuesto hasta aquí, debería bastar para diseñar cualquier tema. Si acaso empieza por modificar alguno ya existente (y bueno), como el Twenty no sé qué….

  5. Hola!!! Agradezco enormemente tu trabajo pues me ha ayudado mucho en crear mi tema. Si me pudieras ayudar: ya habilité encabezados personalizados. Pero aunque habilité fondos personalizados en functions.php, y en el background ya me aparecen las opciones de fondo, a la hora de guardar no se ve ningún cambio en mi página. ¿Debo agregar código además de en functions.php? ¿O qué estaré haciendo mal? De antemano muchas gracias!!!!

  6. Que gran trabajo, gracias por compartir tu conocimiento con nosotros, para cuando mas parte del curso???

    Un saludo

  7. Waooooo !
    Hasta que al fin pude encontrar como lograr hacer estos tipos de menus en wordpress… Muchisimas gracias hermano, me ha sido de gran ayuda y al mismo tiempo me sacaste de un apuro. Dios te Bendiga hermano. GRACIAS POR TAN EXCELENTE AYUDA….