Cargando publicaciones de WordPress dinámicamente con AJAX

Ajax se ha convertido en la rabia en los últimos dos años y por razones bien fundadas. Ajax (JavaScript y XML asíncrono) es una forma de tener una “conversación” con el servidor y mostrar los resultados sin recargar la página. Esta técnica nos permite actualizar los medidores “similares”, agregar artículos en un carrito de compras, crear formas dinámicas y muchas más, todo sin recargar la página. En esta publicación, le mostraré cómo cargar publicaciones con AJAX usando el tema predeterminado de veinte quince. Veremos por qué se usa Ajax y, comenzando con un ejemplo simple, construimos la funcionalidad de carga AJAX en veinte quince.
Nota: Si tiene problemas para intentar configurar AJAX en su sitio, ¡podemos ayudarlo! Nuestro equipo de soporte está disponible las 24 horas, los 7 días de la semana, para ayudarlo con cualquier problema de WordPress (¡no solo preguntas sobre nuestros propios complementos!), Por lo tanto, si tiene problemas con AJAX o desea consejos sobre cómo hacer cambios en CSS, ¡contact -us! ¿Por qué usar Ajax? Cuando WordPress cobre la primera página de publicación en un sitio de WordPress, pregúnteles desde la base de datos y use un bucle para mostrarlos usando la marca que agregué. Además, los menús de navegación, widgets, gráficos y otros entornos, archivos JavaScript, hojas de estilo y muchas otras cosas se cargan.

Tenga en cuenta que se realizan 72 solicitudes para cada carga de página. Como puede ver en la imagen de arriba (tomada de las herramientas de desarrollador de Chrome), se cargan una gran cantidad de activos. Aquí hay un lugar de optimización y algunos activos como los scripts se almacenarán en caché, pero incluso entonces es mucho. Cuando se carga la segunda página de nuestras publicaciones, todo vuelve a suceder. WordPress se hace cargo de las publicaciones y las muestra usando nuestra marca. También carga todos los elementos periféricos de la página nuevamente. En muchos casos (pero no en todos), este es un ancho de ancho de banda y dañar la experiencia del usuario. Después de todo, a nadie le gusta esperar a que se carguen las páginas. Nociones introductorias: crear un tema para niños antes de cambiar los veinte quince, deberíamos crear un tema infantil. Esto nos asegura que podemos continuar actualizando el tema sin perder nuestros cambios. Puede leer todo sobre cómo hacer en la guía cómo crear un tema de WordPress Children. Hola Ajax! Comencemos con un ejemplo simple que demuestre cómo funciona Ajax. Se dirigiremos a los enlaces dentro de la banda de paginación en la parte inferior de la página, por lo que al hacer clic en un número de página, cargará dinámicamente esa página usando AJAX. Al hacer clic en un enlace de paginación, enviaremos una solicitud al servidor y alertaremos al resultado.
Se dirigiremos a los enlaces numéricos en la sección de paginación. Pon nuestro primer puerto de apelación en la cola de nuestro JavaScript es crear el archivo JavaScript y poner en la cola a través de las funciones.php de nuestro tema. Creé una carpeta JS y un archivo Ajax-Pagination.js en ella. Después de haber hecho lo mismo, abra el archivo con funciones y agregue el script a la función existente theme_enqueue_assets (): el esencial 5CA270C9DDDD18E57B4 está cargado

Si está confundido acerca de colocarse en la cola, lea nuestro artículo sobre cómo agregar scripts y estilos a WordPress correctamente. En resumen, le dije a WordPress, ya que nos gustaría llamar a nuestro script (parámetro uno), donde (parámetro dos), cuáles son el requisito previo (parámetro tres), el número de versión (parámetro cuatro) y que nos gustaría que cargamos en el Sótano (parámetro cinco).
Tenga en cuenta que cuando get_template_directory_uri () la hoja de estilo utilicé get_template_directory_uri (). Esta función siempre indica el director del tema principal. Cuando get_stylesheet_directory_uri () nuestro script, utilicé get_stylesheet_directory_uri (). Esto indica el director del tema infantil si se usa en un tema infantil. Debido a que cargamos el script en el sótano, puede mantener alerta (‘script está eneado’) en Ajax-Pagination.js y recargar la página para verificar si funciona. Si sucede, el texto debe ser alertado correctamente. Crear un evento La siguiente tarea es crear un evento que active una llamada AJAX. En nuestro caso, el evento es el clic en un determinado enlace. Para apuntar al enlace, necesitaremos descubrir un poco sobre las clases de elementos e identificaciones a su alrededor.
El código fuente para la paginación de Chrome Dev Tools. Si se pregunta cómo hice esto para aparecer, presioné Shift + Command + C en Mac (Shift + Control + C en Windows), pasé con el mouse sobre el elemento que quería inspeccionar y hice clic en él. Esto me dice que nuestros enlaces de paginación tienen la clase Page -Number, el siguiente enlace también tiene la siguiente clase y todos están contenidos en un elemento de la clase Nav -Links. El enlace anterior no se muestra aquí, que tiene la clase además de la clase de número de página habitual. Por ahora, no nos preocupemos por todo esto, solo apunte a cualquier enlace en el contenedor de paginación. Podemos crear una alerta simple como esta: los esenciales 5CA270C7C9DDD18E57B4
Tenga en cuenta que todo está empaquetado en una función anónima. Te recomiendo hacer lo mismo. Eche un vistazo a este hilo para averiguar por qué es útil. Creé un evento de clic, evité la activación de la funcionalidad predeterminada (es decir, cargando la página) y alerté algún texto. Creación de una llamada AJAX En lugar de trabajar con datos del cliente (alerta a un texto predeterminado), debemos tomar algunos datos dinámicos del servidor. Tendremos que hacer una pequeña cantidad de trabajo preparatorio. Es por eso: tenemos que darle a la URL de AJAX para trabajar. Nuestro archivo JavaScript no conoce nuestro entorno, por lo que no podemos usar algo como get_stylesheet_directory_uri () allí. Sin embargo, podemos usar una técnica de ubicación para pasar variables a JavaScript. Hagamos esto ahora en nuestro archivo con funciones:

Cargue el esencial 5CA270C7C9DDD18E57B4
Al agregar este código dentro de my_enqueue_assets () seremos definidos por Ajaxpagination (parámetro 2). El objeto recibirá a sus miembros de acuerdo con la matriz proporcionada como el tercer parámetro en la función wp_localise_crind (). En otras palabras, una vez que hayamos agregado este código, deberíamos poder usar AjaxPagination.AJAXURL para definir la URL en Admin-AJAX.PHP que usamos para administrar las llamadas AJAX. La razón por la que funciona es que la función de ubicación emite la definición de este objeto antes de que se cargue JavaScript. Parece esto: The Essentials 5CA270C7C9DDD18E57B4
Volviendo a nuestro archivo JavaScript, ahora tenemos todo lo que necesitamos para crear una llamada AJAX. Así es cómo:
Cargue el esencial 5CA270C7C9DDD18E57B4
Como puede ver, la función $ .AJAX () es lo que usamos aquí. Existen funciones especiales para los métodos y obtengas de publicaciones, pero prefiero usar esta función debido a su flexibilidad. Puede leer sobre todos los parámetros en la documentación de JQuey. Usando el parámetro URL, transmitimos la URL del script al que queremos enviar datos. Este debería ser el archivo admin-ajax.php que se puede encontrar en el directorio WP-Admin. Definí esto arriba por la función wp_localise_ccript ().
El tipo está configurado para publicar. También podríamos usar Get, nuestra consulta no es demasiado sensible, pero prefiero publicar datos a menos que el usuario necesite acceso a los parámetros. El parámetro de fecha es un objeto que contiene los datos que desea transmitir. En nuestro caso, podré acceder a una variable $ _post [‘Action’], cuyo valor sería AJAX_PAGINATION. Por supuesto, puede pasar tantos como su solicitud lo requiera.
0 se devuelve si no se escribe ningún código en el lado del servidor. Finalmente, el parámetro exitoso es una función que alerta al resultado de nuestra llamada AJAX. Haremos esto a continuación, por ahora es suficiente para las pruebas. Si intenta hacer clic en un enlace ahora, realmente funciona, pero no será muy útil, porque no hemos definido el código del servidor. En realidad, lo que deberías ver alertado es 0. Entonces, ¿por qué está sucediendo esto? Cuando dije “no definí el código del servidor”, no era completamente sincero. No lo hacemos, pero WordPress lo hizo. Hay algo contenido en el archivo admin-ajax.php que usamos. Si echa un vistazo al código fuente de ese archivo, debería ver que el script usa die (‘0’) en algunos casos. Si no proporcionamos una acción, el script admin-ajax.php muere y devuelve 0. Si proporcionamos una acción, pero no admin-ajax.php en los ganchos de WordPress necesarios, no sucede nada y al final del archivo We We We morir nuevamente, devolviendo 0. En conclusión, ya nos estamos comunicando con el servidor. Comunicando con WordPress para obtener una respuesta significativa de WordPress, necesitamos definir algunas acciones de WordPress. Esto se realiza utilizando un modelo establecido. Profundamos continuando nuestro ejemplo en el archivo de función de nuestro tema: se carga el esencial 5CA270C7C9DDD18E57B4.
Conecté una función a dos ganchos. Los ganchos que tienen el formato WP_AJAX_ [Action_Name] se ejecutan solo para usuarios conectados. Los ganchos que toman el formato WP_AJAX_NORPIV_ [Action_Name] solo se ejecutan para usuarios innecesarios. La gran ventaja de esto es que puede separar fácilmente la funcionalidad.
El nombre de las acciones que mencionamos anteriormente se refiere a la acción definida en nuestra llamada AJAX en JavaScript (Acción: ‘Ajax_Pagination’)-debe coincidir. El nombre de la función puede ser lo que desee, utilicé my_ajax_pagination para mayor claridad. La función en sí puede contener lo que desee. Puede desconectar a sus usuarios, tomar sus datos, publicar una publicación, etc. Independientemente de lo que desee volver a JavaScript, debe hacer eco. En el ejemplo anterior, repití el título del blog, get_bloginfo () Dynamic por la función get_bloginfo (). El paso final es el uso de di (). Si no definimos esto, la función DIO definida en Admin-AJAX.PHP al final del archivo comenzará y terminará Echo 0 además de cualquier otra cosa que tenga. Si prueba el código anterior, ahora debe ver el título de su sitio web de devolución. ¡Presentación general, esto termina nuestro ejemplo básico! Antes de pasar a atraer publicaciones a través de AJAX, para recapitular rápidamente los pasos necesarios para realizar una acción de Ajax: coloque un archivo JavaScript si aún no tiene uno
Use wp_localise_script () para transmitir su URL de su archivo de administración.php

Crear llamada AJAX en JavaScript
Conecte una función utilizando el nombre apropiado de gancho
Cod la función que puede devolver los datos a JavaScript

¡Cargando publicaciones con Ajax ahora para cosas suculentas! Comencé este proyecto escribiendo el código JavaScript para él. Sin otras extensiones, aquí está la versión básica. Lo extenderemos pronto con una experiencia de usuario mejorada.
Cargue el esencial 5CA270C7C9DDD18E57B4
Esto es casi lo mismo que nuestro ejemplo básico. Lo primero que notará es que he agregado una forma de detectar qué página quiere preguntar el usuario. Cada enlace tiene un elemento de tramo oculto (está allí para lectores de pantalla). Hago un clon del elemento para asegurarme de que no cambie el original, elimine el intervalo y analizo el resto como un número entero. Esto nos da el número de la página que necesitamos. También necesitaré conocer los parámetros de consulta utilizados. En la página principal, esto es bastante simple, es solo el parámetro paginado porque trabajamos con la consulta predeterminada. Si comenzamos en una página de archivo (como un archivo de categoría), necesitaremos saber el nombre de la categoría. Pasaremos las variables de consulta utilizando el método de localización que aprendimos anteriormente. Por ahora, usaremos AjaxPagination.Query_Vars incluso si aún no está definido. Finalmente, para el éxito, eliminamos todos los elementos de artículos del contenedor principal, eliminamos el elemento de paginación y agregamos el valor de retorno de nuestra llamada AJAX al contenedor principal. Este valor devuelto contendrá las publicaciones y el nuevo elemento de navegación. Tenga en cuenta que hemos cambiado el nombre del parámetro de respuesta a HTML porque tiene un poco más lógico. Para completar, utilizamos el panel de ubicación para transmitir los parámetros de consulta inicial. La siguiente característica debe colocarse en my_enqueue_assets () nuestro my_enqueue_assets () reemplazando la ubicación que teníamos anteriormente: se carga el 5CA270C9DDDDDDDDDD18E57B4 esencial.
Todo lo que tenemos que hacer ahora es para my_ajax_pagination () la función my_ajax_pagination (). Cualquiera que sea esta función, reemplazará el contenido de nuestra página. Aquí está el código final con una explicación a continuación: Cargue el esencial 5CA270C7C9DDD18E57B4
Usando los parámetros pasados, construimos una consulta personalizada. Esto prácticamente implica tomar las variables de consulta que transmitimos y asegurarse de que el número de la página que transmitimos abrume el parámetro paginado. Luego usamos $ QUERY_VARS Nuestro final $ QUERY_VARS para crear una nueva consulta. Tenemos que hacer la variable $ globals [‘wp_query’
] igual a nuestro nuevo objeto de publicaciones. La razón por la que necesitamos hacer esto es que the_posts_pagination () use esta variable global. Luego, observe que agregué una función al Filtro Editor_Max_Image_Size y un editor_max_image_size algunas líneas a continuación. Esto fue algo inesperado que apareció. De hecho, creamos un rastre de WordPress. ¡Podríamos ver algún progreso a este respecto!
Aquí está el problema:
Cuando las imágenes se cargan en la publicación, todas se ven bien. Sin embargo, si completa este tutorial sin estos filtros, sus imágenes serán más estrechas, solo 660px de ancho en lugar de 825px requerido. La razón de esto es que la función que carga las imágenes eventualmente llama a una función llamada image_constrain_size_for_editor (). Esta función asegura que las imágenes en el editor de publicaciones no sean demasiado amplias. Para determinar el clima, esta reducción de la dimensión debe tener lugar, use la función IS_Admin (). Debido a que nuestro código se ejecuta a través de Admin-Ajax.php, que está técnicamente en Admin, WordPress reduce nuestras imágenes, creyendo erróneamente que las usamos en el editor. Afortunadamente, podemos usar el filtro editor_max_image_size para determinar el tamaño máximo para el editor. Dado que queremos dejar todo como es, excepto que durante nuestra llamada AJAX, agregamos el filtro usando nuestros valores personalizados (matriz (825, 510) y luego lo eliminamos solo para asegurarnos de que no cause problemas en otros lugares. El siguiente paso es usar nuestra consulta para enumerar nuestras publicaciones. He copiado muchos del archivo index.php del tema principal. Si no hay publicaciones, usamos la plantilla que está destinada a lidiar con ella, de lo contrario revisamos las publicaciones y usamos la pantalla de publicación. Finalmente usamos el mismo formato de paginación que vemos en el archivo de índice. Una nota sobre las llamadas de AJAX es importante tener en cuenta que siempre se considera que las llamadas AJAX provienen del administrador. Esto significa que los mensajes inacabados, programados y privados pueden devolverse con esta llamada.
Si no desea que esto suceda, deberá controlar el comportamiento con los parámetros apropiados, como Post_status. Una mejor experiencia de usuario con AJAX Solutions como esta, es extremadamente importante centrarse en la experiencia del usuario. Trabajo en un entorno local, por lo que todo se carga muy rápidamente, pero en un servidor de producción las imágenes y otros activos podrían llevar más tiempo. Por esta razón, debe agregar al menos un cargador o texto de carga y deshabilitar los clics posteriores en los elementos de navegación. Trataremos con ellos haciendo que las publicaciones y la navegación desaparezcan inmediatamente después de que el usuario haga clic y muestra el texto “Cargando nuevas publicaciones”. Cuando se activa el evento exitoso, eliminamos el texto de carga y mostramos las publicaciones. Aquí está nuestra llamada AJAX actualizada: Cargue el esencial 5CA270C7C9DDD18E57B4
Ahora tenemos una función de éxito y éxito por separado. El primero se realiza tan pronto como haga clic en el enlace antes de que se envíe la llamada AJAX al servidor. El último se realiza una vez que recibimos los datos del servidor. Antes de enviar la llamada, eliminamos los elementos y navegamos. Por lo tanto, los usuarios no pueden continuar haciendo clic en los enlaces de navegación mientras esperan que las cosas se cargan. Luego corremos en la parte superior del documento. Luego adjuntamos una notificación de carga para aclarar a los usuarios lo que sucede. Usé la misma marca que veinte quince en las páginas posteriores a Black. En la función exitosa eliminamos el cargador y cargamos nuestro contenido, ¡todo listo! Ajax Ajax Traps es extremadamente poderoso;
Además de cargar publicaciones, puede realizar todo tipo de acciones de AJAX llamadas.Hay una gran cantidad de peligros y cosas sobre las que debe tener cuidado cuando lo usa, aquí hay algunos: la seguridad puede ser una gran preocupación.Si desea eliminar una publicación a través de AJAX, debe asegurarse de que el usuario tenga la intención y el permiso (usando no CCE), por ejemplo.Al usar métodos ordinarios, WordPress ha construido en protecciones en algunos casos, pero con AJAX, generalmente tiene que pensar en ello solo.La degradación de la gracia es otra faceta de Ajax, aunque algo que se vuelve menos importante.Prácticamente:
Sin JavaScript, sin AJAX. Si confía mucho en AJAX, los usuarios que lo han deshabilitado no podrán usar nuestra aplicación. JavaScript se ha vuelto tan ubicuo que esto es casi irrelevante, pero puede ocurrir en algunas situaciones. En este caso, debe asegurarse de que también haga clic en el enlace real. La experiencia del usuario se pasa por alto con mucha frecuencia. La funcionalidad de Ajax es realmente genial, pero un sitio web que funciona de manera confiable es más genial. Los usuarios están acostumbrados a cargar páginas al hacer clic en los enlaces. Tienes que hacer todo lo que es muy transparente, los usuarios deben saber qué está sucediendo y por qué. Debe usar AJAX para mejorar su trabajo, no para traer la mayor cantidad de brillo posible a la mesa. La presentación general, como puede ver, la implementación de AJAX requiere poca capacitación y práctica, pero una vez que sea la segunda naturaleza, descubrirá que es fácil. Probablemente le tomó algo de tiempo leer esto y tomará más tiempo hacerlo por primera vez, pero codifiqué todo el ejemplo en unos 15 minutos. Ajax es una de esas técnicas que pueden ser difíciles, ya que incluye casi todos los lenguajes de programación utilizados en un marco como WordPress. Las cosas se sazonan aún más porque deben adherirse a convenciones como ganchos y ubicación. La práctica lo hace perfecto. Te garantizo que te enamorarás de AJAX si comienzas a usarlo. ¿Implementa AJAX en su sitio? ¿Qué otros usos existes para Ajax en WordPress? Cuéntanos lo que piensas en el comentario a continuación.
Etiquetas:
desarrolladores
Php