Comment Ajax-ifier Vos WordPress Commentaires

Comment Ajax-ifier Vos WordPress Commentaires
Par défaut, le système de commentaires WordPress est malheureusement insuffisant - une de mes plus grandes objections étant que pour poster un commentaire, la page doit rafraîchir. Vous pouvez passer à un système tiers comme Livefyre ou Disqus, mais si vous préférez garder tout dans la maison ou faire un autre type de personnalisation, puis de poster des commentaires en Ajax est le moins vous devriez faire.

Vous pouvez voir un exemple de ce travail ici sur 9tiny.com - lorsque vous postez un commentaire, vous ne serez pas quitter la page - à la place, nous l'enverrons à travers un appel AJAX, puis envoyer un rapide "merci" Note à . Lisez la suite pour un tutoriel complet.

Pour l'utilisation des fonctions non-WordPress comme AJAX, se il vous plaît lire mon tutoriel précédent, et assurez-vous de vérifier tous les articles WordPress liées.

Introduction

Il ya deux parties distinctes nécessaires pour obtenir AJAX WordPress commentaires travail, nous allons donc expliquer les premier à vous donner un aperçu de l'ensemble du processus.

  • Certains Javascript sur ​​la page qui intercepte l'utilisateur en cliquant sur ​​le bouton Ajouter un commentaire soumettre, qui en fait également un appel AJAX et gère aussi la réponse.
  • Un gestionnaire de PHP qui se connecte à l'action de comment_post

Javascript

Tout d'abord, cela va avoir besoin de jQuery , comme le fait n'importe quoi à distance passionnant dans le développement web de nos jours. Si vous n'êtes pas sûr si elle est déjà en cours de chargement, allez-y et sautez vers le bas pour le code Javascript et essayer de toute façon - si vous avez Firebug et le journal de la console indique "jQuery est indéfini» lorsque vous actualisez la page, puis ajoutez cette ligne à votre fichier functions.php pour assurer qu'il est en cours de chargement.

google_jquery fonction () {
si {wp_deregister_script ('jquery') (is_admin ()!); 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 ya un moyen de chargement jQuery complexe parce que nous allons utiliser la dernière version de Google CDN, qui est plus rapide et plus à jour que celui fourni par défaut avec WordPress - de sorte qu'il pourrait être une bonne idée d'ajouter que de toute façon même si jQuery est déjà chargé ailleurs.

Maintenant, pour le Javascript réelle qui va gérer le formulaire de commentaire, nous avons quelques options. Le plus simple est de simplement coller le code dans votre modèle single.php - en supposant que vous ne disposez pas de commentaires a été activée pour les pages ainsi.

Sinon, vous pouvez coller dans un fichier .js existant utilisé par votre thème, ou créer un nouveau fichier .js dans votre répertoire de thème. Si vous choisissez de mettre dans votre propre fichier .js séparés et pas coller directement dans votre modèle de thème, assurez-vous d'ajouter les lignes suivantes à votre functions.php, et noter le nom du fichier est supposé être ajaxcomments.js à la racine de votre dossier de thème.

add_action ('init', 'ajaxcomments_load_js', 10);
ajaxcomments_load_js de fonction () {
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 ):

<Script type = "text / javascript">

// Système de commentaires AJAXified
jQuery («document»). prêt (function ($) {
var CommentForm = $ ('# CommentForm'); // Trouver le formulaire de commentaire
commentform.prepend ('<div id = "comment-statut"> </ div>'); // Ajouter panneau d'information avant que le formulaire pour fournir des commentaires ou des erreurs
var statusdiv = $ ('# commentaire statut'); // Définir la Infopanel

commentform.submit (function () {
// sérialisation et formulaire de stocker des données dans une variable
var = formdata commentform.serialize ();
// Ajout d'un message d'état
statusdiv.html ('<p> Traitement en cours ... </ p>');
// Action Extrait URL de CommentForm
var = formurl commentform.attr («action»);
// Formulaire POST avec des données
.ajax $ ({
Type: 'post',
URL: formurl,
données: formdata,
erreur: function (XMLHttpRequest, textStatus, errorThrown) {
statusdiv.html ('<p class = "wdpajax-error"> Vous avez peut-gauche l'un des champs vides, ou être affiché trop rapidement </ p>');
},
succès: function (données, textStatus) {
if (data == "succès")
statusdiv.html ('. <p class = "ajax-succès"> Merci pour votre commentaire, nous vous remercions de votre réponse </ p>.');
autre
statusdiv.html ('<p class = "ajax-error"> Se il vous plaît attendre un peu avant de poster votre commentaire suivant </ p>');
commentform.find ('textarea [name = commentaire]') val ('.');
}
});
return false;

});
}); </ Script>

Pour casser le code en bas, nous sommes d'abord la création d'objets jQuery de la forme de commentaire (ce qui suppose votre formulaire de commentaires a la css ID par défaut de "CommentForm"), et l'ajout d'un panneau d'information vide-dessus que nous allons utiliser plus tard pour afficher messages à l'utilisateur sur l'état d'avancement de leur affectation commentaire.

commentform.submit est utilisé pour «détourner» le bouton d'envoi. Nous SERIALIZE alors les données du formulaire (le transformer en une longue ligne de données), donner un message "Traitement" à l'utilisateur que panneau d'information, et aller de l'avant avec une requête AJAX. La requête AJAX est un format standard , mais pas vraiment dans le cadre de ce tutoriel aujourd'hui - il suffit de dire qu'il réagit soit un succès ou d'erreur, et efface le formulaire en cas de succès à éviter le même commentaire accidentelle affiché deux fois. D'ajuster les messages et les erreurs au besoin, ou ajouter un peu de style approprié à la feuille de style de votre thème si vous souhaitez les messages d'erreur de se démarquer en quelque sorte. La dernière ligne - return false - empêche le formulaire de terminer il est l'action par défaut.

PHP Handler

Enfin, nous avons besoin de quelque chose pour empêcher le rafraîchissement de la page et envoyer la réponse appropriée à l'utilisateur ainsi que la notification à l'administrateur si le commentaire doit modérer, ou avertir l'auteur d'un nouveau commentaire. Pour cela, nous crochet dans l'action de comment_post qui se produit juste après il est ajouté à la base de données, et de détecter si elle était une requête AJAX. Ajoutez-le à votre fichier functions.php:

(Également disponible à cette pastebin )

add_action ('comment_post »,« ajaxify_comments', 20, 2);
ajaxify_comments de fonction ($ comment_id, $ comment_status) {
if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest') {
// Si AJAX demande ensuite
switch ($ comment_status) {
cas «0»:
// Notifier modérateur de commentaire non approuvé
wp_notify_moderator ($ comment_id);
cas '1': // commentaire Approuvé
echo "succès";
$ Commentdata = & get_comment ($ comment_id, ARRAY_A);
$ Post = & get_post ($ commentdata ['comment_post_ID']);
wp_notify_postauthor ($ comment_id, $ commentdata ['comment_type']);
break;
défaut:
echo "erreur";
}
Sortie;
}
}

Repérer les problèmes

Si la page est toujours rafraîchissant au lieu de poster par AJAX, il est susceptible d'être l'un des deux problèmes. Un - Vous ne disposez pas jQuery chargé. Installez Firebug, ou activer des outils de développement de Chrome, et vérifiez le journal de la console d'erreurs. Si jQuery est introuvable, remonter à la section JavaScript et lire le premier bit sur l'ajout de jQuery à votre thème. La deuxième possibilité est que votre thème fait quelque chose de spécial pour le formulaire de commentaire et son ID est plus "CommentForm". Vérifiez le code source, puis réglez le var CommentForm = $ ('# CommentForm') ligne dans le JavaScript pour la bonne ID - qui pourrait fonctionner.

Comme toujours, je suis là pour aider plus autant que je peux, mais se il vous plaît poster des liens vers une URL exemple où je peux prendre un coup d'oeil, ou post dans le forum 9tiny.com des réponses si les commentaires de ce billet sont fermés. Profitez AJAXified les commentaires!