Création de pages d’administration WordPress personnalisées, troisième partie

Dans cette série, nous avons étudié comment créer des pages d’administration personnalisées dans WordPress sans utiliser l’API Paramètres. Cela ne veut pas dire que l'API Settings n'est pas utile (parce que c'est le cas!), Mais il peut arriver que nous ayons besoin d'implémenter des fonctionnalités personnalisées ou des implémentations plus spécialisées de fonctionnalités que les API disponibles ne permettent pas..

En outre, nous examinons certains des principes de développement logiciel les plus importants, tels que le principe de responsabilité unique, et les appliquons à notre travail.. 

Si vous venez tout juste de rejoindre la série, je vous recommande de lire les articles précédents pour vous familiariser avec ce que nous avons fait jusqu'à présent et pour que vous puissiez comprendre pourquoi nous prenons certaines des décisions que nous prenons. faire en écrivant notre code.

Un examen rapide

Bien que je ne puisse pas résumer tout ce que nous avons couvert jusqu'à présent dans la série, je peux toutefois m'assurer de souligner les points importants..

• Nous avons introduit le plugin principal et ajouté un élément de sous-menu et une page d'options pour le plugin dans le tableau de bord WordPress.
• Nous avons discuté du principe de responsabilité unique et du rôle qu'il joue dans notre développement.
• Un célibataire ou Individual contribution un élément a été ajouté qui acceptera la saisie des utilisateurs.
• Nous avons ajouté une valeur nonce à la page, mais nous n'avons rien fait avec..

Cela dit, je suppose que vous disposez de la dernière version du code source (disponible en pièce jointe dans l'article précédent) et que vous êtes prêt à aller de l'avant..

Avant de commencer

Comme pour les autres articles, je suppose que vous avez un environnement de développement WordPress local configuré sur votre ordinateur.. 

De plus, je suppose que vous disposez de la dernière version du code source et que vous êtes prêt à continuer à l'utiliser, ou que vous êtes à l'aise pour lire le code que nous avons ici et pour le mettre en œuvre lorsque vous avez plus de temps..

Enfin, nous allons parcourir chaque bit de code de manière incrémentielle. Tout d'abord, je parlerai de ce que nous allons faire, ensuite je montrerai le code, puis j'expliquerai quoi que ce soit que le code est en train de faire, de sorte qu'il ne reste plus rien qui pourrait prêter à confusion..

Si, toutefois, vous êtes confus à propos de quoi que ce soit dans le code et que le didacticiel ne vous aide pas à expliquer ce qui se passe, laissez un commentaire et laissez-moi vous contacter..

Commençons.

Implémentation de nouvelles fonctionnalités

Dans le dernier article, nous avons quitté avec un plugin qui regards comme s'il faisait quelque chose mais ne sauvegardait pas réellement quelque chose dans la base de données, encore moins de récupérer quelque chose dans la base de données.

En bref, nous avons un plugin qui semble fonctionnel mais qui ne l’est pas. Et c'est là que nous allons chercher avec ce tutoriel.

Plus précisément, nous allons aborder les sujets suivants:

• Nous allons vérifier la valeur de nonce créée et définie dans le didacticiel précédent afin de mieux comprendre le fonctionnement d'un composant de la sécurité WordPress..
• Nous vérifierons que l'utilisateur existant est autorisé à soumettre les informations (et l'empêchons de le faire s'il ne le fait pas)..
• Si la soumission est sécurisée et que l'utilisateur dispose de l'autorisation, nous allons alors nettoyer les informations pour nous assurer qu'aucun contenu malveillant ne pénètre dans la base de données..

Avec cette feuille de route, nous sommes prêts à revenir dans le code et à continuer à travailler sur le plugin..

Sécurité

Rappel du post précédent, nous avons profité de la fonction API WordPress wp_nonce_field. Cette fonction particulière a les effets suivants:

Le champ nonce est utilisé pour valider que le contenu de la demande de formulaire provient du site actuel et pas ailleurs. Un nonce n'offre pas de protection absolue, mais devrait protéger contre la plupart des cas. Il est très important d'utiliser des champs nonce dans les formulaires.

Si vous essayez d'enregistrer la page d'options, un écran blanc apparaîtra probablement. Ce n'est jamais bon, mais c'est ce que nous attendons étant donné l'état actuel de notre plugin..

Nous devons introduire une fonction qui se connecte à l’un des points d'ancrage WordPress disponibles et vérifie si la valeur de nonce est valide. Si ça est valide, il nous permet ensuite de sauvegarder les informations; sinon, il ne devrait pas nous laisser procéder.

Puisque nous sommes en train de créer une page d’administration personnalisée, nous aurons besoin d’un point d’accès différent de celui que nous sommes habitués à utiliser dans des situations comme celle-ci. Dans cet exemple, nous allons utiliser le admin_post crochet. 

Se déclenche sur une demande de publication d'administration authentifiée où aucune action n'a été fournie.

Rappelez-vous de nos discussions précédentes, cependant, que nous ne voulons pas surcharger nos classes avec plus de responsabilités que nécessaire. Rappelez-vous, la question que nous devons constamment nous poser est la suivante: "Quelle raison cette classe devrait-elle changer?" 

À l'heure actuelle, nous n'avons pas de classe capable de gérer les options d'enregistrement. Alors introduisons-en un. Dans le répertoire admin du plugin, créons un Sérialiseur classe. Ce sera responsable de sauver la valeur de nos options.

Comme vous pouvez le constater, j'ai nommé mon fichier class-serializer.php. Nous savons d’expérience et du code ci-dessus qu’il va falloir s’accrocher au admin_post crochet mentionné ci-dessus, et nous savons que nous allons avoir besoin d'une fonction responsable de la sauvegarde de l'information.

Définissons ceux maintenant.

De toute évidence, il y a encore du travail à faire (en fait, nous n'avons même pas instancié cette classe!) Mais le code ci-dessus pourrait être suffisant pour voir où nous nous dirigeons..
Une conversation rapide sur les dépendances
Avant d’ajouter des fonctionnalités, allons-y et définissons-les lors du premier chargement de notre plugin. Tout d'abord, renvoyez le custom-admin-settings.php. Maintenant, à ce stade, nous devons nous demander si une de nos classes existantes devrait avoir le sérialiseur comme dépendance..
Je pense que l'on peut affirmer que le Submenu_Page devrait avoir une référence au sérialiseur puisque la page a les options pour enregistrer.
Alternativement, il est également possible de laisser ce fichier complètement séparé et de le laisser disponible pour un autre motif. Si nous devions le faire, nous nous éloignerions du sujet à l’étude. Bien que je pense que c'est important, cela sort du cadre de ce que nous visons.
Alors instancions le Sérialiseur classe, initialisez-le, puis transmettez-le au constructeur de la page de sous-menu. Le code dans le fichier d'amorçage du plugin devrait maintenant ressembler à ceci:
init (); $ plugin = new Submenu (new Submenu_Page ($ serializer)); $ plugin-> init (); 
Sur ce, nous sommes prêts à continuer à sauvegarder nos options.
Retour au développement
Revenons à la Sérialiseur. Maintenant que nous l'avons connecté au reste du plug-in, il est temps d'écrire du code. Par conséquent, comme le suggère le commentaire, vérifions la valeur de nonce que nous avons créée au début du processus..
Heureusement, WordPress simplifie cela grâce à une fonction API intégrée: wp_verify_nonce. Cette fonction accepte deux arguments:
 
L'action
 
Le nom
 
Si vous vous souvenez de l'article précédent, nous avons utilisé acme-settings-save comme notre action et acme-custom-message comme notre valeur nonce. Pour le valider, nous devons vérifier qu'il existe dans le $ _POST collection et qu'il passe les contrôles natifs de WordPress. 
Pour ce faire, j'aime créer un privé méthode qui me permet d’encapsuler cette logique dans une fonction que je peux utiliser dans le enregistrer fonction que nous avons définie ci-dessus.
Une fois cela fait, je peux incorporer un appel à cette fonction qui nous permettra de vérifier la validité de la soumission et de quitter la routine ou de passer à la prochaine vérification (à laquelle nous arriverons dans un instant)..
Notez que renvoyer faux dans cette condition n'est pas un moyen approprié de gérer cela. Au lieu de cela, il serait plus propre d'introduire un message d'erreur qui s'affiche sur le tableau de bord WordPress. C’est quelque chose que nous reviendrons dans un prochain tutoriel.. 
Pour le moment, cependant, nous voulons avant tout pouvoir soumettre les données avec succès. Cela nous amène à la partie suivante de notre code.
Autorisation
Même si le nombre utilisé une fois (ou le nonce) validation validée, il reste encore une chose à vérifier: nous devons nous assurer que l'utilisateur actuel est autorisé à enregistrer les données..
Pour nos besoins, nous voulons nous assurer que l'utilisateur actuel est un administrateur. Pour ce faire, nous pouvons examiner les fonctionnalités de l'utilisateur actuel (cette page fournit une référence pour chaque rôle et les fonctionnalités associées)..
Notez que l’une des capacités de l’administration consiste à gérer les options. Nous pouvons maintenant utiliser la fonction API WordPress current_user_can vérifier si l'utilisateur actuel peut enregistrer les options de cette page.
Mais tout d’abord, cela soulève une question: si l’utilisateur ne peut pas enregistrer les options, pourquoi devrait-on les laisser réellement voir la page en premier lieu?
Si vous vous en souvenez plus tôt dans la série, nous avons écrit le code suivant:
submenu_page, 'render')); 
Cela garantit que la page des options est disponible uniquement pour les administrateurs; Cependant, nous voulons faire très attention et placer un contrôle pour cela pendant notre processus de sérialisation, ainsi.
Nous pouvons maintenant mettre à jour la condition en vérifiant également la valeur nonce pour vérifier l'autorisation de l'utilisateur actuel:
has_valid_nonce () && current_user_can ('manage_options'))) // TODO: Affiche un message d'erreur.  // Si les éléments ci-dessus sont valides, enregistrez l'option. 
Maintenant que nous avons le code en place pour nous assurer que la valeur de nonce est définie et que l'utilisateur actuel peut enregistrer la valeur, nous pouvons aller de l'avant avec la désinfection.
Rappelez-vous, nous volonté retourner à l'endroit où il est indiqué que nous devons afficher un message d'erreur. Mais ce n'est pas dans ce tutoriel.
Assainissement
"Mais attendez", dites-vous. "Je pensais que nous nous préparions à enregistrer l'option!" Nous le sommes, mais avant de pouvoir le faire, nous devons procéder à un processus d'assainissement. En bref, la désinfection consiste à s’assurer que les données sont propres, sûres et, ahem, sanitaire pour la base de données.
En termes simples, cela empêche les utilisateurs malveillants d'insérer dans la base de données des informations susceptibles de nuire à notre site..
Heureusement, WordPress fournit une fonction d'assistance intéressante qui nous permet de nous assurer que cela est aussi simple que possible. Pour ceux qui sont intéressés, vous pouvez tout lire sur la validation et la désinfection des données (même si nous verrons la validation dans le prochain tutoriel).
Dans notre code, nous allons utiliser sanitize_text_field (comme lié ci-dessus). Cette fonction fera ce qui suit:
 
Vérifications pour UTF-8 invalide
 
Convertit single '<' characters to entities
 
Enlève tous les tags
 
Supprime les sauts de ligne, les tabulations et les espaces supplémentaires
 
Strips octets
 
Plutôt sympa d'avoir ça disponible, n'est-ce pas? Mettons cela au travail. Pour ce faire, localisez le enregistrer fonction avec laquelle nous avons travaillé et le mettre à jour pour qu'il ressemble à ceci:
has_valid_nonce () && current_user_can ('manage_options'))) // TODO: Affiche un message d'erreur.  // Si les éléments ci-dessus sont valides, désinfectez et enregistrez l'option. if (null! == wp_unslash ($ _POST ['acme-message'])) $ value = sanitize_text_field ($ _POST ['acme-message']); update_option ('tutsplus-custom-data', $ valeur); 
Notez que nous lisons l'entrée de la $ _POST collecte, en le désinfectant, puis en enregistrant le résultat dans une variable distincte. Ensuite, cette variable est écrite dans la base de données en utilisant le update_option une fonction. 
Pour cet article, je choisis d'utiliser la clé tutsplus-custom-data. Quoi que vous utilisiez, il est important qu'il soit préfixé avec quelque chose d'unique afin qu'un autre plugin ou thème ne remplace pas l'option et que vous n'écrasiez pas une option existante..
Enfin, nous devons rediriger vers la page des options. Puisque nous n'utilisons pas d'API intégrée, nous devrons écrire une fonction pour le faire à notre place. Heureusement, c'est très facile. 
Tout d’abord, créez une fonction appelée redirection et assurez-vous qu’elle se présente comme suit:
Le code ci-dessus devrait soyez explicite, mais pour être sûr que tout soit clair, procédez comme suit:
 
Il vérifie qu'une valeur WordPress privée est présente dans le dossier $ _POST collection. Si ce n'est pas le cas, il sera égal à l'URL de connexion WordPress. Cela forcera les utilisateurs à se connecter à la page de connexion si l'URL de référence n'est pas définie. cependant, il n'y a aucune raison pour que cela ne soit pas.
 
Ensuite, nous prenons le référant et assainissons les données. C’est quelque chose que les normes de codage préconisent et qui garantit la propreté des données..
 
Enfin, nous initialisons un wp_safe_redirect à l'URL pour que nous retournions à la page des options.
 
Une fois que tout cela est fait, ajoutez ceci comme dernière ligne du texte. enregistrer fonction ci-dessus. La version finale du code devrait ressembler à ceci:
has_valid_nonce () && current_user_can ('manage_options'))) // TODO: Affiche un message d'erreur.  // Si les éléments ci-dessus sont valides, désinfectez et enregistrez l'option. if (null! == wp_unslash ($ _POST ['acme-message'])) $ value = sanitize_text_field ($ _POST ['acme-message']); update_option ('tutsplus-custom-data', $ valeur);  $ this-> redirect ();  / ** * Détermine si la variable nonce associée à la page d'options est définie * et est valide. * * @access private * * @return boolean False si le champ n'est pas défini ou si la valeur de nonce n'est pas valide. * sinon, c'est vrai. * / fonction privée has_valid_nonce () // Si le champ n'est même pas dans $ _POST, il est invalide. if (! isset ($ _POST ['acme-custom-message']))) // Entrée var ok. retourne faux;  $ field = wp_unslash ($ _POST ['acme-custom-message']); $ action = 'acme-settings-save'; return wp_verify_nonce ($ field, $ action);  / ** * Redirige vers la page d'où nous venons (ce qui devrait toujours être la page * admin. Si la référence n'est pas définie, nous redirigeons l'utilisateur vers * la page de connexion. * * @Access private * / private function redirect () // Pour satisfaire aux normes de codage, nous devons l'initialiser. if (! isset ($ _POST ['_ wp_http_referer']) Input var okay. $ _POST ['_ wp_http_referer'] = wp_login_url (); // Désinfectez la valeur de la collection $ _POST pour les normes de codage. $ Url = sanitize_text_field (wp_unslash ($ _POST ['__wp_http_referer']) // entrée ok ok.); // Enfin, redirigez-le vers le page d'administration. wp_safe_redirect (urldecode ($ url)); exit; 
Voici la chose: Nous avons la sécurité, la désinfection, la sérialisation et la redirection en place. Mais nous ne montrons pas de messages d'erreur, et nous ne récupérons pas les données. 
C'est là que nous allons chercher avec le prochain tutoriel.
Conclusion
À ce stade, nous avons un plugin semi-fonctionnel, mais il reste encore du travail à faire. Évidemment, les informations que nous soumettons à la base de données ne sont affichées nulle part, et ce n'est pas une bonne chose..
Toutefois, tout comme pour la sauvegarde des informations, il est important de prendre en compte la récupération des informations. Dans le prochain didacticiel, nous allons chercher à récupérer les informations, à les afficher sur le serveur frontal, sur la page des options et à mettre à jour les informations lorsque l'utilisateur modifie la valeur de l'élément d'entrée..
En attendant, 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 Envato. Marché.
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
 
L'API Paramètres
 
Le guide complet de l'API de configuration
 
Principe de responsabilité unique
 
wp_nonce_field
 
admin_post
 
wp_verify_nonce
 
 wp_nonce_field
 
Rôles et Capacités
 
current_user_can
 
Valider et échapper des données utilisateur
 



		
			
	   
	




Code