Utilizzare Dati Esterni con Shortcode Dinamici in WordPress

Nel primo e nel secondo articolo, abbiamo creato shortcode dinamici in WordPress che si adattavano alle condizioni interne di WordPress, come il controllo del login dell’utente o la visualizzazione dei post recenti. Ora, in questo terzo articolo, vedremo come rendere i nostri shortcode ancora più potenti integrando dati esterni provenienti da API esterne.

Perché Utilizzare Dati Esterni?

Aggiungere dati esterni al tuo sito ti consente di offrire contenuti freschi e vari senza doverli creare manualmente. Inoltre, ti permette di ottenere informazioni da fonti affidabili, come feed di notizie, immagini, quote, meteo, meme, e molto altro.

Recuperare Dati da un’API e Visualizzarli con uno Shortcode

Per fare un esempio pratico, vediamo come creare uno shortcode che recupera una lista di meme utilizzando un’API gratuita. L’API che utilizzeremo è la Imgflip API, che ci permette di ottenere una lista di meme popolari. Ogni meme ha un nome, un’URL dell’immagine, e altre informazioni che possiamo visualizzare sul nostro sito.

Il servizio espone un indirizzo pubblico https://api.imgflip.com/get_memes che fornisce dei meme casuali in formato JSON. Il JSON è un formato classico in cui i contenuti sono degli oggetti con diverse proprietà.

Ecco il codice per recuperare e stampare i dati:

function myown_memes(){
  // Recuperiamo i dati dall'API
  $response = wp_remote_get("https://api.imgflip.com/get_memes");
  if (is_wp_error($response)) {
    return 'Errore nel recupero dei dati';
  }
  $json_data = json_decode(wp_remote_retrieve_body($response), true);
  
  // Creiamo l'output HTML per visualizzare i meme
  $output = '<div class="myown_memes">';
  
  // Cicliamo sui dati ricevuti dall'API (ogni meme)
  foreach ($json_data['data']['memes'] as $item) {
    $name = $item['name'];
    $url = $item['url'];
    $width = $item['width'];
    $height = $item['height'];

    // Aggiungiamo ogni meme al nostro output
    $output .= "
      <div class='myown_memes_item'>
        <h5>$name</h5>
        <img src='$url' alt='$name' width='$width' height='$height' />
      </div>";
  }
  
  $output .= '</div>';

  return $output;
}
add_shortcode('myown_memes', 'myown_memes');

Come Funziona il Codice?

• wp_remote_get(): Questa funzione fa una richiesta HTTP all’API per ottenere i dati. Se c’è un errore nella richiesta, la funzione restituisce un messaggio di errore.
• json_decode(): Una volta che abbiamo i dati in formato JSON, questa funzione li converte in un array associativo che possiamo manipolare facilmente.
• Visualizzazione dei Meme: Per ogni meme presente nell’array, estraiamo il nome, l’URL dell’immagine e le dimensioni, e li inseriamo in un contenitore HTML che viene poi restituito come output dello shortcode.

Come Usare lo Shortcode nel Tuo Sito

Dopo aver creato lo shortcode, puoi utilizzarlo direttamente in qualsiasi pagina o post di WordPress. Basta inserire il shortcode [myown_memes] dove desideri che vengano visualizzati i meme. Il risultato sarà una lista di immagini di meme con i rispettivi nomi.

Aggiungere uno Stile al Shortcode

Per migliorare l’aspetto dei meme visualizzati, puoi aggiungere qualche regola CSS al tuo file style.css del tema. Ad esempio:

.myown_memes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.myown_memes_item {
  width: 200px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
}

.myown_memes_item img {
  max-width: 100%;
  height: auto;
}

Questo codice CSS rende la visualizzazione dei meme più accattivante, disponendoli in una griglia flessibile e aggiungendo uno stile di base.

Personalizzare lo Shortcode con Attributi

Puoi aggiungere maggiore flessibilità al nuovo shortcode consentendo di scegliere quante immagini di meme visualizzare. Per fare ciò, aggiungi un parametro qty che permette di impostare il numero di meme da recuperare dall’API.

Ecco come fare:

function myown_memes($atts){
  // Impostiamo i valori di default per l'attributo 'qty'
  $atts = shortcode_atts(array(
    'qty' => 5, // Mostra 5 meme di default
  ), $atts);
  
  $qty = $atts['qty'];

  // Recuperiamo i dati dall'API
  $response = wp_remote_get("https://api.imgflip.com/get_memes");
  if (is_wp_error($response)) {
    return 'Errore nel recupero dei dati';
  }
  $json_data = json_decode(wp_remote_retrieve_body($response), true);

  // Limitare il numero di meme da visualizzare
  $json_data['data']['memes'] = array_slice($json_data['data']['memes'], 0, $qty);
  
  $output = '<div class="myown_memes">';
  foreach ($json_data['data']['memes'] as $item) {
    $name = $item['name'];
    $url = $item['url'];
    $width = $item['width'];
    $height = $item['height'];
    $output .= "
      <div class='myown_memes_item'>
        <h5>$name</h5>
        <img src='$url' alt='$name' width='$width' height='$height' />
      </div>";
  }
  $output .= '</div>';
  
  return $output;
}
add_shortcode('myown_memes', 'myown_memes');

Ora, puoi personalizzare il numero di meme da visualizzare utilizzando il parametro qty nel tuo shortcode:

[myown_memes qty="3"]

Altri Esempi di Dati Esterni

Oltre ai meme, ci sono tantissime altre API gratuite che possiamo integrare nel nostro sito, come quelle che forniscono:

• Notizie: per recuperare e visualizzare articoli di notizie da fonti come New York Times, BBC, o altre agenzie di stampa.
• Quote: API per citazioni celebri, ispirazionali o motivazionali.
• Meteo: per visualizzare le previsioni meteo in tempo reale.
• Film: per recuperare informazioni su film e programmi televisivi.
• E-commerce: per mostrare prodotti da negozi online.

Tutte queste informazioni possono essere presentate in modo dinamico attraverso gli shortcode.

Qui puoi trovare una lista, non esaustiva di quelle gratuite:
https://github.com/public-apis/public-apis

Proviamo ad integrare una nuova api

Ecco un altro esempio semplice che utilizza una fonte diversa di contenuti. La nostra nuova fonte stampa alcune citazioni con i nomi degli autori: https://zenquotes.io/api/quotes. La nuova fonte forniste Array (un insieme) di oggetti JSON così strutturati:

[
  {
    "q": "The biggest adventure is what lies ahead.",
    "a": "J.R.R. Tolkien",
    "c": "41",
    "h": "<blockquote>“The biggest adventure is what lies ahead.” — <footer>J.R.R. Tolkien</footer></blockquote>"
  },
  //...
]

Crea un nuovo script, per rendere le cose più interessanti aggiungi un argomento che ti permette di scegliere se visualizzare una singola citazione o più citazioni casuali.

function myown_quotes($atts){
  $atts = shortcode_atts(array(
    'qty' => '1',
  ), $atts);

  $qty = $atts['qty'];

  $response = wp_remote_get("https://zenquotes.io/api/quotes");
  if (is_wp_error($response)) {
    return 'errore';
  }
  $json_data = json_decode(wp_remote_retrieve_body($response), true);
  $json_data = array_slice($json_data, 0, $qty);

  $output = '<div class="myown_quotes">';
    // l'array ora è la proprietà di livello superiore
    foreach ($json_data as $item) {
      // nuovo nome della proprietà per l'elemento
      $quote = $item['q'];
      $author =  $item['a'];
      // nuovo HTML
      $output .= "
        <blockquote class='myown_quotes_item'>
        $quote
        <footer>$author</footer>
        </blockquote>
      ";
    }
  $output .= '</div>';
  return $output;
}
add_shortcode('myown_quotes', 'myown_quotes');

Adesso usa il tuo nuovo shortcode con qty=1 se vuoi una sola citazione o qty=n (1,2,10) se ne vuoi di più.

[myown_quotes qty="10"]

Abbiamo esplorato come sia possibile integrare dati esterni nei tuoi contenuti WordPress utilizzando API JSON e shortcode personalizzati.
L’esempio che ti ho mostrato, con l’uso delle citazioni provenienti dall’API di ZenQuotes, evidenzia quanto possano essere potenti questi strumenti nel rendere il tuo sito più dinamico e interattivo, senza dover ricorrere a plugin pesanti o complessi.

Prossimi passi:

• Continua a sperimentare con altre API pubbliche, come quelle che forniscono informazioni su prodotti, eventi, o anche previsioni meteo.
• Aggiungi personalizzazioni agli shortcode per permettere agli utenti di scegliere quali dati visualizzare.
• Integra il tutto in un design accattivante per rendere l’esperienza utente ancora più coinvolgente.

In questo modo, avrai creato un sistema potente, flessibile e scalabile per alimentare il tuo sito WordPress con contenuti esterni in modo dinamico.