GoPymes's Blog

Dropdowns Bootstrap en WordPress usando wp_nav_menu()

walker

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 111

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 112

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 111

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 112

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 111

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /home/gopymes/blog.gopymes.pe/wp-content/plugins/codecolorer/codecolorer-core.php on line 112

Según Wikipedia, Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web, en otras palabras es un file CSS + un files JS que te hacen la vida más sencilla, para los que usan LESS, pues Boostrap viene a ser como el hijo prodigo =).

Yo que uso mucho Boostrap desde la versión 2.x, la primera vez que decidí usarlo en un proyecto serio, me topé con el problema de generar un menú desplegable (Dropdowns) usando la funcion de WP wp_nav_menu(), pues como todos saben, esta funcion trae el menú que personalizaste en el apartado de menú de WP (Apariencia -> Menu) y para ello tuve que averiguar todos los parámetros de dicha función, finalmente la que me ayudó a dar una solución elegante fue el último parámetro $walker.


[column lg=”4″ md=”4″ sm=”12″ xs=”12″ ]
[image src=”http://blog.gopymes.pe/wp-content/uploads/2013/11/nav1-e1384147699294.jpg” shape=”img-thumbnail”]
[/column]
[column lg=”4″ md=”4″ sm=”12″ xs=”12″ ]
[image src=”http://blog.gopymes.pe/wp-content/uploads/2013/11/nav2-e1384141365869.jpg” shape=”img-thumbnail”]
[/column]
[column lg=”4″ md=”4″ sm=”12″ xs=”12″ ]
[image src=”http://blog.gopymes.pe/wp-content/uploads/2013/11/nav3-e1384142221457.jpg” shape=”img-thumbnail”]
[/column]

[notification type=”alert-info” close=”false” ]$walker no es string sino un objeto como lo dice el mismo CODEX de WP, y nos permite personalizar absolutamente todo sobre el menú a presentar, formato, estructura, valores, etc, en este caso lo vamos a usar para darle la estructura de Boostrap y poder usar Dropdowns.[/notification]

Estructura de Bootstrap 2.x

[notification type=”alert-warning” close=”false” ]Para no usar código javascript, observa que usamos etiquetas del tipo data-toggle[/notification]

1
 

Creamos nuestro menú WP usando wp_nav_menu.

Vamos a llamar a un walker, como ves en el siguiente código, el último parámetro llamamos a la clase menu_header_waker.

1
 

Creamos la clase Walker

1
 

Explicación del código.

El código es muy extenso así que sólo explicaré lo básico:

[list]
[li type=”glyphicon-ok”]Las funciones start_el()end_el() son para todos los items , sean padres, hijos, nietos etc. [/li]
[li type=”glyphicon-ok”]Las funciones start_lvl()end_lvl() son para agrupar a los hijos[/li]
[li type=”glyphicon-ok”]La función display_element() es para mostrar cada elemento.[/li]
[li type=”glyphicon-ok”]En la función start_el() preguntamos si el item tiene hijos con el atributo $args->has_children, si lo tiene le asignamos la clase dropdown[/li]
[li type=”glyphicon-ok”]Si no especificamos las funciones end_el()end_lvl(), el sistema interno de WP lo deduce, como es este caso[/li]
[/list]

[panel style=”panel-primary”]
[panel-header]
Nota
[/panel-header]
[panel-content]
Todo este código ha sido probado con Boostrap 2.x
[/panel-content]
[/panel]

Leave a Reply

Your email address will not be published. Required fields are marked *