Cómo AJAX-ify sus comentarios de WordPress

Por defecto, el sistema de comentarios de WordPress es lamentablemente inadecuado, una de mis mayores objeciones es que para publicar un comentario, la página necesita actualizarse. Puede cambiar a un sistema de terceros como Livefyre o Disqus 3 formas de alentar los comentarios en su blog de Wordpress 3 formas de alentar los comentarios en su blog de Wordpress Obtener comentarios en su blog es un gran motivador para seguir adelante con el largo recorrido que es Blogging Solo sabiendo que hay alguien ahí fuera, apreciar tu trabajo se siente genial, pero no ..., pero si prefieres mantener todo en casa o hacer algún otro tipo de personalización, publicar comentarios de AJAX es lo mínimo que debes hacer.

Puedes ver un ejemplo de esto trabajando aquí en Hacer uso de - cuando publique un comentario, no saldrá de la página; en su lugar, lo enviaremos a través de una llamada AJAX y luego enviaremos un mensaje rápido “gracias” Nota de vuelta. Sigue leyendo para ver un tutorial completo.

Para usar funciones que no son de WordPress como AJAX, lea mi tutorial anterior Un tutorial sobre el uso de AJAX en WordPress Un tutorial sobre el uso de AJAX en WordPress AJAX es una tecnología web notable que nos ha llevado más allá de lo simple “haga clic en el enlace, vaya a otra página” estructura de Internet 1.0. Permite a los sitios web buscar y mostrar dinámicamente contenido sin el usuario ... y asegúrese de consultar todos los artículos relacionados con WordPress.

Introducción

Hay dos partes separadas necesarias para que los comentarios de AJAX WordPress funcionen, así que expliquemos primero para darle una visión general de todo el proceso..

• Algunos Javascript en la página que intercepta al usuario haciendo clic en el Agregar comentario botón enviar, que también lo convierte en una llamada AJAX y también maneja la respuesta.
• Un controlador PHP que se conecta a la acción comment_post

Javascript

En primer lugar, esto va a necesitar jQuery, al igual que cualquier cosa remotamente emocionante en el desarrollo web hoy en día. Si no está seguro de si ya se está cargando, continúe y salte al código Javascript e inténtelo de todos modos, si tiene Firebug y el registro de la consola dice “jQuery no está definido” cuando actualice la página, luego agregue esta línea a su archivo functions.php para asegurarse de que se esté cargando.

función 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"), falso); wp_enqueue_script ('jquery');  add_action ('wp_print_scripts', 'google_jquery');

Tenga en cuenta que es una forma elaborada de cargar jQuery porque usaremos la última versión de Google CDN, que es más rápida y más actualizada que la que se incluye de forma predeterminada con WordPress, por lo que podría ser una buena idea agregar eso de todos modos incluso si jQuery ya está cargado en otro lugar.

Ahora, para el Javascript real que manejará el formulario de comentarios, tenemos algunas opciones. Lo más fácil es pegar el código en su single.php plantilla: suponiendo que no tenga habilitados los comentarios también para las páginas.

Alternativamente, puede pegar en un existente .js archivo utilizado por su tema, o cree un nuevo .js archivo en su directorio de temas. Si elige ponerlo en su propio archivo .js separado y no pegarlo directamente en su plantilla de tema, asegúrese de agregar las siguientes líneas a su funciones.php, y tenga en cuenta que se supone que el nombre de archivo es ajaxcomments.js en la raíz de su carpeta de temas.

add_action ('init', 'ajaxcomments_load_js', 10); función ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Aquí está el Javascript para manejar el formulario de comentarios (o puedes verlo en pastebin):

// Sistema de comentarios AJAXified jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // encuentra el formulario de comentarios commentform.prepend (''); // agrega el panel de información antes el formulario para proporcionar comentarios o errores var statusdiv = $ ('# comment-status'); // define el panel de información commentform.submit (function () // serializa y almacena datos de formulario en una variable var formdata = commentform.serialize ( ); // Agregar un mensaje de estado statusdiv.html ('
Tratamiento… 
'); // Extrae la URL de acción de commentform var formurl = commentform.attr ('action'); // Publicar formulario con datos $ .ajax (type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Es posible que haya dejado uno de los campos en blanco o que esté publicando demasiado rápido
'); , success: function (data, textStatus) if (data == "success") statusdiv.html ('
Gracias por tu comentario. Agradecemos su respuesta..
'); else statusdiv.html ('
Por favor espere un momento antes de publicar su próximo comentario
'); commentform.find ('textarea [nombre = comentario]'). val (");); return false;););

Para descomponer el código, primero estamos creando objetos jQuery del formulario de comentarios (que supone que su formulario de comentarios tiene la ID de CSS predeterminada de “forma de comentario”), y agregando un panel de información vacío sobre él que luego usaremos para mostrar mensajes al usuario sobre el progreso de publicar su comentario.

commentform.submit se usa para 'secuestrar' el botón de enviar. Luego serializamos los datos del formulario (los convertimos en una larga línea de datos), le damos un “Tratamiento” mensaje al usuario en ese panel de información y continúe con una solicitud AJAX. La solicitud de AJAX es un formato estándar, pero no está realmente en el alcance de este tutorial de hoy: basta con decir que reacciona a un éxito o error, y borra el formulario si tiene éxito para evitar que el mismo comentario se publique accidentalmente dos veces. Ajuste los mensajes y errores según corresponda, o agregue un estilo adecuado a la hoja de estilo de su tema si desea que los mensajes de error se destaquen de alguna manera. La ultima linea - falso retorno - evita que el formulario complete su acción predeterminada.

PHP Handler

Por último, necesitamos algo para evitar que la página se actualice y enviar la respuesta adecuada al usuario, así como notificar al administrador si es necesario moderar el comentario o notificar al autor de un nuevo comentario. Para esto, nos enganchamos al comentario_post acción que ocurre justo después de que se agrega a la base de datos y detecta si fue una solicitud AJAX. Agregue esto a su funciones.php expediente:

(También disponible en este 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 AJAX Request Entonces cambie ($ comment_status) case '0': // notifica al moderador del comentario no aprobado wp_notify_moderator ($ comment_ID); caso '1': // Comentario aprobado echo "éxito"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); rotura; predeterminado: echo "error";  salida; 

Problemas puntuales

Si la página sigue siendo refrescante en lugar de publicar a través de AJAX, es probable que sea uno de los dos problemas. Uno: es posible que no haya cargado jQuery. Instalar Firebug Cómo instalar Firebug en IE, Safari, Chrome y Opera Cómo instalar Firebug en IE, Safari, Chrome y Opera, o habilitar las herramientas de desarrollador de Chrome, y verificar el registro de la consola en busca de errores. Si no se encuentra jQuery, regrese a la sección de JavaScript y lea el primer bit sobre cómo agregar jQuery a su tema. La segunda posibilidad es que su tema haga algo especial en el formulario de comentarios y su ID ya no sea “forma de comentario”. Verifique el código fuente, luego ajuste el var commentform = $ ('# commentform') línea en JavaScript para que sea la ID correcta, eso podría funcionar.

Como siempre, estoy dispuesto a ayudar tanto como pueda, pero publique enlaces a una URL de ejemplo donde pueda echar un vistazo rápido.