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 }