Menu Bootstrap en Wordpress - Diseño Web empresarial, profesional y posicionamiento web (SEO) en Lima
Creamos Marcas... Desarrollamos Webs... Hacemos Logotipos... Posicionamos tu Marca... Anunciamos en Google... Hacemos Social Media... Te hacemos descuentos... Creamos Efectos... Retocamos Fotos... Asesoramos Empresas... Facebook para Empresas... Hacemos Concursos... No gastas, Inviertes... Damos Resultados... Tiendas Virtuales... Trabajamos en equipo... Te ayudamos a crecer... Te escuchamos... Tu web en celulares... Ganamos Premios... Hacemos SEO y SEM... Facebook ADS... Te llamamos... Volamos Cometa...
Home   »  Noticias » Programacion » Menu Bootstrap en WordPress

Menu Bootstrap en WordPress

Usualmente cuando desarrollamos una nueva web usamos bootstrap para maquetar y luego una vez terminada la web la convertimos en administrables con wordpress, este proceso es relativamente sencillo hasta que tenemos que hacer que el menú diseñado en bootstrap sea administrable en wordpress, ahi empiezan los problemas, la solución es utilizar una clase “walker” a la que llamaremos desde la función wp_nav_menu(), pero este proceso es largo y engorroso, pero afortunadamente alguien ya lo hizo y lo compartió con el mundo.

los detalles están aqui y básicamente lo que tienes que hacer es:

Descarga la clase wp-bootstrap-navwalker desde https://github.com/twittem/wp-bootstrap-navwalker
Coloca el archivo wp-bootstrap-navwalker.php en la carpeta de tu tema
Abre el archivo functions.php de tu tema y agrega la siguiente línea

 
// Register Custom Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

con esto ya esta lista la magia, luego solo hay que añadir el menu wordpres como usualmente lo haces con una pequeña variación

 
wp_nav_menu( array(
  'menu' => 'primary',
  'theme_location' => 'primary',
  'depth' => 2,
  'container' => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id' => 'bs-example-navbar-collapse-1',
  'menu_class' => 'nav navbar-nav',
  'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
  'walker' => new wp_bootstrap_navwalker())
);

Listo con esto queda implementado y te ahorraste dolores de cabeza y horas de trabajo, y no te olvides que

Si te gusto compártelo! y si no también compártelo!!

  • 1 julio, 2017
  • admin