Como criar um Listing Template usando visualização de Timber/Wig
Preparativos e criação de modelo de listagem
Primeiro de tudo, vá para a guia JetEngine > JetEngine > Performance , ative a alternância Timber/Twig Views e clique no botão “ Save tweaks config ”. Depois disso, a visualização Timber/Twig estará disponível para listagens.
Em seguida, vá para a guia JetEngine> Listagens e clique no botão “ Adicionar novo ”.
Selecione a fonte de listagem necessária . Por exemplo, você pode criar uma listagem para postagens padrão do WordPress. Escolhemos a fonte “Postagens” e o tipo de postagem personalizada “Médicos” .
Para isso, criamos anteriormente o Custom Post Type com metacampos customizados e adicionamos vários posts.
Preenchemos o título da postagem com o nome do médico, o conteúdo da postagem com as informações do médico e a miniatura da postagem com a foto do médico. Além disso, preenchemos campos personalizados com informações adicionais, como especialidade médica, experiência prática, email, etc.
Em seguida, insira o nome do item da listagem (não obrigatório), selecione a visualização da listagem “Madeira/Galho” e pressione o botão “ Criar item da listagem ”.
” alt=”criando um modelo de listagem com a visualização de madeira/galho” width=”1024″ height=”618″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-1024×618.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view-600×362.webp 600w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/creating-listing-template-with-the-timber-twig-view.webp 1824w” data-sizes=”(max-width: 1024px) 100vw, 1024px” />Após criar o Listagem, você será redirecionado para o editor Timber/Twig.
Exibindo os dados dinâmicos e padrão
Criaremos um modelo de Listagem para exibir as informações dos médicos. Primeiramente exibiremos o título do post (nome do médico). Para isso, clicamos no botão “ Dados Dinâmicos ” e escolhemos a opção “ Postar ”.
Selecionamos o campo “Título da postagem” no menu suspenso e clicamos no botão “ Inserir ”.
O espaço reservado {{ post.title }} será inserido na planilha. Além disso, pode ser digitado manualmente sem usar a funcionalidade “ Dados Dinâmicos ”.
Em segundo lugar, exibiremos o valor do metacampo personalizado. Atingimos o valor “ Dados Dinâmicos ” e escolhemos a opção “Dados Dinâmicos”.
” alt=”dados dinâmicos de motores a jato” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-dynamic-data-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Selecionamos a fonte “Meta Dados” e escolhemos o Meta Campo necessário (Meta campo Texto “Especialidade”). Em seguida, clicamos no botão “ Inserir ”.
” alt=”fonte de metadados” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/meta-data-source-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Ele insere o espaço reservado para o valor do metacampo personalizado:
{{ jet_engine_data(args={source:'meta',meta_key:'_specialty'}) }}
” alt=”espaço reservado para campo personalizado do jetengine” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/placeholder-for-jetengine-custom-field-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Além disso, inserimos o metacampo numérico “Experiência prática”. Adicionamos o “ano. de prática” texto personalizado após o espaço reservado:
{{ jet_engine_data(args={source:'meta',meta_key:'_practice-experience'}) }} yr. of practice
” alt=”texto personalizado após o valor” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-text-after-the-value-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Aplicando Filtros aos Resultados
Em seguida, clicamos no botão “ Dados dinâmicos ”, escolhemos a opção “Postar” e selecionamos o campo “Postar conteúdo”. Em seguida, pressionamos o botão “ Adicionar filtro ao resultado ”.
” alt=”adicionar filtro ao resultado” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/add-filter-to-result-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Esta opção permite alterar os dados dinâmicos ou exibi-los no formato necessário.
Como o texto no campo de conteúdo da postagem é muito longo para o item da listagem, iremos encurtá-lo.
Para isso, optamos pelo “ JetEngine Callback ”.
” alt=”” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/jetengine-callback-1-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />No menu suspenso da função de retorno de chamada , escolhemos o retorno de chamada “ Cortar string por gráficos ou palavras ”.
No menu suspenso Tipo aparado , você pode selecionar se deseja encurtar um texto para um determinado número de palavras ou caracteres. Selecionamos o tipo aparado “Palavras” e inserimos o número desejado (“5”) no campo Comprimento da string . Em seguida, clicamos no botão “ Inserir ”.
Ele insere um espaço reservado:
{{ post.content|jet_engine_callback(args={cb:'jet_engine_trim_string_callback',jet_trim_cb_type:'words',jet_trim_cb_length:'5'}) }}
Além disso, o texto pode ser encurtado com os filtros de madeira “ Cortar texto por palavras ” e “ Cortar texto por caracteres ” .
Empregamos o elemento <div> para segmentar espaços reservados, garantindo que cada um deles apareça em uma linha distinta dentro do item da listagem.
Agora, vamos adicionar a miniatura da postagem. Conseguiremos isso usando o seguinte método: clicando no botão “ Dados dinâmicos ” e escolhendo a opção “Dados dinâmicos”. No pop-up, selecionamos a fonte “Meta Data” e inserimos a chave de campo personalizada “_thumbnail_id” . Em seguida, clicamos no botão “ Adicionar filtro ao resultado ”.
” alt=”chave de campo personalizada” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/custom-field-key-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Escolhemos o “JetEngine Callback”. Em seguida, selecionamos “ Obter imagem por ID ” no menu suspenso da função Callback . Esta opção também nos permite escolher o Tamanho da imagem .
Em seguida, clicamos no botão “Inserir” e obtivemos o seguinte espaço reservado:
{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}A descrição de todos os retornos de chamada do JetEngine pode ser encontrada aqui .
Tags condicionais
Agora, vamos observar o botão “ Tags Condicionais ”.
A forma como as tags condicionais operam é muito parecida com o recurso JetEngine Dynamic Visibility , exibindo elementos quando as condições especificadas são atendidas.
A lógica condicional no Twig está disponível com a seguinte construção:
{% if statement_to_check %}
<!-- Paste your HTML here -->
{% endif %} }}
Para saber mais sobre a lógica condicional, consulte a documentação do Twig .
Agora, vamos adicionar um rótulo personalizado que aparecerá no item da listagem se o valor no campo Número “Experiência prática” for maior que “10”.
Inicialmente, clicamos no botão “ Tags Condicionais ” .
Escolhemos a condição “ Maior que ” . Em seguida, inserimos o nome do campo em Field , inserimos “10” em Value , escolhemos o Contexto “Objeto de item de listagem atual” e definimos o tipo de dados “Numeric” . Eventualmente, pressionamos o botão “ Inserir ”.
Inseriu tal construção:
{% if jet_engine_show_if(args={"jedv_condition":"greater-than","jedv_field":"_practice-experience","jedv_value":"10","jedv_context":"current_listing","jedv_data_type":"numeric"}) %}
<!-- Paste your HTML here -->
{% endif %}
Em vez de <!– Cole seu HTML aqui –> digitamos “Mais de 10 anos de experiência!”
Depois de inserir todas as construções essenciais na planilha HTML , podemos clicar no botão “ Recarregar visualização ” para exibir o resultado na área de visualização . Mostra apenas os dados de postagem padrão; os dados do JetEngine podem ser verificados na página com o Listing Grid ou no front end.
Configurações de estilo CSS
Agora, vamos explorar as configurações de estilo CSS.
Para isso, adicionamos um atributo “class” com o valor “doctor-name” ao espaço reservado {{ post.title }}:
<a class="doctor-name">{{ post.title }}</a>
Na planilha CSS, digitamos:
selector .doctor-name {
font-size: 18px;
}
Usamos a instrução “selector” antes do seletor CSS para torná-lo exclusivo para a listagem atual.
Após recarregar a visualização, podemos ver que as alterações são aplicadas ao título da postagem (nome do médico).
Tags condicionais com CSS
As tags condicionais também podem ser aplicadas às configurações de estilo.
Para verificar, vamos adicionar uma borda à imagem se a posição do item de listagem na Grade de Listagem for um número par.
Apertamos o botão “ Tags condicionais ” , selecionamos a condição “ É um item ímpar ” e pressionamos o botão “ Inserir ” .
Recebemos essa estrutura:
{% if jet_engine_show_if(args={"jedv_condition":"listing-odd"}) %}
<!-- Paste your HTML here -->
{% endif %}
Copiamos o espaço reservado para miniatura da postagem e colamos em vez de <!– Cole seu HTML aqui –>:
{% if jet_engine_show_if(args={"jedv_condition":"listing-odd"}) %}
{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}
{% endif %}
Em seguida, clicamos no botão “ Tags condicionais ” novamente, selecionamos a condição “ É item par ” e pressionamos o botão “ Inserir ”.
Recebemos essa estrutura:
{% if jet_engine_show_if(args={"jedv_condition":"listing-even"}) %}
<!-- Paste your HTML here -->
{% endif %}
Cortamos o espaço reservado para miniatura da postagem e colamos em vez de <!– Cole seu HTML aqui –>. Além disso, adicionamos um atributo “class” com o valor “even-item”:
{% if jet_engine_show_if(args={"jedv_condition":"listing-even"}) %}
<a class="even-item">{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}</a>
{% endif %}
Por fim, digitamos esse estilo na planilha CSS :
selector .even-item {
display: flex;
border: 1px solid;
padding: 5px;
}
Para preservar as alterações, clicamos no botão “ Salvar ”.
Observando resultados na grade de listagem
Para exibir o modelo de listagem no Listing Grid , você pode criar uma página no bloco WordPress, Elementor ou editor Bricks . Usamos o editor WordPress.
Para isso, fomos ao Painel do WordPress > Páginas > Adicionar nova aba, colocamos o bloco Listing Grid e selecionamos a Listagem recém-criada no menu suspenso.
O modelo de listagem na grade de listagem exibe os valores dos metacampos que inserimos na planilha HTML . Além disso, os estilos CSS são aplicados aos títulos das postagens e às imagens em todos os itens pares da listagem.
Isso é tudo. Agora você já sabe como criar o Listing Template com visualização Timber/Twig, disponível com o plugin JetEngine para seu site WordPress.