Rendre les liens de menu parents cliquables pour Bootstrap Navwalker sur WordPress

Rendre les liens de menu parents cliquables pour Bootstrap Navwalker sur WordPress
WordPress Lecture 3 minutes • 5 avril 2020

Bootstrap Navwalker est depuis des années un grand classique pour les développeurs de thème WordPress.
Pour un site qui propose un menu avec plusieurs niveaux, menu et sous-menu, il présente néanmoins un défaut bloquant : les liens de premier niveau, aussi appelés éléments parents, ne sont pas cliquables.
Voici comment résoudre ce problème.
 

Télécharger et installer Bootstrap Navwalker

Commencez par télécharger et intégrer Bootstrap Navwalker dans votre thème WordPress en suivant les explications sur le GitHub de l'auteur : https://github.com/twittem/wp-bootstrap-navwalker
 

Rendre cliquable le lien de menu parent dépliable

Ajoutez la bonne URL au lien en changeant la ligne 188 du fichier wp-bootstrap-navwalker.php en modifiant :
[pastacode lang="php" manual="%24atts%5B'href'%5D%20%3D%20'%23'%3B" message="" highlight="" provider="manual"/]
et remplacez pour obtenir :
[pastacode lang="php" manual="%24atts%5B'href'%5D%20%3D%20!%20empty(%20%24item-%3Eurl%20)%20%3F%20%24item-%3Eurl%20%3A%20''%3B" message="" highlight="" provider="manual"/]
 
modifiez également la ligne 189 :
[pastacode lang="php" manual="%24atts%5B'data-toggle'%5D%20%3D%20'dropdown'%3B" message="" highlight="" provider="manual"/]
en remplaçant par :
[pastacode lang="php" manual="%24atts%5B'data-hover'%5D%20%3D%20'dropdown'%3B" message="" highlight="" provider="manual"/]
 
Ajoutez ensuite ceci à votre fichier CSS afin d'afficher le sous-menu au survol de l'élément parent uniquement sur les écrans supérieurs à égaux à 992px (ordinateurs) :
[pastacode lang="css" manual="%40media(min-width%3A%20992px)%7B%0A%20%20%20%20%20.dropdown%3Ahover%20.dropdown-menu%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%7D%0A%7D" message="" highlight="" provider="manual"/]
 
Ce code en jQuery permet de rendre les liens parents non cliquables uniquement sur les appareils mobiles : tablettes et smartphones. Ajoutez le à votre fichier JavaScript.
[pastacode lang="javascript" manual="jQuery(function(%24)%20%7B%0A%20%20%2F%2F%20Bootstrap%20menu%20magic%0A%20%20%24(window).resize(function()%20%7B%0A%20%20%20%20if%20(%24(window).width()%20%3C%20992)%20%7B%0A%20%20%20%20%20%20%24(%22.dropdown-toggle%22).attr('data-toggle'%2C%20'dropdown')%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%24(%22.dropdown-toggle%22).removeAttr('data-toggle%20dropdown')%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%7D)%3B" message="Rendre les liens parents non cliquables sur tablettes et smartphone (menu mobile)" highlight="" provider="manual"/]
 
Choisissez plutôt ce code jQuery si vous souhaitez tout de même conserver les liens parents cliquables sur les appareils mobiles : tablettes et smartphone.
[pastacode lang="javascript" manual="jQuery(function(%24)%20%7B%0A%20%20if(%24(window).width()%20%3C%20992)%20%7B%0A%20%20%20%20%20%24(%22.dropdown-toggle%22).attr('data-toggle'%2C%20'dropdown')%3B%20%20%20%24('.dropdown').on('show.bs.dropdown'%2C%20function%20()%20%7B%0A%20%20%20%24(this).siblings('.open').removeClass('open').find('a.dropdown-toggle').attr('data-toggle'%2C%20'dropdown')%3B%0A%20%20%20%24(this).find('a.dropdown-toggle').removeAttr('data-toggle')%3B%0A%20%20%20%20%20%7D)%3B%0A%20%20%7D%20%0A%7D)%3B" message="Conserver les liens de menu parents cliquables et utilisables en menu mobile : tablettes et smartphones" highlight="" provider="manual"/]
 
Et c'est gagné !


Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗