Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins
Code

Création d'un système de messagerie WordPress personnalisé, partie 3

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Custom WordPress Messaging System.
Creating a Custom WordPress Messaging System, Part 2
Creating a Custom WordPress Messaging System, Part 4

French (Français) translation by Soule Nassurdine (you can also view the original English article)

À ce stade de cette série, nous avons mis en place la base de notre plugin, défini un hook personnalisé, et lié un message perpétuel pour montrer comment nous pouvons profiter de ce hook.

Ce que nous n'avons pas fait, cependant, est d'implémenter différents types de message, permettre l'entrée de l'utilisateur, et afficher des messages basés sur le résultat de l'entrée que l'utilisateur a fourni.

Mais avant ça, nous devons ajouter un support pour les différents types de messages, une interface de classe qui prend en charge chaque type de message et les structures de données nécessaires pour stocker de tels messages.

Prêt à commencer ?

Je suis impatient de continuer avec ce tutoriel, mais il y a quelques choses que nous devons examiner avant de sauter de nouveau dans le code source. Assurez-vous que votre système dispose des logiciels suivants :

  • PHP 5.6.25 et MySQL 5.6.28
  • Apache ou Nginx
  • WordPress 4.6.1
  • Votre IDE ou votre éditeur préféré

Et si vous cherchez une solution tout-en-un, n'oubliez pas d'essayer MAMP.

Le chemin jusqu'à présent

Comme mentionné précédemment, nous sommes en plein milieu de cette série. Si vous avez raté l'un des tutoriels précédents, voici ce que nous avons couvert jusqu'à présent :

  1. Dans le premier tutoriel, nous nous sommes concentrés sur les bases du strict minimum de notre plugin et ce dont nous avons besoin pour commencer.
  2. Dans la deuxième partie, nous avons mené le plugin un peu plus loin en ajoutant une très simple page d'administration WordPress. Nous avons également fait un appel vers le hook personnalisé que nous utilisons, et nous l'avons connecté côté serveur. Nous avons également commencé le travail de base pour notre Messagerie Réglages.

Et voici ce que nous allons examiner dans le tutoriel final :

  1. Nous allons terminer en liant le tout ensemble, en le voyant en action, et en rendant le plugin final disponible publiquement pour que vous puissiez le télécharger.

Pour l'instant, cependant, nous avons d'autres travaux sur lesquels se concentrer.

Retour au travail

En nous remettant au travail (et comme nous l'avons vu dans les tutoriels précédents), nous allons examiner, dans cette partie de la série, l'implémentation suivante :

Dans ce tutoriel, nous allons commencer à mettre en œuvre notre Messagerie Réglages en ajoutant la prise en charge des messages d'erreurs et de réussite ainsi qu'en couvrant certains points de sécurité.

Dans le dernier article, nous avons commencé à travailler sur la Messagerie Réglages, mais seulement dans la mesure où nous avons mis en place une fonction qui affichera perpétuellement un avis de succès chaque fois que notre page personnalisée est chargée.

The permanent success message we displayed in the last tutorial

Dans ce tutoriel, nous allons ajouter la prise en charge des messages d'erreurs, d'avertissements et de réussite. Nous allons aussi les afficher tous à l'écran afin que nous puissions avoir une idée de la façon dont la messagerie fonctionnera.

De plus, nous allons ajouter un changement supplémentaire qui ajoutera un support pour rejeter les avis à la discrétion de l'utilisateur.

Avec ceci comme plan pour le travail que nous devons faire dans ce tutoriel, commençons.

Développer la Messagerie Réglages

Rappelez-vous le but entier de la Messagerie Réglages est de définir un moyen pour nous de travailler avec des messages personnalisés, des hooks personnalisés, et l'API natif WordPress pour afficher des messages dans le contexte de la zone d'administration WordPress.

Pour ce faire, nous allons élargir le travail que nous avons fait dans le tutoriel précédent et continuer à accroître notre travail à partir de là.

Messages de réussite

Etant donné que nous avons commencé avec le message de réussite dans le tutoriel précédent, allons de l'avant et reprenons avec ça. À l'heure actuelle, nous avons une méthode codée qui affiche une seule méthode :

Idéalement, nous aimerions introduire une structure de données qui prendra en charge plusieurs messages, une fonction qui nous donnera accès à l'ajout d'autant de messages que nous aimerions, et une fonction qui nous permettra d'afficher tous les messages de réussite.

Tout d'abord, nous allons commencer avec un tableau. Ce sera un attribut privé de la classe, et il sera initialisé dans le constructeur. La partie initiale de la Settings_Messenger devrait maintenant ressembler à ceci :

Et comme vous pouvez le voir, nous avons défini exactement ce que nous avons dit, sauf que nous n'avons pas défini une méthode pour ajouter nos propres messages, et nous n'avons pas défini un message pour afficher nos messages.

Alors, faisons-le maintenant. Tout d'abord, ajoutons une méthode qui nous permettra d'ajouter nos propres messages :

Notez que nous utilisons sanitize_text_field pour nettoyer les données entrant dans le tableau.  Vous pouvez rendre le nettoyage aussi strict ou aussi souple que vous le souhaitez. J'ai opté pour cette méthode particulière, car elle permet de nous faire comprendre sans s'écarter du sujet du tutoriel.

Maintenant, nous allons définir une méthode qui nous permettra d'afficher les messages sur le front-end :

Certes, cette méthode peut être refactorisée, et je vais en reparler dans la conclusion de ce post.

Pour l'instant, cependant, testons la. Essayez le code suivant dans le fichier tutsplus-custom-message.php, puis rechargez l'écran d'administration que nous avons utilisé tout au long de la série jusqu'à présent.

En estimant que tout a été mis en œuvre correctement, vous devriez voir quelque chose comme ceci :

Multiple success messages

Heureusement, ajouter les deux types de messages suivants est très similaire à ce que nous avons fait dans cette section.

Messages d'avertissement

L'ajout de support pour les messages d'avertissement sera presque exactement comme ce que nous avons fait auparavant ; Cependant, plutôt que de nommer notre tableau et les fonctions connexes comme ayant quelque chose à voir avec le succès, nous allons les nommer comme ayant quelque chose à faire avec des avertissements.

Alors, tout d'abord, ajoutons le tableau pour contenir nos messages :

Ensuite, ajoutons les fonctions qui nous permettront d'ajouter des avertissements a la messagerie :

Et enfin, ajoutons une fonction pour afficher la fonction si nécessaire (notez que nous utilisons le nom de classe notice-warning lors de la création de l'élément div) :

Notez que la façon dont vous choisissez d'afficher cet ensemble particulier de messages ne regarde que vous. ous pouvez choisir de l'afficher en conjonction avec les messages de réussite, ou vous pouvez choisir de l'afficher de manière complètement distincte.

Pour ce tutoriel, je vais simplifier et afficher uniquement le message d'avertissement. Je vais donc ajouter la ligne de code suivante au fichier principal du plugin :

Je vais mettre à jour le hook dans la méthode init de Settings_Messenger :

Et puis je vais rafraîchir la page. En supposant que vous avez suivi tous les codes ci-dessus correctement, vous devriez voir quelque chose comme ceci :

A demonstration of a warning message

Si ce n'est pas le cas, vérifiez votre code ou téléchargez le fichier de projet joint à ce tutoriel, et nous allons partir de là.

Messages d'erreur

Enfin, faisons la même chose pour nos messages d'erreur. Nous allons répéter exactement ce que nous avons fait dans les sections ci-dessus donc cela devrait devenir un peu un réflexe à ce stade.

Premièrement, nous devons ajouter un attribut qui contiendra le tableau où nous stockerons nos messages d’erreur :

Deuxièmement, nous devons ajouter une fonction qui nous permettra d'ajouter un message d'erreur à notre liste d’erreurs :

Et puis nous devons être en mesure de les afficher :

Pour ajouter vos propres messages, retournez au fichier principal du plugin et ajoutez le code suivant :

Ensuite, mettez à jour la fonction init dans le Settings_Messenger, et vous devriez voir quelque chose comme ceci quand vous actualisez la page :

A list of error messages

Et c'est ainsi que vous ajoutez des messages personnalisés à votre page d'administration en utilisant des hooks personnalisés. Mais nous avons encore une chose à présenter avant de compléter cet article.

Rejeter des messages

Avant de conclure, je veux montrer comment nous pouvons rendre nos messages rejetables ou, plus simplement, qu'ils puissent être supprimés par l'utilisateur. Pour ce faire, nous pouvons profiter des fonctionnalités déjà intégrées à WordPress.

Puisque nous travaillions juste sur les messages d'erreur, je vais utiliser les messages d'erreur comme exemple. Lors de la construction du HTML pour les messages d'erreur, ajoutez un nom de classe supplémentaire à l'élément div qui contient le(s) message(s).

C'est-à-dire, ajouter is-dismissible :

Facile, n'est-ce pas ? Vous obtenez une icône qui permet à l'utilisateur de cliquer dessus et, quand ils le font, le message disparaîtra.

C'est une belle fonctionnalité qui s'adapte bien à l'expérience utilisateur WordPress pour très très peu de travail de notre part.

Conclusion

Maintenant nous avons un Settings_Messenger assez fonctionnel. Nous pouvons ajouter des messages de succès, des messages d'erreur et des messages d'avertissement. Nous pouvons rejeter les messages. Nous pouvons gérer tout cela indépendamment de tout ce que WordPress pourra faire. Nous pouvons gérer tout cela indépendamment de tout ce que WordPress pourra faire.

Mais si vous avez lu un de mes tutoriels précédents, vous savez que je ne suis pas un fan de codes dupliqués. Ni ne suis un fan des classes qui font beaucoup de choses. Et, malheureusement, c'est exactement ce que nous faisons ici.

Pour les besoins de ce tutoriel, je n'ai pas l'intention de refactoriser le code qui est dans cet exemple. ous avons parcouru ce type de matériel auparavant. En outre, le but de ce que nous faisons est de montrer comment travailler avec des messages d'erreur personnalisés, non pas comment appliquer les techniques orientées objet les plus avancées que nous pouvons utiliser (bien que ce serait bien, n'est-ce pas ?).

Selon la réaction que je reçois pour cette série, nous pourrons peut-être la revoir et la refactoriser afin de voir combien de travail peut être fait et combien de principes peuvent être appliqués.

En attendant la publication du prochain tutoriel, notez que je suis toujours heureux de répondre aux questions via les commentaires, et vous pouvez également consulter mon blog et me suivre sur Twitter. Je parle habituellement du développement de logiciels dans WordPress aussi bien que de sujets tangentiels.

Jusqu'à lors, téléchargez le code source disponible, comparez-le à ce que nous avons ici, et assurez-vous de l'exécuter sur votre machine locale afin que vous soyez familier avec ce qui reste à mesure que nous passons à la partie finale de cette série.

Ressources

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.