Iniciación a la paginación en WordPress con AJAX

Ajax (JavaScript y XML asíncrono) es una tecnología web que permite que una página web actualice contenido dinámicamente sin tener que recargar la página en el navegador. Con el uso de esta tecnología, el sitio web consigue ser más interactivo y responsivo. Ajax es soportado por casi todos los navegadores web visuales… así que hoy te explicaremos cómo crear paginación personalizada en WordPress con algo de magia usando AJAX.

Familiarizarse con Ajax

Voy a explicar brevemente algunos aspectos básicos, a nivel introductorio sobre jQuery AJAX, pero para una mejor primera toma de contacto, echa un vistazo a estos dos artículos:

• Tutsplus.com: Cómo cargar y animar contenido con jQuery
• Fácil AJAX con jQuery

Recuerda que ninguno de estos artículos habla específicamente sobre WordPress, pero te ayudarán a mojarte la punta de los pies. Bien, empecemos con lo que afecta directamente a WordPress.

Ajax puede ser una estupenda idea a integrar en WordPress dada su responsividad en cuanto a la adición de contenido en una página sin tener que recargarla. El código Ajax no solo es reconocido por WordPress, sino que también puedes hacer llamadas Ajax desde WordPress muy fácilmente. Esta tecnología se utiliza generalmente en WordPress con propósitos administrativos, como la moderación de comentarios, para actualizar instantáneamente los cambios realizados, etc. También se utiliza cuando se añaden o eliminan elementos de WordPress.

Es posible que sepas que Ajax está detrás de la función de Autoguardado de WordPress. Actualmente Ajax se utiliza con frecuencia en los temas y los plugins. Hoy, vamos a empezar explicándote cómo implementar esto en tu tema de WordPress.

¡Empecemos!

Empecemos creando un botón de envío en el sitio que usaremos para añadir un mensaje de felicitación a partir de un campo oculto hasta la creación de un elemento div de prueba.

Paso 1: crear un fragmento de código HTML básico

<p><input type="hidden" name="GreetingAll" id="GreetingAll" value="Hello Everyone!" />
  <input type="submit" id="PleasePushMe" />
  <div id="test-div1">
  </div></p>

Por favor, coloca este código en la plantilla WordPress con la que quieras trabajar.

"Los frameworks de Ajax se pueden utilizar para reducir la reescritura de funciones habituales de las aplicaciones web"

Paso 2: responder a Ajax

Creemos ahora un archivo JavaScript que responda a las llamadas Ajax. Este archivo debería guardarse en una nueva carpeta denominada scripts dentro a su vez de la carpeta del tema que hayas seleccionado. La ruta del archivo JavaScript debería coincidir con - wp-content/themes/nombre-de-tu-tema/scripts/ajax-implementation.js

Créalo por ahora, añadiremos nuestro script a él en un momento.

Paso 3: añadir el archivo JavaScript al tema

Ahora añadiremos el archivo javascript a nuestro tema. Con este método el archivo javascript será incluido cuando la página se cargue. Usaremos la función wp_enque_script para hacer esto. Esta función nos asegura que la librería jQuery será cargada antes de que se ejecute el script.

Por favor, coloca este código en tu archivo functions.php.

function add_myjavascript(){
  wp_enqueue_script( 'ajax-implementation.js', get_bloginfo('template_directory') . "/scripts/ajax-implementation.js", array( 'jquery' ) );
  }
  add_action( 'init', 'add_myjavascript' );</p>

Aquí hemos creado una función que contendrá la función wp_enqueue_script. La función add_action se usa para enganchar el script al CMS.

Paso 4: añadir algo de magia al archivo JavaScript

Ahora es el momento de añadir algo de magia al archivo JavaScript creado… es una forma original de indicar que estaremos añadiendo el script ;). Aquí, la llamada Ajax se realizará usando la función jquery ajax().

jQuery(document).ready(function() {
  var GreetingAll = jQuery("#GreetingAll").val();
jQuery("#PleasePushMe").click(function(){ jQuery.ajax({
  type: 'POST',
  url: 'http://www.yoursitename.com/wp-admin/admin-ajax.php',
  data: {
  action: 'MyAjaxFunction',
  GreetingAll: GreetingAll,
  },
  success: function(data, textStatus, XMLHttpRequest){
  jQuery("#test-div1").html('');
  jQuery("#test-div1").append(data);
  },
  error: function(MLHttpRequest, textStatus, errorThrown){
  alert(errorThrown);
  }
  });
  }));
  });

Esta función Ajax también debería ser creada en el archivo functions.php.

function MyAjaxFunction(){
  //get the data from ajax() call
   $GreetingAll = $_POST['GreetingAll '];
   $results = "<h2>".$GreetingAll."</h2>";
  // Return the String
   die($results);
  }
  // creating Ajax call for WordPress
   add_action( 'wp_ajax_nopriv_ MyAjaxFunction', 'MyAjaxFunction' );
   add_action( 'wp_ajax_ MyAjaxFunction', 'MyAjaxFunction' );

Permíteme explicar brevemente el código. Se crea una función que se ejecutará cuando el botón #PleasePushMe sea pulsado (aparece en el fragmento de HTML de nuestro paso 1). Dentro de la misma función, hemos capturado nuestro valor oculto y después hemos añadido la función ajax() de jQuery usando algunos parámetros obligatorios y otros opcionales.

La forma más fácil de trabajar con Ajax y WordPress consiste en pasar las funciones Ajax al archivo admin-ajax.php ubicado en la carpeta wp-admin. WordPress gestiona todas las funciones Ajax a través de este archivo. Solo necesitas colocar el código en tu archivo functions.php.

Algunos importantes parámetros Ajax() de jQuery

type: declara el método usado para pasar datos a la función Ajax.

url: se trata de la url desde la que se solicita la función Ajax.

data: aquí es donde se pasa la información de la función Ajax.

Success: la función success se ejecuta cuando la llamada Ajax tiene éxito. Es cuando se incluirán los datos recuperados en el DOM con la ayuda de JavaScript.

Error: Esta función se utiliza cuando tiene lugar algún error en el código.

La función add_action se utiliza a través del archivo admin-ajax.php para crear las funciones Ajax reconocidas por el CMS.

Puedes leer más sobre la lista completa de parámetros aquí.

El gran final, crear una paginación Ajax en WordPress

Usando los mismos básicos métodos que acabamos de describir, puedes hacer que tu contenido paginado se cargue usando Ajax. Tendrás que usar un poco de jQuery extra, y funciona de la siguiente manera:

<ul id='PaginationExample'>
  <li><?php next_posts_link('&laquo; Older Entries') ?></li>
  <li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
  </ul>

Este anterior código creará los enlaces de página anterior y siguiente para las entradas. Hemos añadido un id a la lista no ordenada para añadirla usando jQuery.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#PaginationExample a').live('click', function(e){
  e.preventDefault();
  var link = jQuery(this).attr('href');
  jQuery('#ID').html('Loading...');
  jQuery('#ID').load(link+' #contentInner');
  
  });
  
  });
  </script></p>

Cambia el #ID del div que contiene el div #contentInner de tu página (el div que contiene tu contenido) y añade el código en el archivo header.php de tu tema.

El diseño del div #contentInner tiene el siguiente aspecto:

 <div id='mycontent'>
  <div id='contentInner'>
  All the Posts & navigations are located here
  </div>
  </div>

Antes de ejecutar los códigos, incluye la librería jQuery dentro del tema si no ha sido incluida con anterioridad.

¡Eso es todo! Ahora, cuando se haga un clic sobre los enlaces siguiente/anterior, los nuevos contenidos serán cargados con la ayuda de Ajax.

Mejores prácticas para usar Ajax en WordPress

Utiliza siempre wp_localize _script() para declarar las variables globales de JavaScript

// code to embed th  java script file that makes the Ajax request
wp_enqueue_script( 'ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );
  
  // code to declare the URL to the file handling the AJAX request </p>
wp_localize_script( 'ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Utiliza siempre admin-ajax.php para gestionar las solicitudes AJAX

Todas las solicitudes AJAX deberían ser dirigidas a wp_admin/admin-ajax.php. Mientras usas esto, existe un parámetro requerido para la solicitud enviada a admin-ajax. Este parámetro de acción ejecutará uno de estos ganchos dependiendo de si el usuario ha iniciado sesión o no.

  // when the user is logged in
  do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );
  
  // when the user is not logged in:
  do_action( 'wp_ajax_' . $_POST['action'] );

Puedes usar el plugin jQuery Form para enviar formularios en tu página de WordPress.

Por lo general, usarás Ajax para evitar la recarga de páginas cuando envíes formularios en WordPress. Para hacerlo más eficiente, puedes utilizar el plugin jQuery para manejar el envío de formularios Ajax. Puedes utilizar el controlador: jquery-form

wp_enqueue_script( 'json-form' );

Ahora, envía el formulario usando Ajax

jQuery('#form').ajaxForm({
  data: {
  // Here you can include additional data along with the form fields
  },
  dataType: 'json',
  beforeSubmit: function(formData, jqForm, options) {
  // optional data processing before submitting the form
  },
  success : function(responseText, statusText, xhr, $form) {
  }
  });

¡Por favor, ten cuidado con el análisis predeterminado JSON jQuery!

En la versión jQuery 1.3.2 o anteriores, eval se utiliza para convertir una cadena JSON en un objeto. Puede ser rápido, pero no es seguro.

La mejor manera es incluir la última versión de jQuery mientras trabajas.

Conclusión

Con Ajax puedes conseguir que tu sitio sea más interactivo y fácil de usar. Es muy recomendable utilizar Ajax mientras desarrollas tus propios plugins y temas. Sin embargo, es muy importante implementarlo correctamente y de forma segura, de lo contrario puede ser desastroso.