Navigation par onglets (tabs) – Plugin wordPress

Oct 27, 2017 | php, wordPress | 0 commentaire

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).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
function theplugin_options_page() { ?>
 
   <div class="wrap">
 
      <h1><?php _e( 'The plugin', 'textdomain' ); ?></h1>
      <h2 class="nav-tab-wrapper">
         <a href="#first-options" class="nav-tab"><?php _e( 'First Options', 'textdomain' ); ?></a>
         <a href="#second-options" class="nav-tab"><?php _e( 'Second Options', 'textdomain' ); ?></a>
         <a href="#informations" class="nav-tab"><?php _e( 'Informations', 'textdomain' ); ?></a>
      </h2>
      
      <form action="options.php" method="post">
          
         <div id="first-options" class="tabs">
            <?php do_settings_fields( __FILE__, 'first-options' ); ?>
         </div>
         <div id="second-options" class="tabs">
            <?php do_settings_fields( __FILE__, 'second-options' ); ?>
         </div>
         <div id="informations" class="tabs">
 
            … display informations …
 
         </div>
 
         <?php submit_button(); ?>
 
      </form>
  
   </div>
 
<?php } ?>

Il faut ensuite animer cela avec un script :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Options page tabs
jQuery( document ).ready( function( $ ) {
 
   // Tabs
   var $navs = $( '.nav-tab' ),
       $tabs = $( '.tabs' ),
toogle = function( hash ) {
          location.hash = hash || '';
          var hash = hash || $( 'a', $navs ).context[0].hash;
          $navs.removeClass( 'nav-tab-active' );
          var $a = hash ? $( 'a[href="' + hash + '"]' ) : $( 'a:first-child', $navs );
          $a.addClass( 'nav-tab-active' );
          $tabs.hide();
          $( hash ).show();
       };
  
   if( $navs.length ) {
      toogle( window.location.hash );
   }
 
   $navs.on( 'click', function( e ) {
      e.preventDefault();
      var hash = e.target.hash;
      toogle( hash );
      history.replaceState( {page: hash}, 'title ' + hash, hash );
   });
 
});

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 :

1
2
3
4
5
6
7
8
9
10
11
12
define( 'THEPLUGIN_URL', plugin_dir_url( __FILE__ ) );
 
// Backend Style/Script
add_action( 'admin_enqueue_scripts', 'galettewp_admin_style' );
function galettewp_admin_style() {
   wp_enqueue_style( 'galettewp-backend-css', THEPLUGIN_URL . 'css/backend.css', array(), null );
   $page_id = get_current_screen()->id;
   if( $page_id == 'toplevel_page_galettewp' ) {
      wp_enqueue_style( 'galettewp-css', THEPLUGIN_URL . 'css/galettewp.css', array(), null );
      wp_enqueue_script( 'galettewp-js', THEPLUGIN_URL . 'js/galettewp.js', array( 'jquery' ), null, true );
   }
}

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

Soumettre un commentaire

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