Exibindo termos de taxonomia em cores diferentes com campo seletor de cores

Adicione uma Meta Box à taxonomia fornecida

Adicione esta metacaixa no estágio de criação do tipo de postagem personalizado ou a qualquer momento mais tarde. Basta ir para  JetEngine > Meta Boxes , clicar em  “Adicionar novo”  e definir as  configurações gerais  da seguinte forma:

Saiba mais sobre como criar uma Meta Box personalizada .

Você também deve adicionar um novo metacampo e definir “Colorpicker” como seu  tipo de campo . Observe que você deve ter uma taxonomia pronta para poder anexar esta metacaixa a ela.

Definir cores para cada termo de taxonomia

Vá para a seção de termos de taxonomia (ou Tags) e clique para editar um deles. Na janela recém-aberta, selecione e atribua a cor de sua preferência. Atualize as alterações. Repita a rotina para cada termo de taxonomia da sua lista.

Crie uma nova listagem

Vá para  JetEngine > Listagens , clique em  “Adicionar novo”  e defina “Termos” como  fonte de listagem . Na  seleção Da taxonomia  , escolha o nome da taxonomia na qual você está trabalhando. Clique para criar uma nova listagem e verificar suas configurações no Elementor.

Edição dinâmica de campo

Adicione o  widget Campo dinâmico  à tela em branco e selecione “Nome do termo” como  Campo do objeto .

Agora é possível aplicar a cor que você definiu anteriormente no campo do seletor de cores. Clique para editar a seção, pressione a  guia Estilo  e escolha “Personalizado” para  Tipo de plano de fundo . Pressione o ícone Tag Dinâmica. Clique no último ícone à direita do  item Cor  e você verá uma pequena janela.

Em seguida, selecione a opção “Campo personalizado” nos atributos do JetEngine:

Assim que a janela do campo personalizado aparecer, escolha o campo personalizado “Cor” que você criou na Etapa 1.

Como resultado, toda a Seção alcançará a cor de fundo selecionada para este Termo no   metacampo Cor . Não se esqueça de salvar a listagem.

É assim que funciona o metacampo Colorpicker . Agora você pode adicionar esta listagem a qualquer página que desejar usando o widget Listing Grid . Aproveitar!