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 |
// 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(); }; 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.
