Ajouter des onglets sur
la page d’administration
de votre plugin
Développement Plugins Worpdress
Développement Plugins Worpdress
Lors de la création de pages d’administration pour des plugins ou des thèmes, il est souvent nécessaire de faire tenir beaucoup d’informations dans un espace réduit. WordPress mets à notre disposition un certain nombre d’éléments d’interfaces pour nous aider à alléger l’interface utilisateur et regrouper les informations.
Nous allons voir aujourd’hui comment ajouter des onglets sur une page d’administration
Création de la structure html
Nous allons créer la div principal qui servira de container, il faut lui affecter la class « wrap »
<div class='wrap'> <h2>Bienvenue dans les paramètres du plugin</h2> </div>
Dans cette div principal, nous allons pour l’exemple ajouter un titre et 2 onglets
Pour être reconnu par wordpress, les onglets sont à placés dans un élément avec la class « nav-tab-wrapper »
Les onglets sont à rerésenter sous forme de liens dans lesquels on indiquera un paramètre qui nous permettra de déterminer l’onglet qui ser à afficher. Ici nous allons indiqué le paramètre &tab=tab1 / &tab=tab2
Ainsi, lorsque l’on cliquera sur le lien, il nous suffira de récupérer ce paramètre « tab » pour savoir quel onglet affiché
<div class='wrap'> <h2>Bienvenue dans les paramètres du plugin</h2> <br> <h2 class="nav-tab-wrapper"> <a href="?page=url-plugin&tab=tab1" class="nav-tab nav-tab-active">Tab 1</a> <a href="?page=url-plugin&tab=tab2" class="nav-tab">Tab 2</a> </h2> </div>
Pour récupérer ce paramètre tab nous allons utilisé le code PHP suivant :
Nous affectons par sécurité une valeur par défaut pour éviter tout problème dans le cas ou ce paramètre viendrait une fois à manquer
<?php $default_tab = 'tab1'; $tab = isset($_GET['tab']) ? $_GET['tab'] : $default_tab; ?>
Pour terminer, nous ajouter le code suivant qui permettra de gérer l’onglet qui sera affiché.
Ainsi si la paramètre indiqué dans l’url est
« tab1 » => le code suivant affichera l’onglet n°1
« tab2 » => le code suivant affichera l’onglet n°2
<div class="tab-content"> <?php switch($tab) : case 'tab1': echo 'je suis tab 1'; break; case 'tab2': echo 'Je suis tab 2'; break; endswitch; ?> </div>
Le code complet à mettre dans la page sera
<div class='wrap'> <?php $default_tab = 'tab1'; $tab = isset($_GET['tab']) ? $_GET['tab'] : $default_tab; ?> <h2>Bienvenue dans les paramètres du plugin</h2> <br> <h2 class="nav-tab-wrapper"> <a href="?page=url-plugin&tab=tab1" class="nav-tab nav-tab-active">Tab 1</a> <a href="?page=url-plugin&tab=tab2" class="nav-tab">Tab 2</a> </h2> <div class="tab-content"> <?php switch($tab) : case 'tab1': echo 'je suis tab 1'; break; case 'tab2': echo 'Je suis tab 2'; break; endswitch; ?> </div> </div>