Como exibir conteúdo de outros sites no meu wordpress usando a API REST

O que é a API REST?

Em primeiro lugar, vamos esclarecer o título. REST significa Representational State T resfer, e API é para Application P rogramming I nterface . Assim, de acordo com o título, trata-se de uma interface de programação que permite criar conexões entre o seu site e, por exemplo, outro site ou app. Usando essa conexão, dois sites (ou site e aplicativo) podem trocar dados no formato JSON.

Veja como funciona. Como exemplo, vamos pegar dois sites, A e B. Primeiramente, você cria um Endpoint no site A. WordPress REST API Endpoint é um ponto de conexão, que você pode acessar de outro site ou aplicativo. As configurações do Endpoint definem quais informações podem ser retiradas do seu site. Depois, você adiciona o Endpoint criado ao site B, vincula os dois sites e cria o bloco frontend para enviar e receber solicitações do site B para o site A.

As mesmas etapas são para uma conexão de site para aplicativo. Após criar um Endpoint no site, você o adiciona ao app e, assim, tem a oportunidade de enviar e receber dados pela interface do app.

Mais detalhes podem ser encontrados no REST API Handbook .

Como criar um “endpoint da API REST do item GET”?

Para usar a funcionalidade da API REST, você precisa ativá-la. Abra seu painel do WP e vá para JetEngine > JetEngine Dashboard > Modules . Role a página para baixo e encontre o botão REST API Listings , habilite-o e clique no botão “ Save ”.

Até agora, a funcionalidade da API REST funciona apenas com tipos de conteúdo personalizados. Então, para criar um Endpoint, você terá que adicionar um CCT. Vá para JetEngine > Tipo de conteúdo personalizado e clique no botão “ Adicionar novo ”. Escolha o nome, o ícone do menu e a posição do CCT, bem como o recurso de acesso à IU do tipo de conteúdo . Se precisar de ajuda, consulte este guia de criação de CCT .

Quatro alternâncias inferiores permitem que você registre os Endpoints da API REST para obter, criar, editar e excluir os itens deste CCT. Ative a alternância Registrar GET items/item REST API Endpoint .

No campo Endpoint URL , você verá dois URLs que podem ser usados ​​para a conexão. O primeiro é para a lista e o segundo pode ser usado como exemplo se você quiser puxar um único item.

Você pode adicionar alguns parâmetros ao URL do Endpoint se precisar deles. Para ver a lista de parâmetros disponíveis, clique na opção “ Visão Geral dos Parâmetros ”. Vamos olhar mais de perto.

• _ID– você pode colocar os IDs dos itens separados no final da URL e ele extrairá apenas os dados de um único item;
• cct_author_id, cct_created, cct_modified– esses três parâmetros não devem funcionar com a URL. eles apenas listam os campos que estão disponíveis para o usuário. Os campos meta adicionados por você também serão listados aqui. Você pode exibir esses campos na listagem e grade de listagem;
• _cct_search– este parâmetro ajuda a obter apenas os itens que incluem uma determinada palavra. Coloque-o no final da URL desta forma: “ _cct_search=something” e em vez de “algo” use a palavra para pesquisar no conteúdo do item. A palavra é pesquisada em todos os campos;
• _cct_search_by– funciona apenas com o _cct_searchparâmetro “ ”. Este parâmetro especifica a pesquisa. Você pode listar alguns dos campos aqui e pesquisar os itens apenas por esses campos. Adicione os campos após o “ _cct_search_by=” e separe-os com vírgulas;
• _limit– ajudará você a limitar o número de itens puxados. Use números apenas para este parâmetro;

OBSERVAÇÃO!
Esteja ciente de que a única maneira de limitar o número de itens obtidos com a ajuda da API REST é o parâmetro _limit. Você não pode alterar o valor do item CCT com a configuração do número Listing Grid Posts .

• _offset– com este, você pode definir o deslocamento do item. Coloque-o no final da URL assim: “ _offset=2”, onde “2” deve ser substituído pelo número de itens que deseja pular;
• _orderby– este parâmetro irá ajudá-lo a ordenar itens por campo. Escreva o nome do campo após o sinal “=”. Se o utilizar, deverá também definir o tipo de encomenda com a ajuda do ordertypeparâmetro “ ”;
• _order– você pode escolher a ordem ascendente (asc) ou descendente (desc) e defini-la para os itens puxados. Coloque na URL assim: “ _order=asc” ou “ _order=desc”;
• _ordertype– pode ajudá-lo a ordenar os itens de acordo com o tipo de valor – integer, float, timestamp, date ou string;
• _filters– finalmente, este parâmetro adiciona filtros codificados em JSON ao URL.

Se você quiser usar vários parâmetros – separe-os com “&”. Aqui está um exemplo de URL com parâmetros:

http://127.0.0.1/testsite/wp-json/jet-cct/team/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer

Não deixe de adicionar o “?” assinar no início da linha do parâmetro porque marca o início da string de consulta.

No campo Access Capability , você pode escolher quem terá permissão para acessar este CCT. Por padrão, não há restrições e qualquer pessoa pode vê-lo. Vamos alterá-lo para “edit_pages” – isso significa que apenas editores e administradores poderão usá-lo.

Você também precisaria definir as senhas do aplicativo. Vá para a guia Usuários > Perfil do WordPress e role para baixo até o cabeçalho Senhas do aplicativo .

Digite qualquer nome no campo Nome da nova senha do aplicativo e clique no botão Adicionar nova senha do aplicativo .

Copie a nova senha e salve-a em algum lugar.

Prossiga para adicionar os metacampos necessários e, em seguida, clique no botão “ Adicionar tipo de conteúdo ”. Vá para a guia CCT recém-criada e adicione algumas postagens. Se você já criou um CCT e agora deseja acessá-lo, basta abrir a janela de edição e ativar a alternância Registrar GET items/item REST API Endpoint .

Como definir a conexão entre dois sites usando a API REST?

Vá para o site onde você gostaria de listar os itens CCT e habilite a alternância REST API Listings em JetEngine > JetEngine Dashboard > Modules . Depois de clicar no botão “ Salvar ”, a guia Rest API Endpoints aparecerá no JetEngine Dashboard, então abra-a.

Você verá duas opções – adicionar um novo Endpoint e um exemplo. A amostra ajudará você a exibir a lista de itens do Crocoblock. Todos os recursos são definidos aqui e podem funcionar como exemplo. Vamos adicionar um novo Endpoint e lidar com todas as configurações desde o início. Então, aperte o botão “ New Endpoint ”.

• Nome . É o título do Endpoint, visível na lista;
• URL do ponto final da API . Este é o campo onde você deve colocar o URL da área de texto Endpoint URL . Além disso, use os parâmetros para especificar os dados que serão extraídos do CCT;
• Caminho dos itens . Se o URL o levar à página onde apenas os itens são armazenados, deixe a barra (/) neste campo. E caso existam várias pastas, defina aqui o caminho para os itens. Por exemplo, existem três pastas, mas os itens necessários estão naquela chamada “itens”. Então você deve escrever “/items” neste campo. Você pode ler a solução de problemas dedicada sobre como obter o caminho correto do item . Aqui você também pode descobrir como configurar a API no site da RapidAPI ;

• Autorização . Se houver qualquer outra opção além da padrão no campo Access Capability do CCT que você escolheu, ative esta alternância. Na seleção do tipo de autorização , escolha a opção “Application Passwords” e insira o nome e a senha no campo User:password string . Fique atento para não deixar espaços entre o nome do usuário e a senha, separe-os apenas com o símbolo “:”;
• Cache . Se você habilitar esta alternância, as respostas serão descontadas de acordo com seus argumentos de consulta. Isso reduzirá suficientemente a velocidade de resposta. O saque pode ser realizado regularmente e você pode escolher o período no menu suspenso Período de duração do cache e o número de minutos/horas/dias na barra de valor Duração do cache .

Quando terminar, clique no botão “ Enviar solicitação ” para criar uma conexão. Se tudo correr bem, você verá uma marca “Conectado” no campo Status . Pressione o botão “ Salvar ” e o Endpoint será adicionado à lista.

Você pode obter um erro se não houver itens no CCT conectado, então crie alguns itens anteriormente.

Como exibir os itens obtidos via API REST no Elementor?

Para exibir os dados via Listing Grid, você precisa de um modelo de listagem. Então, vá em JetEngine > Listings e crie um template para os dados obtidos através da API REST. Clique no botão “ Add New ” e escolha a opção “REST API Endpoint” no menu suspenso Listing source. Selecione o Endpoint adicionado e defina seu nome.

Depois de clicar no botão “ Criar item de listagem ”, você será redirecionado para a janela do construtor de páginas Elementor. Todos os campos que você gostaria de exibir na listagem podem ser adicionados com a ajuda do widget Dynamic Field. Há duas maneiras de definir qual campo mostrar.

A primeira é exibir os campos diretamente. No menu suspenso Origem da seção do menu Conteúdo , escolha a opção “Post/Term/User/Object Data”. Na lista suspensa Campo de objeto , você poderá escolher os metacampos do CCT.

A segunda é usar as chaves de campo meta. Escolha a opção “Meta Data” no campo Source e cole o slug do campo na área de texto Custom meta field/repeater key .

OBSERVAÇÃO. Usando a API REST, você não pode receber nada além dos valores dos campos. Isso significa que, em vez de fotos (do campo Tipo de mídia), você obterá apenas seus números de identificação.

Você pode exibir as imagens CCT obtidas com a API REST da seguinte maneira.

Primeiramente, você precisa criar no site principal o metacampo de mídia para o CCT onde deverá escolher o formato de valor “URL da mídia”. Se você selecionar a opção “Media ID” e obter a imagem com a API REST, pode acontecer que a imagem com o mesmo ID já exista no site secundário e isso pode causar conflito.

Em seguida, no modelo de Listagem no site secundário, arraste e solte o widget Imagem Dinâmica , selecione a opção “Post/Term/User/Object Data” e escolha o metacampo de mídia como o campo Objeto. Ative a opção “ Personalizar saída de campo ” e digite <img src=”%s”> no formato de campo.

Quando terminar, clique no botão “ Publicar ” e retorne ao painel. Encontre a página onde você gostaria de colocar a grade de listagem e abra-a no construtor de páginas Elementor. Arraste e solte o widget Listing Grid na página. No campo Listagem , escolha o modelo de listagem que acabou de criar.

Posteriormente, você pode personalizar a aparência da grade de listagem nas guias do menu Conteúdo e Estilo , para que ela atenda às suas necessidades.

Como exibir os itens obtidos via API REST no Gutenberg?

Aqui, novamente, em primeiro lugar, você precisará de um modelo de listagem. Vá para JetEngine > Listings e crie um modelo para os dados obtidos usando a API REST. Clique no botão “ Add New ” e escolha a opção “REST API Endpoint” no menu suspenso Listing source. Selecione o Endpoint adicionado e defina seu nome. Na lista suspensa Visualização de Listagem , escolha a opção “Blocos”.

Clique no botão “ Criar item de listagem ” e você será redirecionado para a janela de edição de página do Gutenberg. Todos os campos que você gostaria de exibir na listagem podem ser adicionados com a ajuda do bloco Dynamic Field . Existem duas maneiras de definir o campo que você deseja mostrar.

1. No menu suspenso Origem , escolha a opção “Post/Term/User/Object Data”. Na lista suspensa Object Field , você poderá escolher os metacampos do CCT, obtidos via API REST.

2. Escolha a opção “Meta Data” no campo Source e cole o slug do campo na área de texto Custom meta field/repeater key .

Quando terminar, clique no botão “ Publicar ” e retorne ao painel. Encontre a página onde você gostaria de colocar a grade de listagem e abra-a no editor do Gutenberg. Encontre o bloco Listing Grid e adicione-o à página. No campo Listagem , escolha o modelo de listagem que acabou de criar.

Posteriormente, você pode personalizar a aparência da grade de listagem no menu Block Style . Não se esqueça de pressionar o botão “ Atualizar ”.

Isso é tudo. Agora você aprendeu como usar a API REST para exibir itens de tipo de conteúdo personalizado de um site para outro usando as funcionalidades do JetEngine.