wp bootstrap navwalker
v4.3.0: Version bump to 4.3.0
Ce code dans la branche principale du repo subit un grand remaniement pour le mettre en conformité avec les normes récentes et pour fusionner et tester l'arriéré de PR que j'ai laissé trop longtemps. Veuillez utiliser la balise v4.3.0 pour la version stable pendant que ce processus se déroule. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
Une classe WordPress Nav Walker personnalisée pour implémenter pleinement le style de navigation Bootstrap 4 dans un thème personnalisé à l'aide du gestionnaire de menus intégré à WordPress.
Il s'agit d'une classe utilitaire destinée à formater votre menu de thème WordPress avec la syntaxe et les classes CSS correctes pour utiliser la navigation déroulante Bootstrap. Il n'inclut pas les fichiers Bootstrap JS et CSS requis - vous devrez les inclure manuellement.
Ce marcheur est entièrement conforme à toutes les directives d'examen des thèmes pour la soumission de thèmes wordpress.org. Il ne nécessite aucune modification pour être conforme mais vous pouvez éventuellement remplacer le domaine texte wp-bootstrap-navwalker (qui apparaît deux fois dans la fonction fallback ) par le domaine texte de votre thème.
Entre la version 3 et la version 4 du marcheur, des modifications importantes ont été apportées à la base de code. La version 4 du marcheur est conçue pour fonctionner avec Bootstrap 4 et n'a pas été testée pour sa compatibilité descendante avec Bootstrap 3. Une branche distincte pour Bootstrap 3 est maintenue ici : https://github.com/wp-bootstrap/wp-bootstrap- navwalker/arbre/branche v3
Voici une liste des changements les plus notables :
class- pour mieux correspondre aux conventions de dénomination des normes de codage PHP.class-wp-bootstrap-navwalker.phpwp-bootstrap-navwalker.phpCSS Classes au lieu de l'entrée Title .sr-only . Placez class-wp-bootstrap-navwalker.php dans votre dossier de thème WordPress /wp-content/themes/your-theme/
Ouvrez le fichier function.php de votre thème WordPress – /wp-content/themes/your-theme/functions.php – et ajoutez le code suivant :
/**
* 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 vous rencontrez des erreurs avec le code ci-dessus, utilisez une vérification comme celle-ci pour renvoyer des erreurs propres afin de vous aider à diagnostiquer le problème.
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 ' ;
} Vous devrez également déclarer un nouveau menu dans votre fichier functions.php s'il n'en existe pas déjà un.
register_nav_menus ( array (
' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) ); Ajoutez ou mettez à jour toutes les fonctions wp_nav_menu() dans votre thème (souvent trouvées dans header.php ) pour utiliser le nouveau marcheur en ajoutant un élément 'walker' au tableau d'arguments 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 (),
) );Votre menu sera désormais formaté avec la syntaxe et les classes correctes pour implémenter la navigation déroulante Bootstrap.
Généralement, le menu est entouré de balises supplémentaires. Voici un exemple de menu fixed-top qui se réduit pour une navigation réactive au point d'arrêt 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> Pour modifier le style de votre menu, ajoutez les noms des classes de navigation Bootstrap à la déclaration menu_class .
Consultez les options dans la documentation Bootstrap pour plus d'informations sur les classes de navigation.
Pour afficher le menu vous devez associer votre menu à l'emplacement de votre thème. Vous pouvez le faire en sélectionnant l'emplacement de votre thème dans la liste Emplacements des thèmes tout en modifiant un menu dans le gestionnaire de menus WordPress.
Il y a eu un certain intérêt à faire de ce marcheur le marcheur par défaut pour tous les menus. Cela pourrait entraîner des situations inattendues, mais cela peut être réalisé en ajoutant cette fonction à votre fichier function.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 ' );La simple mise à jour du marcheur peut ne pas suffire pour que les menus fonctionnent correctement, vous devrez peut-être ajouter des wrappers ou des classes supplémentaires, vous pouvez également le faire via la fonction ci-dessus.
Bootstrap 5 utilise des attributs de données avec espace de noms. Tous les attributs data incluent désormais bs comme infixe. Les nouveaux attributs fonctionnent comme les anciens. Voici le bouton bascule de menu de l'exemple ci-dessus avec les attributs de données renommés.
<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> Le marcheur ajoute également un attribut de données pour les bascules déroulantes via la méthode start_el() . Collez-le dans votre fichier function.php pour que le marcheur utilise l'attribut de données infixé.
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 ;
}Sur certains sites, générer un grand menu qui change rarement à chaque demande de page constitue une surcharge que vous voudrez peut-être éviter. Dans ces cas, je peux vous suggérer d'envisager de stocker les résultats du menu de manière transitoire.
Le plus gros inconvénient de la mise en cache des menus de navigation avec cette méthode est qu'elle ne peut pas facilement appliquer la classe .current-menu-item ou la classe .active à l'élément actuellement actif car WP décide de ce qui est actuellement actif au chargement de la page - et puisque le menu est mis en cache. il ne connaît que la page active sur laquelle il a été initialement mis en cache.
Vous pouvez décider vous-même si vous souhaitez supporter ces inconvénients au profit de la suppression du temps de génération de menu sur la plupart des chargements de pages. Vous pouvez suivre cet article de Dave Clements pour voir comment nous avons mis en cache les menus de navigation générés par ce marcheur : https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
Assurez-vous de définir l'argument echo sur FALSE dans the wp_nav_menu() lors de cette opération afin que les résultats puissent être stockés au lieu d'être renvoyés sur la page.
Voir aussi :
Ce script incluait la possibilité d'utiliser les mods de lien de navigation Bootstrap dans vos menus via l'interface utilisateur du menu WordPress. Les liens désactivés, les en-têtes déroulants et les séparateurs déroulants sont pris en charge. De plus, la prise en charge des icônes est intégrée pour Glyphicons et Font Awesome (remarque : vous devrez inclure les feuilles de style ou les ressources des icônes séparément).
Pour ajouter une icône à votre lien, entrez simplement les noms de classe Glyphicons ou Font Awesome dans le champ Classes CSS des liens dans l'interface utilisateur du menu et la classe Walker fera le reste. IE glyphicons glyphicons-bullhorn ou fa fa-arrow-left ou fas fa-arrow-left .
Pour faire apparaître un élément avec l'icône, appliquez uniquement la classe de lecteur d'écran d'amorçage sr-only à l'élément à côté des noms de classe d'icône. Cela masquera alors uniquement le texte qui apparaîtrait comme texte du lien.
Pour définir un lien désactivé, ajoutez simplement disabled au champ Classes CSS dans l'interface utilisateur du menu et la classe Walker fera le reste. Remarque : En plus d'ajouter la classe .disabled, cela modifiera également le lien href en # afin qu'il ne s'agisse pas d'un lien pouvant être suivi.
Les en-têtes, les séparateurs et les éléments de texte uniquement peuvent être ajoutés dans les listes déroulantes en ajoutant un lien personnalisé et en ajoutant soit dropdown-header , dropdown-divider ou dropdown-item-text dans l'entrée CSS Classes . Remarque : Cela supprimera le href de l'élément et le remplacera soit par un <span> pour les en-têtes, soit par un <div> pour les diviseurs.
Selon la documentation de wp_nav_menu() il faut fournir une instance de la classe de marcheur personnalisée afin d'appliquer le marcheur personnalisé au menu. Comme l'instance n'est pas sérialisable en JSON, le raccourci d'édition du menu n'apparaîtra pas dans l'aperçu du personnalisateur. Pour résoudre ce problème, procédez comme suit :
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',
) );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 );Veuillez consulter le journal des modifications.
