Como adicionar APIs de terceiros ao WordPress (plug-in e sem plug-in)

As APIs permitem conectar seu site WordPress a serviços de terceiros e fontes de dados. Isso permite adicionar novos recursos e funcionalidade, tornar seu site mais interativo e informativo ou integrá -lo a ferramentas como análise, provedores de marketing por email ou CRMs.

O WordPress pode lidar com integrações de API simples e complexas usando plug -ins, bem como código personalizado. Neste tutorial, ensinaremos como fazer tanto quanto discutir o impacto potencial de desempenho das integrações da API e como atenuá -las.

O que é uma API e por que adicionar um ao WordPress?

API significa "interface de programação de aplicativos". Na computação, uma interface é algo que conecta dois ou mais componentes um ao outro. Nesse caso, os componentes são sistemas ou aplicativos diferentes.

As APIs permitem que eles trocem dados com segurança, em tempo real e de uma maneira que cada um deles possa entender e processá-los. Eles são muito comuns na web. Se você já fez login em um site usando sua conta do Google ou Facebook, isso aconteceu graças à sua API de autenticação.

No WordPress, você pode usar as APIs para obter informações de serviços externos para o site WordPress - ou enviar dados para fora. Por exemplo, você pode usá -los para:

• Mostre a clima ao vivo, taxas de câmbio ou atualizações do mercado de ações em seu site.

• Exibir feeds de mídia social.

• Publique automaticamente seu conteúdo nas redes sociais.

• Integre seu site a um gateway de pagamento como Stripe ou PayPal.

• Mostre taxas de envio em tempo real em sua loja online.

• Puxe as informações do produto de um sistema de armazém.

• Envie dados de assinantes de um formulário da Web para um serviço de marketing por email.

As APIs também permitem automatizar processos em seu site. Por exemplo, você pode terceirizar a otimização de imagens para um serviço como Imagify. Em resumo, as APIs tornam os sites mais funcionais e fáceis de usar.

Componentes importantes da API

Para usar qualquer API, você geralmente precisa de algumas peças básicas:

• URL do endpoint : o URL para o qual você envia sua solicitação. Isso informa à API o que você está pedindo (por exemplo, clima atual, lista de postagens do blog etc.).

• Parâmetros: esses são valores opcionais que você passa para personalizar a solicitação, como localização, ID, termos de pesquisa ou intervalo de data. Os parâmetros ajudam a refinar o que a API oferece de volta.

• Formato de dados: este é o formato no qual os dados são transmitidos. O formato mais comum é o JSON porque é leve e fácil de usar no JavaScript e no PHP. XML ou texto simples também são opções.

• Autenticação: muitas APIs exigem uma chave de API ou token para verificar se você tem permissão para acessar os dados. Você precisa enviá -lo para legitimar sua solicitação.

Nem toda API requer cada uma dessas peças para lhe dar uma resposta. Discutiremos exemplos reais mais abaixo.

A API REST WordPress

O próprio WordPress possui várias APIs integradas. O mais proeminente é a API REST. O REST significa "transferência de estado representacional", o que significa simplesmente que a API usa um determinado formato e arquitetura.

O objetivo da API REST é tornar os dados do WordPress acessíveis a outros sistemas. Isso é útil, por exemplo, para criar aplicativos móveis para gerenciar seu site. A API REST também permite as chamadas configurações do WordPress sem cabeça. Aqui, você conecta uma interface de usuário personalizada, geralmente baseada em JavaScript, com o back-end do WordPress via API.

Este é um tópico importante, mas não o nosso foco aqui. Em vez disso, lidaremos com a forma como você pode adicionar APIs externas ao seu site WordPress.

Como adicionar uma API ao WordPress com um plug -in

Existem duas maneiras principais de integrar APIs no seu site WordPress:

• Código: se você tiver as habilidades ou contratar alguém que o faça, poderá conectar seu site a uma API usando código personalizado, geralmente PHP ou JavaScript.

• Plugins: o WordPress possui soluções de plug -in para quase tudo, incluindo adicionar e configurar APIs em seu site.

Vamos analisar os dois, começando com soluções de plug -in. Eles são confortáveis para os não desenvolvedores, porque você pode configurá-los através de uma interface do usuário e exibir seus dados com códigos, widgets ou blocos em vez de lidar com arquivos de código ou site.

Acesse a API do Google Maps

No nosso primeiro exemplo, aprenderemos a adicionar um mapa do Google Maps ao seu site. Essa habilidade é possível graças à API do Google Maps, que permite incorporar mapas, adicionar marcadores como locais de lojas e alterar o design do mapa.

A primeira coisa que você precisa é criar uma conta gratuita do Google Cloud com o faturamento ativado. Depois de fazer isso, faça login e crie um novo projeto na parte superior.

Acesse seu projeto e acesse APIs & Services através do menu de navegação ou do atalho no painel.

Clique na biblioteca e encontre a API JavaScript de mapas .

Acesse e habilite. Você receberá uma chave da API durante o processo, mas também poderá encontrá -la em Chaves e Credenciais posteriormente. Certifique -se de restringir seu uso ao seu domínio para segurança.

Em seguida, instale e ative o plugin WP GO MAPS no menu Plugins do WordPress. Depois de pronto, vá para mapas> Configurações> Configurações avançadas , cole na tecla API do Google Maps e salve as configurações.

Depois disso, você pode criar um novo mapa usando a interface do plug -in.

Salve quando estiver satisfeito. Você pode exibi -lo no seu site onde deseja usar o bloco de mapas ou com o código de short que o plug -in gera para o seu mapa personalizado.

Parabéns, você acabou de adicionar uma API ao seu site WordPress.

Use wpgetapi para quase qualquer API

O exemplo acima funciona apenas para uma API específica. Se você deseja uma solução de plug -in mais geral para integrar APIs ao seu site, um dos mais populares é o WPGETAPI.

Veja como funciona: para este exemplo, queremos exibir informações climáticas do OpenWeatherMap.org. O primeiro passo para isso é criar uma conta para esse serviço e se inscrever em um plano (há uma com 1000 chamadas gratuitas por dia que você pode usar para testar).

Todas as informações para usar a API do site estão disponíveis na documentação.

Configure a chamada da API

Para começar, instale e ative o WPGETAPI e vá para WPGETAPI> Configuração no seu painel.

Preencha as informações na primeira tela da seguinte forma:

• Nome da API: Então você sabe para que serve cada API.

• Identificador exclusivo: o nome do WordPress-Internal da API para exibi-lo. Use apenas letras e sublinhados minúsculos, por exemplo, "Open_weather_map".

• URL base: o endereço geral da API, sem um ponto final. Neste exemplo, isso é https://api.openweathermap.org .

Uma vez pronto, salve para continuar.

Configure seu terminal e parâmetros

Em seguida, clique na guia da API na parte superior para configurar o restante da chamada da API.

Veja como fazer isso:

• ID exclusivo: o nome do endpoint que você usará.

• Endpoint: isso é anexado ao endereço base (aqui, é "Data/3.0/OneCall").

• Método: o http solicita que indique se deseja, ler, criar, atualizar ou excluir algo no terminal. Queremos receber algo, então usamos o Get.

• Formato de resultados: se você deseja receber os dados no formato PHP ou JSON da API, estamos usando o JSON aqui.

• Tempo limite: quanto tempo a conexão deve permanecer aberta.

Abaixo disso, defina os parâmetros. A API do mapa climático aberto requer três:

• Lat: A latitude da localização para a qual você deseja informações meteorológicas.

• LON: Como você provavelmente pode adivinhar, essa é a longitude do seu local de destino.

• APPID: Sua chave da API, que você pode encontrar em sua conta.

A API OpenWeatherMap também aceita parâmetros opcionais:

• Exclua: permite omitir algumas partes dos dados climáticos, por exemplo, previsões diárias ou por hora.

• Unidades: defina suas unidades de medição preferidas.

• Lang: Escolha o seu idioma de saída.

Defina os parâmetros na seção String de consulta nos pares do valor da chave, por exemplo, "LAT" à esquerda e "48.8542" à direita.

Salve e clique em Teste terminal na parte superior. Você pode ver se funciona e revisar a resposta.

Exibir a saída

Se tudo estiver bem, você pode usar a tag de modelo ou o shortcode wpGetAPI para exibi -lo no seu site.

Quando você agora visualiza a página ou postagem, você vê que os dados são exibidos.

Obviamente, atualmente são dados JSON brutos, por isso não é tão informativo de se olhar. A versão paga do plug -in possui funcionalidade para formatar e personalizar ainda mais a saída.

Acessando APIs no WordPress manualmente

Se você não quiser seguir a rota do plug -in, pode criar chamadas de API manualmente. Isso fornece mais controle porque você pode personalizar os dados solicitados e sua saída imediatamente.

Usando PHP

Continuando com o exemplo do mapa climático aberto, aqui está uma função PHP para obter as mesmas informações climáticas acima:

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

Aqui está o que faz:

• Faz uma chamada para as mesmas coordenadas e outros parâmetros.

• Usa wp_remote_get () para fazer o http obter solicitação.

• Puxa apenas a temperatura atual da resposta JSON.

• Enrole a saída em algum HTML para que você possa estilizá -lo, se necessário.

• Registra um código de curto chamado "[clima]" para a saída dos dados no WordPress.

Coloque a função no arquivo FUNCTions.php do seu tema (filho) ou de um plug -in personalizado. Em seguida, use o código de short como antes. Aqui está o que parece na página:

JavaScript

Você também pode usar o JavaScript para conectar -se às APIs. Isso é especialmente útil para atualizações dinâmicas de conteúdo, solicitações de AJAX ou aplicativos de uma página.

Aqui está um exemplo muito simples usando o método Fetch () para exibir informações aleatórias sobre gatos da API de fatos do CAT:

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

Você pode inseri -lo em um bloco HTML personalizado para exibi -lo imediatamente no WordPress.

APIs de terceiros e desempenho do site

A adição de APIs de terceiros ao WordPress pode afetar os tempos de desempenho e carregamento do seu site se não forem tratados corretamente. Toda vez que uma página carrega e faz uma chamada de API, ele adiciona informações para carregar e aumentar o tempo de processamento do servidor. As respostas de API lentas ou que não respondem também podem atrasar a renderização da sua página, mostrar seções de página vazias ou quebrar seu site.

Para evitar esses problemas, é importante armazenar em cache as respostas da API para que elas não sejam buscadas em todas as carregamentos de páginas. Muitos plugins de API, como o WPGETAPI, têm opções internas para isso. Se você escrever chamadas de API manualmente, precisará configurar seus próprios mecanismos de cache.

Além disso, você pode reduzir o impacto do desempenho limitando as chamadas da API a eventos específicos (por exemplo, um clique em um botão) em vez de cada página de carga. Outra opção é agendar chamadas de API usando wp_cron () e armazenar os resultados para exibição posteriormente.

Melhorando o desempenho com um plugin

Outra etapa eficaz para minimizar o efeito das chamadas da API no desempenho do site é o uso do WP Rocket.

Primeiro de tudo, o plug -in adiciona armazenamento em cache ao seu site (incluindo um cache móvel separado). Isso cria versões estáticas de suas páginas renderizadas e permite que os visitantes vejam conteúdo pré -carregado em vez de aguardar as respostas da API. Isso funciona especialmente bem para dados de API exibidos usando códigos de atalho ou PHP do lado do servidor.

Se você carregar o conteúdo da API via JavaScript, o WP Rocket ajudará a melhorar seu tempo de carregamento:

• Minificando JavaScript para diminuir os arquivos (ativado por padrão)

• Combinando vários arquivos em um para downloads mais rápidos

• Adiando e carregando arquivos assíncronos

• Atrasar a execução do JavaScript

Você tem a opção de excluir scripts, plugins e arquivos individuais de serem otimizados, caso isso interfira na exibição do seu conteúdo da API. Além disso, você pode fazer tudo isso acima, simplesmente verificando algumas caixas no menu de otimização de arquivos .

Além disso, o WP Rocket vem com uma variedade de melhorias automáticas de desempenho em segundo plano, como:

• Compressão GZIP

• Pré -carregamento para cache e links

• Otimização crítica da imagem (exclui imagens acima da dobra do carregamento preguiçoso) para melhorar a maior tinta conteúdo

• Renderização preguiçosa automática para carregar elementos que aparecem no alto de suas páginas da web mais rapidamente

Basta instalar e ativar o plug -in permite que seu site se beneficie de 80% das práticas recomendadas de desempenho e o acelera imediatamente, sem qualquer esforço necessário de você. Além disso, existem muitos outros recursos que você pode ativar manualmente para aumentar a velocidade do seu site, como:

• Carregamento preguiçoso para imagens, incluindo fundos, vídeos e iframes CSS

• Pré -carregando arquivos e fontes externas

• Auto-hospedar fontes do Google

• Otimização do banco de dados

• Opções para conectar -se facilmente a um CDN, incluindo Rocketcdn

Estudo de caso: acelerar chamadas de API com foguete WP

Para entender melhor como a adição de uma API externa afeta o desempenho do site - e como um plug -in como o WP Rocket pode ajudar - configuramos um ambiente de teste controlado. Criamos um site de demonstração WordPress com conteúdo fictício e adicionamos um mapa do Google Maps usando o WP GO MAPS.

Completamente não otimizado, seus resultados de insights do PageSpeed foram os seguintes:

Em seguida, ativamos o WP Rocket e os seguintes recursos:

• Minificar CSS e JavaScript

• Remova o CSS não utilizado

• Carregar JavaScript diferido

• Atrasar a execução do JavaScript

Isso deixou as seguintes mudanças:

Essa é uma grande melhoria em comparação com a linha de base! Embora possa tornar seu site muito mais envolvente, conteúdo dinâmico, como o Google Maps, vem com muito código extra, que pode desacelerar seu site. O WP Rocket mitiga seu impacto - e basta alguns cliques.

Adicione APIs ao WordPress sem o desempenho do arrasto

APIs abrem possibilidades intermináveis para conteúdo dinâmico e em tempo real e integrações poderosas. Graças aos plugins do WordPress e às integrações fáceis, você pode até adicioná -los ao seu site sem ser um desenvolvedor.

Lembre -se de que toda chamada da API pode afetar o desempenho da página. Sentindo -se fora de sua profundidade otimizando -o? O WP Rocket está aqui para ajudar-tente sem riscos por 15 dias!