Dans le tutoriel précédent de cette série, nous avons commencé à travailler sur notre page d’administration personnalisée.. 

En fin de compte, les objectifs sur lesquels nous travaillons montreront comment nous pouvons utiliser notre propre code personnalisé ainsi que l'API WordPress pour créer des pages un peu plus flexibles que ce qui peut naturellement être disponible via l'une des API standard.. 

Cela ne veut pas dire que nous devrions éviter ou éviter les API fournies par WordPress. En fait, je suis fan de les utiliser le plus possible. Cependant, lorsqu'un projet nécessite l'introduction de fonctionnalités supplémentaires ou la personnalisation des performances, le développement de ces fonctionnalités vous revient..

Deuxièmement, nous utilisons également des principes tels que le principe de responsabilité unique pour démontrer comment nous pouvons définir une approche bien organisée et orientée objet du code que nous écrivons..

Avant d'aller plus loin, passons en revue ce que nous avons couvert jusqu'à présent..

Pour le premier post…

Rappelons que nous avons fourni une définition de travail du principe de responsabilité unique:

Rassemblez les choses qui changent pour les mêmes raisons. Séparez les choses qui changent pour différentes raisons.

Et nous avons utilisé cela pour guider l'organisation de la création de nos sous-menus et pages de sous-menus actuels.

Nous avons également examiné le code de la première version du plugin, l'avons mis à disposition pour le téléchargement et jeté les bases du travail que nous allons effectuer dans ce tutoriel..

Si vous n'avez pas lu le didacticiel précédent ou au moins révisé le code, je vous le recommande vivement. sinon, vous vous demandez peut-être pourquoi nous prenons certaines de nos décisions ou pourquoi une partie du code est organisée de la manière dont il est.

Cela dit, continuons.

Avant de commencer

Comme avec beaucoup de mes tutoriels, j'aime m'assurer que tout est opérationnel avant de continuer. Pour ce tutoriel, vous aurez besoin des éléments suivants:

• un environnement de développement local
• une copie de WordPress installée et prête à être utilisée
• une copie de notre plugin du tutoriel précédent installé et activé
• un IDE avec le plugin chargé et prêt pour une édition supplémentaire

Si l’une des solutions ci-dessus n’a aucun sens, veuillez consulter le didacticiel précédent ou cette série pour savoir comment configurer un environnement de développement local..

Pour ce qui est du code à venir, nous allons le parcourir pas à pas. J'expliquerai exactement ce que nous faisons et vous fournirons les commentaires de code et les commentaires dans le didacticiel pour vous assurer de bien comprendre tout ce qui se passe tout au long du processus..

Création de la page d'administration

Alors que nous continuons avec le plugin dans cet article, voici ce que nous allons faire:

1. Créez le balisage de la page d'administration qui hérite des styles WordPress natifs.
2. Introduire une option avec laquelle l'utilisateur peut interagir.
3. Désinfectez l'option avant de la sauvegarder.
4. Récupérer la valeur de l'option et la définir égale à la valeur de la page.

Dans ce tutoriel, nous allons nous concentrer sur les deux points suivants. Dans le prochain article, nous allons nous concentrer sur les points trois et quatre..

Pour ceux qui sont familiers avec les paramètres de l'API, cela semble excessif. Mais comme vous le verrez dans le reste de ce tutoriel et de cette série, il y a une raison pour laquelle nous allons le décomposer en morceaux plus petits comme celui-ci.

Avec cela présenté comme notre plan d'action, commençons.

Marquer la page

Lorsque nous avons quitté cette fonction pour la dernière fois, le code ressemblait à ceci:

Nous sommes maintenant prêts à commencer à créer la mise en page de la page. Chaque fois que je travaille sur des plugins pour des clients, j'appelle ces "vues". 
Cela ne doit pas être confondu avec le paradigme modèle-vue-contrôleur. Mais je ne les appelle pas non plus de modèles, car dans WordPress, ce sont les modèles qui permettent d'afficher le contenu d'une page sur le front-end. 
Donc, il est vues.
La première chose à faire est de créer un répertoire views dans le répertoire admin de notre plugin..
Une fois que cela est fait, nous pouvons nommer ceci quelque chose d'aussi simple que settings.php ou quelque chose de plus descriptif. C'est vraiment à vous et à la complexité de ce que vous construisez. Puisqu'il s'agit d'un simple plugin, je m'en tiens à un nom simple.
Ensuite, commençons par créer le balisage de base qui fournira l’élément wrapper WordPress standard avec le titre de la page:
 
 
 
 
 
Notez ici que le titre est dérivé d’une fonction qui utilise les valeurs passées dans le add_options_page fonctionner à partir du moment où nous avons commencé à travailler sur le plugin. Ensuite, nous utilisons également le admin_url fonction pour indiquer où nous allons poster les options (dont nous parlerons un peu plus tard).
Et dans les deux cas, nous utilisons le esc_html fonction de désinfection pour vous assurer qu'aucune chaîne malveillante ne peut être rendue sur la page.
Voici deux exemples d'utilisation, dans la mesure du possible, des fonctions d'API disponibles aux fins pour lesquelles elles ont été conçues. En supposant que tout se soit bien passé, votre page devrait ressembler à ceci:
Maintenant, pour connecter cela à votre plugin, nous devons revisiter la fonction d’en haut. Cela signifie que la fonction devrait maintenant ressembler à ceci:
Assez facile, non? En supposant que tout est configuré correctement, voici ce que vous devriez voir:
Non, ce n'est pas grand chose à regarder, mais nous allons changer cela.
Ajouter une option
À ce stade, nous sommes prêts à ajouter une option. Pour les besoins de cet article, nous allons permettre à l'utilisateur de saisir quelque chose dans un élément de texte saisi. Cela nous permettra d’examiner comment désinfecter l’information et éventuellement la montrer au début du processus..
Pour ce faire, nous avons besoin d’un élément d’information clé. Nous avons besoin de connaître l'attribut de nom que nous allons appeler le contribution élément. C’est pour que nous puissions l’enregistrer correctement dans la base de données.. 
Ainsi, pour les besoins de cet exemple, supposons que ce message soit utilisé pour s'afficher sans condition en haut de chaque message. Nous n'allons pas aller droit au but dans cet article, mais nous y reviendrons dans le prochain article..
Dans ton settings.php voir, ajouter le code suivant.
 
 
 
 
Message Universel
 
 
 Quel message souhaitez-vous afficher au-dessus de chaque message?? 
  
 
  
 
Si vous deviez afficher la page à ce stade, vous devriez voir exactement ce à quoi vous vous attendez: une étiquette et une zone de saisie..
Sécuriser l'option
Normalement, je montrerais une capture d'écran ici, mais nous n'avons pas encore fini. Nous devons introduire deux autres choses.
 
Un nonce WordPress
 
Le bouton d'envoi
 
Faisons cela maintenant. Si vous n'êtes pas familier avec les valeurs nonce, je vous recommande de lire cet article. En bref, c'est ceci:
Un nonce est un "numéro utilisé une seule fois" pour aider à protéger les URL et les formulaires de certains types d'abus, malveillants ou autres..
Dans notre settings.php fichier, ajoutons le bloc de code suivant:
En fin de compte, la version finale de notre code devrait ressembler à ceci:
 
 
 
 
Message Universel
 
 
 Quel message souhaitez-vous afficher au-dessus de chaque message?? 
  
 
   
 
Et la version finale de la page devrait ressembler à ceci:
À ce stade, nous sommes prêts à enregistrer les options. Maintenant, pour ce faire, nous devons vérifier plusieurs choses:
 
L'utilisateur est-il autorisé à enregistrer des options??
 
Un nonce valide est-il passé du formulaire??
 
En outre, nous devons:
 
Désinfectez les informations pour vous assurer qu'aucune donnée malveillante ne pénètre dans la base de données.
 
Nous devons pouvoir extraire ces informations de la base de données et les renseigner sous la forme.
 
Et enfin, nous devons afficher ceci sur le front-end du site..
Conclusion
Donc, dans les deux prochains articles, nous allons nous concentrer sur le faire exactement.
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
 
Principe de responsabilité unique
 
Paramètres d'administration personnalisés 1.0
 
add_options_page
 
 admin_url
 
 esc_html
 
WordPress Nonce Values
 



		
			
	   
	




Code