Un tutoriel sur l`utilisation ajax dans wordpress

AJAX est une technologie web remarquable qui nous déplacé au-delà du simple «cliquez sur le lien, aller vers une autre page

" structure de Internet 1.0.

AJAX, ce qui signifie Asynchronous javascript et XML, permet aux sites Web de façon dynamique et contenu aller chercher d`affichage sans que l`utilisateur se éloignant de la page en cours. Cela conduit à une expérience utilisateur beaucoup plus interactif, et peut accélérer les choses aussi, car n`a pas besoin d`être chargé une nouvelle page Web entière. Heureusement, en utilisant AJAX est assez facile à faire à partir de l`environnement WordPress, et aujourd`hui, je vais vous montrer comment.

Ce tutoriel Ajax devrait être considéré comme assez avancé, et se poursuit depuis la dernière fois où nous avons appris Comment utiliser les tables de base de données personnalisés à partir d`un modèle de WordPress - dans mon exemple, une simple table existante des données clients a été utilisé. En ce qui concerne l`insertion de choses dans la base de données que nous allons faire usage d`un peu de magie au sein de WordPress AJAX. Utilisation des tables de base de données personnalisées dans WordPressUtilisation des tables de base de données personnalisées dans WordPressUne analyse rapide du meilleur de la page WordPress Plugins révélera quelques-unes des nombreuses façons uniques et de niche que vous pouvez faire votre travail plus difficile blog. Que faire si vous avez déjà une base de données ...Lire la suite

Tout le code dans le tutoriel d`aujourd`hui sera donc le référencement ce que nous avons écrit la dernière fois, mais si vous êtes à la recherche pour savoir comment faire AJAX dans WordPress, alors il est tout aussi pertinent.

Pourquoi utiliser AJAX?

L`utilisation la plus courante d`AJAX est lié à des formes - vérifier si un nom d`utilisateur est prise, ou peuplant le reste du formulaire avec des questions différentes en fonction d`une réponse particulière que vous donnez. Fondamentalement cependant, vous utilisez AJAX chaque fois que vous voulez un événement (comme un quelque chose en cliquant sur l`utilisateur, ou en tapant quelque chose) lié à un du côté serveur une action qui se produit dans la Contexte.

Video: How to implement jquery ajax in wordpress

Nous allons l`utiliser pour ajouter de nouvelles entrées à notre importante table de base de données clients sur mesure, mais vous pouvez probablement trouver quelque chose de plus excitant.

Vue d`ensemble Comment faire pour utiliser AJAX dans WordPress

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

Création du formulaire

Commençons par la création d`une forme simple sur le front-end pour entrer dans les détails du nouveau client. Il est rien de compliqué, il suffit de remplacer la partie principale de votre modèle personnalisé avec ce code que nous avons commencé la semaine dernière, autour de laquelle le chèque is_user_logged_in () se produit:

Video: jQuery Ajax Tutorial for WordPress

if (is_user_logged_in ()) :? gt;

La seule chose qui pourrait paraître étrange pour vous est qu`il ya l`utilisation d`un champ caché appelé action - il contient le nom de la fonction nous déclenchons via AJAX.

Le récepteur PHP

Ensuite, ouvrir functions.php et ajoutez la ligne suivante pour assurer jQuery est en cours de chargement sur votre site:

wp_enqueue_script ( `jquery`) -

La structure de base pour la rédaction d`un appel AJAX est la suivante:

function myFunction () {// faire somethingdie () -} add_action ( `wp_ajax_myFunction`, `maFonction`) - add_action ( `wp_ajax_nopriv_myFunction`, `maFonction`) -

Ces deux dernières lignes sont des crochets d`action qui disent WordPress «J`ai une fonction appelée myFunction, et je veux que vous écoutiez pour parce qu`il va être appelé par l`interface AJAX » - le premier est pour les utilisateurs de niveau d`administration, alors 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 spéciale des clients, que je vais vous expliquer brièvement:

wp_enqueue_script ( `jquery`) - Fonction addCustomer () {wpdb- global $ $ name = $ _POST [ `nom`] - téléphone $ = $ _POST [ `téléphone`] - $ email = $ _POST [ `email`] - $ address = $ _POST [ `adresse`] - if ($ wpdb-gt; insérer ( `clients`, array ( `name` = gt; $ name, `email` = gt; $ email, `adresse` = gt; $ adresse, `téléphone` = gt; téléphone $)) === FAUX) {echo "Erreur"-} else {echo "Client `". $ Name. "`Ajouté avec succès, ID de ligne est ". Wpdb-$ gt;} insert_id- die () -} add_action ( `wp_ajax_addCustomer`, `addCustomer`) - add_action ( `wp_ajax_nopriv_addCustomer`, `addCustomer`) - // pas vraiment besoin

Tout comme avant, nous déclarer la wpdb global $ pour nous donner un accès direct à la base de données. Nous sommes alors saisir la POSTER des variables qui contiennent les données de formulaire. Entouré d`une instruction IF est la fonction wpdb-$ gt; insérer, qui est ce que nous utilisons pour insérer des données dans notre table. Étant donné que WordPress fournit des fonctions spécifiques pour l`insertion des postes réguliers et méta-données, ce wpdb-$ gt; insérer méthode est généralement utilisée uniquement pour les tableaux personnalisés. Vous pouvez en lire davantage sur le Codex, mais au fond, il prend le nom de la table à insérer dans, suivi d`un tableau de paires colonne / valeur.

le === FAUX vérifie si la fonction d`insertion a échoué, et si oui, il affiche «Erreur« . Sinon, nous sommes en train d`envoyer un message à l`utilisateur X Client a été ajouté, et faisant écho à la wpdb-$ gt; insert_id variable, qui indique la la variable auto-incrément de la dernière opération d`insertion qui est arrivé (En supposant que vous avez défini un champ d`incrémente automatiquement, comme une pièce d`identité).

Finalement, mourir() remplacera la valeur par défaut die (0) fourni par WordPress - ce n`est pas indispensable en tant que telle, mais sans elle, vous allez obtenir 0 ajouté à la fin de tout ce que vous renvoyer au modèle.

le javascript

La dernière étape est le bit magique - le javascript réel qui lancera l`appel AJAX. Vous remarquerez que dans la forme, nous avons ajouté plus tôt, le champ d`action a été laissée en blanc. En effet, nous allons avec notre redéfinissant cette appel AJAX. La manière générale de le faire serait la suivante:

jQuery.ajax ({type:"POSTER", Url: "/wp-admin/admin-ajax.php", // notre gestionnaire de PHP filedata: "myDataString", Le succès: function (résultats) {// faire quelque chose avec les données renvoyées})} -

C`est la structure de base de l`appel AJAX que nous allons utiliser, mais certainement pas la seule façon que vous pouvez le faire. Vous pourriez vous demander pourquoi nous faisons référence à wp-admin ici, même si ce sera sur l`extrémité avant du site. Ceci est juste où la gestionnaire AJAX réside, si vous l`utilisez pour des fonctions secondaires avant ou admin - confusion, je sais. Collez le code suivant directement dans le modèle client:

Dans la première ligne, nous nous joignons notre fonction ajaxSubmit à la forme que nous avons fait plus tôt - alors quand l`utilisateur clique soumettre, il passe par notre fonction AJAX spéciale. Sans cela, notre formulaire ne fera rien. Dans notre ajaxSubmit () fonction, la première chose que nous faisons est de sérialisation () la forme. Cette juste prend toutes les valeurs de forme, et les transforme en une longue chaîne que notre PHP analysera plus tard. Si tout fonctionne bien, nous allons mettre les données renvoyées dans la DIV avec l`identifiant de commentaires.

Video: Ajax Demonstration in the WordPress Admin

C`est tout. Sauvez le tout, rafraîchir et essayer de soumettre des données de formulaire. Si vous avez des problèmes, vous pouvez voir le code complet du modèle de page ici (Basé sur la valeur par défaut de vingt à onze thème), et le code à ajouter à functions.php ici (Ne pas remplacer, il suffit d`ajouter ceci sur la fin).

Les choses à garder à l`esprit

Sécurité: Ce code n`est pas prêt pour la production et aux fins d`apprentissage seulement. Nous avons omis un point essentiel, et c`est l`utilisation d`un wp-nonce - un code unique généré par WordPress qui assure la requête AJAX est que vient d`où il a été intended- un passe-partout si vous voulez. Sans cela, votre fonction pourrait effectivement être exploitée pour insérer des données aléatoires. attaques par injection SQL ne sont pas un problème cependant, parce que nous par la déroute des requêtes WordPress wpdb-$ gt; insérer fonction - WordPress nettoie toutes les entrées pour vous et les rend en toute sécurité.

Video: Ajax пагинация в WordPress с сохранением ссылок

Mise à jour de la table des clients: En ce moment, nous envoyons de nouveau un message de confirmation, mais la table des clients ne soit pas mis à jour - vous ne verrez les entrées supplémentaires si vous actualisez la page (Ce qui contrecarre type de but de faire tout cela via AJAX). Voyez si vous pouvez faire une nouvelle fonction AJAX qui peut dynamiquement la sortie de la table.

Validation d`entrée: Parce qu`il n`y a pas de validation passe avec les données de formulaire, il est en fait possible d`ajouter des entrées vides ou plusieurs entrées si vous appuyez trop de fois. Une validation d`entrée sur les champs de formulaire, les effacer une fois rempli, ainsi SQL pour vérifier le numéro de courriel ou par téléphone qui n`existe pas déjà dans la base de données serait utile.

C`est de moi cette semaine - si vous avez eu alors aucun problème suivant ce tutoriel ne hésitez pas à entrer en contact via les commentaires et je ferai de mon mieux pour aider vous- ou si vous essayez de personnaliser ce d`une manière , ne hésitez pas à échanger des idées sur moi. J`espère que cela va vraiment montrer à quel point vous pouvez le faire à partir de WordPress simplement en combinant un peu javascript, PHP et MySQL. Comme toujours, ne pas oublier de consulter tous nos autres articles WordPress.