Como criar um Listing Template em Gutenberg

Escolhendo a fonte da listagem

Você pode criar vários objetos por meio do plugin JetEngine ou de ferramentas padrão do WordPress que podem ser mostradas na Listing Grid posteriormente. São postagens, termos, usuários, campos repetidores, endpoints da API REST e tipos de conteúdo personalizados.

Faça login no painel WordPress do seu site, vá para JetEngine > Listagens e clique no botão “ Adicionar novo ” no topo da página.

Modelo de listagem para postagens

Você pode criar um modelo de listagem não apenas para o tipo de postagem personalizada feita por meio das funcionalidades do JetEngine. Postagens, páginas ou mídia padrão do WordPress e produtos WooCommerce também podem ser exibidos em uma grade de listagem, o que significa que você também pode criar um modelo de listagem para eles.

Após escolher a opção “Postagens” no menu suspenso Fonte da listagem , escolha o tipo de postagem no campo de seleção Do tipo de postagem .

Modelo de listagem para Query Builder

Crie uma consulta para definir uma solicitação nas postagens recebidas e escolha itens para construir uma lista. Os itens incluídos na lista podem ser exibidos com a ajuda do JetEngine Listing Template .

Selecione a consulta que você criou como origem.

Modelo de listagem para termos

O plugin JetEngine permite que você crie taxonomias personalizadas e depois adicione metacaixas construídas separadamente a elas. No entanto, você pode adicionar uma meta box a uma categoria WP padrão ou categoria de produto WooCommerce . Para todas essas categorias, junto com as taxonomias criadas, você pode construir um Listing Template e posteriormente utilizá-lo para exibi-las em uma Listing Grid.

Escolha a opção “Termos” no menu Fonte da listagem e especifique-a na lista suspensa Da taxonomia .

Modelo de listagem para usuários

Por padrão, o WordPress possui a funcionalidade de adicionar novos usuários (você pode encontrá-la na aba Usuários do painel do seu site). Cada usuário possui um conjunto de metacampos padrão:

EU IA . O valor numérico do id do usuário;
Conecte-se . O nome que você coloca na barra Nome de usuário ;
Apelido . Este nome você pode definir após criar o usuário. Se você não colocou, será igual ao nome de usuário por padrão;
E-mail. O endereço que você colocou no campo Email;
URL. Representa a URL que você colocou na barra do site;
Data de registro. Este valor é registrado automaticamente no momento seguinte após você clicar no botão “Adicionar Novo Usuário”, e você não pode alterá-lo;
Nome de exibição. Após criar o usuário em sua janela de edição, você pode definir o nome que será mostrado publicamente no site no menu suspenso Exibir nome publicamente como .

Além dos metadados padrão, você também pode adicionar uma metacaixa personalizada ao usuário. Os metacampos padrão e personalizados podem ser adicionados ao modelo de listagem e mostrados na grade de listagem posteriormente.

Modelo de listagem para campo repetidor

O metacampo repetidor é, na verdade, um conjunto de subcampos que podem ser repetidos quantas vezes você ou os usuários precisarem. É por isso que você precisará de um modelo de listagem separado para isso. Você pode ler mais sobre isso nesta visão geral do metacampo do repetidor .

Escolha o tipo de postagem ao qual você aplicou o metacampo repetidor no menu suspenso Do tipo de postagem . Como fonte repetidora , você pode escolher o plugin JetEngine ou ACF . As páginas de opções do JetEngine são separadas porque formam uma metacaixa que contém um único metacampo, que pode ser usado em todo o site. Se precisar de uma dica, consulte esta visão geral da página de opções . Digite o nome do campo Repetidor na barra de campo Repetidor ou escolha a Página de Opções na lista suspensa de opções Repetidor .

Modelo de listagem para REST API Endpoint

Com a ajuda da API REST, você pode exibir na Grade de Listagem da sua página os itens do Tipo de Conteúdo Personalizado localizados em outro site. Para obter mais detalhes, consulte este tutorial de uso da API REST .

Selecione o endpoint necessário no menu suspenso Do endpoint da API .

Modelo de listagem para tipo de conteúdo personalizado

É quase o mesmo aqui que na criação do modelo de listagem para as postagens. Basta escolher o CCT necessário no menu suspenso Do tipo de conteúdo . E se você tiver alguma dúvida, consulte este guia de tipo de conteúdo personalizado .

Construindo o modelo de listagem

Ao escolher a fonte da listagem e especificá-la, você deve nomear o modelo de listagem e definir a visualização da listagem como “Blocos (Gutenberg)”. Em seguida, clique no botão “Criar Item de Listagem” e você será redirecionado para a janela de edição do Gutenberg, onde poderá criar o modelo de Listagem.

Quais blocos você pode usar para o modelo de listagem?

Qualquer um deles. Você pode pegar qualquer bloco que esteja disponível e adicioná-lo ao modelo de listagem. No entanto, há uma diferença entre os blocos padrão e os dinâmicos que acompanham o plugin JetEngine.

O bloco comum adicionará um elemento estático ao modelo de listagem. Por exemplo, você adicionou um bloco de imagem com o logotipo do seu site ao modelo. Posteriormente, quando você usar esse modelo de Listagem na Grade de Listagem, todos os itens da grade terão a mesma imagem de logotipo.

Pelo contrário, os blocos dinâmicos ( Dynamic Field , Dynamic Image , Dynamic Meta , Dynamic Repeater , Dynamic Terms e Dynamic Link ) adicionam informações que dependem do valor do meta campo do item. Então, se esse valor variar para itens diferentes, também será diferente na Grade de Listagem.

Para aprender como usar blocos dinâmicos, confira estes tutoriais:

Como adicionar blocos e construir o layout do modelo de Listagem?

Tudo é simples aqui – basta adicionar os blocos à página, como faz com qualquer outra página do WordPress.

Adicione os blocos clicando no botão “ Adicionar Bloco ”. Para este tutorial, vamos adicionar um Campo Dinâmico e uma Imagem Dinâmica , bem como um bloco de Imagem simples.

No menu de configurações do Campo Dinâmico , defina a Fonte como “Meta Dados” e escolha o meta campo com o título do item no campo Meta Key .

campo dinâmico Para o bloco Imagem dinâmica , escolha o metacampo com uma imagem no menu suspenso Fonte e defina o Tamanho da imagem .

imagem dinâmica Vamos também adicionar uma imagem estática para ver a diferença entre blocos dinâmicos e estáticos. Quando terminar, clique no botão “ Publicar ” na parte superior da tela.

Exibindo o modelo de listagem em uma grade de listagem

Agora, vá para a guia do menu Páginas > Todas as páginas do seu painel e encontre a página onde você gostaria de colocar a grade de listagem. Encontre o bloco Listing Grid no menu e adicione-o à página.

No menu suspenso Listagem da seção Configurações gerais , encontre o modelo que você acabou de criar. Como você pode ver, todos os itens possuem o mesmo layout e estilo. O bloco Imagem Dinâmica extraiu imagens diferentes para cada item, e o bloco Imagem permaneceu o mesmo em toda a grade.

Isso é tudo para a criação do modelo de Listagem. Agora você sabe como construí-los e exibi-los na Grade de Listagem.