Descarga de wp bootstrap navwalker - Descarga de código fuente de wp bootstrap navwalker

WP Bootstrap Navwalker

Este código en la rama principal del repositorio está experimentando una gran reestructuración para alinearlo con los estándares recientes y para fusionar y probar la acumulación de RP que he dejado durante demasiado tiempo. Utilice la etiqueta v4.3.0 para la versión estable mientras se realiza este proceso. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

Una clase personalizada de WordPress Nav Walker para implementar completamente el estilo de navegación Bootstrap 4 en un tema personalizado utilizando el administrador de menús integrado de WordPress.

NOTAS

Esta es una clase de utilidad que está destinada a formatear el menú de temas de WordPress con la sintaxis correcta y las clases CSS para utilizar la navegación desplegable Bootstrap. No incluye los archivos Bootstrap JS y CSS necesarios; deberá incluirlos manualmente.

Cumplimiento del tema de WordPress.org

Este andador cumple totalmente con todas las pautas de revisión de temas para el envío de temas de wordpress.org. No requiere ninguna modificación para ser compatible, pero opcionalmente puedes reemplazar el dominio de texto wp-bootstrap-navwalker (que aparece dos veces en la función fallback ) con el dominio de texto de tu tema.

Notas de actualización

Entre la versión 3 y la versión 4 del andador ha habido cambios significativos en el código base. La versión 4 del andador está diseñada para funcionar con Bootstrap 4 y no se ha probado su compatibilidad con Bootstrap 3. Aquí se mantiene una rama separada para Bootstrap 3: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/árbol/v3-branch

Aquí hay una lista de los cambios más notables:

El nombre del archivo se ha cambiado y se le ha precedido class- para adaptarse mejor a las convenciones de nomenclatura de los estándares de codificación PHP.
- Nuevo nombre: class-wp-bootstrap-navwalker.php
- Nombre antiguo: wp-bootstrap-navwalker.php
El manejo del modificador de íconos y enlaces ahora se realiza a través de la entrada del elemento del menú CSS Classes en lugar de la entrada Title .
Los elementos de solo íconos son posibles usando clases de íconos en combinación con el nombre de clase sr-only .

Instalación

Coloque class-wp-bootstrap-navwalker.php en la carpeta de su tema de WordPress /wp-content/themes/your-theme/

Abra el archivo funciones.php de su tema de WordPress - /wp-content/themes/your-theme/functions.php - y agregue el siguiente código:

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

Si encuentra errores con el código anterior, utilice una verificación como esta para devolver errores limpios que ayuden a diagnosticar el problema.

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

También necesitarás declarar un nuevo menú en tu archivo functions.php si aún no existe uno.

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

Uso

Agregue o actualice cualquier función wp_nav_menu() en su tema (que a menudo se encuentra en header.php ) para usar el nuevo andador agregando un elemento 'walker' a la matriz de argumentos wp_nav_menu.

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with 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 (),
) );

Su menú ahora tendrá el formato con la sintaxis y las clases correctas para implementar la navegación desplegable Bootstrap.

Normalmente, el menú está empaquetado con marcas adicionales; aquí se muestra un ejemplo de un menú fixed-top que se contrae para una navegación receptiva en el punto de interrupción md.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu ( array (
            ' 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 (),
        ) );
        ?>
    </div>
</nav>

Para cambiar el estilo de su menú, agregue los nombres de las clases de navegación Bootstrap a la declaración menu_class .

Revise las opciones en los documentos de Bootstrap para obtener más información sobre las clases de navegación.

Mostrar el menú

Para mostrar el menú, debe asociar su menú con la ubicación de su tema. Puede hacer esto seleccionando la ubicación de su tema en la lista Ubicaciones de temas mientras edita un menú en el administrador de menús de WordPress.

Hacer de este andador el andador predeterminado para los menús de navegación

Ha habido cierto interés en hacer de este andador el andador predeterminado para todos los menús. Esto podría resultar en algunas situaciones inesperadas, pero se puede lograr agregando esta función a su archivo funciones.php.

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

Es posible que simplemente actualizar el andador no sea suficiente para que los menús funcionen correctamente; es posible que necesite agregar contenedores o clases adicionales, también puede hacerlo a través de la función anterior.

Uso con Bootstrap 5

Bootstrap 5 utiliza atributos de datos con espacios de nombres. Todos los atributos data ahora incluyen bs como infijo. Los nuevos atributos funcionan igual que los antiguos. Aquí está el botón de alternancia de menú del ejemplo anterior con los atributos de datos renombrados.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

El caminante también agrega un atributo de datos para alternar menús desplegables a través del método start_el() . Pega esto en tu funciones.php para que el caminante use el atributo de datos infijos.

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

Almacenamiento en caché del menú

En algunos sitios, generar un menú grande que rara vez cambia en cada solicitud de página es una sobrecarga que es posible que desee evitar. En esos casos, puedo sugerirle que considere almacenar los resultados del menú de forma transitoria.

El mayor inconveniente de almacenar en caché los menús de navegación con este método es que no puede aplicar fácilmente el .current-menu-item o la clase .active al elemento actualmente activo, ya que WP decide qué está actualmente activo al cargar la página, y dado que el menú está almacenado en caché sólo conoce la página activa en la que se almacenó en caché originalmente.

Puede decidir usted mismo si quiere soportar esos inconvenientes para eliminar el tiempo de generación del menú en la mayoría de las cargas de páginas. Puede seguir este artículo de Dave Clements para ver cómo almacenamos en caché los menús de navegación generados por este andador: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

Asegúrese de establecer el argumento echo en FALSO en the wp_nav_menu() al hacer esto para que los resultados puedan almacenarse en lugar de reflejarse en la página.

Ver también:

https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

Extras

Este script incluía la capacidad de usar modificaciones de enlaces de navegación Bootstrap en sus menús a través de la interfaz de usuario del menú de WordPress. Se admiten enlaces deshabilitados, encabezados desplegables y divisores desplegables. Además, la compatibilidad con iconos está integrada para Glyphicons y Font Awesome (nota: deberá incluir las hojas de estilo o los recursos de los iconos por separado).

Iconos

Para agregar un ícono a su enlace, simplemente ingrese los nombres de clase Glyphicons o Font Awesome en el campo Clases CSS del enlace en la interfaz de usuario del menú y la clase walker hará el resto. Es decir, glyphicons glyphicons-bullhorn o fa fa-arrow-left o fas fa-arrow-left .

Artículos solo con íconos

Para hacer que un elemento aparezca con el ícono, solo aplique la clase de lector de pantalla de arranque sr-only al elemento junto con los nombres de clase de los íconos. Esto ocultará sólo el texto que aparecería como texto del enlace.

Enlaces deshabilitados

Para configurar un enlace deshabilitado, simplemente agregue disabled al campo Clases CSS en la interfaz de usuario del menú y la clase Walker hará el resto. Nota: Además de agregar la clase .disabled, esto también cambiará el enlace href a # para que no sea un enlace que se pueda seguir.

Encabezados desplegables, divisores desplegables y texto de elemento desplegable

Se pueden agregar encabezados, divisores y elementos de solo texto dentro de los menús desplegables agregando un enlace personalizado y agregando dropdown-header , dropdown-divider o dropdown-item-text en la entrada de Clases CSS . Nota: Esto eliminará el href del elemento y lo cambiará a <span> para encabezados o <div> para divisores.

Falta el acceso directo de edición en la vista previa del personalizador

Según la documentación de wp_nav_menu() se debe proporcionar una instancia de la clase de caminante personalizado para poder aplicar el caminante personalizado al menú. Como la instancia no es serializable en JSON, esto hará que el acceso directo de edición del menú no aparezca en la vista previa del Personalizador. Para solucionar este problema, haga lo siguiente:

Proporcione la cadena del nombre de la clase en lugar de la instancia de la clase como valor para la clave 'walker' en la matriz de argumentos de wp_nav_menu.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with 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(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

Vuelva a agregar la instancia de clase agregando este filtro a su functions.php

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );