May 212014
 
Artículo WordPress

En nuestro anterior artículo hemos explicado la manera de incorporar la librería bootstrap “adaptativa” (en inglés: responsive) a un tema de wordpress.

Pero añadir un menú adaptativo requiere una configuración adicional. En este artículo explicamos los detalles de esta tarea.

Cómo añadir un menú bootstrap “adaptativo” a un tema WordPress – Clase Walker_Nav_Menu

Un tema WordPress utiliza una llamada a la función wp_nav_menu() para insertar en la página el código HTML de un menú.

Esta función utiliza por defecto la funcionalidad implementada en una clase denominada Walker_Nav_Menu (tanto wp_nav_menu() como la clase Walker_Nav_Menu están definidas en el script wp-includes/nav-menu-template.php)

El código HTML de un menú generado con Walker_Nav_Menu consiste en un árbol de listas de elementos (las entradas del menú) que utiliza los tags <ul> y <li>. A cada uno de estos tags se le asigna una serie de clases CSS, para que el tema pueda modificar el aspecto del menú mediante código CSS.

En el siguiente ejemplo podemos ver el código generado por WordPress para un menú de tres niveles:

Pero la funcionalidad adaptativa de Bootstrap utiliza otros nombres de clase para identificar la estructura y los distintos elementos del menú, y también necesita incorporar al menú elementos adicionales, como por ejemplo el botón que aparece cuando el menú está “colapsado” (en pantallas de dispositivos móviles).

Para añadir los nombres de clase requeridos por Bootstrap, es necesario sustituir el Walker_Nav_Menu por otra clase PHP.

Afortunadamente,  no tenemos que hacerlo a partir de cero. Podemos descargar desde https://github.com/jeffmould/multi-level-bootstrap-menu un script que ya contiene una clase wp-bootstrap-navwalker que implementa esta funcionalidad. El trabajo de Jeff Mould está basado en otra clase wp-bootstrap-navwalker desarollada por twittem, que también se puede descargar de github. Jeff realizó algunos cambios en la clase original para dar soporte a menús multinivel, y también sustituye el uso de glyphicons por Font Awesome icons.

Una vez descargado el fichero comprimido, extraemos en el directorio del tema el fichero “wp-bootstrap-navwalker.php” que contiene.

A continuación, deberemos añadir en functions.php la sentencia para incluir este script en el proceso de las páginas:

Por último modificaremos la llamada a wp_nav_menu que se encuentra en el fichero header.php, incluyendo en ella un argumento para seleccionar el nuevo NavWalker:

En header.php, antes:

Después:

Como podemos ver:

  • La llamada a wp_nav_menu se encuentra ahora en el interior de un elemento <nav>, en los que también hay botón con clase “navbar-toggle”. Este botón presenta  las tres rayas horizontales que aparecen en sustitución del menú, cuando éste está colapsado.
  • Por otra parte, hemos añadido elementos adicionales en el array que se le pasa como argumento a la llamada. Entre ellos, el elemento ‘walker’ tiene como valor una instancia de la clase wp_bootstrap_navwalker(), definida en el script wp-bootstrap-navwalker.php que hemos instalado anteriormente.

Y con esto ya podemos comprobar el aspecto que tiene el menú en el navegador de un ordenador de sobremesa:

Y el aspecto que presenta en un dispositivo móvil, cuando está colapsado y cuando está desplegado.

menú ccolapsado

menú desplegado

Referencias

 

 Publicado por en 8:48 am

 Deja un comentario

(requerido)

(requerido)