Comment AJAX-ify vos commentaires WordPress

Publicité

Par défaut, le système de commentaires WordPress est terriblement inadéquat - l'une de mes plus grandes objections étant que pour publier un commentaire, la page doit être actualisée. Vous pouvez passer à un système tiers comme Livefyre [URL cassée supprimée] ou Disqus 3 façons d'encourager les commentaires sur votre blog WordpressObtenir des commentaires sur votre blog est une excellente motivation pour vous permettre de continuer sur le long terme que représente le blog. Le simple fait de savoir que quelqu'un est là-bas, d'apprécier votre travail se sent bien, mais pas ... Lire la suite , mais si vous préférez tout garder en interne ou effectuer un autre type de personnalisation, publier 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. Au lieu de cela, nous l'enverrons via un appel AJAX, puis nous enverrons un bref message "Merci»Note en arrière. Lisez la suite pour un tutoriel complet.

Pour utiliser des fonctions non WordPress comme AJAX, veuillez lire mon tutoriel précédent Un tutoriel sur l'utilisation d'AJAX dans WordPressAJAX est une technologie Web remarquable qui nous a fait dépasser le simple "lien de clic, aller sur une autre page" structure d'Internet 1.0. Il permet aux sites Web de récupérer et d'afficher dynamiquement du contenu sans utilisateur... Lire la suite , et assurez-vous de consulter tous les articles liés à WordPress.

introduction

Il y a deux parties distinctes nécessaires pour que les commentaires AJAX WordPress fonctionnent, alors expliquons-les d'abord pour vous donner un aperçu de l'ensemble du processus.

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

Javascript

Tout d'abord, cela va avoir besoin jQuery, comme tout ce qui est passionnant à distance dans le développement Web de nos jours. Si vous n'êtes pas sûr qu'il est déjà en cours de chargement, allez-y et passez au code Javascript et essayez quand même - si vous avez Firebug et que le journal de la console dit "jQuery n'est pas défini"Lorsque vous actualisez la page, puis 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"), faux); wp_enqueue_script ('jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Notez que c'est une façon élaborée de charger jQuery, car nous utiliserons la dernière version des CDN de Google, qui est plus rapide et plus date que celle incluse par défaut avec WordPress - il peut donc être judicieux d'ajouter cela de toute façon même si jQuery est déjà chargé autre part.

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

Vous pouvez également coller dans un fichier existant .js fichier utilisé par votre thème ou créez 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, assurez-vous d'ajouter les lignes suivantes à votre functions.phpet notez que le nom de fichier est supposé être ajaxcomments.js à la racine de votre dossier de thème.

add_action ('init', 'ajaxcomments_load_js', 10); function ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

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

 // Système de commentaires AJAXified. jQuery ('document'). ready (fonction ($) { var commentform = $ ('# commentform'); // trouve le formulaire de commentaire. commentform.prepend ('
 
'); // ajouter un panneau d'informations avant le formulaire pour fournir des commentaires ou des erreurs. var statusdiv = $ ('# comment-status'); // définit l'infopanel commentform.submit (function () { // sérialiser et stocker les données du formulaire dans une variable. var formdata = commentform.serialize (); // Ajoutez un message d'état. statusdiv.html ('
 Traitement en cours... 
'); // Extraire l'URL de l'action du formulaire de commentaire. var formurl = commentform.attr ('action'); // Poster un formulaire avec des données. $ .ajax ({ type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Vous avez peut-être laissé un des champs vide, ou vous avez posté trop rapidement 
'); }, succès: fonction (data, textStatus) { if (data == "success") statusdiv.html ('
 Merci pour votre commentaire. Nous apprécions votre réponse. 
 '); autre. statusdiv.html ('
 Veuillez patienter un peu avant de poster votre prochain commentaire 
'); commentform.find ('textarea [nom = commentaire]'). val (''); } }); retour faux; }); });

Pour décomposer le code, nous créons d'abord des objets jQuery du formulaire de commentaire (qui suppose que votre formulaire de commentaire a l'ID CSS par défaut de "commentform"), et en ajoutant au-dessus un panneau d'informations vide que nous utiliserons plus tard pour afficher des messages à l'utilisateur sur la progression de la publication de son commentaire.

commentform.submit est utilisé pour «détourner» le bouton d'envoi. Nous sérialisons ensuite les données du formulaire (les transformons en une longue ligne de données), donnons un "En traitement"Message à l'utilisateur dans ce panneau d'informations, et aller de l'avant avec une demande AJAX. La demande AJAX est un format standard, mais pas vraiment dans le cadre de ce tutoriel aujourd'hui - il suffit de dire qu'il réagit à un succès ou erreur et vide le formulaire en cas de succès pour éviter que le même commentaire ne soit accidentellement publié deux fois. Ajustez les messages et les erreurs selon les besoins, ou ajoutez un style approprié à la feuille de style de votre thème si vous souhaitez que les messages d'erreur se distinguent d'une manière ou d'une autre. La dernière ligne - retour faux - empêche le formulaire de terminer 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 d'aviser l'administrateur si le commentaire doit être modéré, ou d'aviser l'auteur d'un nouveau commentaire. Pour cela, nous nous accrochons au comment_post qui survient juste après son ajout à la base de données et détecte s'il s'agit d'une demande AJAX. Ajoutez ceci à votre functions.php fichier:

(Aussi disponible à cette boîte à pâte)

add_action ('comment_post', 'ajaxify_comments', 20, 2); fonction ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Si demande AJAX Alors. switch ($ comment_status) { case '0': // notifie le modérateur d'un commentaire non approuvé. wp_notify_moderator ($ comment_ID); case '1': // Commentaire approuvé. faire écho au «succès»; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); Pause; par défaut: écho "erreur"; } sortie; } }

Problèmes localisés

Si la page est toujours actualisée au lieu d'être publiée via AJAX, il s'agit probablement de l'un des deux problèmes. Un - vous n'avez peut-être pas chargé jQuery. Installer Pyromane Comment installer Firebug sur IE, Safari, Chrome et Opera Lire la suite ou activez les outils de développement Chrome et recherchez les erreurs dans le journal de la console. Si jQuery n'est pas trouvé, revenez à la section JavaScript et lisez le premier bit sur l'ajout de jQuery à votre thème. La deuxième possibilité est que votre thème fasse quelque chose de spécial dans le formulaire de commentaire et que son ID ne soit plus un «formulaire de commentaire». Vérifiez le code source, puis ajustez le var commentform = $ ('# commentform') ligne dans le JavaScript pour être l'ID correct - cela pourrait fonctionner.

Comme toujours, je suis là pour vous aider autant que possible, mais veuillez publier des liens vers un exemple d'URL où je peux jeter un coup d'œil.