Crear un admin AJAX personalizado y más ligero en WordPress

WordPress ofrece admin-ajax.phppara manejar solicitudes AJAX, pero puede ser demasiado pesado para ciertas aplicaciones, ya que carga todo el núcleo. Si deseas algo más ligero, puedes usar SHORTINIT. A continuación, te mostramos cómo implementar un archivo personalizado llamado custom-admin-ajax.php.

¿Qué es SHORTINIT?

SHORTINIT es una constante en WordPress que limita la cantidad de funcionalidades cargadas. Cuando se define como true, sólo se cargan los siguientes elementos:

• El archivo wp-load.php.
• Funciones básicas de WordPress como wpdb,  wp_safe_redirect, y sanitize_text_field.
• La conexión a la base de datos y las utilidades esenciales para trabajar con datos.

Esto hace que las solicitudes sean mucho más rápidas, ya que evita cargar el sistema completo de WordPress, incluyendo los plugins y temas.

Crear el admin ajax personalizado

Crea un archivo llamado custom-admin-ajax.phpen el directorio wp-admin/ junto a admin-ajax.php

<?php
define( 'SHORTINIT', true );
require_once __DIR__ . '/../wp-load.php';

// Verificar si se pasó una acción.
if ( empty( $_REQUEST['action'] ) ) {
    wp_die( '0', 400 );
}

$action = sanitize_text_field( $_REQUEST['action'] );

if ( has_action( "wp_custom_ajax_{$action}" ) ) {
    do_action( "wp_custom_ajax_{$action}" );
}

// Si no se imprime nada, terminar con un mensaje por defecto.
wp_die( '0' );

Configuración en el tema activo

En el archivo functions.phpdel tema activo, registraremos el script JavaScript, el evento AJAX y un shortcode para mostrar el botón HTML.

Registrar el script y el evento AJAX.

<?php
function enqueueCustomAjaxScript() {
    wp_enqueue_script(
        'custom-ajax-script',
        get_template_directory_uri() . '/custom-ajax.js',
        [],
        '1.0',
        true
    );

    wp_localize_script( 'custom-ajax-script', 'customAjax', [
        'url' => admin_url( 'custom-admin-ajax.php' ),
    ] );
}
add_action( 'wp_enqueue_scripts', 'enqueueCustomAjaxScript' );

Manejar la acción en PHP

Define la acción personalizada para procesar la solicitud AJAX y devolver la hora local y UTC.

<?php
function handleShowTime() {
    $localTime = current_time( 'H:i:s' );
    $utcTime   = gmdate( 'H:i:s' );

    wp_send_json_success( [
        'local_time' => $localTime,
        'utc_time'   => $utcTime,
    ] );
}
add_action( 'wp_custom_ajax_show_time', 'handleShowTime' );

Shortcode para mostrar el botón.

<?php
function renderAjaxButton() {
    return '<button id="show-time-btn">Mostrar Hora</button><div id="time-output"></div>';
}
add_shortcode( 'show_time_button', 'renderAjaxButton' );

Crear el script JavaScript

Crea un archivo llamado custom-ajax.js en el directorio de tu tema con el siguiente contenido:

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('show-time-btn');
    const output = document.getElementById('time-output');

    button.addEventListener('click', function() {
        fetch(customAjax.url + '?action=show_time')
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    output.innerHTML =
                        '<p>Hora Local: ' + data.data.local_time + '</p>' +
                        '<p>Hora UTC: ' + data.data.utc_time + '</p>';
                } else {
                    output.innerHTML = '<p>Error: ' + data.data.message + '</p>';
                }
            })
            .catch(function(error) {
                output.innerHTML = '<p>Error de conexión: ' + error.message + '</p>';
            });
    });
});

Resultado

1. Agrega el shortcode [show_time_button] en cualquier entrada o página.
2. Al cargar la página, verás un botón que dice «Mostrar Hora».
3. Al hacer clic, se imprimirá la hora local y UTC usando nuestro admin AJAX personalizado.

Con esta configuración, puedes manejar solicitudes AJAX de manera más eficiente y ligera en WordPress. Este enfoque es útil para aplicaciones donde el rendimiento es clave y solo se necesitan las funcionalidades básicas del núcleo.

Related posts:

Crear campo personalizado en el checkout de WooCommerce Cómo Construir un Endpoint Personalizado en WordPress Cómo implementar reCAPTCHA v2 en WordPress con un formulario personalizado Cómo crear custom post types en WordPress: Guía completa y avanzada