Como exibir itens de tipo de conteúdo personalizado usando API REST

Para usar a funcionalidade da API REST, você deve habilitá-la. Abra o painel do WordPress e vá para JetEngine > JetEngine Dashboard > Modules . Role a página para baixo e encontre o botão REST API Listings , ative-o e clique no botão “ Salvar ”.

Para criar um Endpoint, você terá que adicionar um CCT. Vá para JetEngine> Tipos de conteúdo personalizados e clique no botão “ Adicionar novo ”. Escolha o nome, o ícone do menu e a posição do CCT, bem como a capacidade de acesso à interface do tipo de conteúdo . Se precisar de ajuda, consulte este guia de criação de CCT .

Quatro botões inferiores permitem registrar endpoints da API REST para obter, criar, editar e excluir os itens deste CCT. Ative a alternância Registrar itens GET/item REST API Endpoint .

” alt=”adicionando novo CCT” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/add-cct-2.png” />No campo Endpoint URL , você verá duas URLs que podem ser usadas para a conexão. O primeiro é para a lista, e o segundo pode ser usado como exemplo se você quiser extrair 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 do item único;
• cct_author_id, cct_created, cct_modified– esses três parâmetros não deveriam funcionar com o URL. eles listam apenas os campos que estão disponíveis para o usuário. Os metacampos adicionados por você também serão listados aqui. Você pode exibir esses campos na listagem e na grade de listagem;
• _cct_search– este parâmetro ajuda você a obter apenas os itens que incluem uma determinada palavra. Coloque no final da URL desta forma: “ _cct_search=something” e em vez de “alguma coisa” 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– isso o ajudará a limitar o número de itens retirados. Use números apenas para este parâmetro;

• _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 pela quantidade de itens que você deseja pular;
• _orderby– este parâmetro irá ajudá-lo a ordenar os itens por campo. Escreva o nome do campo após o sinal “=”. Caso utilize, deverá também definir o tipo de pedido com a ajuda do ordertypeparâmetro “ ”;
• _order– você pode escolher a ordem crescente (asc) ou decrescente (desc) e configurá-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 – inteiro, flutuante, carimbo de data/hora, data ou string;
• _filters– finalmente, este parâmetro adiciona filtros codificados em JSON ao URL.

Se 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 “?” assine no início da linha do parâmetro porque marca o início da string de consulta.

No campo Capacidade de Acesso você pode escolher quem terá permissão para acessar este CCT. Por padrão, não há restrições e qualquer pessoa pode ver. 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 WordPress e role para baixo até o título Senhas de aplicativos .

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.

” alt=”sua nova senha para” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/your-new-password-for.png” />Continue adicionando os metacampos necessários e 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 obter acesso a ele, basta abrir a janela de edição e ativar a alternância Registrar itens GET/item REST API Endpoint .

Acesse o site onde você gostaria de listar os itens CCT e ative a alternância REST API Listings em JetEngine > JetEngine Dashboard > Modules . Após clicar no botão “ Salvar ”, a aba Rest API Endpoints aparecerá no JetEngine Dashboard, então abra-a.

Você verá duas opções – adicionar um novo Endpoint e um exemplo. O exemplo irá ajudá-lo a exibir a lista de itens do Crocoblock. Todos os recursos estã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, clique no botão “ Novo Endpoint ”.

• Nome . É o título do Endpoint, visível na lista;
• URL do terminal da API . Este é o campo onde você deve colocar o URL da área de texto Endpoint URL . Além disso, utilize os parâmetros para especificar os dados que serão extraídos do CCT;
• Caminho dos itens . Se o URL levar você à página onde apenas os itens estão armazenados, deixe a barra (/) neste campo. E caso existam várias pastas, defina aqui o caminho dos 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 RapidAPI ;

• Autorização . Se houver qualquer outra opção que não seja a padrão no campo Capacidade de acesso do CCT que você escolheu, ative esta opção. Na seleção do Tipo de Autorização , escolha a opção “Senhas do Aplicativo” 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ê ativar 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 valores de 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 receber um erro se não houver itens no CCT conectado, então crie alguns itens anteriormente.

Para exibir dados via Listing Grid , você precisa de um modelo de listagem. Então, acesse JetEngine > Listings e crie um template para os dados obtidos usando a API REST. Clique no botão “ Adicionar novo ” e escolha a opção “Endpoint da API REST” no menu suspenso Fonte da listagem . Selecione o Endpoint adicionado e defina seu nome.

Após 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 Campo Dinâmico. Existem duas maneiras de definir qual campo mostrar.

A primeira é exibir os campos diretamente. No menu suspenso Fonte 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 do metacampo. Escolha a opção “Meta Data” no campo Fonte e cole o slug do campo na área de texto da chave metacampo/repetidora personalizada .

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 de 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 de imagem dinâmica , selecione a opção “Post/Term/User/Object Data” e escolha o metacampo de mídia como o campo Object. Ative a opção “ Personalizar saída do campo ” e insira <img src=”%s”> no formato do 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 você acabou de criar.

Depois disso, 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.

Aqui, novamente, em primeiro lugar, você precisará de um modelo de listagem. Acesse JetEngine > Listagens e crie um modelo para os dados obtidos usando a API REST. Clique no botão “ Adicionar novo ” e escolha a opção “Endpoint da API REST” no menu suspenso Fonte da listagem . 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 da página Gutenberg. Todos os campos que você gostaria de exibir na listagem podem ser adicionados com a ajuda do bloco Campo Dinâmico . Existem duas maneiras de definir o campo que você deseja mostrar.

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

2. Escolha a opção “Meta Data” no campo Fonte e cole o slug do campo na área de texto da chave metacampo/repetidora personalizada .

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

Depois disso, 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 ”.