Hoje eu vou mostrar para vocês como personalizar a nossa página de categoria, eu vou aplicar campos simples como cor e uma imagem personalizada para cada categoria cadastrada.
Eu vou listar logo abaixo os plugins que eu vou utilizar nesse tutorial.
Plugins Necessários
Os plugins nós encontramos na biblioteca gratuita do próprio WordPress que pode ser encontrados no Biblioteca Oficial.
Já podemos instalar e ativar ambos plugins pelo nosso painel:
OBS.: Eu utilizo a versão PRO do Advanced Custom Fields, mas ambas versões tanto premium quanto free vão funcionar perfeitamente.
Advanced Custom Fields
Vamos começar pelo pelo Advanced Custom Fields nele vamos crias os campos personalizados vinculados com a categoria padrão do WordPress que é a “Taxonomy = Category”.
Eu vou criar dois campos “Cor da Categoria” e “Imagem de Fundo”, mas lembrando que pode ser qualquer outro nome e tipo de campo, eu só vou mostrar a maneira de como criar e vincular os campos.
• Primeiro Passo
Vamos criar o nosso grupo para aplicar os nossos campos personalizados, eu vou nomear ele como “Campos da Categoria”, para criar esse grupo primeiro precisamos clicar no botão “+ Adicionar novo”.
• Segundo Passo
Agora dentro da página de configuração do nosso grupo, vamos seguindo cada campo que está na tela.
Logo abaixo eu vou mostrar cada fase que fique bem simplificado cada processo, mas não criar ainda os campos e sim só o nome do grupo e a configuração do grupo com a categoria.
• Primeira Fase
• Segunda Fase
Após colocar o nome do grupo como “Campos da Categoria” e em configurações vincular a “Taxonomia é igual a Categoria” já podemos clicar no botão azul “Salvar alterações” somente mesmo para não perde as configurações que fizemos.
• Terceiro Passo
Agora vamos para a criação dos campos personalizado, como eu já disse antes eu vou criar dois campos “Cor da Categoria” e “Imagem de Fundo”. Eu vou explicar linha por linha, para que fique mais simples o possível para vocês.
Criando o campo Cor da Categoria
• Primeira Linha
Na primeira linha, vamos selecionar o Tipo de campo como Seletor de cor, vocês só precisão clicar no seletor e procurar pelo nome do campo o mesmo fica dentro do grupo “Avançado” ou para simplificar mais é só usar o sistema de busca que existe dentro do seletor.
• Segunda Linha
No campo de Rótulo do campo vamos adicionar o nome do campo, eu apliquei o nome Cor da Categoria, mas se desejar pode mudar o nome para qual desejar. Nesse campo o ACF aceita todos os tipos de caracteres de A-Z tanto maiúscula quando minúscula com acentuação ou não e números.
• Terceira Linha
Agora já no Nome do campo é um pouco mais diferente, ele é o campo mais importante desse tutorial, porque vai ser com esse campo que vamos retorna os atributos vinculados a ele no nosso frontend ou backend.
Ele por sí só já coloca as letras minúsculas e os espaços ele aplica o “underline” entre cada palavra.
Assim que você escrever o Rótulo do campo ele automaticamente já cria autocompleta esse campo, mas se dejesar podemos personalizar o nome, mas temos que respeitar a especificações que o ACF nós determina.
Nele eu apliquei o nome personalizado de “bg_color_category” e com ele vamos utilizar no nosso site para recuperar o valor salvo.
• Quarta Linha
No último campo chamado Valor padrão, como o próprio nome já diz, podemos vincular um valor padrão para ele sempre retorne uma cor já pré-determinada se você não registrar nada.
Eu apliquei um padrão no valor em RGBA para que fique mais dinâmico pela questão da opacidade.
rgba(0, 116, 154, 1)
E para que que o RGBA fique ativo, temos que ativar a “Ativar transparência” se essa opção tiver deselecionada o campo vai ficar como HEX.
Criando o campo Imagem de Fundo
Eu vou mostrar de uma forma mais simplificada, já que eu expliquei anteriormente… Agora eu só vou focar nas partes que vão mudar.
• Primeira Linha
Agora nós vamos utilizar o campo chamado “Imagem” e o mesmo se encontra dentro do grupo de “Conteúdo”.
• Segunda e Terceira Linha
Eu apliquei já etapas dois e três juntas nessa parte, porque foi utilizada a mesma forma de cadastro que foi o Rótulo do Campo e Nome do campo, que já foi explicado anteriormente.
• Quarta Linha
Vamos para o último termo agora que é o Formato devolvido eu indico o método Array da imagem porque ela é uma forma mais completa e já abrange todos os outros métodos, dentro dela já temos todos os valores da imagem que o WordPress gera como ID, URL, etc…
Agora vocês já pode Salvar as Alterações para que os campos sejam salvos, sem salvar os campos o próximo passo não irá funcionar corretamente.
ACF QuickEdit Fields
Agora que finalizamos toda a parte de configuração do campo, vamos para a aba “Apresentação” dentro dela com o plugin ACF QuickEdit Fields ativo vai aparecer o grupo chamado “List Table Settings” sem o plugin ativo essa parte não vai aparecer:
Aqui vamos trabalhar somente com duas opções que o plugin nós oferece, que são:
Mostrar Coluna (Exibe o nosso campo personalizado na listagem das Categorias).
Enable QuickEdit (Deixa o campo editável com a opção Edição rápida sem precisar abrir o editor da categoria).
Notas Finais
Estamos finalizando o nosso tutorial, agora já podemos ver como ficou na tela de cadastro das Categorias:
Vocês podem ver que os campos que criamos “Cor da Categoria e Imagem de Fundo” foram adicionados logo abaixo do campo Descrição.
Bem, agora vocês já podem adicionar os seus dados desejados, abaixo eu vou deixar um exemplo com três categorias cadastradas:
E também vou deixar o modelo dos campos editáveis pela função “Edição Rápida”.
Espero que vocês tenham gostado desse tutorial e até breve.
Por favor, se você gostou deixe seu like e também se possível compartilhe.
