DevWordpress

Chamar uma API no WordPress

dog 0 Comments , , ,

Antigamente dava para colocar embeds mais facilmente no no wordpress porque existia a opção de alterar o post direto do HTML, agora não existe mais essa possibilidade, então a forma mais fácil é usar é com plugins e o bom e velho Ajax:

Atualmente precisei colocar uma aplicação simples de manipulação de texto num site e fiz um front com bootstrap simplão e funcionou, mas queria demonstrar aqui neste blog, mas fiz a regra de negócio numa api rest, eu podia muito bem colocar o javascript aqui dentro e pronto ,mas usei isso como desafio: Como colocar uma chamada de api rest dentro de um post do wordpress? O resultado foi esse outro post aqui.

O Plugin

O plugin que usei foi o Header Footer Code Manager, ele serve para colocar códigos fixos em cabeçalhos e rodapés, bem como colocar códigos em todos os posts e páginas mas tem também a opção de deixar em apenas um post ou página, que era o que eu queria mas também daria para colocar no header de sua página para colocar um GET se você quer mostrar se sua aplicação ou api está ativa por exemplo

O Ajax

o código a seguir é o que eu “embedei” no post de exemplo, note que eu carrego a biblioeca no header e faço toda a chamada e vinculação dos objectos no bloco de javascript, simples e funcional!

JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
	<textarea id="apiDataInput"></textarea>
	<button  id="run">Gerar</button>
  <textarea id="apiDataOut"></textarea>
  
  <script>
      $(document).ready(function () {
          $('#run').on('click', function () {
  					  console.log($('#apiDataInput').val() )
              var postData = {
                  texto: $('#apiDataInput').val()
              };
  
              $.ajax({
                  url: 'http://vps46655.publiccloud.com.br:3001/boxTrapText',
                  method: 'POST',
                  contentType: 'application/json',
                  data: JSON.stringify(postData),
                  success: function (data) {
                      $('#apiDataOut').val(data);
                  },
                  error: function () {
                      console.error('Erro na requisição para a API.');
  									$('#apiDataOut').val('Erro na requisição para a API.'); 
                  }
              });
          });
      });
  </script>

</body>
</html>

Loading

Comentários