En este artículo, discutiremos AJAX con PHP para su sitio de WordPress.
AJAX es una técnica de desarrollo de sitios web que ayuda a los usuarios a crear aplicaciones interactivas en un sitio web. Proporciona a los usuarios una experiencia de navegación más rápida y fluida en Internet. Permite a los usuarios realizar cambios o actualizar el contenido del sitio web sin recargar o actualizar las páginas. Para trabajar con AJAX, necesita conocer diferentes lenguajes de programación.
¿Qué es AJAX?
AJAX significa «JavaScript asíncrono y XML». Como se mencionó anteriormente, se utiliza para crear aplicaciones web divertidas, en constante cambio e interactivas.
Algunos de los ejemplos populares de aplicaciones web desarrolladas con AJAX y tecnologías relacionadas son Google Maps, Google Search autocompletado, comentarios y Me gusta en varias publicaciones de redes sociales, y muchos más.
Conceptos básicos de AJAX
Ajax utiliza una variedad de lenguajes de programación como JavaScript, HTML, CSS y XML para crear aplicaciones web y sitios web más rápidos y mejorados. Además de estos lenguajes de programación, AJAX con PHP y otros lenguajes del lado del servidor también se utilizan para desarrollar aplicaciones web.
Utiliza JavaScript para mostrar el contenido, mientras que CSS ayuda con la presentación y el modelo de objetos del documento. Además, utiliza XHTML para el contenido.
En las aplicaciones web o sitios web tradicionales, la información se intercambia con el servidor de forma síncrona. Por otro lado, en las aplicaciones web que fueron 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 se actualiza el contenido de la pantalla actual. Como no es necesario recargar ni actualizar las páginas, los usuarios no se darán cuenta de que se está cargando información en el servidor.
Habilidades necesarias para trabajar con AJAX en WordPress
Como muestra la discusión anterior, los usuarios necesitan las siguientes habilidades para usar 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
Los diversos beneficios de AJAX se analizan a continuación.
• Soporta casi todos los navegadores usados hoy en día
• Tiene un tiempo de respuesta más rápido lo que significa una mejor experiencia de usuario en términos de velocidad y rendimiento
• Están disponibles bibliotecas JavaScript de código abierto como Prototype, jQuery, etc.
• Reduce el tiempo entre el cliente y el servidor, lo que ahorra tiempo tanto a los usuarios como al servidor
• Dado que no se requiere que el servidor procese grandes cantidades de datos, ayuda a reducir el uso del ancho de banda y optimizar el rendimiento de la red.
• Dado que la solicitud XMLHTTP se utiliza para recuperar datos, los usuarios pueden realizar múltiples tareas.
AJAX en WordPress
AJAX se usa en el backend de WordPress, con el resultado de que cada vez que se realicen cambios en las publicaciones o categorías, o cada vez que un administrador modere los comentarios, las actualizaciones se realizarán de inmediato. AJAX se usa más comúnmente con JQuery en WordPress. El proceso por el cual WordPress usa AJAX es el siguiente
• Una vez enviada, la solicitud pasa por el archivo «admin-ajax.php» en la carpeta «wp-admin».
• Estas solicitudes están obligadas a proporcionar al menos una parte de los datos, también conocida como «acción», mediante el método de «descarga» o «publicación».
• Esta acción le pide al código en el archivo ‘admin-ajax.php’ que cree dos enlaces, a saber, ‘wp_ajax_myrael’ y ‘wp_ajax_nopriv_myrael’. ‘my nazwa’ en estos ganchos apunta al 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 han iniciado sesión, el segundo enlace está destinado únicamente a los usuarios que no han iniciado sesión.
• Las funciones enlazadas deben programarse para que se ejecuten sin problemas, lo que garantiza que incluso si JavaScript está deshabilitado en los navegadores, los códigos seguirán funcionando.
Crear un complemento de WordPress AJAX
En esta sección, tomemos un ejemplo de un complemento básico de WordPress AJAX llamado «Like Post Counter». Este complemento incluye las siguientes características:
• Se actualiza inmediatamente en la interfaz de usuario
• A los usuarios registrados les pueden gustar 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 un registro total de la cantidad de «me gusta» y los muestra
Primero, debe crear y activar un complemento de WordPress en blanco. Para crear un complemento, siga estos pasos.
Paso 1: Seleccione un nombre de enchufe único. Puede consultar los repositorios de complementos para asegurarse de que el nombre del complemento propuesto ya no se usa. Por lo general, los desarrolladores de complementos eligen un nombre de complemento en función de la función que se supone que debe realizar.
Paso 2: En el siguiente paso, se requiere crear un archivo PHP usando el nombre del complemento seleccionado. Dado que los usuarios que instalen este complemento deberán colocar el archivo PHP en el directorio de complementos de WordPress «wp-content / plugins-» para instalarlo, los complementos no pueden tener el mismo nombre para los archivos PHP.
Por lo tanto, el nombre de archivo del complemento también debe ser único para evitar conflictos con otro complemento en el repositorio. Puede usar su nombre o el nombre de la empresa en el prefijo para crear un nombre único para su archivo PHP.
Paso 3: Tenga en cuenta que un complemento de WordPress debe contener al menos un archivo PHP junto con JavaScript, CSS, idiomas y archivos de imagen. Si hay varios archivos, elija un nombre de directorio único y el nombre preferido del archivo PHP principal.
Coloque todos los archivos de complementos en el directorio creado y solicite a los usuarios de complementos que carguen el directorio completo en el directorio «wp-content / plugins /».
La instalación de WordPress se puede configurar para cambiar el directorio estándar de complementos «wp-content/plugins/». Por lo tanto, debe usar plugin_dir_path () y plugin_url () o rutas y URL absolutas en su código PHP.
Plantilla de publicación temática
Después de crear el complemento, busque la plantilla de publicación single.php para su tema. Puede encontrarlo en la raíz del tema activo. Se usa cuando se sondea una sola publicación; donde desea colocar el complemento «Publicar como contador». El archivo debe estar abierto para su edición.
Tenga una plantilla de publicación lista para la conversación AJAX
Para que a los usuarios les gusten tus publicaciones, debes crear un enlace. Si los usuarios han habilitado JavaScript, pueden usar los archivos JavaScript (que se crearán más adelante) o pueden ir directamente al enlace. Para hacer esto, inserte el siguiente código en el archivo ‘single.php’. Este código también se puede agregar a cualquier parte de la plantilla contenida en el archivo ‘single.php’.
// The 'likes' meta key value will store the total like count for a specific post, it'll show 0 if it's an empty string ID, "likes", true); $likes = ($likes == "") ? 0 : $likes; ?> This post has <span id='like_counter'></span> likes<br> // Linking to the admin-ajax.php file. Nonce check included for extra security. Note the "user_like" class for JS enabled clients. ID.'&nonce=".$nonce); echo "<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $link . '">Like this Post</a>'; ?>
Direccionamiento de llamadas Ajax sin JavaScript
Al hacer clic en el enlace creado en el paso anterior, será redirigido al script «admin-ajax.php»; sin embargo, no encontrarán ningún resultado útil ya que la función no se crea para ejecutar una acción. Para crear una función en un archivo de complemento y agregarlo a Hooks creados por WordPress, inserte el siguiente código.
<?php // used here only for enabling syntax highlighting. Leave this out if it's already included in your plugin file.
// define the actions for the two hooks created, first for logged in users and the next for logged out users
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// define the function to be fired for logged in users
function my_user_like() {
// nonce check for an extra layer of security, the function will exit if it fails
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Woof Woof Woof");
}
// fetch like_count for a post, set it to 0 if it's empty, increment by 1 when a click is registered
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ’) ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Update the value of 'likes' meta key for the specified post, creates new meta data for the post if none exists
$like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
// If above action fails, result type is set to 'error' and like_count set to old value, if success, updated to new_like_count
if($like === false) {
$result['type'] = "error";
$result['like_count'] = $like_count;
}
else {
$result['type'] = "success";
$result['like_count'] = $new_like_count;
}
// Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
echo $result;
}
else {
header("Location: ".$_SERVER["HTTP_REFERER"]);
}
// don't forget to end your scripts with a die() function - very important
die();
}
// define the function to be fired for logged out users
function please_login() {
echo "You must log in to like";
die();
}
Si todo va bien, cuando el usuario conectado 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á con el recuento actualizado de Me gusta.
Añadido soporte para JavaScript
Agregar soporte para JavaScript puede hacer esto más fácil. Para usar AJAX con PHP en WordPress, debe poner en cola la biblioteca jQuery junto con el archivo JavaScript personalizado del complemento. Para hacer esto, escriba el siguiente código en el complemento.
admin_url( 'admin-ajax.php' ))); // enqueue jQuery library and the script you registered above wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'liker_script' ); }
A continuación, cree un archivo JavaScript «liker_script.js», que luego se cargará en la carpeta raíz del complemento. El siguiente código crea el archivo «liker_script.js».
jQuery(document).ready( function() {
jQuery(".user_like").click( function(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
type : "post",
dataType : "json",
url : myAjax.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
success: function(response) {
if(response.type == "success") {
jQuery("#like_counter").html(response.like_count);
}
else {
alert("Your like could not be added");
}
}
});
});
});
Cómo implementar AJAX en temas de WordPress
Los pasos a continuación lo ayudarán a implementar AJAX con PHP en temas de WordPress. Por ejemplo, suponga que nuestro trabajo es mostrar categorías en un menú desplegable, y cuando hace clic en «Categoría principal», las subcategorías aparecerán en otro cuadro desplegable. Esta tarea se llevará a cabo a través de los siguientes pasos
Paso 1: seleccione «categorías» en el lado izquierdo del tablero e inserte el nombre de la categoría en el campo que aparece a la derecha, e inserte la información de la categoría a continuación. Si crea una categoría principal, seleccione «ninguna», o si crea subcategorías, seleccione la categoría principal de las opciones.
Paso 2: En este paso, se creará una plantilla de WordPress en la que se implementará la funcionalidad AJAX. Abra un nuevo archivo PHP y guárdelo. Inserta el siguiente código en la página que creaste.
En el código anterior, «Nombre de 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.
Primero, el archivo de la biblioteca jQuery debe adjuntarse a la página, lo que ayudará a agregar cosas de AJAX. AJAX con PHP puede usar cualquier biblioteca de JavaScript o invocar AJAX con JavaScript sin procesar. En el siguiente ejemplo, la biblioteca jQuery JavaScript se usa para una implementación de AJAX.
Paso 3: agregue el archivo jQuery a la plantilla y llame a la función «wp_dropdown_categories» para que pueda obtener las categorías principales del menú desplegable.
#content{width:auto; height:400px; margin:50px;}
<div id="content">
</div>
<?php
Paso 4: Inserte el código jQuery para obtener el ID de la categoría principal seleccionada. Envíelo al archivo ‘functions.php’ para las subcategorías dentro de la identificación de la categoría principal seleccionada. Luego, los resultados se pueden enviar de vuelta a la página sin actualizarla.
$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// call ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
En el código anterior, el código se agrega en el evento de cambio de categoría principal con el identificador «#main_cat».
var $mainCat=$('#main_cat').val();
La función .val() ayuda a obtener el valor de la opción seleccionada de una lista desplegable y lo almacena en la variable ‘$ mainCat’.
$("#sub_cat").empty();
El menú desplegable de la subcategoría «#sub_cat» debe eliminarse, si contiene algún valor anterior, antes de llamar a AJAX.
La siguiente línea jQuery ayudará a llamar a las funciones AJAX de jQuery. Verifique los parámetros AJAX enumerados en la sección a continuación.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',
Para que AJAX funcione en WordPress, se utiliza el parámetro «URL». Por lo tanto, las solicitudes se enviarán al archivo ‘admin-ajax.php’. Luego, se llamará a los ganchos en el archivo ‘functions.php’ para recuperar los datos publicados que se enviaron a la URL: ‘/wp-admin/admin-ajax.php’
El parámetro ‘datos’ se utiliza para enviar el valor con la solicitud. Este ejemplo utiliza dos argumentos con datos: acción y main_catid.
Paso 5: En el archivo ‘functions.php’ se usa el siguiente código para interceptar acciones.
add_action('wp_ajax_my_special_action', 'my_action_callback');
En la acción anterior, el gancho tiene dos argumentos. En el primer argumento, «wp_ajax_my_specialarań», «wp_ajax_» es el valor que se envía con el parámetro de datos «acción». En el segundo argumento, ‘myustain_callback’, se procesarán los datos y se devolverán los resultados.
El gancho de acción anterior es para usuarios registrados. Para usuarios desconectados, puede adjuntar la siguiente acción
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
El código final después de agregar ganchos de usuario y funciones de devolución de llamada es el siguiente
function implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of=".$_POST["main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '';
}
echo 'Scegli...'.$option;
die();
} // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.
Paso 6: en este paso, cree una nueva página en el tablero y asígnele una plantilla. Después de cargar la página en el navegador, se cargará la primera lista desplegable con las categorías principales.
Dado que el segundo menú está vacío, seleccione una opción en el primer menú para ver cómo funciona.
De esta manera, AJAX de PHP se puede usar en un sitio de WordPress con un complemento recién creado.
