Comment AJAX-ify vos commentaires WordPress

Par défaut, le système de commentaires WordPress est lamentablement inadéquat - l’un de mes principaux objectifs étant que pour poster un commentaire, la page doit être actualisée. Vous pouvez passer à un système tiers tel que Livefyre ou Disqus. 3 façons d'encourager les commentaires sur votre blog Wordpress 3 façons d'encourager les commentaires sur votre blog Wordpress L'obtention de commentaires sur votre blog est un excellent facteur de motivation pour vous permettre de continuer sur de longues distances. blogging. Savoir que quelqu'un est sur le terrain, apprécier votre travail, c'est bien, mais pas…, mais si vous préférez tout garder à l'intérieur ou faire un autre type de personnalisation, poster des commentaires par AJAX est le moins que vous puissiez faire..

Vous pouvez voir un exemple de ce travail ici sur Se servir de - lorsque vous postez un commentaire, vous ne quittez pas la page. Nous l'envoyons via un appel AJAX, puis un rapide “Merci” note en arrière. Continuez à lire pour un tutoriel complet.

Pour utiliser des fonctions non-WordPress comme AJAX, veuillez vous reporter à mon précédent tutoriel. Un tutoriel sur l'utilisation d'AJAX dans WordPress Un tutoriel sur l'utilisation d'AJAX dans WordPress AJAX est une technologie Web remarquable qui “cliquez sur le lien, allez à une autre page” structure de l'Internet 1.0. Il permet aux sites Web d'extraire et d'afficher du contenu de manière dynamique sans l'utilisateur… et de consulter tous les articles relatifs à WordPress..

introduction

Il faut deux parties distinctes pour que les commentaires AJAX WordPress fonctionnent, nous allons donc expliquer ces premières pour vous donner un aperçu de l'ensemble du processus..

• Du Javascript sur la page qui intercepte l’utilisateur en cliquant sur le bouton Ajouter un commentaire bouton de soumission, qui en fait également un appel AJAX et gère également la réponse.
• Un gestionnaire PHP qui s'accroche à l'action comment_post

Javascript

Tout d’abord, jQuery devra faire l’objet de cette opération, comme le font actuellement tout ce qui est passionnant dans le développement Web. Si vous ne savez pas s'il est déjà chargé, allez-y, passez au code Javascript et essayez-le quand même - si vous avez Firebug et que le journal de la console indique “jQuery n'est pas défini” lorsque vous actualisez la page, ajoutez cette ligne à votre fichier functions.php pour vous assurer qu'elle est chargée.

fonction google_jquery () if (! is_admin ()) wp_deregister_script ('jquery'); wp_register_script ('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), false); wp_enqueue_script ('jquery');  add_action ('wp_print_scripts', 'google_jquery');

Notez que c'est une manière complexe de charger jQuery car nous utiliserons la dernière version de CDN de Google, qui est plus rapide et plus à jour que celle incluse par défaut avec WordPress - il serait donc judicieux de l'ajouter quand même. même si jQuery est déjà chargé ailleurs.

Maintenant, pour le Javascript qui gérera le formulaire de commentaire, nous avons quelques options. Le plus simple est de coller le code dans votre single.php modèle - en supposant que les commentaires ne soient pas activés pour les pages également.

Alternativement, vous pouvez coller dans un .js fichier utilisé par votre thème, ou créer un nouveau .js fichier dans votre répertoire de thème. Si vous choisissez de le placer dans votre propre fichier .js séparé et de ne pas le coller directement dans votre modèle de thème, veillez à ajouter les lignes suivantes à votre functions.php, et notez que le nom de fichier est supposé être ajaxcomments.js à la racine de votre dossier de thèmes.

add_action ('init', 'ajaxcomments_load_js', 10); fonction ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Voici le Javascript pour gérer le formulaire de commentaire (ou vous pouvez le voir sur pastebin):

// Système de commentaires AJAXified jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // trouve le formulaire de commentaire commentform.prepend (''); // ajoute un panneau d'information avant le formulaire à fournir des commentaires ou des erreurs var statusdiv = $ ('# comment-status'); // définit l'infopanel commentform.submit (function () // sérialise et stocke les données de formulaire dans une variable var formdata = commentform.serialize ( ); // Ajouter un message d'état statusdiv.html ('
En traitement… 
'); // Extraire l'URL d'action de commentform var formurl = commentform.attr ('action'); // Formulaire avec les données $ .ajax (type: 'post', url: formurl, données: formdata, erreur: fonction (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Vous avez peut-être laissé l'un des champs vide ou vous postez trop rapidement
'); , success: function (data, textStatus) if (data == "success") statusdiv.html ('
Merci pour votre commentaire. Nous apprécions votre réponse.
'); else statusdiv.html ('
S'il vous plaît attendez un moment avant de poster votre prochain commentaire
'); commentform.find ('textarea [name = comment]'). val (");); return false;););

Pour décomposer le code, nous créons d’abord des objets jQuery à partir du formulaire de commentaire (qui suppose que votre formulaire de commentaire a l'identifiant CSS par défaut de “commentform”), et l'ajout d'un panneau d'information vide au-dessus de celui-ci que nous utiliserons plus tard pour afficher des messages à l'utilisateur sur l'avancement de la publication de son commentaire.

commentform.submit est utilisé pour "détourner" le bouton d'envoi. Nous sérialisons ensuite les données de formulaire (les transformons en une longue ligne de données), donnons une “En traitement” message à l’utilisateur dans ce panneau d’informations et continuez avec une demande AJAX. La demande AJAX est un format standard, mais n'entre pas vraiment dans le cadre de ce tutoriel aujourd'hui - il suffit de dire qu'elle réagit en cas de succès ou d'erreur, et supprime le formulaire s'il réussit à éviter que le même commentaire ne soit posté deux fois par inadvertance. Ajustez les messages et les erreurs selon vos besoins, ou ajoutez un style approprié à la feuille de style de votre thème si vous souhaitez que les messages d'erreur se démarquent. La dernière ligne - retourne faux - empêche le formulaire de remplir son action par défaut.

Gestionnaire PHP

Enfin, nous avons besoin de quelque chose pour empêcher l’actualisation de la page et renvoyer la réponse appropriée à l’utilisateur, ainsi que pour informer l’administrateur si le commentaire doit être modéré ou informer l’auteur d’un nouveau commentaire. Pour cela, nous accrochons dans le commentaire_post action qui se produit juste après son ajout à la base de données et détecte s’il s’agissait d’une requête AJAX. Ajoutez ceci à votre functions.php fichier:

(Aussi disponible à cette pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // If Si AJAX Demande ($ comment_status) case '0': // informe le modérateur du commentaire non approuvé wp_notify_moderator ($ comment_ID); case '1': // Commentaire approuvé echo "success"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); Pause; défaut: echo "erreur";  sortie; 

Problèmes ponctuels

Si la page actualise toujours au lieu d'afficher via AJAX, c'est probablement l'un des deux problèmes. Un - vous pourriez ne pas avoir jQuery chargé. Installez Firebug Comment installer Firebug sur IE, Safari, Chrome & Opera Comment installer Firebug sur IE, Safari, Chrome & Opera ou activez les outils de développement Chrome et vérifiez si le journal de la console ne contient pas d'erreur. Si jQuery n’est pas trouvé, retournez à la section JavaScript et lisez le premier passage sur l’ajout de jQuery à votre thème. La deuxième possibilité est que votre thème fasse quelque chose de spécial au formulaire de commentaire et que son ID n’est plus “commentform”. Vérifiez le code source, puis ajustez le var commentform = $ ('# commentform') la ligne dans le JavaScript pour être l'ID correct - cela pourrait fonctionner.

Comme toujours, je suis là pour aider autant que je peux, mais merci de poster des liens vers un exemple d'URL où je peux jeter un coup d'œil rapide.