Un tutoriel sur l'utilisation d'AJAX dans WordPress

AJAX est une technologie Web remarquable qui nous a permis d'aller au-delà du simple “cliquez sur le lien, allez à une autre page” structure de Internet 1.0.

AJAX, qui signifie Javascript et XML asynchrones, permet aux sites Web d'extraire et d'afficher du contenu de manière dynamique sans que l'utilisateur ne s'éloigne de la page en cours. Cela conduit à une expérience utilisateur beaucoup plus interactive et peut également accélérer les choses, car il n'est pas nécessaire de charger une nouvelle page Web. Heureusement, utiliser AJAX est assez facile à faire depuis l’environnement WordPress, et aujourd’hui, je vais vous montrer comment.

Ce didacticiel Ajax doit être considéré comme assez avancé et continue depuis la dernière fois où nous avons appris à utiliser des tables de base de données personnalisées. Utilisation des tables de base de données personnalisées dans WordPress Utilisation des tables de base de données personnalisées dans WordPress Voici quelques-unes des nombreuses façons uniques et spécialisées de faire en sorte que votre blog fonctionne plus fort. Que faire si vous avez déjà une base de données de… Lire la suite dans un modèle WordPress - dans mon exemple, un simple tableau existant de données clients a été utilisé. Cependant, lorsqu'il s'agira d'insérer des éléments dans la base de données, nous allons utiliser un peu de magie AJAX dans WordPress..

Tout le code du didacticiel d’aujourd’hui fera donc référence à ce que nous avons écrit la dernière fois, mais si vous cherchez simplement comment utiliser AJAX dans WordPress, c’est tout aussi pertinent..

Pourquoi utiliser AJAX?

L'utilisation la plus courante d'AJAX est liée aux formulaires - vérifier si un nom d'utilisateur est utilisé, ou renseigner le reste du formulaire avec des questions différentes en fonction de la réponse que vous avez donnée. Fondamentalement, vous utilisez AJAX chaque fois que vous souhaitez un événement (comme un utilisateur qui clique ou tape quelque chose) attaché à un du côté serveur action qui se produit dans le Contexte.

Nous allons l'utiliser pour ajouter de nouvelles entrées à notre importante table de base de données client personnalisée, mais vous pouvez probablement trouver quelque chose de plus excitant..

Présentation de l'utilisation de AJAX dans WordPress

1. Modifiez votre modèle personnalisé pour inclure un formulaire ou un événement javascript qui soumettra des données via jQuery AJAX à admin-ajax.php y compris toutes les données de poste que vous voulez transmettre. Assurez-vous que jQuery est en cours de chargement.
2. Définir une fonction dans votre thème function.php; lit les variables de publication et renvoie quelque chose à l'utilisateur si vous le souhaitez.
3. Ajouter un Crochet d'action AJAX pour votre fonction.

Créer le formulaire

Commençons par créer un simple formulaire sur le front-end pour saisir les nouveaux détails du client. Ce n'est pas compliqué, il suffit de remplacer la partie principale de votre modèle personnalisé par ce code que nous avons commencé la semaine dernière, autour duquel la vérification is_user_logged_in () a lieu:

if (is_user_logged_in ()):?> 
 Prénom:  Email:  Téléphone:  Adresse:    
 

 
 

La seule chose qui pourrait vous paraître étrange est l’utilisation d’un champ de saisie caché appelé action - cela contient le nom de la fonction que nous allons déclencher via AJAX.

Le récepteur PHP

Ensuite, ouvrez functions.php et ajoutez la ligne suivante pour vous assurer que jQuery est chargé sur votre site:

wp_enqueue_script ('jquery');

La structure de base pour l'écriture d'un appel AJAX est la suivante:

function myFunction () // faire quelque chose die ();  add_action ('wp_ajax_myFunction', 'maFonction'); add_action ('wp_ajax_nopriv_myFunction', 'maFonction');

Ces deux dernières lignes sont des crochets d’action qui indiquent à WordPress “J'ai une fonction appelée myFunction, et je veux que vous l'écoutiez parce qu'elle sera appelée via l'interface AJAX” - le premier est destiné aux utilisateurs de niveau administrateur, tandis que wp_ajax_nopriv_ est destiné aux utilisateurs qui ne sont pas connectés. Voici le code complet pour functions.php que nous allons utiliser pour insérer des données dans notre table des clients spéciaux, ce que j'expliquerai tout à l'heure:

wp_enqueue_script ('jquery'); fonction addCustomer () global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ('clients', tableau ('nom' => $ nom, 'email' => $ email, 'adresse' => $ adresse, 'phone' => $ phone)) === FALSE) echo "Erreur";  else echo "Client '". $ name. "'ajouté avec succès, l'ID de la ligne est". $ wpdb-> insert_id;  mourir();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // pas vraiment besoin

Comme avant, nous déclarons le $ wpdb global pour nous donner un accès direct à la base de données. Nous saisissons ensuite le POSTER les variables qui contiennent les données de formulaire. Entouré d'une instruction IF, la fonction $ wpdb-> insert, c'est ce que nous utilisons pour insérer des données dans notre table. WordPress fournissant des fonctions spécifiques pour l’insertion de posts réguliers et de métadonnées, cette $ wpdb-> insert Cette méthode est généralement utilisée uniquement pour les tables personnalisées. Vous pouvez en lire plus à ce sujet sur le Codex, mais en gros, le nom de la table à insérer est suivi du caractère tableau de paires colonne / valeur.

le === FAUX vérifie si la fonction d'insertion a échoué et, dans l'affirmative, elle génère “Erreur“. Sinon, nous envoyons simplement un message à l'utilisateur pour lui indiquer que Client X a été ajouté, et en écho à la $ wpdb-> insert_id variable, qui indique la variable auto-incrémentée de la dernière opération d'insertion qui s'est produite (en supposant que vous ayez défini un champ à incrémentation automatique, comme un identifiant).

finalement, mourir() remplacera la valeur par défaut mourir (0) fourni par WordPress - ce n'est pas essentiel en tant que tel, mais sans cela, vous obtiendrez 0 ajouté à la fin de tout ce que vous renvoyez au modèle.

Le javascript

La dernière étape est le bit magique - le Javascript qui initiera l’appel AJAX. Vous remarquerez que dans le formulaire que nous avons ajouté précédemment, le champ d'action était laissé vide. C'est parce que nous allons éviter cela avec notre appel AJAX. La manière générale de faire ceci serait:

jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", // les données de notre fichier de gestionnaire PHP: "myDataString", success: function (résultats) // faire quelque chose avec données renvoyées);

C'est la structure de base de l'appel AJAX que nous allons utiliser, mais ce n'est certainement pas le seul moyen de le faire. Vous vous demandez peut-être pourquoi nous parlons de wp-admin ici, même si ce sera sur le front-end du site. C’est là que le Gestionnaire AJAX réside, que vous l’utilisiez pour des fonctions de face avant ou d’administrateur - déroutant, je sais. Collez le code suivant directement dans le modèle client:

Dans la première ligne, nous associons notre fonction ajaxSubmit au formulaire que nous avons créé précédemment. Ainsi, lorsque l'utilisateur clique sur Soumettre, il passe par notre fonction spéciale AJAX. Sans cela, notre formulaire ne fera rien. Dans notre ajaxSubmit () fonction, la première chose à faire est de sérialiser () le formulaire. Cela prend juste toutes les valeurs du formulaire et les transforme en une longue chaîne que notre PHP analysera plus tard. Si tout se passe bien, nous mettrons les données renvoyées dans la DIV avec l'identifiant du retour.

C'est tout. Sauvegardez tout, actualisez et essayez de soumettre des données de formulaire. Si vous rencontrez des problèmes, vous pouvez afficher le code complet du modèle de page ici. (basé sur le thème vingt-onze par défaut), et le code à ajouter à functions.php ici (ne pas remplacer, il suffit d'ajouter ceci à la fin).

Choses à garder à l'esprit

Sécurité: Ce code n'est pas prêt pour la production et est uniquement destiné à l'apprentissage. Nous avons laissé de côté un point important, à savoir l'utilisation d'un wp-nonce - un code unique généré par WordPress qui garantit que la demande AJAX ne provient que de l'endroit où elle était destinée; un mot de passe si vous voulez. Sans cela, votre fonction pourrait effectivement être exploitée pour insérer des données aléatoires. Les attaques par injection SQL ne posent pas de problème, car nous avons acheminé des requêtes via WordPress. $ wpdb-> insert fonction - WordPress nettoie toutes les entrées et les sécurise.

Mise à jour du tableau de clients: À l'heure actuelle, nous ne renvoyons qu'un message de confirmation, mais le tableau des clients n'est pas mis à jour - vous ne verrez que les entrées supplémentaires si vous actualisez la page. (quel genre de défaites le but de le faire tout via AJAX). Voyez si vous pouvez créer une nouvelle fonction AJAX capable de générer dynamiquement le tableau..

Validation d'entrée: comme il n’ya pas de validation des données du formulaire, il est en fait possible d’ajouter des entrées vides ou plusieurs entrées si vous appuyez trop de fois. Une validation des entrées sur les champs de formulaire, en les effaçant lorsque vous avez terminé, ainsi que SQL pour vérifier l'email ou le numéro de téléphone qui n'existe pas déjà dans la base de données serait utile.

C’est tout pour moi cette semaine. Si vous rencontrez des problèmes pour suivre ce didacticiel, n'hésitez pas à entrer en contact avec ces commentaires et je ferai de mon mieux pour vous aider; ou si vous essayez de personnaliser cela d'une certaine manière, n'hésitez pas à me faire part de vos idées. J'espère que cela montre vraiment tout ce que vous pouvez faire dans WordPress simplement en combinant un peu de JavaScript, PHP et MySQL. Comme toujours, n'oubliez pas de consulter tous nos autres articles WordPress.

Explorez plus de: Programmation, Outils pour les webmasters, Wordpress.