Como usar API JSON como shortcode dentro do WordPress

O desafio era pegar o resultado de uma API JSON, essa API precisa ser atualizada a cada 60 segundos para apresentar um resultado em tempo “real” dentro do site, além de converter seu resultado em um front a ser printado em qualquer lugar do WordPress usando um shortcode, segue solução:

Criamos um arquivo tempo-espera.php e colocamos dentro do template usado:

<?php

$url = get_field('url_api', 'option'); // Pega o resultado do ACF Options Page
//$url = "https://ofga-gateway-back-rest-hml-ipa.fsfx.com.br/backend-usisaude-app-fase2/tempo-espera?nrEstabelecimento=1";

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

$headers = array(
"Accept: application/json",
);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
//for debug only!
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

// Pega o resultado da url
$resp = curl_exec($curl);
// Mostra o resultado
//echo($resp);
//echo ("</br>");
//echo ("</br>");
//echo ("</br>");

// Transforma o json em um objeto php
$resp = json_decode($resp);
// curl_close($curl);
// var_dump($resp);

?>

<style>
ul.resultados {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}

ul.resultados li {
width: 45%;
}

@media only screen and (max-width: 1024px) {
ul.resultados li {
width: 100%;
text-align: center;
}
}
</style>


<div id="div_refresh">

<ul class="resultados">
<?php
// Para cada item dentro da $resp->response ele vai fazer uma linha, esses itens são chamados de $result
// Cada result tem seu atributo nrEstabelecimento, dsClinica e dsTempoEspera
foreach ($resp->response as $result) {
echo "<li class=resultado>" . $result->dsClinica . ': ' . $result->dsTempoEspera . "</li>";
}
?>
</ul>
</div>

<?php

$url = get_field('url_api', 'option');
$url = file_get_contents($url);
$json = json_decode($url);

?>

<style>
ul.resultados {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}

ul.resultados li {
width: 45%;
}
    
@media only screen and (max-width: 1024px) {
ul.resultados li {
width: 100%;
text-align: center;
}
}

</style>


<div id="div_refresh">

<ul class="resultados">
<?php
foreach ($json as $result){
echo "<li class=resultado>".$result->CLINICA.': '.$result->TEMPO_ESPERA."</li>"; 
}
?>
</ul>

</div>

No arquivo functions.php do tema, nós criamos uma função que converte o arquivo criado em um shortcode:

// Add Shortcode Tempo de Espera
function custom_shortcode_espera() {
echo get_template_part( 'tempo-espera' );
}
add_shortcode( 'tempo-espera', 'custom_shortcode_espera' );

O refresh que faz a atualização de tempo funciona com Jquery, então inserimos no header do tema o seguinte código:

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
setInterval(function(){
$('#div_refresh').load('<?php echo get_stylesheet_directory_uri(); ?>/tempo-espera.php');
}, 60000) /* tempo em MS para atualizar*/
</script>