Ejemplo plugin consulta datos externos

Vamos a crear un plugin que consulte datos externos de una API y los muestre vía shortcode

1.- Crear el shortcode


<?php
/*
Plugin Name: Mostrar datos de una API externa
Description: Consulta los datos de una API y los muestra donde yo ponga el shortcode
Version: 1.0
Author: Jotapeich
*/

function mostrar_datos_func( $atts ) {
  
    return "Aquí se mostrarán los datos";
}
add_shortcode( 'datos_api', 'mostrar_datos_func' );

2.- Obtener los datos de una api externa

<?php
/*
Plugin Name: Mostrar datos de una API externa
Description: Consulta los datos de una API y los muestra donde yo ponga el shortcode
Version: 1.0
Author: Jotapeich
*/
function consultar_api( $cantidad = 5 ) {
    $url = "https://jsonplaceholder.typicode.com/posts"; // API de ejemplo

    $response = wp_remote_get( $url );
    if ( is_wp_error( $response ) ) {
        return "<p>Error al consultar la API.</p>";
    }

    $body = wp_remote_retrieve_body( $response );
    $data = json_decode( $body, true );

    if ( ! is_array( $data ) ) {
        return "<p>Respuesta inválida de la API.</p>";
    } 
    
}
function mostrar_datos_func( $atts ) {
    consultar_api();
    return "Aquí se mostrarán los datos";
}
add_shortcode( 'datos_api', 'mostrar_datos_func' );

3.- Formatear los datos que me llegan:

<?php
/*
Plugin Name: Mostrar datos de una API externa
Description: Consulta los datos de una API y los muestra donde yo ponga el shortcode
Version: 1.0
Author: Jotapeich
*/
function consultar_api( $cantidad = 5 ) {
    $url = "https://jsonplaceholder.typicode.com/posts"; // API de ejemplo

    $response = wp_remote_get( $url );
    if ( is_wp_error( $response ) ) {
        return "<p>Error al consultar la API.</p>";
    }

    $body = wp_remote_retrieve_body( $response );
    $data = json_decode( $body, true );

    if ( ! is_array( $data ) ) {
        return "<p>Respuesta inválida de la API.</p>";
    } 
     $data = array_slice( $data, 0, intval($cantidad) );

    $output  = '<table style="border-collapse: collapse; width:100%; border:1px solid #ccc;">';
    $output .= '<thead><tr style="background:#f4f4f4;"><th style="padding:8px;border:1px solid #ccc;">ID</th><th style="padding:8px;border:1px solid #ccc;">Título</th><th style="padding:8px;border:1px solid #ccc;">Body</th></tr></thead><tbody>';

    foreach ( $data as $item ) {
        $output .= '<tr>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . esc_html($item['id']) . '</td>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . esc_html($item['title']) . '</td>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . nl2br(esc_html($item['body'])) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';

    return $output;
}
function mostrar_datos_func( $atts ) {
    
    return consultar_api();
}
add_shortcode( 'datos_api', 'mostrar_datos_func' );

4.- Le voy a poner un parámetro al shortcode

function mostrar_datos_func( $atts ) {
     $atts = shortcode_atts( array(
        'cantidad' => 5,
    ), $atts, 'mis_datos' );
    return consultar_api($atts['cantidad']);
}

5.- Vamos a añadir opciones

<?php
/*
Plugin Name: Mostrar datos de una API externa
Description: Consulta los datos de una API y los muestra donde yo ponga el shortcode
Version: 1.0
Author: Jotapeich
*/
function consultar_api( $cantidad = 5 ) {
    $url = "https://jsonplaceholder.typicode.com/posts"; // API de ejemplo

    $response = wp_remote_get( $url );
    if ( is_wp_error( $response ) ) {
        return "<p>Error al consultar la API.</p>";
    }

    $body = wp_remote_retrieve_body( $response );
    $data = json_decode( $body, true );

    if ( ! is_array( $data ) ) {
        return "<p>Respuesta inválida de la API.</p>";
    } 
     $data = array_slice( $data, 0, intval($cantidad) );

    $output  = '<table style="border-collapse: collapse; width:100%; border:1px solid #ccc;">';
    $output .= '<thead><tr style="background:#f4f4f4;"><th style="padding:8px;border:1px solid #ccc;">ID</th><th style="padding:8px;border:1px solid #ccc;">Título</th><th style="padding:8px;border:1px solid #ccc;">Body</th></tr></thead><tbody>';

    foreach ( $data as $item ) {
        $output .= '<tr>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . esc_html($item['id']) . '</td>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . esc_html($item['title']) . '</td>';
        $output .= '<td style="padding:8px;border:1px solid #ccc;">' . nl2br(esc_html($item['body'])) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';

    return $output;
}
function mostrar_datos_func( $atts ) {

    $default_cantidad = get_option( 'asp_cantidad_default', 5 );
     $atts = shortcode_atts( array(
        'cantidad' => $default_cantidad,
    ), $atts, 'mis_datos' );
    return consultar_api($atts['cantidad']);
}
add_shortcode( 'datos_api', 'mostrar_datos_func' );


// ===========================
// 3. Menú en administración
// ===========================
function asp_add_admin_menu() {
    add_menu_page(
        'Configuración API', // Título de la página
        'Configuración API',              // Texto en el menú
        'manage_options',             // Capacidad requerida
        'asp-config',                 // Slug del menú
        'asp_options_page_html',      // Callback
        'dashicons-admin-generic',    // Icono
        20                            // Posición
    );
}
add_action( 'admin_menu', 'asp_add_admin_menu' );

// ===========================
// 4. Registrar ajustes
// ===========================
function asp_settings_init() {
    register_setting( 'asp_options_group', 'asp_cantidad_default', array(
        'type' => 'integer',
        'default' => 5,
    ) );

    add_settings_section(
        'asp_section',
        'Configuración del shortcode',
        '__return_false',
        'asp_options_group'
    );

    add_settings_field(
        'asp_cantidad_default',
        'Cantidad por defecto',
        'asp_field_cantidad_render',
        'asp_options_group',
        'asp_section'
    );
}
add_action( 'admin_init', 'asp_settings_init' );

// Campo de formulario
function asp_field_cantidad_render() {
    $valor = get_option( 'asp_cantidad_default', 5 );
    echo '<input type="number" name="asp_cantidad_default" value="' . esc_attr( $valor ) . '" min="1" max="50">';
}

// ===========================
// 5. Página HTML en admin
// ===========================
function asp_options_page_html() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>Configuración de los datos de la api externa</h1>
        <form action="options.php" method="post">
            <?php
            settings_fields( 'asp_options_group' );
            do_settings_sections( 'asp_options_group' );
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos