Cómo agregar AJAX a su sitio de WordPress

Publicado: 2022-09-29

Agregar AJAX a su sitio de WordPress es una excelente manera de mejorar la experiencia del usuario y hacer que su sitio sea más receptivo. AJAX le permite cargar contenido dinámicamente sin tener que volver a cargar toda la página, lo que puede ahorrarle mucho tiempo. Hay algunas formas diferentes de agregar AJAX a su sitio de WordPress. Una forma es usar un complemento como Ajax Load More o WP Ajaxify . Estos complementos se encargarán del trabajo pesado por usted y facilitarán la adición de AJAX a su sitio. Otra forma de agregar AJAX a WordPress es codificarlo a mano en su tema o complemento. Este es un enfoque más técnico y requiere un poco más de trabajo, pero le dará más control sobre cómo se implementa AJAX en su sitio. Si no es un desarrollador, la mejor manera de agregar AJAX a WordPress es usando un complemento. Hay una serie de excelentes complementos disponibles que facilitarán la adición de AJAX a su sitio.

Hay varias formas de usar AJAX en WordPress, pero una debería ser la más utilizada. AJAX es una combinación de código HTML, CSS y JavaScript que le permite enviar datos a un script, recibir y procesar la respuesta y luego recargar la página. Si no está familiarizado con AJAX, lea el artículo de Wikipedia al final de este artículo. En la carpeta del administrador de WP, hay un archivo admin-ajaxx que almacena las solicitudes de AJAX. Si no hay otros elementos disponibles, se debe proporcionar una acción (para las solicitudes GET y POST). La adición de una función al primer gancho significa que estará activo si un usuario que inicia sesión inicia la acción. Al usar el segundo gancho, puede separar los usuarios que iniciaron sesión y los que no lo hicieron.

Cree una clase user_vote y una propiedad data-post_id, que contengan el ID de la publicación y el evento de clic, usando su complemento. Se puede usar un metacampo para almacenar el número total de votos emitidos. La función update_post_meta() se utiliza para actualizar el número de votos de nuestra publicación. Crearemos una matriz para cada caso para que coincida con el éxito o el fracaso de la función. Ahora se han utilizado métodos regulares para manejar las acciones del usuario y ahora se ha desarrollado JavaScript. Una función pobre para manejar usuarios desconectados, pero puede usarse como ejemplo. Necesitaremos jQuery y nuestro propio código JavaScript para que nuestro sistema use AJAX.

Siguiendo los pasos a continuación, puede hacer esto en su complemento. En el archivo my_voter_script.js, encontraremos la URL myAjax.ajaxurl, que contiene la URL de nuestro archivo admin-ajax.html. Cuando un usuario hace clic en el botón de votar sin usar JavaScript, usa el método GET (la cadena de consulta) para enviar una solicitud al script. Pueden acceder a una página usando JavaScript. En respuesta a nuestra solicitud, los datos deben hacerse públicos. Se espera que la función my_user_vote() en nuestro complemento procese esto y nos envíe la matriz de resultados. El contador de votos, en nuestro ejemplo, cambia de valor para indicar el nuevo conteo de votos. La plataforma AJAX de WordPress tiene mucho que ofrecer, así como la capacidad de diferenciar entre estados de inicio de sesión y de no cierre de sesión.

¿Puedo usar Ajax en WordPress?

Crédito: Kinsta

Puede usar AJAX en WordPress de la misma manera que ya se usa en el back-end. Todo lo que tienes que hacer es acostumbrarte a las herramientas disponibles. El código es una explicación general del proceso, pero lo abordaremos más adelante.

Ajax le permite intercambiar datos sin tener que recargar una página. Puede hacerlo por su cuenta si crea un archivo independiente con WordPress, pero debe llamarlo y procesarlo por su cuenta. Además, WordPress incluye una manera eficiente y sencilla para que Ajax se use internamente. Al externalizar Ajax a un archivo adicional, puede incluirlo en functions.php. Ajax es el código real que usamos aquí. Los datos de Ajax se procesan con el paso 4 de JavaScript. En JavaScript, usted envía los datos al cliente en una devolución de llamada. También puede agregar especias adicionales según sea necesario.

AJAX se puede usar para recuperar datos de un servidor, enviar datos a un script o realizar cálculos. HTML5 se combina con frecuencia con AJAX, lo que facilita a los diseñadores la creación de sitios web que se ven y se sienten modernos.
Las páginas web se pueden generar con AJAX en cuestión de segundos. Las páginas web se pueden actualizar de forma asincrónica mediante AJAX mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano. Debido a que partes de una página web se pueden actualizar sin recargar la página completa, esto significa que las partes se pueden actualizar sin recargar la página completa.

Cómo usar la función Admin_url() en WordPress Ajax

En nuestro código de ejemplo de AJAX, la función admin_url() devuelve la URL de solicitud de AJAX . Esto es lo que me aparece en esta imagen: Ajax ( type:GET, dataType: json, url: admin_url('ajax.')) usa GET. En., datos, acción: get_data, éxito: función (respuesta) alerta ("No se pudo agregar su voto"); e in., evento: recibir. La URL de solicitud de AJAX se puede especificar usando la función admin_url() en este ejemplo. Los datos son los siguientes: *acción: “obtener_datos”, *éxito: función(respuesta): “No se pudo agregar su voto”); *alerta: “No se pudo agregar su voto”

¿Cómo obtengo datos Ajax en WordPress?

Crédito: blogtecnico.in

Hay algunas formas diferentes de obtener datos AJAX en WordPress. Una forma es usar las API de AJAX que están integradas en WordPress. Otra forma es usar un complemento o tema que proporcione la funcionalidad AJAX. Finalmente, también puede escribir su propio código para manejar las solicitudes de AJAX.

¿Cómo funciona Ajax en WordPress?

La mayoría de los sitios web utilizan Ajax, una tecnología web popular. Ajax, como una de sus características clave, es capaz de administrar las operaciones de la base de datos sin recargar las páginas web. Esto significa que los datos de la base de datos se pueden mostrar en el front-end sin necesidad de actualizarlos.

¿Cómo puedo saber si WordPress Ajax está funcionando?

Crédito: Desbordamiento de pila

Ajax es una tecnología que permite la creación de aplicaciones web dinámicas y receptivas. Permite que una página web solicite y reciba datos de un servidor sin tener que recargar toda la página. WordPress usa Ajax para mejorar la experiencia del usuario al proporcionar una interfaz más receptiva. Hay algunas formas de saber si WordPress Ajax está funcionando. Una es mirar las solicitudes de red en las herramientas de desarrollo de su navegador. Si ve que se realiza una solicitud a la URL ajax de WordPress (wp-admin/admin-ajax.php), entonces WordPress está usando Ajax en esa página. Otra forma de saberlo es buscar el signo '#' en la URL. Esto indica que la página está utilizando la opción 'fragmento', que se requiere para las solicitudes de Ajax.

Las funciones WP_doing_ajax se pueden usar porque WordPress 4.0.0 incluye una función integrada para ello. Debido a que los complementos que hacen Ajax de manera diferente pueden filtrar los falsos positivos, esta es una mejor opción. Si usa Ajax como se recomienda en el códice, puede probar la constante DOING_AJAX. Cuando una solicitud AJAX no está diseñada para usarse con un enlace admin-ajax, es simplemente un punto final (por ejemplo, PayPal IPN).

Ajax en WordPress sin complemento

AJAX es una tecnología que permite la creación de aplicaciones web dinámicas y receptivas. Es una opción popular para usar en WordPress porque puede ayudar a crear una experiencia de usuario más fluida. Hay algunas formas diferentes de implementar AJAX en WordPress, pero una de las más comunes es usar un complemento. Hay muchos complementos disponibles que pueden ayudar a agregar la funcionalidad AJAX a su sitio de WordPress, pero también es posible agregar AJAX sin un complemento. Si se siente cómodo con la codificación, puede agregar la funcionalidad AJAX agregando algunas líneas de código a su archivo functions.php.

Ajax, en particular, permite a los usuarios administrar las operaciones de la base de datos sin tener que recargar las páginas web. Como resultado, puede obtener datos de la base de datos y mostrarlos en la interfaz sin tener que actualizar la página. Ajax ha ganado popularidad a lo largo de los años debido a su facilidad de uso y velocidad de visualización, y ahora se usa de diversas formas en los sitios web. Para registrar y poner en cola nuestros archivos JavaScript y CSS, WordPress debe tener los ganchos necesarios. Finalmente, debemos crear un enlace Léame más tarde para cada publicación de blog. Cuando el usuario hace clic en el enlace, la publicación que desea guardar se agrega a la lista "Léame más tarde". Una vez que hemos determinado lo que tenemos que hacer, hacemos clic en el enlace.

Aquí hay un vistazo rápido a cómo usamos el atributo de datos HTML5 para identificar la publicación del blog. Get_the_id() se puede usar para obtener esta información si está usando el complemento. Cuando llama a Ajax en un objeto, debe enviar la solicitud al archivo admin-ajax.php . Este archivo maneja y procesa todas sus solicitudes de WordPress Ajax. En este código, hemos creado una función que se llamará cuando el usuario haga clic en el enlace 'Léame más tarde'. Obtenemos la identificación de la publicación a través del método de datos en esta función y la guardamos en la variable rml_post_id. Después de agregar el siguiente código, deberá usar el método ajax() nuevamente.

Cuando un usuario hace clic en el enlace 'Léame más tarde', se eliminará. La variable $rml_post_id contiene el ID de la publicación. Cuando hay una fila, la función de WordPress get_meta() devuelve el valor meta. Almacenamos esta información en la tabla usermeta en nuestra base de datos si es verdadera. Investigamos para ver si hay algún valor de $, si existe o no. Agregue el siguiente código al archivo read-me-later.php. Usted es responsable de desinfectar su sistema usando Update() cuando realiza una actualización.

La función get_posts() de WordPress devuelve todas las publicaciones según las preferencias del usuario. Usaremos el método widget() para mostrar la frase 'Léame'. Las publicaciones del mes anterior se utilizarán en la interfaz. Para ser honesto, simplemente requerimos un widget básico en este caso. Esta función le permite determinar si una solicitud proviene de la ubicación correcta y si la realiza un usuario autenticado. Si el nonce es incorrecto o no está configurado, la llamada Ajax se cancela. Este tutorial enseñará a los usuarios cómo guardar las publicaciones que desean leer más tarde y luego leerlas más tarde.

Publicación de WordPress Ajax

Ajax le permite actualizar dinámicamente partes de su sitio de WordPress sin recargar toda la página. Esto puede ser útil para recuperar datos de formularios, actualizar información en la base de datos o mostrar contenido de otras partes del sitio.

El artículo de Artisans Web sobre las publicaciones de WordPress que se cargan con Ajax es una excelente fuente para comenzar. A veces, te encontrarás con una situación en la que querrás usar Ajax en las publicaciones de WordPress. En respuesta a este comportamiento, no se mostrarán enlaces de paginación y se detendrán las recargas de página. El siguiente conjunto de publicaciones se mostrará al hacer clic en este botón, siempre que haga clic en él y luego haga clic en 'Cargar más'. El proceso se completará una vez que se hayan visto todas las publicaciones. Para integrar WordPress Ajax, debe incluir un archivo JS en el entorno de WordPress. En el directorio js, ​​cree un archivo custom.js y luego copie el siguiente código en el archivo functions.php.

Este código toma el valor de 'página' y lo convierte en un valor 'paginado'. Las publicaciones de WordPress se distribuyen y el resultado resultante es generado por él. Cuando hace clic en el botón 'Cargar más', las próximas publicaciones se cargarán en Ajax.

¿Cuál es la diferencia entre Ajax y Post?

El símbolo $ se conoce como una publicación. Debido a que tanto las solicitudes POST como las solicitudes POST son posibles utilizando el mismo código subyacente, hay poco que distinguir entre ellas.

Función WordPress Ajax Call Php

Ajax es un método para hacer que las páginas web sean más receptivas e interactivas mediante el intercambio de pequeñas cantidades de datos con el servidor detrás de escena. Este intercambio de datos se puede utilizar para actualizar una página sin recargar, responder a la entrada del usuario sin recargar la página, cargar contenido nuevo en la página sin recargar, etc. En WordPress, Ajax se usa en el back-end para realizar varias tareas, como guardar publicaciones, obtener información de la base de datos, etc. En el front-end, Ajax se puede usar para implementar funciones como desplazamiento infinito, cargar más publicaciones al hacer clic en un botón, etc. Para usar Ajax en WordPress, debemos incluir la biblioteca jQuery que ya está incluida en WordPress. Luego podemos usar los métodos jQuery.ajax() o jQuery.post() para realizar nuestras solicitudes Ajax. En el back-end, debemos conectarnos a la acción wp_ajax para poder manejar nuestras solicitudes de Ajax. Luego podemos usar la función wp_die() para salir de nuestro script PHP y devolver nuestra respuesta. En el front-end, debemos realizar nuestra solicitud Ajax a WordPress ajaxurl, que es una variable global de JavaScript. Luego podemos usar las funciones de devolución de llamada de éxito y error para manejar nuestra respuesta.

Cómo hacer una llamada Ajax en WordPress

La creación de llamadas Ajax usando WordPress. Para que funcione una llamada Ajax, un miembro principal de WordPress debe incluir el archivo admin-ajax.php. Dentro del contexto de WordPress, este archivo es responsable de manejar y procesar todas sus solicitudes de Ajax. NO utilice la URL directa de la ruta del archivo para acceder al archivo. ¿Cómo obtengo admin-ajax en WordPress? Todas las llamadas Ajax se enrutan al directorio /wordpress/ajax/files en WordPress usando el archivo admin-ajax.php. ¿Ajax es compatible con PHP? AJAX se puede utilizar en lugar de PHP. En nuestro tutorial de PHP, demostraremos cómo AJAX puede actualizar partes de una página web sin recargar toda la página. Se usará PHP para crear el script del servidor.