Ajouter des onglets dans l’interface admin de votre plugin

Ajouter des onglets sur
la page d’administration
de votre plugin

Développement Plugins Worpdress

Dev Plugins Wordpress - Ajout onglet sur page admin de notre plugin

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>

Articles Connexes

PSF Informatique - Découverte des Web Services- L'interoperabilite - Didier Miclo

Web Services – L’intéropérabilité

27 novembre 2023

PSF Informatique - Présentation de l'architecture SOA - Didier Miclo

Web Services – L’architecture SOA

22 novembre 2023

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Necessary

Toujours activé

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie	Durée	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Performance

Analytics

Others

Ajouter des onglets sur
la page d’administration
de votre plugin

Articles Connexes

Web Services – L’intéropérabilité

Web Services – L’architecture SOA

Liens

LocaPlanning

Plan du site

Suivez-nous sur Facebook

Ajouter des onglets dans l’interface admin de votre plugin

Ajouter des onglets sur la page d’administration de votre plugin

Articles Connexes

Liens

LocaPlanning

Plan du site

Suivez-nous sur Facebook

Ajouter des onglets sur
la page d’administration
de votre plugin