Hoje, vamos explorar como utilizar o recurso de Icon Picker no JetEngine, uma ferramenta poderosa para personalizar seus Custom Post Types (CPTs) no WordPress. Não se preocupe com a terminologia complicada; vou guiá-lo passo a passo para que você possa adicionar ícones de forma simples e eficiente.
Conheça o curso JetMaster clique aqui
Assista essa aula grátis – clique aqui
O que é o Icon Picker?
O Icon Picker é uma funcionalidade que permite selecionar ícones de diferentes bibliotecas diretamente no painel do WordPress. Isso é especialmente útil para personalizar a apresentação de informações em seus CPTs. Com ele, você pode adicionar ícones do Font Awesome e outros padrões do WordPress de maneira rápida e fácil.
Configurando seu Custom Post Type (CPT)
Para começar, precisamos ter um Custom Post Type criado. Neste exemplo, vamos criar um CPT chamado “Cadastros”. Aqui estão os passos:
- Acesse o JetEngine no seu painel do WordPress.
- Vá até “Post Types” e clique em “Adicionar Novo”.
- Nomeie seu Post Type como “Cadastros” e configure as opções conforme necessário.
- Salve as alterações.
Agora, você tem um CPT chamado “Cadastros” onde pode armazenar informações como nome, e-mail, telefone, e, claro, um campo para ícone.
Adicionando um Campo de Ícone
Com o CPT criado, vamos adicionar um campo de ícone. Siga estas etapas:
- No JetEngine, vá até “Meta Fields” e clique em “Adicionar Novo”.
- Crie um novo campo e nomeie-o como “Ícone”.
- Selecione o tipo de campo como “Icon Picker”.
- Escolha a biblioteca de ícones que deseja usar: Font Awesome 4, Font Awesome Regular, Solid, Brands ou Dash Icons.
Por exemplo, se você escolher o Font Awesome 4, você terá acesso a uma grande variedade de ícones para selecionar.
Selecionando um Ícone no Backend
Após configurar o campo de ícone, vamos ver como ele aparece no backend quando você está adicionando um novo cadastro.
Quando você acessa o CPT “Cadastros”, verá o campo “Ícone”. Ao clicar nele, uma janela com todos os ícones disponíveis aparecerá, permitindo que você escolha o ícone desejado para cada entrada.
Exibindo o Ícone no Frontend
Agora que você adicionou ícones aos seus registros, a próxima pergunta é: como exibi-los no frontend? Vamos descobrir!
Primeiro, você precisa abrir a sua listagem ou post único onde deseja que o ícone apareça. Aqui estão os passos:
- Abra o seu “Listing” ou “Single Post” no JetEngine.
- Arraste um “Dynamic Field” para o local onde deseja que o ícone apareça.
- Selecione “Post Terms” e depois “Metadata”.
- Escolha o campo que você criou, chamado “Ícone”.
Você verá que o nome da classe do ícone aparece, mas ainda não está renderizado. Para fazer isso, precisamos aplicar um filtro.
Aplicando o Filtro para Renderizar o Ícone
Para renderizar corretamente o ícone, siga estas instruções:
- Nas configurações do Dynamic Field, procure pela opção “Filter Field Output”.
- Selecione “Embed Icon Picker” na lista de callbacks.
Pronto! Agora, o ícone que você escolheu aparecerá no frontend, exatamente como você desejava.
Personalizando o Estilo do Ícone
Uma vez que o ícone está renderizado, você pode personalizar sua aparência. Aqui estão algumas opções que você pode ajustar:
- Cor: No campo de estilo, você pode mudar a cor do ícone. Note que, por ser um ícone dinâmico, a cor deve ser definida no campo de estilo do Dynamic Field e não na opção de ícone.
- Tamanho: Você pode ajustar o tamanho do ícone. Por exemplo, se você definir um tamanho de 20, o ícone aumentará proporcionalmente.
- Alinhamento: Ajuste o alinhamento do ícone como preferir.
Considerações Finais
O uso do Icon Picker no JetEngine é uma maneira eficaz de enriquecer a apresentação de seus Custom Post Types. Com ele, você pode adicionar um toque visual que torna suas informações mais atraentes e fáceis de identificar.
Se você gostou dessas dicas e quer expandir seu conhecimento em WordPress, Elementor e JetEngine, considere se inscrever no meu curso JetMaster. Com mais de 450 aulas gravadas e suporte ao vivo, você terá acesso a um aprendizado prático e direto.
FAQ
1. Quais bibliotecas de ícones são compatíveis com o Icon Picker do JetEngine?
O JetEngine permite selecionar ícones de bibliotecas populares como Font Awesome (Regular, Solid e Brands) e Dashicons, além de outras opções disponíveis no WordPress.
2. O Icon Picker pode ser usado com taxonomias e opções personalizadas?
Sim! Além de Custom Post Types, o Icon Picker pode ser adicionado a taxonomias e opções personalizadas dentro do JetEngine, permitindo um alto nível de personalização.
3. Como garantir que o ícone seja exibido corretamente no frontend?
Ao adicionar um Dynamic Field para exibir o ícone, certifique-se de ativar o filtro “Embed Icon Picker” nas configurações do campo para renderizá-lo corretamente.
4. É possível estilizar os ícones dinamicamente?
Sim! Você pode alterar a cor, o tamanho e o alinhamento do ícone diretamente no painel de estilo do Dynamic Field, garantindo uma apresentação personalizada.
5. Preciso instalar plugins adicionais para usar o Icon Picker no JetEngine?
Não, o Icon Picker já está integrado ao JetEngine. Basta ativá-lo ao criar um campo de metadado do tipo “Icon Picker” no seu Custom Post Type ou Taxonomia.
