Catégories
DĂ©veloppement Technique WordPress

🛠Supprimer le menu « More » par dĂ©faut de Twenty Nineteen

Il y a quelques mois j’ai lancĂ© une petite refonte de mon site perso. Je suis alors passĂ© du thĂšme Maker au thĂšme Twenty Nineteen. Bien Ă©videmment je l’ai pas mal relookĂ© pour qu’il me corresponde mieux, en crĂ©ant un thĂšme enfant.

Twenty Nineteen est un super thĂšme natif, et je suis d’ailleurs trĂšs content d’avoir contribuĂ© Ă  son dĂ©veloppement, mais il y a quand mĂȘme un truc qui me chiffonnait avec ce thĂšme, c’est le menu « More Â».

Par dĂ©faut, Twenty Nineteen filtre le fonctionnement natif du menu de navigation principale afin de le couper en deux s’il contient trop d’Ă©lĂ©ments. Un bouton avec trois petits points apparait alors afin de fournir le reste des Ă©lĂ©ments du menu. VoilĂ  Ă  quoi ressemble ce bouton portant la classe main-menu-more:

Bon bien sĂ»r lĂ  j’ai pris un exemple avec des dizaines d’items dans mon menu, donc forcĂ©ment, c’est pas plus mal d’avoir ce bouton « More Â» 😂

Mais sur mobile, avec simplement trois items de menu (comme sur mon site perso), c’est dĂ©jĂ  plus embĂȘtant :

👉Que faire si l’on souhaite avoir un menu classique sur Twenty Nineteen ?

Ce n’est pas hyper compliquĂ© 😌

Il faut bien entendu commencer par crĂ©er un thĂšme enfant, puis suffit de supprimer les filtres utilisĂ©s par Twenty Nineteen pour faire fonctionner ce systĂšme de menu « More ». Dans l’exemple ci-dessous, je crĂ©e dans le fichier functions.php de mon thĂšme enfant une fonction afin de supprimer ces filtres :

function jba_remove_twentynineteen_menu_filters() {
	remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav' );
	remove_filter( 'wp_nav_menu_objects', 'twentynineteen_add_mobile_parent_nav_menu_items' );
	remove_filter( 'walker_nav_menu_start_el', 'twentynineteen_add_dropdown_icons' );
	remove_filter( 'nav_menu_link_attributes', 'twentynineteen_nav_menu_link_attributes' );
}
add_action( 'init', 'jba_remove_twentynineteen_menu_filters' );

Une fois ces filtres supprimĂ©s, des erreurs JavaScript risquent encore de s’afficher dans la console de votre navigateur.

Pour corriger cela, il suffit de supprimer (pour ĂȘtre plus prĂ©cis, de dequeue) les scripts JS permettant de faire fonctionner le menu « More Â» :

function jba_dequeue_twentynineteen_menu_scripts() {
	wp_dequeue_script( 'twentynineteen-priority-menu' );
	wp_dequeue_script( 'twentynineteen-touch-navigation' );
}
add_action( 'wp_print_scripts', 'jba_dequeue_twentynineteen_menu_scripts', 100 );

Et voilà 🎉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *