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

Impouver les techniques d'Ajax pour Wordpress: La Programmation Orientée Objet

by
Difficulty:IntermediateLength:LongLanguages:

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

Dans notre article précedent de notre serie d'articles, on avait revisité le sujet sur travailler avec Ajax en Wordpress. Ultimement, notre le but c'est d'improuver sur des series precedentes qui ont été publiées sur le site y'a des années.

Pour reiterer, ce ne sont pas les techniques sur les series originales qui n'etaient pas bonnes, mais il se trouve que les logiciels changent avec le temps donc il est toujours bon de revisiter les concepts qui ont ete couvert y'a des annees et essayer de les renouveller par quelque chose qui est plus actuelle et plus resilliant pour nos efforts dans le developpement.

Un rappel de l'article precedent, on avait jete un coup d'oeil sur les commentaires suivants des series precedentes:

On va donne un brief appercus de ce qu'est Ajax, comme il fonctionne, comment installer en front, et comprendre le systemes de hook avec Worpress. Nous allons aussi creer un petit projet qui va mettre la theorie en practique. De meme, nous allons parcourir le code source et on va se rassurer que c'est disponible sur GitHub.

Et dans cet article on avait revise quelques methodes avancees pour incorporer l'API Ajax de WordPress dans nos projets utilisant la programmation procedurale. Dans cet article, on va reprendre le code qu'on avait ecrit dans la premiere partie de ces series et le readapter sous un approche Oriente objet.

Ultimement l'objectif n'est pas de mettre en scene une situation selon laquelle un paradime doit etre remplacer par un autre; au contraire, mais nous voulons montrer comment atteindre le meme objectif independement de l'approche utilisee dans notre development de plugins.

Planifier le Plugin

Avant de commencer la refactorisation du code, nous devons examiner la manière dont nous allons disposer les différents fichiers. Après tout, une partie du processus de démarrage d'un nouveau projet - ou même de sauter dans un ancien projet - consiste à planifier le travail à effectuer.

Pour ce plugin particulier, nous aurons besoin des éléments suivants:

  • un fichier d'amorçage responsable de l'initialisation de la classe principale et du démarrage du plugin
  • une classe responsable du chargement des dépendances telles que JavaScript
  • une classe qui sert de classe de plugin principale

Comme vous pouvez le constater, nous n’avons pas beaucoup à faire avec le plugin. Nous allons également réorganiser certains fichiers pour obtenir une structure de répertoires cohérente et nous veillerons à documenter correctement tout le code afin qu'il soit conforme aux normes de codage WordPress.

Cela dit, commençons.

Organiser les fichiers

Avant de commencer à écrire du code, allons de l'avant et procédons comme suit:

  1. Créez un répertoire assets .
  2. Créez un répertoire js qui sera situé dans le répertoire assets.
  3. Déplacez frontend.js dans le répertoire js.
The assets directory

La raison en est que nous passons à un style de programmation orienté objet. Cela comprend en partie l'organisation de nos fichiers de manière à ce qu'ils respectent les conventions souvent considérées comme des packages.

Dans notre cas, le répertoire assets inclut tout ce qui est nécessaire pour que le programme soit exécuté. Pour certains plug-ins, il peut s'agir de JavaScript, CSS, d'images, de polices, etc. Dans ce cas, nous avons un seul fichier JavaScript.

Le chargeur de dépendance

Ensuite, nous devons introduire une classe qui sera chargée de charger les dépendances pour notre projet. Pour ce plugin particulier, la seule dépendance que nous avons est le fichier JavaScript que nous venons de placer dans le répertoire assets.

Une partie de la programmation orientée objet consiste à s’assurer que chaque classe a un objectif spécifique. Dans ce cas, la classe que nous sommes sur le point d'introduire sera chargée de charger le code JavaScript à l'aide de l'API WordPress.

Commençons par créer la structure de base de la classe:

Ensuite, nous allons ajouter une méthode qui sera responsable de la mise en file d'attente du JavaScript conformément à l'API WordPress.

Après cela, nous devons prendre les fonctions responsables du traitement des demandes Ajax et de la fourniture des réponses, puis les ajouter à la classe. Comme ils seront dans le contexte d'une classe, nous devons ajouter une nouvelle fonction qui les enregistrera avec WordPress.

Nous allons créer une fonction setup_ajax_handlers. Cela ressemble à ceci:

Ensuite, nous devons déplacer les fonctions dans cette classe. Notez que les fonctions initialement préfixées par _sa ne sont plus marquées comme telles. Comme ils sont dans le contexte de la classe, nous pouvons supprimer le préfixe et également le trait de soulignement en faveur du mot clé private.

Ensuite, nous enregistrerons ce fichier dans un répertoire includes à la racine du répertoire du plugin. Le répertoire includes est souvent l'emplacement du code utilisé dans un projet. On pourrait en dire plus sur ce répertoire en particulier, mais c'est le contenu d'un post plus long.

La version finale de cette classe devrait ressembler à ceci:

La classe principale

Nous sommes maintenant prêts à écrire la classe principale du plugin. Cette classe particulière résidera à la racine du répertoire du plugin et sa structure de base ressemblera à ceci:

Ensuite, nous ajouterons quelques propriétés que nous définirons lors de l’instanciation de la classe:

Après cela, nous allons créer un constructeur et une fonction d’initialisation qui seront utilisés pour mettre le plugin en mouvement:

Dans le code ci-dessus, le constructeur définit les propriétés et instancie les dépendances nécessaires à l'activation du plug-in.

Lorsque initialize est appelé, le plug-in démarre et appelle la méthode initialize de la classe de dépendance créée précédemment dans ce didacticiel.

Le bootstrap

La dernière chose que nous devons faire est de prendre le fichier principal que nous avons, d'utiliser la fonctionnalité include de PHP et de vous assurer qu'il est conscient des fichiers PHP nécessaires que nous avons.

Après cela, nous devons définir une méthode qui initialisera le fichier de plugin principal et mettra tout en mouvement.

La version finale du fichier d'amorçage devrait ressembler à ceci:

Tout d'abord, le fichier vérifie si son accès est direct en vérifiant si une constante WordPress a été définie. Sinon, l'exécution s'arrête.

Après cela, il inclut les différentes classes que nous avons créées à travers ce tutoriel. Enfin, il définit une fonction appelée lorsque WordPress charge le plug-in qui le démarre et le met en mouvement.

Conclusion

Et cela nous amène à la fin de cette série en deux parties. J'espère que vous avez non seulement appris quelques-unes des meilleures pratiques pour intégrer Ajax à vos projets WordPress, mais également un peu plus sur la documentation de code procédural et orienté objet, ainsi que sur la différence entre la quantité de code mis en forme.

Dans un prochain article, je pourrai revenir sur certains des concepts orientés objet qui ont été introduits ici et les décrire beaucoup plus en détail. Pour l'instant, cependant, jetez un œil au plugin en utilisant le lien GitHub dans la barre latérale de cette page.

N'oubliez pas que vous pouvez consulter 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 développement de logiciels dans le contexte de WordPress.

Comme d'habitude, n'hésitez pas à laisser des questions ou des commentaires dans le flux ci-dessous, et j'essaierai de répondre à chacun d'eux.

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.