wordpress-bootstrap-navegation-en wareza2pc

wordpress y Menu bootstrap

wordpress – menu bootstrap con wp-bootstrap-navwalker

WordPress – Como añadir una barra de navegacion con estilos de bootstrap en un tema de wordpress?.
Hay muchos tutoriales al respecto pero siempre les falta algo que hace que no funcione la solucion dada.
Despues de horas de buscar por toda la web y otros lugares logre encotrar una Solucion.
Y aqui se las comparto, como agregar su navegacion bootstrap en wordpress y no morir en el intento, por si tienen el mismo problema que yo.

Bien lo primero que aremos sera ir a descargar un archivo llamado wp-bootstrap-navwalker  del  GitHub.
Descarga el Archivo de Aqui

wordpress-descargar-wp-bootstrap-navwalker-en-wareza2pc

Descarga del wp-bootstrap-navwalker

 

Una vez descargado extraemos el archivo wp-bootstrap-navwalker.php y lo colocamos en la raiz del tema(Carpeta Principal).
Una vez echo esto abrimos el archivo functions.php en el cual pondremos este codigo.

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

También ocuparas declarar un nuevo menú en su archivo functions.php si aún no existe uno.

register_nav_menus( array(
	'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

El codigo de arriba es solo un ejemplo que puedes usar, pero por lo regular ya se tiene uno declarado.

El uso

Una vez que hemos echo lo anterior vamos a darle uso.
Para poder usar el WP Bootstrap Navwalker devemos agregar o actualizar cualquier funcion wp_nav_menu() que tengamos
(a menudo se encuentra en header.php).
para usar el nuevo Walker añada el elemento ‘walker’ al arreglo(array) wp_nav_menu args.

<?php
wp_nav_menu( array(
 'theme_location' => 'primary',
 'depth' => 1, // 1 = with dropdowns, 0 = no dropdowns.
 'container' => 'div',
 'container_class' => 'collapse navbar-collapse',
 'container_id' => 'bs-example-navbar-collapse-1',
 'menu_class' => 'navbar-nav mr-auto',
 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
 'walker' => new WP_Bootstrap_Navwalker()
) );
?>

Por lo regular con eso deve bastar para que funcione nuestro navbar.
Al menos es lo que sucede en cada uno de los tutoriales que lei o mire, pero en mi caso no funcionaban, Por que?.
Resulta que mi menu tenia clases en la etiqueta ul de mi lista y note que en los tutoriales no y la verdad no encotre ninguno que hablara sobre eso.
Despues de varias horas documentandome encontre la solucion que a lo mejor para los ya curtidos en el tema sera algo muy simple pero para mi fue un reto de principiante.
Para poder agregar las clases a la etiqueta ul solo tuve que agregar 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'.
Entonces queda algo asi.

code Aqui
<?php
 wp_nav_menu(array(
 'theme_location' => 'primary',
 'depth' => 2,
 'container' => 'div',
 'container_class' => 'collapse navbar-collapse',
 'container_id' => 'navbar',
 'menu_class' => 'navbar-nav mr-auto',
 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
 'walker' => new WP_Bootstrap_Navwalker(),
  ));
  ?>

Una vez agregado la etiqueta ul recive sus clases y que da funcionando.
Con el codigo de arriba no hace falta agregar marcaje html ya que el mismo lo crea con los parametros que se le agregan.
Espero les sirva al igual que me sirvio a mi Cualquier duda en los comentarios.


Categories: Tutoriales

Continue Reading...

Produc key windows-en wareza2pc

Tu barra de Navegacion hecha con bootstrap no se adapta a Wordpress? Entra!, aqui te decimos como.

Read Post
t-con comprobar tarjeta manualmente-en-wareza2pc

Tu barra de Navegacion hecha con bootstrap no se adapta a Wordpress? Entra!, aqui te decimos como.

Read Post

Deja un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE