skip to Main Content

Comment créer une page d’administration sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Dans un précédent tutoriel, nous vous avons montré comment créer un plugin WordPress. Je pense que maintenant, il est temps d’aller de l’avant et de vous permettre d’en faire plus avec WordPress.

Pour ce tutoriel, il est important de vous assurer que vous avez tout en place, afin que vous puissiez travailler avec le code source que nous vous proposerons.

Pour ce tutoriel, je suppose que :

  • Vous avez une configuration de l’environnement de développement local par rapport à votre système d’exploitation.
  • Vous avez une copie de WordPress installée et prête à être utilisée pour l’installation d’un plugin.
  • Vous êtes familier avec les pratiques de développement de plugins WordPress.
  • Vous êtes à l’aise de travailler avec PHP et HTML.

Si vous n’êtes pas familier avec la façon de mettre en place un environnement de développement local qui comprend WordPress, je vous invite à lire ceci.

Et si vous êtes relativement à l’aise avec PHP, même si elle est en train de lire la langue, alors je ferai de mon mieux pour fournir des instructions claires et des commentaires pour chaque morceau de code que nous partageons.

https://blogpascher.com/tutoriel-wordpress/comment-installer-wordpress-en-local-sur-un-pcwindows-avec-xampp

Une fois que tout cela est en place, nous serons prêts à commencer à travailler sur notre plugin.

Réglages personnalisés d’une page d’administration sur WordPress

À la fin de cette série, nous allons avoir un plugin qui répond aux exigences suivantes:

  • Ajoute un nouveau sous-menu dans un menu existant.
  • Ajoute une nouvelle page de paramètres qui correspond au nouvel élément.
  • Assainit et « sérialise » les options sur la page.
  • Valide et renvoie les valeurs qui ont été enregistrées en conséquence.

De plus, nous allons nous assurer que nous abordons cela de la manière la plus modulaire possible en utilisant les normes de codage de WordPress et les pratiques analogues à rendre la lecture, l’écriture et le maintien de notre plugin aussi facile que possible.

1 – Créer le Bootstrap du plugin

Nous entendons par bootstrap : « préparation des éléments du plugin », cela comprendra la création d’un répertoire pour abriter les fichiers du plugin, un fichier README de base, un exemplaire de la licence, un fichier d’amorçage qui sera éventuellement utilisé pour démarrer le plugin, et un répertoire qui sera utilisé pour maintenir les classes liées aux fonctionnalités d’administration.

L’ensemble des fichiers ressemble à ceci :

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

organisation-des-dossiers-du-plugin

En outre, le contenu du plugin est assez simple. Passez en revue le code suivant pour le fichier PHP « custom-admin-settings.php », je vous expliquerai ce fichier en détails plus tard.

<?php
/**
 * Fichier de démarrage
 *
 * Ceci est le fichier principal qui sera lu par WordPress.
 *
 * @link https://blogpascher.com
 * @since 1.0.0
 * @package Custom_Admin_Settings
 *
 * @wordpress-plugin
 * Plugin Name: Administration Personnalisé
 * Plugin URI: https://blogpascher.com
 * Description: Apprendre à créer un plugin WordPress.
 * Version: 1.0.0
 * Author: Votre Nom
 * Author URI: https://exemple.com
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
 die;
}
 
add_action( 'plugins_loaded', 'custom_admin_settings' );
/**
 * Démarrer le plugin.
 *
 * @since 1.0.0
 */
function custom_admin_settings() {
 
}

Notez que dans le code ci-dessus, il y a très peu de code. Au lieu de cela, il y a beaucoup de commentaires. Le principal bloc de commentaires au début du fichier définit le plugin.

La zone en dessous de la balise « @wordpress-plugin » est ce que WordPress lira pour récupérer le titre du plugin, la description et les liens relatifs dans le tableau de bord du plugin de WordPress.

Ensuite, nous empêcherons à quiconque d’accéder au fichier directement. Et, enfin, nous créons une fonction personnalisée pour être tirée avec l’événement « plugins_loaded ». Cette fonction est ce qui sera utilisée pour démarrer le plugin.

À ce stade, vous devriez être en mesure de vous connecter à WordPress, d’accéder au tableau de bord, puis de voir le plugin disponible pour l’activer. Allez-y et cliquez sur Activer.

Rien ne se passera encore, mais nous allons commencer à ajouter des fonctionnalités que nous utiliserons tout au long du tutoriel.

2 – Comment créer un sous-menu

Afin de commencer à travailler sur le plugin, nous allons d’ abord introduire un élément de sous-menu. Pour ce faire, nous aurons besoin de tirer parti de la fonction WordPress « add_options_page ». Cette fonction nécessite cinq paramètres:

  • le texte à afficher comme titre de la page d’options
  • le texte à afficher comme le texte du sous-menu pour l’élément du menu
  • les capacités nécessaires pour accéder à cette page
  • le slug qui sera utilisé pour identifier la page
  • une fonction de rappel qui sera utilisée pour charger la page.

Notez que nous allons utiliser des classes pour organiser notre fonctionnalité, beaucoup de ce que nous ferons sera fait en « orientée objet ».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Tout d’ abord, nous allons créer une classe dans le répertoire admin appelé « class-submenu.php ». Étant donné que cette classe est responsable de l’introduction d’un nouveau sous-menu, que nous avons nommé de façon descriptive.

Le contenu de la classe devrait ressembler à ceci:

<?php
/**
 * Creates the submenu item for the plugin.
 *
 * @package Custom_Admin_Settings
 */
 
/**
 * Créer un sous menu pour le menu.
 *
 * Enregistre un menu sous le menu "Outils".
 *
 * @package Custom_Admin_Settings
 */
class Submenu {
 
 /**
 * A reference the class responsible for rendering the submenu page.
 *
 * @var Submenu_Page
 * @access private
 */
 private $submenu_page;
 
 /**
 * Initializer toutes les classes.
 *
 * @param Submenu_Page $submenu_page A reference to the class that renders the
 * page for the plugin.
 */
 public function __construct( $submenu_page ) {
 $this->submenu_page = $submenu_page;
 }
 
 /**
 * Ajoute un sous menu dans le menu outils.
 */
 public function init() {
 add_action( 'admin_menu', array( $this, 'add_options_page' ) );
 }
 
 /**
 * Creates the submenu item and calls on the Submenu Page object to render
 * the actual contents of the page.
 */
 public function add_options_page() {
 
 add_options_page(
 'Page d\'administration',
 'Custom Administration Page',
 'manage_options',
 'custom-admin-page',
 array( $this->submenu_page, 'render' )
 );
 }
}

À ce stade, le plugin ne fera toujours pas grand-chose. Nous avons encore besoin de créer la classe « Submenu_Page », puis nous avons besoin d’inclure les classes dans le fichier de démarrage du plugin.

3 – Création d’une Sous-page

Commençons par la première classe « Submenu_Page ». Créer un autre fichier dans le répertoire « admin » et renommez-le « class-submenu-page.php ». Puis, dans le fichier, ajoutez le code suivant.

<?php
/**
 * Creates the submenu page for the plugin.
 *
 * @package Custom_Admin_Settings
 */
 
/**
 * Créer une sous menu pour la page du plugin.
 *
 * Fourni les fonctionnalité nécessaire pour le rendu de la page.
 *
 * @package Custom_Admin_Settings
 */
class Submenu_Page {
 
 /**
 * Cette fonction renvoi un contenu associé à un menu qui assure le rendu.
 */
 public function render() {
 echo 'This is the basic submenu page.';
 }
}

Lorsque cette page s’affichera, un texte simple sera affiché: « Ceci est la page de base de sous-menu. » Nous allons finalement entrer dans l’ajout de nouvelles options. Mais d’abord, nous allons donner vie au plugin en l’instanciant dans notre fichier de démarrage.

4 – Rendu du menu et de la page

Ensuite, ouvrez le fichier « custom-admin-settings.php » que nous avons créé plus tôt dans ce tutoriel. Allons de l’avant et rédigeons un code nécessaire pour introduire le nouvel élément de sous-menu et sa page associée.

Rappelez-vous, la classe « Submenu » exige qu’une instance de la classe « Submenu_Page » soit passée dans son constructeur, puis nous avons besoin d’appeler la méthode « init » de la classe de sous-menu pour régler le tout en mouvement.

Dans le code, cela ressemble à ce qui suit:

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

<?php
 
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
 die;
}
 
// Inclusions de toute les dépendance.
foreach ( glob( plugin_dir_path( __FILE__ ) . 'admin/*.php' ) as $file ) {
 include_once $file;
}
 
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
/**
 * Starts the plugin.
 *
 * @since 1.0.0
 */
function tutsplus_custom_admin_settings() {
 
 $plugin = new Submenu( new Submenu_Page() );
 $plugin->init();
 
}

À ce stade, vous devriez être en mesure de rafraîchir votre installation de WordPress, d’activer le plugin (si ce n’est pas déjà le cas), puis d’accéder à votre nouvelle page dans le tableau de bord.

creation-dune-page-dadministration-sur-wordpress

Dans le prochain article, nous allons voir comment nous pouvons commencer à introduire des paramètres réels dans l’écran. De plus, nous allons examiner certaines des meilleures pratiques en termes de travail avec notre modèle, puis nous verrons comment ils seront câblés à l’API responsable non seulement de les enregistrer, mais aussi de les assainir et de valider les valeurs.

C’est tout pour ce tutoriel. N’hésitez pas à nous poser des questions si vous ne comprenez pas un point.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
8 Partages
Partagez6
Tweetez
Enregistrer2