Cómo AJAX-ify tus comentarios de WordPress

De forma predeterminada, el sistema de comentarios de WordPress es lamentablemente inadecuado: una de mis mayores objeciones es que para publicar un comentario, la página debe actualizarse. Puede cambiar a un sistema de terceros como Livefyre o Disqus 3 maneras de fomentar los comentarios en su blog de Wordpress 3 formas de fomentar los comentarios en su blog de Wordpress Obtener comentarios en su blog es un gran motivador para que continúe en el largo plazo que es blogging Solo saber que alguien está ahí afuera, apreciar su trabajo se siente bien, pero no ... Leer más, pero si prefiere mantener todo en su casa o hacer algún otro tipo de personalización, entonces publicar los comentarios de AJAX es lo menos que debe hacer..

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

Para usar funciones que no sean de WordPress como AJAX, lea mi tutorial anterior Un tutorial sobre cómo usar AJAX en WordPress Un tutorial sobre cómo usar AJAX en WordPress AJAX es una tecnología web extraordinaria 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 obtener y mostrar contenido de forma dinámica sin el usuario ... Lea más 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 vamos a explicarlos primero para darle una visión general de todo el proceso..

• Un poco de Javascript en la página que intercepta al usuario haciendo clic en el Agregar comentario botón de envío, que también hace que sea una llamada AJAX y también maneja la respuesta.
• Un controlador PHP que se engancha en 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 de hoy en día. Si no está seguro de si ya se está cargando, continúe, pase al código Javascript y pruébelo de todos modos, si tiene Firebug y el registro de la consola dice “jQuery no está definido” cuando actualice la página, 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"), false); wp_enqueue_script ('jquery');  add_action ('wp_print_scripts', 'google_jquery');

Tenga en cuenta que es una forma compleja de cargar jQuery porque usaremos la última versión de las CDN de Google, que es más rápida y más actualizada que la que se incluye de forma predeterminada con WordPress, por lo que puede ser una buena idea agregarla 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 simplemente pegar el código en tu single.php plantilla - asumiendo que no tiene comentarios habilitados para las páginas también.

Alternativamente, podría pegar en un existente .js archivo utilizado por su tema, o crear un nuevo .js archivo en su directorio de temas. Si elige colocarlo 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 el nombre de archivo se supone que es ajaxcomments.js en la raíz de tu carpeta de temas.

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

Para desglosar el código, primero estamos creando objetos jQuery del formulario de comentarios (que asume que su formulario de comentarios tiene el ID de css predeterminado “comentar”), y agregar un panel de información vacío arriba que usaremos más adelante para mostrarle mensajes al usuario sobre el progreso de la publicación de su comentario..

commentform.submit Se utiliza para "secuestrar" el botón de envío. Luego, serializamos los datos del formulario (los convertimos en una larga línea de datos), damos una “Tratamiento” envíe un mensaje al usuario en ese panel de información y siga adelante con una solicitud de AJAX. La solicitud de AJAX es un formato estándar, pero no está realmente en el alcance de este tutorial hoy en día; basta con decir que reacciona ante un éxito o un error, y borra el formulario si es exitoso para evitar que el mismo comentario se publique accidentalmente dos veces. Ajuste los mensajes y los 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 por defecto.

Manejador de PHP

Por último, necesitamos algo para evitar la actualización de la página y enviar la respuesta adecuada al usuario, así como notificar al administrador si el comentario necesita moderación, o notificar al autor de un nuevo comentario. Para ello, nos enganchamos en el comment_post Acción que ocurre justo después de que se agrega a la base de datos, y detecta si era una solicitud AJAX. Agrega esto a tu 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 Then Switch 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']); descanso; por defecto: echo "error";  salida; 

Problemas puntuales

Si la página sigue actualizándose en lugar de publicarse a través de AJAX, es probable que sea uno de los dos problemas. Uno - es posible que no haya cargado jQuery. Instale Firebug Cómo instalar Firebug en IE, Safari, Chrome y Opera. Cómo instalar Firebug en IE, Safari, Chrome y Opera. Lea más o habilite las herramientas para desarrolladores de Chrome y revise el registro de la consola para ver si hay errores. Si no encuentra jQuery, vuelva 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 para el formulario de comentarios y su ID ya no sea más. “comentar”. Compruebe el código fuente, luego ajuste la var commentform = $ ('# commentform') línea en el JavaScript para que sea el ID correcto, que podría funcionar.

Como siempre, estoy cerca para ayudarlo lo más que pueda, pero publique enlaces a una URL de ejemplo donde pueda echar un vistazo rápido, o publique en el foro de respuestas de MakeUseOf si los comentarios de esta publicación están cerrados. Disfrutar AJAXified los comentarios!

Explorar más sobre: ​​comentarios en línea, programación, desarrollo web.