Usando AJAX con PHP en su sitio de WordPress con su propio complemento
Publicado: 2021-07-23
En este artículo discutimos sobre AJAX con PHP para su sitio web de WordPress.
AJAX es una técnica para el desarrollo web que ayuda a los usuarios a desarrollar aplicaciones interactivas en el sitio web. Proporciona a los usuarios una experiencia web más rápida y fluida. Permite a los usuarios realizar cambios o actualizar contenidos en la página web sin recargar o actualizar las páginas. Uno necesita saber varios lenguajes de programación para trabajar con AJAX.
¿Qué es AJAX?
AJAX significa 'JavaScript asíncrono y XML'. Como se mencionó anteriormente, se utiliza para crear aplicaciones web entretenidas, en constante cambio e interactivas.
Algunos de los ejemplos populares de aplicaciones web desarrolladas con la ayuda de AJAX y tecnologías relacionadas son Google Maps, la función de autocompletar en la búsqueda de Google, comentarios y Me gusta en varias publicaciones de redes sociales, y muchos otros.
Conceptos básicos de AJAX
Ajax, con la ayuda de varios lenguajes de programación como JavaScript, HTML, CSS y XML, desarrolla aplicaciones web y sitios web más rápidos y mejorados. Aparte de estos lenguajes de programación, para el desarrollo de aplicaciones web también se están utilizando AJAX con PHP y otros lenguajes del lado del servidor.
Utiliza JavaScript para la visualización de contenidos, mientras que CSS ayuda en la presentación y el Modelo de objetos del documento. Además, utiliza XHTML para el contenido.
En las aplicaciones web o páginas web tradicionales, la información se intercambia con el servidor de forma síncrona. Por otro lado, en las aplicaciones web, que han sido diseñadas para usar AJAX, cuando ocurre un evento como hacer clic en un botón o completar un formulario, JavaScript crea una solicitud XMLHTTP y la envía al servidor en formato XML.
El servidor procesa la solicitud, crea una respuesta del lado del servidor y la envía de regreso al navegador. Luego, JavaScript procesa la respuesta y el contenido de la pantalla de visualización actual se actualiza. Como no es necesario recargar o actualizar las páginas, los usuarios no se darán cuenta de la transferencia de información al servidor.
Habilidades necesarias para trabajar con AJAX en WordPress
Como se desprende de la discusión anterior, los usuarios requieren las siguientes habilidades para utilizar AJAX correctamente.
• Conocimiento de lenguajes de programación como JavaScript, HTML y CSS
• Competencia en lenguajes del lado del servidor como PHP y otros
• Conceptos básicos de XML o JSON
Ventajas de AJAX
Las diversas ventajas de AJAX se analizan a continuación.
• Es compatible con casi todos los navegadores utilizados en los tiempos actuales
• Implica un tiempo de respuesta más rápido, lo que significa una experiencia de usuario mejorada en términos de velocidad y rendimiento
• Las bibliotecas JavaScript de código abierto, como Prototype, jQuery, etc., están disponibles para su uso.
• Reduce el tiempo entre el cliente y el servidor, por lo que se ahorra el tiempo tanto de los usuarios como del servidor.
• Como no se requiere que el servidor procese una gran cantidad de datos, ayuda a reducir el uso del ancho de banda y optimizar el funcionamiento de la red.
• Como la solicitud XMLHTTP se utiliza para recuperar datos, los usuarios pueden realizar múltiples tareas simultáneamente.
AJAX en WordPress
AJAX se usa en el backend de WordPress, como resultado, cada vez que se realizan cambios en publicaciones o categorías, o cada vez que el administrador modera los comentarios, las actualizaciones se realizarán instantáneamente. AJAX se usa principalmente con JQuery en WordPress. El proceso en el que WordPress usa AJAX es el siguiente
• Cuando se realiza una solicitud, pasa por el archivo 'admin-ajax.php' ubicado en la carpeta 'wp-admin'.
• Estas solicitudes deben proporcionar al menos un dato, también llamado 'acción' generalmente, utilizando el método 'obtener' o 'publicar'.
• Esta acción solicita el código en el archivo 'admin-ajax.php' para crear dos ganchos, a saber, 'wp_ajax_my_action' y 'wp_ajax_nopriv_my_action'. El 'my_action' en estos enlaces indica el valor de la variable 'action' del método 'get' o 'post'.
• Mientras que el primer enlace está destinado a las acciones realizadas por los usuarios que iniciaron sesión, el segundo enlace está destinado exclusivamente a los usuarios que no han iniciado sesión.
• Las funciones enganchadas deben planificarse para la degradación ordenada, lo que garantiza que incluso si JavaScript está desactivado en los navegadores, los códigos seguirán funcionando.
Crear un complemento AJAX de WordPress
En esta sección, tomemos el ejemplo de un complemento básico de WordPress AJAX llamado 'Publicar contador de me gusta'. Este complemento incluye las siguientes características:
• Se actualiza instantáneamente en la interfaz
• Los usuarios registrados pueden dar me gusta a las publicaciones.
• Si los usuarios que han cerrado la sesión intentan que les guste la publicación, aparecerá un mensaje de error en la pantalla
• Este complemento ayuda a mantener el registro total de la cantidad de 'me gusta' y los muestra
En primer lugar, se requiere crear y activar un complemento de WordPress vacío. Para crear un complemento, se deben realizar los siguientes pasos.
Paso 1 : Seleccione un nombre único para el complemento. Uno puede verificar los repositorios de complementos para asegurarse de que el nombre propuesto del complemento ya no esté en uso. Por lo general, los desarrolladores de complementos seleccionan el nombre de un complemento en función de la función que se supone que debe realizar.
Paso 2 : en el siguiente paso, se requiere un archivo PHP para crear usando el nombre del complemento seleccionado. Como los usuarios que instalarán este complemento, deberán colocar el archivo PHP en el directorio de complementos de WordPress 'wp-content/plugins-' para su instalación, los complementos no pueden compartir el mismo nombre para los archivos PHP.
Por lo tanto, el nombre del archivo del complemento también debe ser único para evitar conflictos con otro complemento en el repositorio. Uno puede usar su nombre o el nombre de su empresa en el prefijo para crear un nombre único para el archivo PHP.
Paso 3 : Cabe señalar que el complemento de WordPress debe contener al menos un archivo PHP junto con JavaScript, CSS, idiomas y archivos de imagen. Si hay varios archivos presentes, seleccione un nombre único para el directorio y un nombre preferido para el archivo PHP principal.
Coloque todos los archivos del complemento en el directorio creado y solicite a los usuarios del complemento que carguen este directorio completo en el directorio 'wp-content/plugins/'.
La instalación de WordPress se puede configurar para cambiar el directorio de complementos estándar 'wp-content/plugins/'. Por lo tanto, uno debe usar plugin_dir_path() y plugin_url() para la ruta absoluta y las URL en su código PHP.
Plantilla de publicación del tema
Después de crear el complemento, es necesario encontrar la plantilla de publicación 'single.php' de su tema. Se puede encontrar en el directorio raíz del tema activo. Se usa cuando se consulta una sola publicación; donde uno quiere colocar su complemento 'Publicar como contador'. El archivo debe mantenerse abierto para su edición.
Prepare la plantilla de publicación lista para la llamada AJAX
Se requiere crear un enlace para que a los usuarios les gusten las publicaciones. Si los usuarios habilitaron JavaScript, pueden usar los archivos JavaScript (que se crearán más adelante) o, de lo contrario, pueden seguir el enlace directamente. Para ello, inserte el siguiente código en el archivo 'single.php'. Este código también se puede agregar a cualquiera de las partes de la plantilla que contiene el archivo 'single.php'.
// El valor de la clave meta 'Me gusta' almacenará el recuento total de Me gusta para una publicación específica, mostrará 0 si es una cadena vacía ID, "me gusta", verdadero); $me gusta = ($me gusta == "") ? 0 : $me gusta; ?> Esta publicación tiene <span id='like_counter'></span> me gusta<br> // Vinculación al archivo admin-ajax.php. Nonce cheque incluido para mayor seguridad. Tenga en cuenta la clase "user_like" para clientes habilitados para JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '"href="'. $enlace . '">Me gusta esta publicación</a>'; ?>
Direccionamiento de la llamada Ajax sin JavaScript
Al hacer clic en el enlace creado en el paso anterior, uno será reenviado al script 'admin-ajax.php'; sin embargo, no encontrarán ningún resultado útil, ya que la función no se crea para ejecutar la acción. Para crear la función en el archivo del complemento y agregarlo a los ganchos creados por WordPress, inserte el siguiente código.
<?php // usado aquí solo para habilitar el resaltado de sintaxis. Omita esto si ya está incluido en su archivo de complemento.
// definir las acciones para los dos ganchos creados, primero para usuarios registrados y el siguiente para usuarios desconectados
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "por favor_iniciar sesión");
// definir la función que se activará para los usuarios registrados
function my_user_like() {
// nonce comprueba si hay una capa adicional de seguridad, la función se cerrará si falla
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Guau Guau Guau");
}
// obtener like_count para una publicación, configurarlo en 0 si está vacío, incrementar en 1 cuando se registra un clic
$like_count = get_post_meta($_REQUEST["post_id"], "me gusta", verdadero);
$like_count = ($like_count == ') ? 0 : $like_count;
$nuevo_like_count = $like_count + 1;
// Actualizar el valor de 'me gusta' meta clave para la publicación especificada, crea nuevos metadatos para la publicación si no existe ninguno
$like = update_post_meta($_REQUEST["post_id"], "me gusta", $new_like_count);
// Si la acción anterior falla, el tipo de resultado se establece en 'error' y like_count establecido en el valor anterior, si tiene éxito, actualizado a new_like_count
si ($ como === falso) {
$resultado['tipo'] = "error";
$resultado['like_count'] = $like_count;
}
demás {
$resultado['tipo'] = "éxito";
$resultado['like_count'] = $nuevo_like_count;
}
// Comprobar si la acción se disparó a través de la llamada Ajax. En caso afirmativo, se activará el código JS; de lo contrario, se redirigirá al usuario a la página de publicación
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$resultado = json_encode($resultado);
echo $resultado;
}
demás {
header("Ubicación: ".$_SERVER["HTTP_REFERER"]);
}
// no olvide finalizar sus scripts con una función die() - muy importante
morir();
}
// definir la función que se activará para los usuarios desconectados
función por favor_login() {
echo "Debes iniciar sesión para dar me gusta";
morir();
}
Si todo sale bien, cuando un usuario registrado haga clic en el enlace 'Me gusta esta publicación', la cantidad de Me gusta se actualizará automáticamente. Por otro lado, si JavaScript está deshabilitado, la página se actualizará mostrando los recuentos actualizados de 'me gusta'.
Agregar soporte para JavaScript
Agregar soporte para JavaScript puede facilitar las cosas. Para usar AJAX con PHP en WordPress, se requiere poner en cola la biblioteca jQuery junto con el archivo JavaScript personalizado del complemento. Para ello, escriba el siguiente código en el complemento.
admin_url( 'admin-ajax.php' )));
// poner en cola la biblioteca jQuery y el script que registró anteriormente
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
A continuación, se requiere crear el archivo Javascript 'liker_script.js', que luego se cargará en la carpeta raíz del complemento. El siguiente código se usa para crear el archivo 'liker_script.js'.
jQuery(documento).ready(función() {
jQuery(".user_like").click( función(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
tipo: "publicación",
tipo de datos: "json",
URL: myAjax.ajaxurl,
datos: {acción: "my_user_like", post_id: post_id, nonce: nonce},
éxito: función (respuesta) {
if(respuesta.tipo == "éxito") {
jQuery("#like_counter").html(response.like_count);
}
demás {
alert("No se pudo agregar tu like");
}
}
});
});
});
Cómo implementar AJAX en temas de WordPress
Los siguientes pasos ayudarán a implementar AJAX con PHP en los temas de WordPress. Por ejemplo, supongamos que nuestro trabajo es mostrar las categorías en un menú desplegable y al hacer clic en 'Categoría principal', las subcategorías aparecerán en otro cuadro desplegable. Esta tarea se logrará con la ayuda de los siguientes pasos
Paso 1 : seleccione 'categorías' en el lado izquierdo del tablero e inserte el nombre de las categorías en el cuadro que aparece en el lado derecho e inserte el slug de categoría a continuación. Si se está creando la categoría principal, seleccione 'ninguna', o si se están creando las subcategorías, seleccione la categoría principal de las opciones.
Paso 2 : en este paso, se crearía una plantilla de WordPress donde se implementará la funcionalidad AJAX. Abra un nuevo archivo PHP y guárdelo. Inserte el siguiente código en la página creada.
En el código anterior, 'Nombre de la plantilla: Implementar Ajax', es el nombre de la plantilla de WordPress y las funciones 'get_header()' y 'get_footer()' se utilizan para mostrar el contenido del encabezado y pie de página de la página.
En primer lugar, se necesita incluir el archivo de la biblioteca jQuery en la página, lo que ayudará a agregar las cosas de AJAX. AJAX con PHP se puede usar cualquier biblioteca de JavaScript o se puede llamar a AJAX con JavaScript sin formato. En el siguiente ejemplo, la biblioteca jQuery JavaScript se usa para implementar AJAX.
Paso 3 : agregue el archivo jQuery en la plantilla y llame a la función 'wp_dropdown_categories' para que se puedan recuperar las categorías principales en el menú desplegable.
#contenido{ancho:automático; altura: 400px; margen: 50px;}
<div>
</div>
<?php
Paso 4 : Inserte el código jQuery para obtener el ID de la categoría principal que se está seleccionando. Envíelo al archivo 'functions.php' para obtener las subcategorías bajo esa ID de categoría principal seleccionada. Los resultados se pueden enviar de vuelta a la página sin actualizarla.
$(función(){
$('#gato_principal').cambio(función(){
var $mainCat=$('#main_cat').val();
// llamar a ajax
$("#sub_gato").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
escriba: 'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
exito:funcion(resultados)
{
// alerta(resultados);
$("#sub_gato").removeAttr("deshabilitado");
$("#sub_cat").append(resultados);
}
});
}
);
});
En este código anterior, el código se agrega en el evento de cambio del menú desplegable de categorías principales con el ID '#main_cat'.
var $mainCat=$('#main_cat').val();
La función .val() ayuda a obtener el valor de la opción seleccionada del menú desplegable y se almacena en la variable '$mainCat'.
$("#sub_gato").empty();
Se requiere que el menú desplegable de la subcategoría '#sub_cat' esté vacío, si contiene algún valor anterior, antes de llamar a AJAX.
La siguiente línea de jQuery ayudará a llamar a las funciones de AJAX jQuery. Verifique los parámetros de la función AJAX que se dan en la siguiente sección.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
escriba: 'POST',
Para hacer que AJAX funcione en WordPress, se usa el parámetro 'URL'. Por lo tanto, las solicitudes se enviarán al archivo 'admin-ajax.php'. A continuación, se llamará a los enlaces en el archivo 'functions.php' para obtener los datos publicados que se enviaron a la URL: '/wp-admin/admin-ajax.php'
Para enviar los valores junto con la solicitud, se utiliza el parámetro 'datos'. En este ejemplo, se utilizan dos argumentos con el parámetro de datos: acción y main_catid.
Paso 5 : en el archivo 'functions.php', se usa el siguiente código para enganchar una acción.
add_action('wp_ajax_my_special_action', 'my_action_callback');
En esta acción anterior, gancho tiene dos argumentos. En el primer argumento 'wp_ajax_my_special_action', 'wp_ajax_' es el valor que se envía junto con el parámetro de datos 'action'. En el segundo argumento 'my_action_callback', los datos se procesarán y los resultados se devolverán.
Este enlace de acción anterior es para usuarios registrados. Para los usuarios que han cerrado la sesión, se puede enganchar la siguiente acción
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
El código final después de agregar ganchos para ambos usuarios y la función de devolución de llamada es el siguiente
función implementar_ajax() {
if(isset($_POST['main_catid']))
{
$categorias= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categorías como $gato) {
$opción .= 'term_id.'">';
$opción .= $gato->nombre_gato;
$opción .= ' ('.$cat->category_count.')';
$opción .= '';
}
echo 'Scegli...'.$opción;
morir();
} // terminara si
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//para usuarios que no han iniciado sesión.
Paso 6 : en este paso, cree una nueva página en el tablero y asígnele la plantilla. Después de cargar la página en el navegador, se cargará el primer menú desplegable con las categorías principales.
Como el segundo menú desplegable está vacío, seleccione la opción en el primer menú desplegable para comprobar cómo funciona.
Por lo tanto, AJAX con PHP se puede usar en el sitio de WordPress con la ayuda de un complemento recién creado.