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
}