Créez une page d’administration
Maintenant que nous avons une base pour créer notre plugin, nous allons y ajouter une fonctionnalité : une page d'administration.
Pour une extension WordPress, une page d’administration offre plusieurs avantages, et voici quelques-uns de ses principaux intérêts :
Contrôle et personnalisation : une page d'administration permet aux utilisateurs d'effectuer diverses tâches de contrôle et de personnalisation pour l'extension. Les utilisateurs peuvent configurer les paramètres de l'extension, gérer les options d'affichage et de fonctionnement de l'extension, et personnaliser les fonctionnalités pour répondre à leurs besoins spécifiques.
Gestion des données : les pages d'administration permettent aux utilisateurs de gérer les données stockées par l'extension. Ils peuvent ajouter, modifier ou supprimer des données selon les besoins.
Surveillance des performances : les pages d'administration peuvent également offrir des informations sur les performances de l'extension, y compris les statistiques sur les téléchargements, les utilisateurs et les erreurs.
Assistance utilisateur : les pages d'administration peuvent offrir un support et une assistance aux utilisateurs de l'extension. Les utilisateurs peuvent accéder aux guides d'utilisation, aux FAQ, aux forums de support et à d'autres ressources pour résoudre les problèmes ou les difficultés rencontrés.
En somme, la page d'administration est une fonctionnalité très utile pour les extensions WordPress, car elle offre aux utilisateurs un moyen facile de gérer et de personnaliser leur expérience avec l'extension.
Pour ajouter une page d'administration à une extension personnalisée WordPress, nous allons utiliser la fonction add_submenu_page() . Cette fonction vous permet d'ajouter une page dans le menu d'administration de WordPress en spécifiant plusieurs paramètres. Voici un exemple de code pour ajouter une page d'administration à votre extension personnalisée :
function administration_add_admin_page() {
add_submenu_page(
'options-general.php',
'Mes options',
'Mes réglages',
'manage_options',
'administration',
'administration_page'
);
}
function administration_page() {
}
add_action('admin_menu', 'administration_add_admin_page');Expliquons un peu ce que fait ce code ! La fonction add_action() est utilisée pour accrocher la fonction administration_add_admin_page au hook admin_menu . Et celle-ci permet la création d’une page d’administration grâce à add_submenu_page() :
Le premier argument est le slug du menu parent sous lequel vous souhaitez ajouter votre page. Dans notre cas, 'options-general.php' pour le menu "Réglages". Ce qui veut dire que notre nouvelle page apparaîtra sous le menu “Réglages” dans l'administration WordPress.
Le second argument est le titre de la page d'administration qui apparaît dans le titre de votre onglet dans votre navigateur web.
Le troisième argument est le titre du menu ; celui-ci apparaît dans le menu d'administration.
manage_optionsest un niveau de permission appelé également “capacité” sous WordPress. Ce niveau de permission est couramment utilisé pour les administrateurs, mais vous pouvez remplacermanage_optionpar une autre capacité appropriée si nécessaire.
En cinquième argument, indiquez le slug de la page ; c’est simplement l’URL de votre page dans l’administration. Il faut indiquer une URL unique.
Enfin, le dernier argument est le nom d’une fonction à appeler permettant d’afficher le contenu de votre page d'administration.
Ajoutez du code dans la page d'administration
La fonction administration_page() est initialisée mais ne contient pas encore de code pour le moment. Nous allons lui fournir cela par la suite !
Si vous accédez à votre administration WordPress, vous verrez sous le menu “Réglages” un sous-menu nommé “Mes réglages” apparaître. Si vous cliquez dessus, vous obtiendrez votre page vierge actuellement.
Nous allons ajouter du code dans la fonction administration_page() . C’est ici que vous pouvez ajouter le code HTML, les formulaires et toute autre logique spécifique à votre page d'administration. Dans notre cas, nous allons ajouter un formulaire pour sélectionner et enregistrer une couleur de fond pour le site Cookinfamily :
function administration_page() {
$couleurs_disponibles = array(
'ffffff' => 'Blanc',
'000000' => 'Noir',
'ff0000' => 'Rouge',
'00ff00' => 'Vert',
'0000ff' => 'Bleu'
);
if (isset($_POST['submit'])) {
update_option('couleur_fond_site', $_POST['fond_couleur']);
}
$couleur_actuelle = get_option('couleur_fond_site');
?>
<div class="wrap">
<h1>Mes options</h1>
<form method="post" action="">
<label for="fond_couleur">Choisissez une couleur : </label>
<select id="fond_couleur" name="fond_couleur">
<?php foreach ($couleurs_disponibles as $valeur => $libelle) { ?>
<option value="<?php echo $valeur; ?>" <?php selected($couleur_actuelle, $valeur); ?>><?php echo $libelle; ?></option>
<?php } ?>
</select>
<input type="submit" name="submit" class="button button-primary" value="Enregistrer" />
</form>
</div>
<?php
}Détaillons un peu tout cela :
dans un premier temps, on crée un array contenant nos différentes couleurs. Il contiendra les valeurs et les libellés des différentes options de couleurs ;
ensuite nous allons créer une condition pour détecter si l’on a cliqué sur le bouton “Enregistrer” grâce à
$_POST['submit']. Si c’est le cas, on met à jour notre option avec la fonctionupdate_option;nous récupérons la valeur actuelle du champ avec un
get_option;puis nous créons notre formulaire HTML avec notre champ
select.
La partie qui nous intéresse ici concerne le champ select , qui est généré dynamiquement à l'aide d'une boucle foreach sur le tableau de nos couleurs.
Les options sont générées de manière dynamique et détectent également la valeur actuellement enregistrée avec la fonction selected() . Ceci afin d’afficher la couleur sélectionnée si l’on a déjà enregistré une donnée : selected() prend 2 arguments et les compare ; s'ils sont identiques, la fonction ajoute l’attribut selected de manière automatique.
Lorsque le formulaire est soumis, la validation se fait dans cette même fonction, grâce à notre condition sur $_POST['submit'] . La nouvelle couleur est récupérée puis mise à jour dans les options.
Rendez la page fonctionnelle
Maintenant, il nous reste une étape : comment utiliser cette couleur pour nos visiteurs ? Grâce à une nouvelle action sur un hook ; toujours dans le même fichier, ajoutez le code suivant :
function ajouter_couleur_fond_site() {
$couleur_fond = get_option('couleur_fond_site');
?>
<style>
body {
background-color: #<?php echo esc_attr($couleur_fond); ?>;
}
</style>
<?php
}
add_action('wp_head', 'ajouter_couleur_fond_site');Tout d’abord, nous utilisons le hook wp_head avec la fonction add_action() pour exécuter notre fonction ajouter_couleur_fond_site() et injecter le code CSS personnalisé.
Dans notre fonction ajouter_couleur_fond_site() , nous pouvons ajouter notre code personnalisé. Nous utilisons la fonction get_option() pour récupérer la couleur de fond enregistrée dans notre page d’administration de notre plugin WordPress.
On ouvre une balise style afin d’y placer notre code CSS avec la fameuse couleur que l’on a récupérée grâce au get_option() . Ainsi, à chaque fois que la couleur de fond est mise à jour via la page d'administration que vous avez créée précédemment, le code CSS injecté via le hook wp_head modifiera la couleur de fond du site en conséquence.
Faisons le test : accédez à votre nouvelle page d’administration et sélectionnez une couleur, puis cliquez sur “Enregistrer”. Si vous obtenez un résultat comme ci-dessous, votre plugin fonctionne :
En résumé
Pour ajouter une page d'administration à une extension personnalisée WordPress, nous utilisons la fonction
add_submenu_page().Pour gérer les données via des formulaires, on utilise l’API options avec les fonctions
get_option()etupdate_option().Une page d'administration est une fonctionnalité très utile pour les extensions WordPress, car elle offre aux utilisateurs un moyen facile de gérer et de personnaliser leur expérience avec l'extension.
