{"id":11595,"date":"2018-08-10T19:06:50","date_gmt":"2018-08-10T22:06:50","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=11595"},"modified":"2025-04-16T04:50:42","modified_gmt":"2025-04-16T07:50:42","slug":"campos-personalizados-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/campos-personalizados-wordpress","title":{"rendered":"Como criar campos personalizados WordPress (2 m\u00e9todos)"},"content":{"rendered":"

Cada página e publicação do WordPress geram seus próprios metadados, que incluem informações relevantes para SEO, como título e descrição. A plataforma usa campos específicos para adicionar essas informações automaticamente. Porém você pode adicionar metadados de forma personalizada ao criar campos personalizados WordPress<\/strong>.<\/span><\/p>

Há duas formas básicas para fazer isto e vamos abordar as duas neste artigo, que são:<\/span><\/p>

    \n
  1. Usar um plugin WordPress para criar campos personalizados.<\/span><\/li>\n\n\n\n
  2. Adicionar campos personalizados WordPress manualmente e editar seu tema para exibí-los.<\/span><\/li>\n<\/ol>

    Quando concluir este tutorial você vai ter em mãos tudo o que é preciso para criar campos personalizados WordPress e usá-los para otimizar o seu site! Então vamos começar!<\/span><\/p>

    O que são Campos Personalizados WordPress<\/b><\/h2>

    Primeiro vamos falar sobre os campos WordPress em geral. Um campo é o elemento de uma página ou aplicativo onde você pode inserir informações, como você vê abaixo:<\/span><\/p>

    \n
    \"campo<\/figure><\/div>

    Os campos podem ser exibidos de diversas formas e tamanhos. Alguns incluem caixas de marcação e listas, outros podem vir com selecionador de datas e existem os campos que somente aceitam caracteres específicos como números.<\/span><\/p>

    Seja qual for o caso, a informação que você adiciona ao usar este campo pode ser usada para diferentes propósitos.  Porém, na maioria deles, estes campos são usados para “metadados”. Metadados é uma palavra mais elaborada para dados que se referem a outros dados (já peço desculpas pela redundância)<\/span><\/p>

    Por exemplo, em um post WordPress você deve criar um título para descrever o conteúdo, e tecnicamente falando isso já é um exemplo de metadado.<\/span><\/p>

    \n
    \"o<\/figure><\/div>

    Outros tipos de metadados incluem tags de posts, <\/span>meta descrição<\/span><\/a>, categorias de páginas e muito mais. Mas se tem algo que todos eles têm em comum, é que se tratam de campos que o WordPress disponibiliza para que seja adicionada informação sobre o seu conteúdo.<\/span><\/p>

    Mas em alguns casos você quer adicionar metadados que o WordPress não oferece campos destinados a isso. E é nessa hora que você vai precisar adicionar campos personalizados WordPress para poder inserir dados específicos e associá-los ao seu conteúdo.<\/span><\/p>

    Com as ferramentas certas e um passo a passo matador, você pode criar quase todos os tipos de campos personalizados WordPress que você tiver em mente. Um dos nossos exemplos favoritos é para adicionar o sistema de classificação por estrelas em posts.<\/span><\/p>

    \n
    \"sistema<\/figure><\/div>

    Ao criar campos personalizados para o sistema de avaliação com estrelas, você pode pontuar os seus posts ou solicitar que os seus visitantes deixem um feedback para você (embora isto implique em configurações um pouco mais avançadas). <\/span><\/p>

    Este é só um exemplo do que você você pode fazer depois que aprender como criar campos personalizados WordPress para o seu site.<\/span><\/p>

    E para concluir esta primeira etapa, é importante ressaltar que campos personalizados WordPress e tipos de posts personalizados (os conhecidos <\/span>custom post types<\/span><\/a>) não são as mesmas coisas. <\/span><\/p>

    Um post personalizado WordPress é um formato específico para o tipo de conteúdo, como por exemplo posts de reviews ou páginas de produtos que precisam separar as publicações por categorias. <\/span><\/p>

    Mas claro que é comum ter um campo e um tipo de post personalizado na mesma página ou publicação, só queremos deixar claro que os dois podem ser aplicados de forma isolada também. O básico você já sabe, então vamos começar a agir.<\/span><\/p>

    No próximo tópico nós vamos ensinar como criar campos personalizados WordPress para o seu site!<\/span><\/p>

    Como adicionar Campos Personalizados WordPress em posts e páginas ( 2 métodos)<\/b><\/h2>

    Como acontece com a maioria dos recursos WordPress, você pode adicionar os campos personalizados aos seus posts e páginas manualmente ou com através de plugins Vamos começar com pelo plugin por ser mais prático! <\/span><\/p>

    1. Adicionar Campos Personalizados no WordPress via Plugin<\/b><\/h3>

    Existem muitos tipos de plugins que permitem que você adicione campos personalizados no WordPress de uma forma bem rápida. Um dos favoritos por aqui é o <\/span>Advanced Custom Fields<\/span><\/a>:<\/span><\/p>

    \n
    \"campos<\/figure><\/div>

    Nós gostamos deste plugin justamente pela facilidade na hora de usar. Além de ser simples, este plugin inclui campos personalizados que podem ser adicionados em instantes e, com poucos cliques, já estão prontos para usar.<\/span><\/p>

    Para começar, você vai precisar instalar e ativar o plugin. Então abra o seu painel do WordPress e clique em <\/span>Plugins > Adicionar Novo<\/b>. Em seguida procure por “Advanced Custom Fields” no campo de pesquisa:<\/span><\/p>

    \n
    \"plugin<\/figure><\/div>

    Vá em frente e clique em <\/span>Instalar Agora<\/b>. Espere até aparecer o botão <\/span>Ativar <\/b> e clique novamente. <\/span><\/p>

    Assim que o plugin estiver ativo e funcionando você vai conseguir ver uma nova opção <\/span>Campos Personalizados <\/b>no seu painel de controle. Ao clicar neste botão você vai encontrar uma página de grupos de campos personalizados que neste momento deve estar vazia.<\/span><\/p>

    \n
    \"opção<\/figure><\/div>

    Vamos mudar isso, ok? Clique no botão <\/span>Adicionar Novo<\/b> que está no topo da página. Em seguida, o plugin irá ajudá-lo a configurar um novo grupo, que pode conter múltiplos campos personalizados WordPress.<\/span><\/p>

    \n
    \"você<\/figure><\/div>

    Primeiro, clique no botão <\/span>Adicionar Campo <\/b>que está no topo da sua página.<\/span> Agora escolha como você vai chamar este novo grupo, um rótulo. Neste momento você também vai escolher qual o tipo de campo você quer configurar. Para este tutorial, nós vamos criar um campo chamado <\/span>Email: <\/b> <\/span><\/p>

    \n
    \"criando<\/figure><\/div>

    Agora você pode descrever para que serve este campo, assim os usuários do seu site vão saber o que fazer neste campo personalizado. Não é obrigatório preencher estas instruções, mas é uma boa prática.<\/span><\/p>

    \n
    \"descrevendo<\/figure><\/div>

    No próximo passo você também precisa inserir se este campo é obrigatório ou não. Se for, os usuários só poderão salvar posts ou páginas depois de preencher estes campos.<\/span><\/p>

    \n
    \"campo<\/figure><\/div>

    Existem outras <\/span>configurações avançadas<\/span><\/a> que você pode utilizar, mas vamos prosseguir com estas. Feche o editor e o novo campo que você criou será exibido na lista de grupos.<\/span><\/p>

    \"conferindo<\/figure>

    Agora você precisa configurar quando e onde este campo personalizado será exibido. Você pode fazer isto ao configurar <\/span>Local<\/b>. Há uma opção chamada <\/span>Mostre este campo se, <\/b>que você pode usar para configurar as opções de exibição.<\/span><\/p>

    Neste exemplo, nós configuramos para que os campos personalizados sejam exibidos em posts regulares.<\/span><\/p>

    \n
    \"configurando<\/figure><\/div>

    Se você quiser,adicione mais do que um local para exibir o seu novo campo personalizado WordPress através do botão <\/span>Adicionar regra de grupo<\/b>.<\/p>

    E por último, há outra seção que permite configurar onde o campo será exibido na editor WordPress. Por padrão, será exibido logo abaixo do editor, que você vai ver logo abaixo. Mas neste momento, lembre-se de clicar em <\/span>Publicar <\/b>e salvar o seu novo campo personalizado.<\/span><\/p>

    Neste momento o seu novo campo já deve estar funcionando. Abra o editor WordPress em um dos seus posts e confira no final da página se você o encontra:<\/span><\/p>

    \n
    \"verificando<\/figure><\/div>

    Tenha em mente que você pode usar o plugin Advanced Custom Fields para criar um campo, mas não para exibi-lo em seu site. Por padrão, o campo será exibido somente no seu painel e as informações inseridas ali serão armazenadas no banco de dados WordPress.<\/span><\/p>

    Se você quer que os metadados que você insere nos campos personalizados WordPress sejam visíveis para os visitantes do seu site, você precisa editar os arquivos do seu tema. Vamos ver como fazer isto logo adiante.<\/span><\/p>

    2. Como adicionar Campos Personalizados WordPress Manualmente e editar seu tema para exibí-los <\/b><\/h3>

    Adicionar campos personalizados WordPress é mais simples do que você pode imaginar. A parte mais desafiadora é configurar seu tema para exibir os metadados que você inseriu nestes campos. Mas vamos começar pela primeira parte. <\/span><\/p>

    Para adicionar campos personalizados em uma das suas páginas ou posts, abra o seu editor WordPress. Procure pela seção <\/span>Opções de tela <\/b>que fica no topo da página e clique. Ao acessar esta seção, você pode escolher quais campos WordPress serão exibidos como padrão:<\/span><\/p>

    \n
    \"selecionar<\/figure><\/div>

    Você vai perceber que existe uma opção chamada <\/span>Campos Personalizados<\/b> e é este que você vai selecionar. Assim que o fizer, uma caixa de <\/span>Campos Personalizados <\/b>será exibida na parte de baixo da sua tela, parecida com isto:<\/span><\/p>

    \n
    \"ativando<\/figure><\/div>

    Adicionar um campo personalizado é simples. Você só precisa clicar em <\/span>Adicionar Campo Personalizado <\/b>e criar um nome para este campo. Então adicione um valor correspondente no campo indicado.<\/span><\/p>

    \n
    \"adicionando<\/figure><\/div>

    Depois de inserir os valores, aperte em <\/span>Adicionar Campos Personalizados <\/b>na parte inferior da página para salvar. Você pode criar quantos campos personalizados você quiser.<\/span><\/p>

    Assim como ao usar o plugin, os metadados que você inserir serão salvos juntos com o seu post. Porém não serão exibidos aos usuários que visualizarem o seu conteúdo no modo público do seu site. Para que isto aconteça, você precisa informar ao seu tema: “Ei, eu quero que você exiba o campo personalizado “email” dentro do conteúdo”, editando a função chamada WordPress “loop”. Este loop diz ao WordPress qual dado ele deve exibir quando alguém acessar o conteúdo do seu site.<\/span><\/p>

    Na maioria dos casos, esta informação inclui o título do post ou página, o conteúdo e qualquer outro dados associado.<\/span><\/p>

    É importante notar que o código de look pode variar, dependendo de qual página e tema você está usando. Veja como se parece um código de loop padrão escrito em PHP:<\/span><\/p>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n<?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    Aqui está outro exemplo do loop um pouco mais customizado, retirado do <\/span>tema Divi<\/span><\/a>:<\/span><\/p>
    <?php\nif ( et_builder_is_product_tour_enabled() ):\nwhile ( have_posts() ): the_post(); ?>\n<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n<div class=\"entry-content\">\n<?php\nthe_content();\n?>\n<\/div> <!-- .entry-content -->\n<\/article> <!-- .et_pb_post -->\n<?php endwhile;\nelse:\n?><\/pre>
    Nos dois casos, este código diz ao WordPress buscar postagens do arquivo do site e mostrá-las nas páginas de conteúdo. O segundo exemplo adiciona uns detalhes de tema mais específicos, mas isso é exatamente o que vamos fazer agora.<\/span><\/p>
    Para editar o loop do seu tema, você precisa acessar os arquivos do site utilizando o File Transfer Protocol (FTP). Nós recomendamos o <\/span>Filezilla <\/span><\/a>caso você ainda não tenha um cliente FTP configurado.<\/span><\/p>
    Quando tiver o FTP configurado, vá até o diretório <\/span>public_html\/wp-content\/themes<\/b>.<\/span><\/p>
    Ao abrir, procure pela pasta que corresponda ao tema ativo no seu site:<\/span><\/p>
    \n
    \"pasta<\/figure><\/div>
    Abra a pasta e localize o arquivo <\/span>single.php<\/b>. Este arquivo define como os seus posts são individualmente exibidos, e contém o seu próprio loop. Para alterar, clique com o botão direito do mouse no arquivo e selecione a opção <\/span>Visualizar\/ Editar<\/b>, que usará o editor de texto padrão para abrir.<\/span><\/p>
    Em seguida, busque pelo loop dentro do arquivo, tente encontrá-lo buscando pelos exemplos que indicamos acima. Quando encontrar, preste atenção no final do código, que é marcado pelas linhas:<\/span><\/p>
    <?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    O que você precisa fazer agora é inserir algumas linhas de dados e criar seu metadados. Aqui está um exemplo de como fazer isto: <\/span><\/p>
    <div class=\"author-email\">\n    <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> <\/p>\n<\/div><\/pre>
    Neste caso, nós estamos incluindo uma breve sinopse para ser exibida ao lado do endereço de email que foi salvo com o campo personalizado. O resultado será uma linha de texto como esta:<\/span>
    <\/p>
    \n\n\n
    You can get in touch with this author at: <\/span>johndoe@gmail.com<\/span><\/a><\/p><\/div>\n\n\n\n<\/p>
    Neste exemplo, faz sentido colar o novo código no final do loop. Assim a exibição será no final do seu artigo, mas antes da seção de comentários. Porém, você pode incluir o código em locais variados, exatamente onde você quer que os metadados sejam mostrados.<\/span><\/p>
    Se você está usando o tema Divi, aqui está o seu novo loop atualizado:<\/span><\/p>
    <?php\nif ( et_builder_is_product_tour_enabled() ):\nwhile ( have_posts() ): the_post(); ?>\n<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n<div class=\"entry-content\">\n<?php\nthe_content();\n?>\n<\/div> <!-- .entry-content -->\n<\/article> <!-- .et_pb_post -->\n                    <div class=\"author-email\">\n                  <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> <\/p>\n<\/div>\n<?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    Isso é tudo. Agora você pode salvar as alterações do arquivo <\/span>single.php <\/b>e fazer o upload via FTP.<\/span><\/p>
    Tenha em mente que este é um exemplo muito simples do que você pode fazer com os Campos Personalizados WordPress e com o loop. Para campos personalizados mais avançados, você provavelmente precisa aprender o <\/span>básico de PHP<\/span><\/a> ou pelo menos ter mais confiança para realizar ajustes no seu tema e deixar tudo do jeito que você precisa.<\/span><\/p>
    E pensando nisto, nós recomendamos que você use o seu <\/span>tema filho<\/span><\/a> para mostrar os campos personalizados sempre que possível. Assim você terá mais liberdade para realizar testes sem se preocupar em prejudicar o tema de forma geral. <\/span><\/p>
    \n
    \"\"<\/a><\/figure><\/div>
    Conclusão<\/b><\/h2>
    Os campos personalizados WordPress permitem adicionar metadados nos seus posts e páginas. Por exemplo, você pode adicionar um campo personalizado que exibe uma avaliação para cada post, caixas de marcação e até mapas. <\/span><\/p>
    Chega a ser difícil pensar em algo que não funcione com campos personalizados WordPress, que além de tudo são muito fáceis de usar.<\/span><\/p>
    Você também pode usar um plugin, como o Advanced Custom Fields<\/a>, ou criá-los manualmente e ajustar os arquivos do seu tema para que as novas informações sejam exibidas.<\/p>
    Você tem alguma pergunta sobre como usar campos personalizados no WordPress? É sua vez de falar, aproveite o espaço abaixo para deixar o seu comentário!<\/span><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    Cada página e publicação do WordPress geram seus próprios metadados, que incluem informações relevantes para SEO, como título e descrição. A plataforma usa campos específicos para adicionar essas informações automaticamente. Porém você pode adicionar metadados de forma personalizada ao criar campos personalizados WordPress. Há duas formas básicas para fazer isto e vamos abordar as duas […]<\/p>\n
    Read More…<\/a><\/p>\n","protected":false},"author":78,"featured_media":11726,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Como criar campos personalizados WordPress (2 m\u00e9todos)","rank_math_description":"Sabia que voc\u00ea pode personalizar os metadados do seu site criando campos personalizados Wordpress? N\u00e3o \u00e9 nada dif\u00edcil de fazer isso e, o mais legal, a gente te mostra como!","rank_math_focus_keyword":"campos personalizados wordpress","footnotes":""},"categories":[4911],"tags":[5813,5812,5814],"class_list":["post-11595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-campos-personalizados","tag-campos-personalizados-wordpress","tag-plugin-de-campos-personalizados-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-field-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/niestandardowe-pola-w-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-custom-fields\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-fields","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-custom-fields","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/11595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=11595"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/11595\/revisions"}],"predecessor-version":[{"id":33269,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/11595\/revisions\/33269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/11726"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=11595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=11595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=11595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}