• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Ajax en WordPress de manera correcta

Ajax en WordPress de manera correcta

Insertar Ajax en WordPress de manera correcta

[ 1 noviembre 2016 ] [ Actualizado: 22 junio 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Puedes implementar Ajax en WordPress de diferentes maneras, pero, ¿por qué no usar lo que WordPress recomienda?, con esto, nuestro código estaría mejor integrado con el nucleo de WordPress.

 

1- Ejemplo a implementar

Para ejemplificar el uso de Ajax en WordPress veremos cómo mostrar todo el contenido de una entrada directamente cuando hacemos click en el enlace de “Continúa leyendo” sin necesidad de cambiar de página. Usaremos el theme por defecto Twentyfifteen para realizar esto.

Ejemplo Ajax

 

2- Generalidades

Se puede implementar Ajax directamente siguiendo los pasos 1,2 y 3 del diagrama adjunto, sin embargo en WordPress necesitamos antes enviar una variable que tendrá la ruta del archivo admin-ajax.php, de allí que he colocado el paso cero, este paso también será usado para hacer comprobaciones de carga de script y para implementar seguridad con el envío de nonces.

El envío de la ruta del archivo admin-ajax.php es una buena práctica en WordPress.

Envío de datos Ajax en WordPress

 

3- Registro de Script y envío de la ruta de admin-ajax.php

Este sería el paso cero, este código se colocaría en un archivo .php, en nuestro ejemplo usaremos el archivo functions.php del theme.


//Insertar Javascript js y enviar ruta admin-ajax.php
add_action('wp_enqueue_scripts', 'dcms_insertar_js');

function dcms_insertar_js(){

	if (!is_home()) return;

	wp_register_script('dcms_miscript',get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
	wp_enqueue_script('dcms_miscript');

	wp_localize_script('dcms_miscript','dcms_vars',['ajaxurl'=>admin_url('admin-ajax.php')]);
}

Lo que hace este código:

  • Primero se usa el hook wp_enqueue_scripts para registrar el script a través de la función dcms_insertar_js.
  • Dentro de la función dcms_insertar_js se valida si estamos en la home.
  • Luego se procede al registro del archivo javascript script.js.
  • Finalmente se envía la variable dcms_vars.ajaxurl a través del envío de variables desde PHP a Javascript con la función wp_localize_script.

 

4- Código Javascript con evento Click

Este sería el código para el paso 1 y el paso 3, este código será parte del archivo script.js registrado anteriormente:


(function($){

	$(document).on('click','.more-link',function(e){
	 	e.preventDefault();
	 	link = $(this);
	 	id   = link.attr('href').replace(/^.*#more-/,'');

		$.ajax({
			url : dcms_vars.ajaxurl,
			type: 'post',
			data: {
				action : 'dcms_ajax_readmore',
				id_post: id
			},
			beforeSend: function(){
				link.html('Cargando ...');
			},
			success: function(resultado){
				 $('#post-'+id).find('.entry-content').html(resultado);		
			}

		});

	});

})(jQuery);

Lo que hace este código:

  • Usamos JQuery para implementar el código.
  • Usamos el evento Click del link actual.
  • Obtenemos el ID del link actual, esto lo capturamos de la url del link.
  • Definimos la función de Ajax.
    • Pasamos la variable dcms_vars.ajaxurl pasada en el paso cero.
    • Definimos el tipo de envío por post
    • En la data definimos la variable de ID obtenida anteriormente
    • En la data también usamos una cadena “dcms_ajax_readmore” que será parte del hook del paso 2
    • El paso 3 de actualización del HTML es definido por el evento success en donde actualizamos el contenedor del contenido.

 

5- Proceso y envío de datos desde PHP

Este es el paso 2, cuando ocurre el evento de Click entonces se llama a esta porción de código PHP, en nuestro ejemplo este código también estará dentro del archivo functions.php


//Devolver datos a archivo js
add_action('wp_ajax_nopriv_dcms_ajax_readmore','dcms_enviar_contenido');
add_action('wp_ajax_dcms_ajax_readmore','dcms_enviar_contenido');

function dcms_enviar_contenido()
{

	$id_post = absint($_POST['id_post']);
	$content = apply_filters('the_content', get_post_field('post_content', $id_post));

	//sleep(2);
	
	echo $content;

	wp_die();
}

 

Lo que hace este código:

  • Primero vemos que se registran dos hooks, un hook público y otro para usuarios registrados, usaremos la misma funcionalidad en ambos casos, los hooks tienen esta estructura :

    wp_ajax_nopriv_XXXXX
    wp_ajax_XXXXX

    En donde XXXXX es la cadena action “dcms_ajax_readmore” pasada desde el script.js en el paso1

  • Dentro de la función dcms_enviar_contenido obtengo el ID dado por el archivo .js
  • Uso la funcionalidad de WordPress para obtener el contenido de una entrada de acuerdo a su ID.
  • Finalmente imprimo el contenido y con wp_die() me aseguro de que no se ejecute más código.

 

6- Resultado Final

Finalmente se verá algo similar a lo siguiente:

Ejemplo Ajax en WordPress leer más

 

El código que se ha usado en este ejemplo se puede encontrar también en el siguiente repositorio de GitHub

¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos anteriores

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (13 votos, promedio: 4,85 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. ian

    27 julio, 2018

    ¿cómo haría? si quiero consumir un xml de una url, como api por metodo post.

    ¿como le indico que la url es de otro servidor, de otra web?

    • Jhon Marreros Guzmán

      30 julio, 2018

      Busca la variable ajaxurl en el código, puedes definirla directamente en el archivo javascript ya que no sería necesaria pasarla desde WordPress. Sería mejor si tu servicio externo te devuelve un objeto JSON.

  2. Nelson Diaz

    28 septiembre, 2018

    Hola, como podemos implementar con jquery select dependientes en WordPrees?

  3. Jhon Marreros Guzmán

    30 septiembre, 2018

    No me queda del todo claro tu consulta, podrías enviar un ejemplo, mejor comunícate por el formulario de contacto del sitio.

  4. Jorge Martinez

    1 noviembre, 2018

    Hola gracias por el tutorial, muy bien explicado.
    1. Como lo puedo utilizar con paginas de wordpress?
    2. Como puedo eliminar del DOM lo ya cargado?

    Gracias.

    • Jhon Marreros Guzmán

      1 noviembre, 2018

      Hola, en el ejemplo las páginas no tienen leer más, esto se aplica usualmente a entradas. Si quieres eliminar elementos del DOM dinámicamente sólo sería necesario javascript.

  5. Ajiataz

    16 noviembre, 2018

    Muchas gracias, es la mejor explicacion que he encontrado.

  6. WSC

    10 febrero, 2019

    Una pregunta, en el caso en que tenga que colcoar mas de una funcion ajax en el archivo functons.php, como wordpress permitiria hacerlo?

    • Jhon Marreros Guzmán

      10 febrero, 2019

      Hola, supongo que te refieres al registro de los scripts, esto es sólo una vez, es decir hasta el punto 3 es igual. Agregarás funciones a partir del punto 4, es decir código javascript y PHP con el nombre de las funciones, el nombre al ser diferente no habrá problemas, si vas a agregar mucho código mejor evalúa crear un plugin en lugar de usar el archivo functions.php.

  7. Oliver

    16 febrero, 2019

    Hola gran tutorial, mira tengo que implementar un shortcode en una página en la que me muestre resúmenes de post de usuarios y todo me funciona de perlas pero mi inconveniente es al momento de paginar los resultados cuando hay muchos ya que al usar la paginación de wp_query se recarga la página para mostrar más resultados como podría agregar AJAX para que me devuelva los resultados sin tener que recargar la página

  8. Jaime

    31 agosto, 2020

    Excelente tutorial, lo que necesito hacer es mostrar el contenido de un Custom Post Type, pero en un div diferente al que contiene, alguna sugerencia, Gracias

    • Jhon Marreros Guzmán

      31 agosto, 2020

      Hola, podrías evaluar hacer una archivo de plantilla para tu CPT, revisa: https://decodecms.com/jerarquia-de-archivos-de-plantilla-en-wordpress/ , verás en la imagen que hay opción a crear un archivo ya sea para el listado o para el detalle para un CPT específico.

  9. yuriel

    26 noviembre, 2020

    Saludos,
    En mi caso lo que deseo hacer es mostrar el contenido de un post por ajax, para no tener que recargar la página cada vez que deseo leer un post,
    Te explico,
    Tengo habilitado el plugins WP-dtree para mostrar las entradas organizadas por categorías, ahora lo que deseo hacer es que esas entradas organizadas en cada categoría se puedan mostrar con ajaz al hacer clic en cada una de ellas, sin necesidad de recargar la página.
    Espero me hayas entendido

    • Jhon Marreros Guzmán

      26 noviembre, 2020

      Hola
      Si, este artículo te servirá ya que explico algo similar, en lugar del leer más puedes usar el título de tu artículo o crear un leer más dinámicamente.

      • yuriel

        26 noviembre, 2020

        y como sería para que me tome los nombres de forma dinámica, pues lo deseo para todas las entradas

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Recuperar una versión anterior de temas o plugins

¿Cómo usar imágenes retina en WordPress?

Qué son los Plugins Dependientes en WordPress

Cambiar el tipo de Taxonomía en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados