Comment AJAX-ify vos commentaires WordPress

Par défaut, le système de commentaires WordPress est lamentablement inadéquat. L’un de mes principaux problèmes est 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… Lisez-en plus, mais si vous préférez tout garder chez vous 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 “Je vous remercie” note en arrière. Continuez à lire pour un tutoriel complet.

Pour utiliser des fonctions non-WordPress comme AJAX, veuillez lire mon précédent tutoriel. Tutoriel sur l'utilisation d'AJAX dans WordPress Tutoriel sur l'utilisation d'AJAX dans WordPress AJAX est une technologie Web remarquable qui nous a permis d'aller au-delà de la simple “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… En savoir plus, et assurez-vous de consulter tous les articles liés à 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.

Vous pouvez également coller dans un fichier existant. .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):

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 en ajoutant 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 leur commentaire.

commentform.submit est utilisé pour "détourner" le bouton d'envoi. Nous sérialisons ensuite les données de formulaire (en les transformant 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 soit en cas de succès, soit en 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 à ce pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) if (! empty ($ _SERVEUR ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _SERVVER ['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 En savoir plus ou activez les outils de développement de Chrome et recherchez des erreurs dans le journal de la console. 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 peux aider autant que possible, mais merci de poster des liens vers un exemple d'URL où je peux jeter un coup d'œil rapide, ou de poster sur le forum MakeUseOf Answers si les commentaires de cet article sont fermés. Prendre plaisir AJAXified les commentaires!

En savoir plus sur: commentaires en ligne, programmation, développement Web.