Seu projeto precisa mais do que a estrutura de criação de posts para funcionar? Pode ficar tranquilo que com o WordPress você vai conseguir desenvolver qualquer tipo de solução. A plataforma que você tem em mãos é capaz de trabalhar com sistemas para imobiliárias, jornais, lojas e até governamentais. O CMS é a base para que a sua imaginação flua e que você desenvolva um trabalho rico e completo. Trabalhar com custom fields, é o primeiro passo para incluir campos personalizados ao seu WordPress.
Para que o WordPress se encaixe com qualquer tipo de necessidade, muitas vezes você precisa trabalhar com a criação de campos específicos. São esses campos que fazem a diferença na personalização e adaptação da plataforma ao seu tipo de necessidade ou a do seu cliente. A forma como o WordPress permite que criemos posts, é muito intuitiva e eficiente, mas se você quer deixar seus posts com uma nova roupagem de estrutura e aplicação, a adoção de campos personalizados é necessária.
Campos Personalizados (Custom Fields)
Possa ser que você ainda não tenha conhecimento sobre o que são custom fields, qual a sua utilidade e importância. Custom Fields, ou campos personalizados, são campos extras que você pode inserir na criação de posts no WordPress. Com eles, você pode configurar, especificar e armazenar qualquer tipo de valor e informação.
Essa possibilidade que o WordPress oferece com os campos personalizados, é o que torna possível criar temas super personalizados e sistemas mais robustos, como lojas, fóruns, revistas, dentre outros. Você pode criar e manipular campos personalizados para posts e para páginas – WordPress as páginas são um tipo de post.
Para começar a criar seus custom fields e personalizar seu tema e sistema, acesse Posts > Adicionar Novo ou Páginas > Adicionar Nova. Você também pode adicionar campos personalizados para posts e páginas já existentes, basta escolher a opção Editar para ter acesso a página de Criação/Edição de conteúdo.
Exibindo o box de campos personalizados
Dentro da página onde você pode criar postagens (título, texto, categorias), você deve procurar por um box com o título Campos personalizados. Caso você não o encontre ao rolar a página, é porque a sua exibição está desabilitada. Exibir o box para começar a criar seus custom fields no WordPress é muito fácil.
No topo da página de criação de página e posts, você pode visualizar uma aba recolhida com o nome Opções de Tela, clique nela e você poderá ver vários checkboxes. Procure por Campos personalizados e marque o checkbox correspondente a ele. Recolha a aba que referente às opções de tela e role a página até encontrar o novo box que acabamos de adicionar.
Como Funcionam os Custom Fields
Com o box de Campos personalizados visível em sua página de criação e edição de posts e páginas, você pode verificar que os custom fields são compostos por 2 campos: Nome e Valor.
A primeira coluna, referente a Nome, é o que vai identificar o seu campo personalizado. Você verá que já existe um select com algumas opções, isso porque o seu tema e plugins utilizam de forma corriqueira os custom fields em sua execução. Se você não quer utilizar um campo personalizado já existente na listagem, pode clicar em Digite novo para criar o seu próprio. Então, o box será mostrado assim:
Na coluna com o título Valor, é onde você vai especifica as informações – literalmente os valores, para o campo personalizado que você utilizar.
A implementação de um campo personalizado
Como dissemos mais acima, com a implementação e utilização de custom fields você pode usar o seu WordPress para qualquer tipo de sistema. Você pode criar um site personalizado para pizzarias, lojas de sapato, lojas de roupa e até um site voltado ao segmento musical. O formato que o site terá vai depender de você. Daquilo que você precisa e quer desenvolver com o WordPress.
Digamos que você está desenvolvendo um site para ramo da música. Sendo assim, você precisa ajustar o seu sistema de criação de posts para receber:
- Título da música (título do post)
- Letra da música (conteúdo do post)
- Nome do compositor da música (custom field)
- Gênero musical (custom field)
Neste exemplo, estamos assumindo que apenas dois campos personalizados terão de ser criados: Nome do compositor da música e Gênero musical. Então, a estrutura dos custom fields que você vai criar deve ficar como a imagem abaixo:
Após clicar em Digite novo, dentro do box Campos personalizados, você deve digitar um nome para identificar o campo personalizado e um valor para adicionar a ele.
Observações importantes na criação de custom fields
Perceba que, no exemplo mostrado pela imagem o Nome do campo personalizado não possui acentos (acento circunflexo, etc) e nem possui espaços. Procure sempre utilizar nome curtos e objetivos, mas caso necessário for, você pode criar nomes maiores e compostos. Todavia, respeite a regra de não utilizar espaços.
Veja como ficaria um nome mais extenso para o campo personalizado no exemplo abaixo:
Observe que no exemplo da imagem, estamos utilizando o caracter underline para unir as partes necessárias à composição do Nome do custom field. O underline na programação, não gera conflitos. Logo, você sempre deve inseri-lo para não deixar espaços entre as palavras.
Utilizando os campos personalizados no tema
Depois que você pensou, definiu e criou os custom fields necessários para a personalização e controle do seu tema e sistema WordPress, já pode começar a botar a mão na massa e utilizá-los dentro do seu código.
Nessa parte do desenvolvimento, você terá de lidar com o código fonte do template do seu site. Então, se você já tem alguma intimidade com HTML, CSS e PHP as coisas serão mais fáceis. Entretanto, se você não tem o costume de mexer com essas partes do WordPress, não precisa se preocupar. O passo a passo que faremos será bem detalhado. Então, seguindo as nossas instruções e explicações, você conseguirá trabalhar seus campos personalizados sem muita dificuldade.
O WordPress possui muitas chamadas de função que permitem exibir e organizar qualquer parte dos seus posts e páginas. Para exibir todas as informações armazenadas nos custom fields de um post você precisará utilizar a seguinte chamada de função:
<?php the_meta(); ?>
Essa função lista todas as informações referentes aos campos personalizados de um post ou página. Essa é a maneira mais fácil de retornar em seu tema, os campos personalizados que você criou e alimentou no processo de criação do post. O resultado que será obtido com o uso da função the_meta(), segundo a estrutura criada e exemplificada neste artigo, será o seguinte:
<ul class="post-meta"> <li><span class="post-meta-key">Compositor:</span> Marisa Monte</li> <li><span class="post-meta-key">Genero:</span> MPB</li> </ul>
Para maiores informações sobre a função the_meta(), consulte sua documentação no Codex.
Função de retorno mais detalhada
Existe uma outra função no WordPress para quem precisa de algo mais customizado e controlado. Com a função get_post_meta() você também tem acesso aos custom fields definidos para um post ou página, mas o seu uso é mais avançado. Logo, para quem tem maior intimidade e conhecimento de código e em WordPress, sua implementação será mais fácil.
Acompanhe o uso da função get_post_meta() e os detalhes dos seus parâmetros:
get_post_meta($post_id, $key, $single);
Veja os parâmetros da função get_post_meta e seus detalhes:
$post_id – (integer) Parâmetro obrigatório para execução da função. É referente ao ID do post que se deseja obter os custom fields especificados. Se a função for utilizada dentro do Loop, o post levado em consideração será o atual do Loop.
$key – (String) $key é o Nome dado a um custom field que armazena uma ou mais informações. Em nosso exemplo, temos dois Nomes ou $key: Compositor e Genero. Este parâmetro é de uso opcional.
$single – (boolean) É com este parâmetro que você definir se o valor retornado será unitário ou em formato de lista (array). Um mesmo custom field pode ser inserido diversas vezes em um único post, recebendo diversos valores. O parâmetro $single é opcional.
Exemplo prático de uso da função get_post_meta():
<ul> <li>Compositor: <?php get_post_meta(get_the_ID(), 'Compositor', true) ?></li> <li>Gênero: <?php get_post_meta(get_the_ID(), 'Genero', true) ?></li> </ul>
Para maiores informações sobre a função get_post_meta(), consulte sua documentação no Codex.
Campos personalizados com o uso de plugin
Se você precisa de uma solução mais amigável e prática, pode sempre recorrer aos diversos plugins do WordPress. O CanalWP recomenda o Advanced Custom Fields para trabalhar com campos personalizados.
Advanced Custom Fields
O diferencial deste plugin é que com ele você alcança um uso mais avançado e personalizado dos custom fields. Com o Advanced Custom Fields você consegue alterar o modo de exibição da sua área de criação de posts, ocultando boxes e adicionando novas opções.
Esse é o plugin ideal para quem precisa de maior flexibilidade e liberdade de customização dentro do WordPress. Gerenciar conteúdo e obter novas informações torna-se muito mais fácil quando você começa a utilizá-lo.
Possibilidades com o Advanced Custom Fields
Dependendo da necessidade do seu projeto, você pode precisar montar um formulário de criação de posts com campos como: select, checkbox, radio button e até date picker. Com o plugin Advanced Custom Fields você consegue estruturar e montar formulários para desenvolvimento de conteúdo da forma que quiser.
O plugin é tão completo, que você pode criar inúmeros formulários para as mais diversas áreas do seu site e até para cada tipo de post que o seu tema oferece. Após instalar e ativar o plugin em seu Painel WordPress, acesse o novo item de menu lateral Campos Personalizados. É a partir deste ponto, que você começará a desenvolver os grupos de campos personalizados focados ao seu projeto.
Você pode atribuir um título para cada grupo de campos personalizados que criar – o que organiza e facilita o seu trabalho dentro do sistema de custom fields avançados. Além disso o plugin Advanced Custom Fields permite que você crie personalizados tipos de campo:
- select;
- radio button;
- campo para e-mail;
- campo para senha;
- campo numérico;
- opção de upload;
- mapa do Google Maps;
- seletor de cores, etc.
Para cada novo campo que você criar, é possível especificar se o seu preenchimento é obrigatório ou não e se há alguma condição para exibição. Esta última opção é útil quando um campo depende da resposta de outro para ser exibido. Por exemplo, ainda seguindo a lógica do nosso exemplo de um sistema voltado ao mercado musical:
Existe um radio button para a seguinte pergunta: Música ganhou algum prêmio? SIM ou NÃO
Caso a resposta seja SIM, um campo do tipo texto irá surgir para que o nome do prêmio seja informado.
Veja um exemplo de como ficaria o nosso sistema pronto – com a utilização deste plugin e com o emprego da condição para exibição de campo:
Obs: Os campos personalizados que criamos e como resultado final é o exemplo da imagem acima, serão exibidos na sua página de posts.
Com o Advanced Custom Fields você pode organizar seus campos personalizados por abas, facilitando o uso e navegação para formulários que possuem muitos campos. O plugin é compatível os mais diversos browsers e possui uma vasta documentação para que você possa desenvolver e customizar sem qualquer dificuldade.
Dúvidas frequentes
É possível implementar custom fields para lojas WooCommerce?
Sim, é completamente possível. Porém, você deve ter certeza de que é realmente necessário. Pois o WooCommerce possui campos bastante completos.
Posso usar diferentes campos personalizados para cada post?
Pode sim. Criar um post não quer dizer que você deve utilizar os mesmos campos personalizados em todos eles.
Dá para inserir imagens por meio de custom fields?
Você consegue fazer isso utilizando a forma nativa do WordPress ou com o uso do plugin. Pelo sistema de campos personalizados do WordPress você cria uma $key e atribui a ela o endereço da imagem. Com o Advanced Custom Fields você pode criar um campo voltado para o upload de imagens.
Se você quer alcançar um nível mais elevado no desenvolvimento de sites com WordPress, trabalhar com custom fields é obrigatório. A partir da criação e manipulação destes campos personalizados, você será capaz de customizar áreas e controlar melhor as informações dentro do sistema que está elaborando.
A adoção dos custom fields é imprescindível para aqueles que trabalham com soluções focadas a um cliente ou a um segmento de mercado. É necessário também para modificar e criar temas. Pois, a estrutura do site deve ser compatível com os tipos de informações que serão exibidas.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
CloudFlare
SeedProd
Regenerate Thumbnail
Olá, gostaria de saber se tem como excluir um nome da lista salva no campo personalizado. Existe essa possibilidade?
Ola
Gostaria de saber se este plugin me daria a opção que preciso – vendo cartões personalizados e queria uma maneira do cliente escolher a fonte escolhida para impressão ( manuscrita, de forma, infantil etc…) . Se possivel eu daria as opções ou então o cliente escolheria numa lista suspendsa do google fonts…tenho pressa nesta resposta por favor, obrigada
Obrigado pelo artigo!
Olá Sendy. Ótimo artigo, parabéns! Gostaria de tirar uma dúvida: Seria possível criar um campo para o usuário fazer upload de imagens, de uma forma que cada usuário tivesse sua própria galeria separada, e essas imagens fossem mostradas posteriormente no perfil ele, onde outro usuários poderiam acessar e visualizar essa imagens? Dá pra fazer isso com esse plugin? Ah e mais uma coisa: Se eu utilizar o plugin, ele tem um jeito mais simples de mostrar os dados sem ter que mexer no código, ou terei que fazer isso através do código, da mesma forma que eu faria se não… Continue Lendo »
Olá Sendy, tudo bem?
Pode me dizer se esse plugin eu tenho como fazer perguntas para alunos?
queria ter uma interação maior no meu curso online, mas ainda estou com muitas dificuldades para achar algum plugin que faça isso grátis. um exemplo que funciona bem é o google form, porém é bem desproporcional na pagina. tem os survey alguma coisa, que é muito bom mais é pago.
Obrigado e boa semana!
Olá! Ótimas dicas!!
No exemplo do campo com condicional de exibição, como eu faria para exibir no post o campo Nome do prêmio caso a música tivesse ganho algum prêmio e ocultar caso a resposta fosse Não?
Obrigado!
O autor e a data sempre aparece no final do post no template que estou usando. Com essa ferramenta têm como eu colocar a data e o autor junto com o titulo do post, e personalizar esse itens para que fiquem no mesmo estilo de letra e tamanho de fonte, mais ou menos como aparece nos post do seu site?
Desde de já agradeço
Fantastico o seu conteudo, gostaria de saber qual o plugin que vc usa para aparecer esse título ÍNDICE DE CONTEÚDO [ESCONDER] nos artigos? Não vejo ninguem compartilhando essa dica?
Olá Julia,
Todos os plugins e ferramentas que utilizamos no CanalWP se encontram na página Ferramentas que você pode acessar aqui > https://www.canalwp.com/ferramentas-wordpress/
Esse plugin em particular é o table of content plus e você pode encontrá-lo aqui > https://srd.wordpress.org/plugins/table-of-contents-plus/
Abraço.
Ótimo post, assim como a maioria por aqui.
Gostaria de saber se esse plugin ou algum outro oferece a opção de criar dropdown condicional na pagina de checkout do woocommerce. Preciso que o cliente informe o dia e horário de entrega. Mas os horários e dias disponíveis vão variar de acordo com a opção de bairro que escolher em um primeiro dropdown.
É possível por plugin?
Obrigado, grande abraço.
Conseguiu resolver esse problema mano?
Bom dia, eu preciso criar uma lista pública de projetos realizados para os clientes, com filtro de nome de cliente e dropdown para categoria de clientes, mostrando os campos nome do projeto e data mês/ano de realização. Qual é a maneira mais simples de fazer? Desde já obrigado.
Bom dia, gostaria de saber se á algum plugin que me possibilidade deixar as variáveis de um produto aparecendo? Por exemplo vamos criar um produto no atacado e o cliente precisar escolher várias numerações em quantidade dentro daquele produto. Se aparecer todas numerações disponiveis e abaixo de cada os campos para escolher a quantidade já está perfeito. Grata
Olá!
Gostaria de inserir no tema da minha loja virtual uma opção para meus clientes personalizar um produto, por exemplo ” colocando o nome da pessoa ” como eu consigo colocar esta caixa de texto ou outras junto dos meus produtos de forma que eu receba essas informações de pedido do cliente?
como eu faço para criar um botão drop down na pagina, com este ou outro recuros? Desses que a pessoa passa o mouse e abre janelas abaixo!
Olá Juarez,
Mas o que exatamente você está tentando concretizar com esse drop down?
Formulários de contato normalmente tem esse tipo de elemento. Outra forma de criar isso seria utilizando HTML.
Abraço.
Boa tarde Gabriel, Eu queria colocar uma caixa de seleção dentro de uma pagina especifica, porque eu estou montando uma pagina para minha banda e estou montando a pagina agenda, seguinte forma, cada ano e mês é uma pagina e dentro das paginas eu coloco botões dos meses e a pessoa clica em cima e vai ser direcionada para pagina do mes em questão. dai eu queria colocar uma caixa de seleção com os anos igual é na pagina do roupa nova! Eu ate tinha achado um plugin que fazia isso, mas infelizmente ontem eu fui excluir minha pagina de… Continue Lendo »
Olá Juarez,
Para fazer isso sem ajuda de plugin você vai precisar ter algum conhecimento em programação básica, se não for o seu caso usar plugin seria a melhor solução.
Acredito que um plugin de eventos com calendário seja uma boa solução para você. Pessoalmente eu recomendo um desses dois:
1- https://wordpress.org/plugins/chronosly-events-calendar/
2- https://wordpress.org/plugins/the-events-calendar/
Veja se você consegue suprir suas necessidades com um desses plugin e me retorne.
Abraço.
Olá bom dia! Estou precisando de ajuda o mais rápido possível. Esse é muito bom mas não estou conseguindo inserir uma imagem no post. Ela já está toda pronta e já foi incluída juntamento com outro campo de texto, porém o de texto aparece conforme planejado mas no lugar da imagem aparece um número que acredito ser a chave dela. Não precisei adicionar nenhum código magnífico para que essas exibições acontecesse, acredito que foi tudo automático através da função the_meta(). Gostaria de saber o que devo fazer e onde devo mexer para que a imagem seja exibida no front do… Continue Lendo »
Bom dia Renato,
Siga as instruções que coloquei nesse documento de texto e acredito que você deva alcançar seu objetivo: http://goo.gl/uEUmhW
Abraço.
Gostaria muito da sua ajuda. Ainda estou precisando muito resolver isso, só que sou um pouco leigo no assunto. Por favor, verifica o link novamente por que aqui não funcionou.
Olá Renato,
Sem problemas. Segue o link
http://www.mediafire.com/view/bey0egyziajp8f5/Adicionando_Thumbnail_com_Custom_Fields.txt
Abraço.
Muito obrigado por sua ajuda. Consegui resolver o problema. Eu não podia colocar a URL da imagem por que a imagem não é fixa. Essa informação vai ser alimentada pelo administrador do site que para cada post diferente vai colocar uma imagem diferente. Eu coloquei um campo de imagem pelo plugin porém na hora de exibir no front ele trazia o ID da imagem, eu acredito, porém conseguir achar uma função que faz esse tratamento, ela verifica que o campo está vazio, se não estiver em vez de pegar o ID ela consegue exibir a imagem que está dentro de… Continue Lendo »
Olá bom dia! Estou precisando de ajuda o mais rápido possível. Esse é muito bom mas não estou conseguindo inserir uma imagem no post. Ela já está toda pronta e já foi incluída juntamento com outro campo de texto, porém o de texto aparece conforme planejado mas no lugar da imagem aparece um número que acredito ser a chave dela. Não precisei adicionar nenhum código magnífico para que essas exibições acontecesse, acredito que foi tudo automático através da função the_meta(). Gostaria de saber o que devo fazer e onde devo mexer para que a imagem seja exibida no front do… Continue Lendo »
Bom dia Renato,
Siga as instruções que coloquei nesse documento de texto e acredito que você deva alcançar seu objetivo: http://goo.gl/uEUmhW
Abraço.
Gostaria muito da sua ajuda. Ainda estou precisando muito resolver isso, só que sou um pouco leigo no assunto. Por favor, verifica o link novamente por que aqui não funcionou.
Olá Renato,
Sem problemas. Segue o link
http://www.mediafire.com/view/bey0egyziajp8f5/Adicionando_Thumbnail_com_Custom_Fields.txt
Abraço.
Muito obrigado por sua ajuda. Consegui resolver o problema. Eu não podia colocar a URL da imagem por que a imagem não é fixa. Essa informação vai ser alimentada pelo administrador do site que para cada post diferente vai colocar uma imagem diferente. Eu coloquei um campo de imagem pelo plugin porém na hora de exibir no front ele trazia o ID da imagem, eu acredito, porém conseguir achar uma função que faz esse tratamento, ela verifica que o campo está vazio, se não estiver em vez de pegar o ID ela consegue exibir a imagem que está dentro de… Continue Lendo »