Navigation par onglets (tabs) – Plugin wordPress

Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète. Il a été mis à jour il y a moins de 2 mois.

Navigation par onglets (tabs) | wordPress
Navigation par onglets (tabs) dans une page d’options de wordPress

L’utilisation d’onglets dans une interface utilisateur peut aider le développeur à organiser le contenu de façon plus claire en distinguant différentes fonctionnalités d’un plugin ou d’un thème WordPress. Il est très fréquent de devoir gérer de nombreuses options sur la page des réglages.

Il faut pour cela définir :

  • des liens ayant la classe nav-tab (les onglets),
  • des div ayant la classe tabs (à afficher).

Il faut ensuite animer cela avec un script :

La navigation se fait alors sans recharger la page, la barre d’adresse contient l’id de la div à afficher et le bouton submit_button() soumet toutes les options de tous les onglets.

Que l’on aura intégrer à la page d’options :

Et hop, une jolie page d’options avec plein de réglages et une navigation optimisée pour l’utilisateur.

Mise à jour

Depuis WP 5.5, cela ne fonctionne plus vraiment bien, voir les commentaires ci-après. J’ai donc changé les liens sur les onglets. $menu_slug  est le quatrième paramètre de la fonction add_menu_page() , l' url  de la page d’options sera de la forme : http(s)://mydomain.tld/wp-admin/admin.php?page=$menu_slug .

On retrouve cette  url avec la fonction menu_page_url( $menu_slug, false ) . L’argument false permet de ne pas imprimer le résultat de la fonction.

On écrit donc les onglets de la façon suivante, en ajoutant le paramètre tab .

En ayant défini un tableau $tabs pour les différents onglets :

On définit ensuite le contenu des onglets :

Les fonctions options1() et options2() écrivent le code HTML de chaque onglet.

Javascript

Ensuite, sur la page d’options, on change l' url dans la barre d’adresse du navigateur avec history.replaceState() pour ajouter le paramètre &tab=  avec l' id de l’onglet. Le javascript devient donc :

Je laisse  window.onpopstate si l’on veut entrer la visite dans les différents onglets à l’historique du navigateur, cela se fait avec history.pushState(), que l’on doit mettre à la place de history.replaceState(). Ainsi, en cliquant sur la flèche de page précédente du navigateur, on retrouvera les onglets visités..

Version en pure javascript

Version minifiée

Une version minifiée, en ayant changé le nom de la fonction toggle en switch_toggle, sans écouteur DOMContentLoaded :

Et hop, il y a certainement des améliorations à apporter, mais cela semble marcher assez bien.

2 Commentaires

  1. la ligne
     var hash = hash || $( ‘a’, $navs ).context[0].hash;
    ne semble plus marcher avec WordPress 5.5 , on peut la remplacer par

    Répondre
    • Exact, et le lien avec l’id de l’onglet non plus. Je vais mettre à jour en gardant le chargement de tous les onglets (plus rapide ensuite pour la navigation), mais en ajoutant un paramètre page pour gérer les différents onglets. Il faudra aussi voir la sauvegarde des options, si l’on fait cela en Ajax, ou en rechargeant la page.
      Merci pour votre suggestion.

      Répondre

Soumettre un commentaire

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

Ce site utilise Akismet pour réduire les indésirables.