Cómo usar Ajax en WordPress

Si tiene una base de clientes comprometida y activa para su sitio web, es posible que se pregunte cómo puede brindarles una experiencia web verdaderamente interactiva y enriquecida. Ofrecer interactividad en tiempo real puede ser un gran atractivo para su audiencia.

Afortunadamente, Asynchronous JavaScript and XML (Ajax) es un método accesible para agregar funciones interactivas a su sitio web. Cuando se trata de WordPress, incluso puede simplificar el proceso utilizando un complemento basado en Ajax.

En este artículo, le presentaremos Ajax y cómo funciona. También lo guiaremos para comenzar con Ajax en WordPress. ¡Entremos de inmediato!

¿Qué es Ajax y cómo funciona?

Ajax reúne varios lenguajes de programación diferentes, como HTML, CSS, JavaScript y más. En acción, funciona entre bastidores para recibir solicitudes de un navegador web, enviarlas al servidor y transferir los resultados de nuevo al navegador.

Como usuario de la web, no sabrá que Ajax está funcionando. Simplemente obtendrá una experiencia altamente interactiva. En su propio sitio, por ejemplo, puede usar Ajax para aceptar Me gusta en publicaciones de usuarios que han iniciado sesión y mostrar un recuento en tiempo real.

¿Por qué es útil Ajax?

Con Ajax, los usuarios no tienen que volver a cargar una página para ver ciertos cambios en ella. Esto significa que su sitio se mantendrá rápido y brindará una experiencia de usuario más fluida. Dado que Ajax es eficiente y envía solo los datos que necesita de un lado a otro, puede maximizar el ancho de banda y evitar transferencias de datos más pesadas.

Como usuarios de la web, cosechamos los beneficios de Ajax todo el tiempo. Un ejemplo es la función de búsqueda de autocompletado de Google.

Otros ejemplos con los que puede estar familiarizado incluyen los comentarios de Facebook y los Me gusta de Instagram. Es probable que Ajax funcione en cualquier lugar donde pueda interactuar con una página web y recibir información a cambio al instante.

Primeros pasos con Ajax en WordPress

Cuando se trata de WordPress, hay algunas formas en que Ajax resulta útil. Primero, veremos la URL de Ajax y cómo usarla junto con los ganchos de funciones de WordPress.

La URL de Ajax en WordPress

Dado que WordPress usa Ajax de forma predeterminada en el panel de administración, agregar más funciones de Ajax no es difícil. Sin embargo, si desea utilizar Ajax en la parte frontal de su sitio, deberá comprender cómo funciona la URL de Ajax.

En WordPress, su archivo admin-ajax.php tiene una URL. Esto proporciona la información necesaria para enviar datos para su procesamiento y es vital para el desarrollo de interfaz de usuario de Ajax. WordPress emplea una llamada wp_localize_script() para usar la URL de Ajax para conectar las funciones de JavaScript y PHP, ya que PHP no puede reflejarlas directamente sin alguna ayuda.

Cómo usar el gancho de acción Ajax en WordPress

WordPress emplea ganchos en su programación, como una forma de que los complementos y temas interactúen con WordPress Core. Los ganchos vienen en dos variedades: 'acciones' y 'filtros'. Con Ajax, usará ganchos de acción para ejecutar funciones.

Las acciones le permiten agregar datos a WordPress o cambiar su funcionamiento. Con Ajax, utilizará la acción wp_ajax_(acción). Luego se puede conectar una función personalizada a esto, para ejecutarla durante una llamada Ajax.

Por ejemplo, este código de muestra de WordPress muestra cómo se pueden combinar una llamada Ajax y un objeto JavaScript en el mismo archivo para ejecutar una acción:

<?php

add_action('wp_ajax_my_action', 'my_action');

funcion mi_accion() {
global $wpdb; // así es como obtienes acceso a la base de datos

$lo que sea = intval( $_POST['lo que sea'] );

$lo que sea += 10;

echo $lo que sea;

wp_morir(); // esto es necesario para terminar inmediatamente y devolver una respuesta adecuada
}

También puede crear archivos JavaScript separados para sus acciones de Ajax. Solo deberá asegurarse de usar la URL de Ajax, para que las llamadas no se pierdan.

Cómo usar Ajax trabajando con un complemento de ejemplo (3 pasos)

Si desea experimentar con Ajax, la mejor manera es crear un complemento con él. Afortunadamente, hay muchas piezas de código de ejemplo o complementos básicos con los que puede comenzar. Para este ejemplo, vamos a utilizar un código de ejemplo descargable de WordPress Plugin Boilerplate.

Paso 1: cree las estructuras de archivos adecuadas

Primero, deberá nombrar su complemento y crear las estructuras de archivo adecuadas para él. El nombre debe ser único y no entrar en conflicto con ninguna otra herramienta en el directorio de complementos de WordPress. Esto se debe a que cuando un usuario carga su complemento, irá a su directorio wp-content/plugins/ .

Una vez que haya decidido un nombre, debe crear al menos los siguientes tres archivos en su propio directorio wp-content/plugins/ :

• plugin-name.php
• plugin-name.js
• plugin-name.css

Querrá colocar el archivo .php en la carpeta de su nuevo complemento y crear subcarpetas separadas para que vivan los archivos JavaScript y CSS. Todos los archivos necesarios para que su complemento funcione deberán estar ubicados en la misma carpeta maestra.

En el siguiente paso, verá que el código de muestra que estamos usando viene con estructuras de archivos creadas previamente. Sin embargo, creemos que es importante entender cómo empezar desde cero y por qué sus archivos deben estructurarse de cierta manera.

Paso 2: elija un código de muestra para comenzar

Usar un archivo de código de muestra es un buen lugar para comenzar cuando pruebe Ajax en su primer complemento. Sin embargo, siempre desea verificar dos veces su código de muestra para asegurarse de que sea seguro y no contenga errores.

Como mencionamos anteriormente, vamos a utilizar el Boilerplate del complemento de WordPress para nuestro ejemplo. Este código de muestra viene empaquetado con los archivos que necesitará para completar su complemento.

Este complemento de muestra también se adhiere a los estándares de codificación y documentación de WordPress. Puede descargar el archivo .zip del complemento desde el sitio web repetitivo para comenzar.

Paso 3: enganche acciones en su código

El código de muestra del complemento que estamos usando está construido con Programación Orientada a Objetos (OOP). Esto ayuda a los programadores a organizar su código y crea un patrón de desarrollo fácil de compartir y reutilizable.

Además, el código viene empaquetado con todos los archivos necesarios para el desarrollo del complemento, incluidos los archivos de activación y desactivación en el directorio /incluye/ . También le resultará fácil ubicar los archivos públicos y administrativos según sea necesario.

Echemos un vistazo a nuestro complemento de muestra, viendo el comienzo del archivo plugin-name.php :

<?php

/**
* El archivo de arranque del complemento
*
* WordPress lee este archivo para generar la información del complemento en el complemento
* área de administración. Este archivo también incluye todas las dependencias utilizadas por el complemento,
* registra las funciones de activación y desactivación, y define una función
* registra las funciones de activación y desactivación, y define una función
* que inicia el complemento.
*
* @enlace http://ejemplo.com
* @desde 1.0.0
* @package Nombre_del_complemento
*
* @wordpress-complemento
* Nombre del complemento: Plantilla de complemento de WordPress
* URI del complemento: http://example.com/plugin-name-uri/
* Descripción: Esta es una breve descripción de lo que hace el complemento. Se muestra en el área de administración de WordPress.
* Versión: 1.0.0
* Autor: Su Nombre o Su Empresa
* Autor URI: http://example.com/
* Licencia: GPL-2.0+
* URI de licencia: http://www.gnu.org/licenses/gpl-2.0.txt
* Dominio de texto: nombre del complemento
* Ruta de dominio: /idiomas
*/

Toda la información contenida en esta parte del código es importante para registrar su complemento con WordPress. Así es como el directorio de complementos sabrá qué mostrar para su complemento.

Ahora deberá hacer algunas cosas para conectar todos los puntos, que incluyen:

• Asegúrese de que su URL de Ajax esté disponible para su secuencia de comandos. Puede usar wp_localize_script() para lograr eso.
• Cree una clase de nombre de complemento con la clase Nombre-de-complemento{} en su archivo nombre-de-complemento.php . Aquí es donde definirás tus ganchos de acción.
• Cree una función JavaScript correspondiente en su archivo plugin-name.js .

Un elemento importante del enfoque de Ajax es definir quién puede usar cada función, especialmente al crear interactividad en el front-end. Engancharemos una acción de front-end con un código de muestra de WordPress:

si (es_admin()) {
add_action('wp_ajax_my_frontend_action', 'my_frontend_action');
add_action('wp_ajax_nopriv_my_frontend_action', 'my_frontend_action');
add_action('wp_ajax_my_backend_action', 'my_backend_action');
// Agregue otros ganchos de acción de back-end aquí
} demás {
// Agregue ganchos de acción front-end que no sean Ajax aquí
}

Tomemos nota de algunas cosas en este ejemplo. Primero, estas acciones estarán disponibles para cualquier persona en el sitio, ya sea que haya iniciado sesión en una cuenta o no. Eso está indicado por la llamada 'wp_ajax_nonpriv_()'. En segundo lugar, puede ver que también hay acciones administrativas de back-end que se conectan durante las acciones de front-end.

Para comprender el proceso que tiene lugar en este conjunto de acciones, también es importante saber que my_frontend_action activará la función de PHP my_frontend_action_callback().

Paso 4: pruebe y depure su complemento

Una vez que configure todos los ganchos de acción y las funciones correspondientes que necesita, querrá probar y potencialmente depurar su complemento (si hay algún problema). Su servidor web puede ofrecer una herramienta de depuración como parte de su paquete de alojamiento.

Aquí en WP Engine, proporcionamos el registro de errores de WP Engine para ayudarlo a encontrar puntos problemáticos.

Nuestro registro de errores proporciona un tutorial codificado por colores de cualquier error en el código de su sitio y dónde interactúan con nuestros servidores u otras partes de su sitio. Esto hace que la resolución de problemas sea mucho más fácil, ya sea que esté trabajando con Ajax o algo completamente diferente.

Explore otros recursos y herramientas de WP Engine

Ahora que está en camino de crear increíbles complementos de WordPress con Ajax, es posible que desee evaluar qué otras herramientas necesitará. WP Engine ofrece una plataforma de experiencia digital (DXP) completa y está aquí para ayudarlo a crear nuevos complementos para WordPress.

Ya sea que esté interesado en nuestro Registro de errores de WP Engine para que pueda ejecutar un complemento sin errores, o simplemente necesite un alojamiento de WordPress sólido y seguro, ¡ofrecemos una amplia variedad de planes y recursos para que los use!