Techniques Ajax améliorées pour WordPress Programmation orientée objet

Dans le post précédent de cette série, nous avons revisité le sujet du travail avec Ajax dans WordPress. En fin de compte, l’objectif est d’améliorer la série précédente qui s’était déroulée sur le site il ya quelques années..

Pour réitérer, ce n’est pas que les techniques enseignées dans la série originale étaient erronées, mais que les logiciels évoluent avec le temps. Il est donc toujours bon de revenir sur les concepts abordés il ya quelques années et d’essayer de les mettre à jour pour les rendre plus actuels et plus résistants. pour nos efforts de développement.

Rappelons-nous du billet précédent, nous avons examiné le commentaire suivant de la série originale:

Nous allons donner un très bref aperçu de ce qu'est Ajax, de son fonctionnement, de sa configuration, et de la compréhension des points faibles fournis par WordPress. Nous allons également construire un petit projet qui met la théorie en pratique. Nous allons parcourir le code source et nous allons également nous assurer qu'il est disponible sur GitHub, ainsi.

Et dans cet article, nous avons passé en revue des moyens avancés d’intégrer l’API WordPress Ajax dans nos projets à l’aide de la programmation procédurale. Dans cet article, nous allons prendre le code que nous avons écrit dans la première partie de cette série et le refactoriser afin qu'il utilise une approche orientée objet..

En fin de compte, l’objectif n’est pas de démontrer pourquoi un paradigme devrait être utilisé au détriment d’un autre; au lieu de cela, c'est pour montrer comment nous pouvons obtenir la même fonctionnalité quelle que soit l'approche que vous choisissez lors de la construction de vos plugins.

Planifier le plugin

Avant de commencer la refactorisation du code, nous devons prendre en compte les éléments suivants: Comment nous allons mettre en forme 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 vieux 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 voir, il n'y a pas aussi beaucoup que nous devons faire pour le plugin. Nous allons également réorganiser certains fichiers pour qu'ils aient 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:

Créé un les atouts annuaire.
Créer un js répertoire qui sera situé dans le les atouts annuaire.
Bouge toi frontend.js au js annuaire.

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 les atouts Le répertoire inclut toutes les choses nécessaires 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. les atouts annuaire.

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 responsable du chargement du 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.
enqueue_scripts ();  / ** * Met en file d'attente les scripts front-end pour obtenir les informations de l'utilisateur actuel * via Ajax. * * @access private * * @since 1.0.0 * / private function enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)). 'assets / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  
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 un setup_ajax_handlers une fonction. 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és comme tels. Comme ils sont dans le contexte de la classe, nous pouvons supprimer le préfixe et également le trait de soulignement en faveur de la privé mot-clé.
user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  fonction privée user_is_logged_in ($ user_id) $ is_logged_in = true; if (0 === $ user_id) wp_send_json_error (new WP_Error ('-2', 'Le visiteur n'est actuellement pas connecté au site.')); $ is_logged_in = false;  return $ is_logged_in;  fonction privée user_exists ($ user_id) $ user_exists = true; if (false === get_user_by ('id', $ user_id)) wp_send_json_error (new WP_Error ('-1', '-1', 'Aucun utilisateur n'a été trouvé avec l'ID spécifié ['. $ user_id. ']')); $ user_exists = false;  return $ user_exists; 
Ensuite, nous allons enregistrer ce fichier dans un comprend répertoire à la racine du répertoire du plugin. le comprend répertoire est souvent le 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:
enqueue_scripts ();  / ** * Met en file d'attente les scripts front-end pour obtenir les informations de l'utilisateur actuel * via Ajax. * * @access private * * @since 1.0.0 * / private function enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)). 'assets / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  / ** * Enregistre les fonctions de rappel chargées de fournir une réponse * à la configuration des demandes Ajax dans le reste du plug-in. * * @since 1.0.0 * / public function setup_ajax_handlers () add_action ('wp_ajax_get_current_user_info', array ($ this, 'get_current_user_info')); add_action ('wp_ajax_nopriv_get_current_user_info', array ($ this, 'get_current_user_info'));  / ** * Récupère les informations sur l'utilisateur actuellement connecté au site. * * Cette fonction est destinée à être appelée via le côté client du côté * public du site. * * @since 1.0.0 * / public function get_current_user_info () $ user_id = get_current_user_id (); if ($ this-> user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  / ** * Détermine si un utilisateur est connecté au site à l'aide de l'ID utilisateur spécifié. Si ce n'est pas le cas *, le code d'erreur et le message suivants seront renvoyés au client: * * -2: le visiteur n'est actuellement pas connecté au site. * * @access private * @since 1.0.0 * * @param int $ id_utilisateur Identifiant de l'utilisateur actuel. * * @return bool $ is_logged_in Indique si l'utilisateur actuel est connecté ou non. * / private function user_is_logged_in ($ user_id) $ is_logged_in = true; if (0 === $ user_id) wp_send_json_error (new WP_Error ('-2', 'Le visiteur n'est actuellement pas connecté au site.')); $ is_logged_in = false;  return $ is_logged_in;  / ** * Détermine si un utilisateur avec l'ID spécifié existe dans la base de données WordPress. Dans le cas contraire *, le code d'erreur et le message suivants seront renvoyés au client: * * -1: aucun utilisateur n'a été trouvé avec l'ID spécifié [$ id_utilisateur]. * * @access private * @since 1.0.0 * * @param int $ id_utilisateur Identifiant de l'utilisateur actuel. * * @return bool $ user_exists Indique si l'utilisateur spécifié existe ou non. * / fonction privée user_exists ($ user_id) $ user_exists = true; if (false === get_user_by ('id', $ user_id)) wp_send_json_error (new WP_Error ('-1', '-1', 'Aucun utilisateur n'a été trouvé avec l'ID spécifié ['. $ user_id. ']')); $ user_exists = false;  return $ user_exists;  
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 la structure de base de la classe 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:
version = '1.0.0'; $ this-> loader = new Dependency_Loader ();  / ** * Initialise ce plugin et le chargeur de dépendances pour inclure * le JavaScript nécessaire au fonctionnement du plugin. * * @access private * @since 1.0.0 * / fonction publique initialize () $ this-> loader-> initialize (); $ this-> loader-> setup_ajax_handlers ();  
Dans le code ci-dessus, le constructeur définit les propriétés et instancie les dépendances nécessaires pour activer le plugin..
Quand initialiser est appelé, le plugin va démarrer et il appellera la méthode initialize sur la classe de dépendance créée précédemment dans ce tutoriel..
Le bootstrap
La dernière chose que nous devons faire est de prendre le fichier principal que nous avons, utilisez PHP comprendre fonctionnalité, et assurez-vous qu'il est au courant 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..
initialiser(); 
La version finale du fichier d'amorçage devrait ressembler à ceci:
initialiser();  acme_start_plugin (); 
Tout d’abord, le fichier vérifie s’il est directement accessible 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 démarre le plug-in 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 d'intégration de Ajax dans vos projets WordPress, mais également un peu plus sur la documentation de code procédural et orienté objet, ainsi que sur la différence de 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 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 développement logiciel dans le contexte de WordPress..
Comme d'habitude, n'hésitez pas à laisser des questions ou des commentaires dans le flux ci-dessous, et je m'efforcerai de répondre à chacun d'entre eux.. 



		
			
	   
	




Code