Se você já quis exibir notícias ou postagens de outro site WordPress diretamente no seu próprio site, sem precisar copiar e colar conteúdo manualmente, este guia é para você. Aqui, vou te mostrar passo a passo como conectar dois sites WordPress usando a API REST e o plugin JetEngine, tudo isso integrado ao Elementor para criar um layout bonito e funcional. Ah, e o melhor: sem precisar programar! Vamos juntos nessa jornada para criar uma solução dinâmica e profissional para seu site.
Por Que Consumir Notícias de Outro Site via API?
Imagine que você está construindo um site para uma filial, uma comunidade ou uma igreja, e precisa exibir as notícias da matriz ou do site oficial em tempo real. Fazer isso manualmente é trabalhoso e sujeito a erros, além de demandar atualizações constantes. A solução ideal é consumir diretamente a API do site fonte, garantindo que as notícias estejam sempre atualizadas automaticamente.
Essa técnica é especialmente útil para:
- Portais de notícias que agregam conteúdo de várias fontes.
- Redes de franquias que querem centralizar informações.
- Sites institucionais que precisam mostrar notícias de uma matriz ou órgão central.
- Qualquer projeto que deseja integrar informações externas sem complicação.
Pré-Requisitos para Este Tutorial
Antes de começarmos, tenha em mente o seguinte:
- O site de origem das notícias deve ser WordPress, pois vamos utilizar a API REST padrão do WordPress.
- Você precisa ter acesso administrativo ao WordPress onde deseja exibir as notícias.
- O plugin JetEngine da Crocoblock deve estar instalado e ativado no seu site.
- Elementor instalado para criar o layout visual das notícias.
Se você ainda não tem o JetEngine, recomendo conhecer a Full Service, uma empresa que aluga plugins como JetEngine e Elementor por um preço acessível, ideal para quem quer economizar sem perder qualidade.
Passo 1: Verificando se o Site de Origem é WordPress
Para garantir que o site do qual você quer puxar as notícias utiliza WordPress, uma dica simples é usar a extensão WordPress Theme Detector para Chrome. Instalando essa extensão, você pode facilmente identificar se o site é WordPress e qual tema ele está usando.
Isso é fundamental porque a API REST que usaremos é padrão do WordPress, e sites que não são WordPress não terão essa funcionalidade nativa.
Passo 2: Conhecendo o Endpoint da API REST do WordPress
O WordPress disponibiliza uma API REST de forma nativa, que pode ser acessada pelo seguinte caminho:
https://seudominio.com/wp-json/wp/v2/postsEsse endpoint retorna os posts publicados no site em formato JSON, incluindo título, conteúdo, data e outros dados. No entanto, ele não traz a imagem destacada diretamente, o que exige um ajuste que vamos ver a seguir.
Para testar, basta acessar essa URL no navegador ou usar uma ferramenta como Postman para ver o conteúdo JSON retornado.
Passo 3: Ajustando o Endpoint para Trazer a Imagem Destacada e Limitar Resultados
Para que o endpoint retorne também a imagem destacada, você precisa adicionar um parâmetro especial na URL:
?_embed
Exemplo completo:
https://seudominio.com/wp-json/wp/v2/posts?_embed&per_page=4O parâmetro _embed instrui o WordPress a incluir os dados da mídia relacionada, como a imagem destacada, dentro da resposta JSON. Já o per_page=4 limita o número de posts retornados para 4, evitando sobrecarregar seu site com muitos dados.
Se ao acessar essa URL você receber um erro ou nada for exibido, pode ser que a API REST do site esteja protegida ou bloqueada. Nesse caso, será necessário autorização ou uma solução diferente, pois não será possível consumir essa API publicamente.
Passo 4: Ativando o Módulo REST API Listings no JetEngine
No backend do seu WordPress, acesse o menu do JetEngine. Você verá uma seção chamada Modules. Ative o módulo REST API Listings e salve as alterações.
Após ativar, recarregue a página para que a opção de REST Endpoints apareça no menu do JetEngine.
Passo 5: Criando um Novo Endpoint no JetEngine
Dentro do JetEngine, vá até a aba REST Endpoints e clique para adicionar um New Endpoint. Aqui você irá configurar a conexão com a API do site externo:
- Nome: Dê um nome fácil de identificar, como “Notícias do Dante Testa”.
- URL do Endpoint: Cole o endereço completo da API REST do site externo com os parâmetros
?_embed&per_page=4.
Exemplo de URL:
https://dantetesta.com.br/wp-json/wp/v2/posts?_embed&per_page=4Depois de configurar, use o botão Send Request para testar se a conexão está funcionando. Se a resposta for positiva (verde), salve o endpoint.
Passo 6: Criando um Listing Baseado na API REST
Agora que temos o endpoint configurado, vamos criar o layout que exibirá as notícias. No JetEngine, acesse Listings e crie um novo listing do tipo REST API Endpoint, escolhendo o endpoint que você configurou anteriormente.
Defina o nome do listing, por exemplo, “List Notícias API”, para facilitar a identificação.
Passo 7: Construindo o Layout no Elementor
No editor do listing, você terá um canvas para montar a estrutura do card da notícia. Vamos adicionar os seguintes elementos:
Imagem Destacada
Adicione um widget de imagem. No campo da imagem, clique em Tag Dinâmica e escolha a opção Rest API Image. Aqui vem o segredo para carregar a imagem correta:
- Selecione a opção _embedded, que traz a mídia embutida.
- Habilite a opção para pegar o filho do objeto JSON.
- Insira o caminho exato para a URL da imagem, que geralmente é:
/wp:featuredmedia/0/media_details/sizes/medium/source_url.
Se quiser usar outro tamanho da imagem (maior ou menor), substitua “medium” por “large” ou “thumbnail” no caminho acima.
Título da Notícia
Adicione um widget de texto dinâmico para o título. Use o campo da API REST correspondente ao título, que é um objeto com chave title.rendered. Para isso, habilite a opção de pegar o filho do array e informe o campo rendered para extrair o texto correto.
Resumo (Excerpt)
Se desejar mostrar o resumo da notícia, adicione outro widget de texto e configure para puxar o campo excerpt.rendered, seguindo o mesmo processo do título para acessar o campo renderizado.
Link para a Notícia Original
Você pode fazer a imagem ou o título serem clicáveis, levando o usuário para o post original no site fonte. Para isso, configure o link dinâmico usando o campo link da API REST.
Passo 8: Ajustes Finais e Estilização
Com os elementos básicos configurados, você pode personalizar a aparência do card:
- Defina larguras, margens, bordas e arredondamentos para deixar o layout agradável.
- Centralize o texto e ajuste fontes e cores conforme o estilo do seu site.
- Se notar que a imagem não ocupa 100% do espaço, pode aplicar um pequeno código CSS no seletor avançado para garantir que a imagem preencha o card, evitando espaços e bugs visuais.
Exemplo de CSS para a imagem dentro do link:
selector a img { width: 100%; }
Passo 9: Inserindo o Listing na Página com Elementor
Agora que seu listing está pronto, vá até a página onde deseja exibir as notícias. No editor do Elementor, adicione o widget Listing Grid e selecione o listing que você criou.
Configure a grade para mostrar o número de colunas desejado (por exemplo, 4 colunas). O JetEngine fará a consulta automática ao endpoint REST e exibirá as notícias em tempo real.
Faça um teste recarregando a página e você verá as notícias do site externo aparecendo perfeitamente integradas ao seu site.
Resumo do Processo
- Verificamos que o site fonte é WordPress e acessível via API REST.
- Configuramos o endpoint no JetEngine com a URL completa, incluindo parâmetros para trazer a mídia e limitar resultados.
- Criamos um listing no JetEngine baseado nesse endpoint.
- Montamos o layout no Elementor, puxando título, imagem, resumo e link da API.
- Inserimos o listing na página desejada com o widget Listing Grid.
- Estilizamos o layout para uma apresentação profissional.
Dicas Extras e Considerações
Nem todos os sites WordPress permitem acesso público à API REST, principalmente se estiverem protegidos por plugins de segurança ou configurações específicas do servidor. Sempre verifique se o endpoint está acessível antes de avançar.
Se quiser exibir outros campos personalizados da API, basta consultar a resposta JSON da API REST e mapear os campos no JetEngine, aplicando o mesmo método para acessar arrays e objetos aninhados.
Este método é ideal para quem quer evitar programação, pois todas as configurações são feitas via interface gráfica do WordPress, JetEngine e Elementor.
Sobre o JetEngine e JetMaster
O JetEngine é um plugin poderoso da Crocoblock que permite criar conteúdos personalizados, integrar APIs e montar layouts dinâmicos no WordPress. Se você quer se aprofundar e dominar essa ferramenta, recomendo o curso JetMaster, que oferece suporte ao vivo toda quarta-feira, além de aulas detalhadas sobre WordPress, Elementor, JetEngine e até inteligência artificial aplicada ao desenvolvimento web.
No JetMaster, você terá uma comunidade ativa, mentoria direta comigo e acesso a conteúdos exclusivos para acelerar seu aprendizado e desenvolvimento.
Quer parar de sofrer tentando montar seu site e começar a criar soluções profissionais? O JetMaster é para você!
FAQ – Perguntas Frequentes
1. O que é o JetEngine?
O JetEngine é um plugin para WordPress da Crocoblock que permite criar tipos de posts personalizados, campos personalizados, taxonomias, além de integrar dados externos via API REST, tudo isso sem necessidade de programação.
2. Preciso saber programar para consumir APIs com o JetEngine?
Não. O JetEngine possui uma interface amigável que permite configurar endpoints, mapear dados e criar layouts dinâmicos sem codificação, especialmente quando usado com o Elementor.
3. Posso usar o JetEngine com outros construtores além do Elementor?
Sim, o JetEngine é compatível com outros construtores como Gutenberg e Bricks, oferecendo flexibilidade na criação de conteúdo dinâmico.
4. O que fazer se a API REST do site externo estiver protegida?
Se a API estiver bloqueada, você precisará de autorização para acessá-la ou buscar alternativas como exportar dados manualmente ou usar plugins específicos que façam a integração via autenticação.
5. Posso exibir mais do que apenas título e imagem?
Sim. A API REST do WordPress fornece diversos campos, como conteúdo, resumo, data, autor, categorias, entre outros. Você pode mapear esses campos no JetEngine para exibir o que desejar.
6. Como faço para atualizar automaticamente as notícias?
A conexão via API REST faz a consulta em tempo real sempre que a página é carregada, garantindo que as notícias exibidas estejam sempre atualizadas sem necessidade de intervenção manual.
7. Existe limite para o número de posts que posso puxar?
O parâmetro per_page controla quantos posts são retornados. O WordPress tem um limite padrão de 100 por requisição, mas você pode ajustar conforme sua necessidade.
Conclusão
Integrar notícias de outro site WordPress diretamente no seu site pela API REST é uma solução eficiente e elegante para manter seu conteúdo sempre atualizado e unificado. Com o JetEngine e Elementor, você consegue fazer isso de forma prática, sem precisar programar, e ainda criar um layout bonito e funcional para seus visitantes.
Seguindo este passo a passo, você terá um site dinâmico que consome informações externas em tempo real, ideal para igrejas, portais de notícias, franquias e qualquer projeto que precise centralizar conteúdo.
Quer se aprofundar e aprender mais truques assim? Não deixe de conhecer o curso JetMaster e entre para a comunidade que transforma a forma de trabalhar com WordPress e Elementor.
Agora é com você! Teste, personalize e deixe seu site com cara profissional, exibindo notícias atualizadas automaticamente. Se gostou deste conteúdo, aproveite para explorar mais e continuar evoluindo no universo WordPress.
