Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

¿Cómo es un entorno de desarrollo profesional en WordPress?

3

Presentación del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

¿Cómo se crea y se personaliza una categoría en WordPress?

5

Creemos la UI de un archivo en la web

6

¿Por qué es importante la navegabilidad de la web y cómo se mejora?

7

¿Qué es un Post Type y cómo se pueden personalizar los diferentes tipos?

8

¿Cómo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

¿Qué es una taxonomía y cómo se registra una nueva?

11

¿Qué es un page template y cómo se utiliza?

Utilizar AJAX

12

¿Cómo funcionan los emails en WordPress?

13

¿Cómo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro dinámico para la web

15

Completemos la función AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

¿Cómo se utiliza la REST-API de WordPress?

17

¿Qué son y cómo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

¿Qué es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque dinámico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

¿Cómo se lleva un sitio a producción?

27

¿Cómo podemos optimizar la indexación y el SEO de nuestro sitio?

28

¿Cómo defiendo a mi sitio de ataques externos y lo hago más seguro?

Finalizar el Curso

29

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Cómo utilizar AJAX dentro de WordPress?

13/29
Recursos

Aportes 17

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

¿Cómo utilizar AJAX dentro de WordPress?


Para poder hacer cosas con AJAX en Wordpress usaremos algunas funciones y cosas en particular.

En el envío de la petición se puede hacer con JQuery o con Javascript Vanilla. Nosotros envíamos tres parámetros:

  • url:ajaxurl → Todas las peticiones AJAX se envían a la misma url.
  • method → La información puede enviarse por GET o POST.
  • data (action) → Cada función PHP que procesará una petición AJAX se registra.

Una vez que la función la recibe Wordpress, para poder recibirla necesitamos que esta función esté registrada. Para registrarla tenemos dos opciones:

  • wp_ajax() → Las funciones se registran con este hook para los usuarios logeados.
  • wp_ajax_nopriv() → Las funciones se registran con este hook para funcionar sin usuarios logeados.

Y las funciones de respuestas son:

  • wp_send_json() → Nos va permitir enviar la respuesta del servidor en formato JSON. Esta función puede recibir un string o un Array, y ese Array va a ser transformado en JSON para poder ser recibido por el archivo de Javascript.

Por último el hacivo de Javascript, va a recibir esa información.

  • success / .done() → Nos permite recibir la respuesta y procesarla.
  • error / .catch() → Nos permite manejar errores y procesarlos.

success / .done()
Nos permite recibir la respuesta y procesarla.
● error / .catch()
Nos permite manejar errores y procesarlos.

wp_send_json()
Es una función de WordPress que está
preparada para devolver las peticiones. Las
funciones registradas deben finalizar siempre
con esta función o con wp_die() para generar
una respuesta.

$.ajax()
WordPress trae incorporada la librería jQuery y
permite utilizarla para hacer peticiones.

Encolaremos un archivo JavaScript que contendrá nuestra lógica: que al hacer click en el botón, haga la petición AJAX y nos pinte un listado con los últimos 10 eventos destacados.

A este archivo le pasaremos una serie de variables, entre las que se encuentra la URL contra la que haremos la petición AJAX. WordPress dispone de una ruta, el archivo admin-ajax.php, donde gestionar este tipo de peticiones.

ya he usado ajax antes por mucho tiempo, vamos a ver que tan similar sigue siendo en wp

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Hola!

He visto que hay unos plugins que permiten controlar que plugins/acrivos CSS/JS corren en una página específico, hay alguno forma de hacer eso desde functions.php del theme? Asi se evita que el el cliente por error modifique configuraciones del plugin

No logro entender como das tanta información tan importante en tan poco tiempo

¿Cuáles son las carpetas por defecto que utiliza @wordpress/scripts para compilar el código?

Todo clarísimo. Gracias

wp_ajax
Las funciones se registran con este
hook para los usuarios logueados.
● wp_ajax_nopriv
Las funciones se registran con este
hook para funcionar sin usuarios
logueados.

url: ajaxurl
Todas las peticiones AJAX se
envían a la misma url.
● method
La información puede enviarse por
GET o POST.
● data (action)
Cada función PHP que procesará
una petición AJAX se registra.

fetch
También podemos hacer las peticiones con
JavaScript Vanilla.

functions.php

<?php

function my_event_list_cb() {
    // Check for nonce security
    $nonce = sanitize_text_field( $_POST['nonce'] );

    if ( ! wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) {
        die ( 'Busted!');
    }

    $args = array(
        'post_type' => 'evento',
        'meta_query' => array(
            array(
                'key'     => 'destacado',
                'value'   => 1,
                'compare' => '=',
            ),
        ),
    );
    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li>' . get_the_title() . '</li>';
        }
        echo '</ul>';
    }

    wp_die();
}
add_action( 'wp_ajax_nopriv_event-list', 'my_event_list_cb' );
add_action( 'wp_ajax_event-list', 'my_event_list_cb' );

evento.js

jQuery(document).ready(function ($) {
    $("#my-button").on("click", function(){
        jQuery.ajax({
            type: "post",
            url: ajax_var.url,
            data: "action=" + ajax_var.action + "&nonce=" + ajax_var.nonce,
            success: function(result){
                $('#my-events-list').html(result);
            }
        });
    });
});

admin_ajax.php

<?php

function my_load_scripts() {
    wp_enqueue_script( 'my_js', get_theme_file_uri( 'js/eventos.js'), array('jquery') );

    wp_localize_script( 'my_js', 'ajax_var', array(
        'url'    => admin_url( 'admin-ajax.php' ),
        'nonce'  => wp_create_nonce( 'my-ajax-nonce' ),
        'action' => 'event-list'
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_load_scripts' );