Création de pages d’administration WordPress personnalisées, première partie

Dans une série précédente, j'avais fourni un guide détaillé sur l'utilisation de l'API Paramètres WordPress. Pour ceux qui débutent avec WordPress ou qui utilisent d’autres outils tels que The Customizer pour gérer diverses options, il se peut que vous n’ayez pas eu à les utiliser dans le développement de votre thème ou de votre plugin..

Comme indiqué dans le Codex:

L’API Paramètres, ajoutée à WordPress 2.7, permet aux pages d’administrateur contenant des formulaires de paramètres d’être gérées de manière semi-automatique. Il vous permet de définir des pages de paramètres, des sections dans ces pages et des champs dans les sections..

Je ne pense pas que c'est quelque chose qui est Champs obligatoires apprendre, mais c’est quelque chose que vous devriez savoir exister et savoir comment l'utiliser si vous avez besoin d'introduire des pages d'options dans la zone d'administration de WordPress.

C'est une API puissante, mais quelque peu complexe, qui nous fournit beaucoup de fonctionnalités. En fin de compte, cela nous permet de faire beaucoup de travail côté serveur et un travail minimal côté client.

Mais qu'en est-il des moments où nous travaillons avec une solution personnalisée pour les clients et nous avons besoin d'un peu plus de flexibilité que l'API des paramètres? Par exemple, supposons que nous ayons besoin de créer un plugin avec une page de paramètres mais un ensemble d’options plus flexible et une fonctionnalité de validation adaptée.?

Dans ces cas, il est possible d’écrire nos propres pages d’administration WordPress personnalisées. Dans cette série, nous allons voir comment faire exactement cela.

Avant de commencer

Comme avec la plupart des tutoriels comme celui-ci, il est important de vous assurer que vous avez tout en place pour suivre afin que vous puissiez travailler avec le code source que nous couvrons tout au long de la série..

Pour ce tutoriel, je suppose:

• Vous avez une configuration d'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 installer un plugin.
• Vous connaissez les pratiques de développement de plugins WordPress.
• Vous êtes à l'aise avec PHP et HTML.

Si vous ne savez pas comment configurer un environnement de développement local incluant WordPress, veuillez consulter cette série pour savoir comment procéder.. 

Et si vous êtes relativement à l'aise avec PHP, même s'il ne s'agit que de lire le langage, je ferai de mon mieux pour fournir des instructions et des commentaires clairs pour chaque morceau de code que nous partageons..

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

Paramètres d'administration personnalisés de WordPress

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

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

De plus, nous nous assurerons d’aborder ceci de la manière la plus modulaire possible en utilisant les normes de codage WordPress et des pratiques similaires pour rendre la lecture, l’écriture et la maintenance de notre plugin aussi simples que possible..

1. Le plugin Bootstrap

La première chose à faire est de créer le plugin bootstrap. Cela inclura la création d’un répertoire contenant les fichiers du plugin, un fichier README de base, une copie de la licence, un fichier d’amorçage qui sera utilisé pour démarrer le plugin et un répertoire contenant les classes liées aux tâches administratives. fonctionnalité.

Les fichiers sont disponibles au téléchargement en tant que pièce jointe à ce message mais, entre-temps, vous pouvez voir à quoi ressemble mon répertoire ci-dessous:

De plus, le contenu du plugin bootstrap est simple. Examinez le code suivant pour le fichier PHP unique. custom-admin-settings.php, et puis je vais en discuter plus en détail ci-dessous le bloc.

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 bloc principal de commentaires en haut du fichier explique son rôle..
La zone sous la @ wordpress-plugin balise est ce que WordPress lira afin de générer le titre, la description et les liens relatifs du plugin dans le tableau de bord du plugin de WordPress.
Ensuite, nous empêchons quiconque d’accéder directement au fichier. Et, enfin, nous créons une fonction personnalisée à déclencher avec le plugins_loaded crochet. Cette fonction est ce qui sera utilisé pour démarrer le plugin.
À ce stade, vous devriez pouvoir vous connecter à WordPress, naviguer dans le tableau de bord du plug-in, puis voir le plug-in disponible pour l'activation. Allez-y et cliquez Activer.
Rien ne se passera pour le moment, mais nous allons commencer à ajouter des fonctionnalités à mesure que nous travaillons tout au long de ce didacticiel..
2. Création de l'élément de sous-menu
Pour commencer à travailler sur le plugin, introduisons d’abord un élément de sous-menu. Pour ce faire, nous devrons tirer parti de la fonction API WordPress add_options_page. Cette fonction nécessitera cinq paramètres:
 
le texte à afficher comme titre de la page d'options correspondante
 
le texte à afficher comme texte de sous-menu pour l'élément de menu
 
les capacités nécessaires pour accéder à cet élément de menu
 
le slug de menu utilisé pour identifier cet élément de sous-menu
 
un rappel à une fonction responsable du rendu de la page d'administration
 
Notez que nous allons utiliser des classes pour organiser nos fonctionnalités. Une grande partie de ce que nous faisons va donc être orientée objet..
Commençons par créer une classe dans le répertoire admin appelée class-submenu.php. Puisque cette classe est responsable de l’introduction d’un nouveau sous-menu, nous le nommerons de manière descriptive..
Le contenu de la classe devrait ressembler à ceci:
submenu_page = $ submenu_page;  / ** * Ajoute un sous-menu pour ce plugin au menu 'Outils'. * / public function init () add_action ('admin_menu', array ($ this, 'add_options_page'));  / ** * Crée l'élément de sous-menu et appelle l'objet Page de sous-menu pour restituer * le contenu réel de la page. * / public function add_options_page () add_options_page ('Tuts + Page d'administration personnalisée', 'Page d'administration personnalisée', 'manage_options', 'custom-admin-page', array ($ this-> submenu_page, 'render'));  
À ce stade, le plugin ne fera toujours rien. Nous avons encore besoin de créer le réel Submenu_Page classe, puis nous devons relier les classes au fichier de démarrage.
3. Création de la page de sous-menu
Commençons par le Submenu_Page classe en premier. Créer un autre fichier dans le admin répertoire et appelez-le classe-sous-menu-page.php. Ensuite, dans le fichier, ajoutez le code suivant.
Lorsque cette page s'affiche, le texte suivant s'affiche: "Ceci est la page de base du sous-menu". Nous finirons par ajouter de nouvelles options. Mais d’abord, donnons vie à ce plugin en l’instanciant dans notre fichier bootstrap.
4. Rendre le menu et la page
Ensuite, ouvrez le fichier custom-admin-settings.php créé précédemment dans ce didacticiel. Continuons et écrivons le code nécessaire pour introduire le nouvel élément de sous-menu et sa page associée.
N'oubliez pas que la classe Submenu nécessite qu'une instance du Submenu_Page classe soit passée dans son constructeur, puis nous devons appeler la méthode init de la classe Submenu pour tout mettre en mouvement.
En code, cela ressemble à ceci:
init (); 
À ce stade, vous devriez pouvoir actualiser votre installation de WordPress, activer le plug-in (s'il ne l'est pas déjà), puis voir votre nouvelle page affichée dans l'espace d'administration..
Dans le prochain article, nous verrons comment introduire les paramètres réels à l'écran. En outre, nous examinerons certaines des meilleures pratiques en termes de travail avec notre modèle et nos modèles partiels, puis nous verrons comment ils seront reliés aux API chargées non seulement de les sauvegarder, mais également de les nettoyer et de les valider. leur.
Mais avant d’aller aussi loin, je voudrais parler un peu de la conception de classe que nous avons vue dans ce tutoriel. De manière générale, je veux parler de pourquoi nous avons une classe pour la Sous menu et le Submenu_Page et comment cela se rapporte au fichier bootstrap.
Un mot sur la responsabilité de classe
Pour ceux d'entre vous qui connaissent le principe de responsabilité unique, cette section peut ne pas vous intéresser. Mais si vous avez besoin d'un rafraîchissement ou si vous voulez en savoir plus, alors continuez votre lecture.
Rassemblez les choses qui changent pour les mêmes raisons. Séparez les choses qui changent pour différentes raisons.
Il y a beaucoup plus à cela, mais si vous examiniez chacune de nos classes (au moins les deux que nous avons jusqu'à présent), alors il est clair que les raisons pour lesquelles nos classes peuvent changer sont les suivantes:
 
Le contenu du sous-menu peut changer. Tout ce qui va du titre de la page au slug du menu et tout le reste.
 
 La façon dont la page rend son contenu peut (et va changer). Plus précisément, pour le moment, cela ne fait qu'écho une chaîne. Bientôt, il inclura un fichier particulier. Après cela, il peut être nécessaire d'inclure plusieurs fichiers.
 
Les deux raisons ci-dessus sont deux raisons très différentes que les classes peuvent changer, donc les garder ensemble dans la même classe violerait le principe ci-dessus..
En fin de compte, je soulève cette question non seulement pour aider à mieux comprendre les principes de génie logiciel pouvant être appliqués dans WordPress, mais également pour vous aider à vous préparer à certaines des raisons pour lesquelles nous allons décomposer certaines choses qui sont généralement des fichiers volumineux. dans le contexte des plugins.
La bonne chose à apprendre des principes est-ce qu'ils peuvent être appliqués dans plusieurs projets et pas seulement dans des projets simples. Vous les apprenez, vous vous entraînez à les utiliser et vous vous améliorez dans la conception de solutions pour d’autres personnes.. 
La courbe d'apprentissage peut être raide, mais une fois que vous commencez cette ascension difficile, il devient de plus en plus facile d'intégrer les principes dans votre travail quotidien. Ensuite, le travail que vous fournissez aux autres devient beaucoup plus facile à maintenir au fil du temps.
Conclusion
N'oubliez pas que vous pouvez télécharger le plugin dans son état actuel à partir de ce post. Au fur et à mesure que nous avançons dans la série, je publierai la dernière version sur chaque article afin que vous puissiez suivre le code traité dans chaque tutoriel, le bricoler et préparer des questions que vous voudrez peut-être poser dans les commentaires..
En passant, si vous recherchez d’autres utilitaires pour vous aider à développer votre ensemble croissant d’outils pour WordPress ou pour que le code soit étudié et approfondi dans WordPress, n’oubliez pas de voir ce que nous avons disponible dans Marché Envato.
N'oubliez pas que vous pouvez voir tous mes cours et tutoriels sur ma page de profil et vous pouvez me suivre sur mon blog et / ou Twitter à @tommcfarlin, où je parle de diverses pratiques de développement de logiciels et de la façon dont nous pouvons les utiliser dans WordPress..
Enfin, n'hésitez pas à laisser des questions ou des commentaires dans le flux ci-dessous. Je fais de mon mieux pour participer et répondre à chaque question ou critique que vous proposez en rapport avec ce projet..
Ressources
 
Le guide complet de l'API de paramètres WordPress
 
L'API Paramètres
 
plugins_loaded
 
add_options_page
 
Principe de responsabilité unique
 



		
			
	   
	




Code