7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. General

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

Read Time: 7 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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:

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

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.

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().

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

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:

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.

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:

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

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.

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

Ahora, envía el formulario usando Ajax

¡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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.