campos personalizados WordPress são uma parte importante do que faz do WordPress um sistema flexível de gestão de conteúdo, em vez de “apenas uma plataforma de blogagem”.

Quando se trata de campos personalizados WordPress, o plugin de campos personalizados avançados freemium é um dos nomes mais conhecidos. Torna mais fácil trabalhar com campos personalizados em todos os aspectos, e também é o tema do nosso post hoje.

especificamente, vamos explicar por que Campos personalizados avançados é tão valioso e, em seguida, mostrar-lhe passo a passo como você pode aplicá-lo ao seu site WordPress.

Aqui está tudo o que você vai encontrar neste post:
há muito para cobrir, então vamos mergulhar em…

o Que São os Campos Personalizados do WordPress? O Que Te Deixam Fazer?

campos personalizados WordPress permitem adicionar, armazenar e exibir informações adicionais sobre um pedaço de conteúdo no WordPress. Em um nível mais técnico, campos personalizados ajudam você a armazenar metadados.

mesmo que você não esteja familiarizado com este termo, campos personalizados poder grande parte da funcionalidade em seus plugins favoritos e temas.

Por exemplo, WooCommerce, a maneira mais popular para construir uma loja de comércio eletrônico, utiliza campos personalizados para armazenar informações adicionais sobre um produto, como:

• Preço
• Peso
• Cor

Ou, se você tiver um WordPress calendário de eventos do plugin, o plugin irá usar campos personalizados para armazenar informações adicionais sobre um evento, tal como:

• Localização
• Início/fim
• Preço

Você também pode criar seus próprios campos personalizados para armazenar informações relevantes para suas necessidades exclusivas, que é o que todo este post é sobre.quão legal são os campos personalizados no WordPress, uh? Learn aprenda como tirar proveito deles com o incrível @wp_acf em nosso último guia! 💪Carregue para Tweetar

quando deverá usar campos personalizados?

Agora, você pode estar se perguntando Por que você ainda precisa de campos personalizados em primeiro lugar.

Por exemplo, se você quiser postar um evento em seu site WordPress, você não poderia simplesmente colocar toda essa informação como texto regular no editor WordPress?bem, sim, podes. Mas usar campos personalizados é uma abordagem melhor por algumas razões:

• entrada mais fácil — ao invés de digitar coisas do zero, um grupo de campos personalizados bem definido irá tornar muito mais fácil a entrada de dados. Por exemplo, em vez de digitar uma data, você pode apenas selecionar a data de um picker de data.consistência
• — a informação que você introduz nos seus campos personalizados irá sempre mostrar de acordo com a sua configuração, o que significa que será consistente em todo o seu site.
• atualizações e manutenção fáceis-se você quiser mudar algo sobre como essa informação exibe no futuro, você pode apenas atualizar uma coisa, em vez de ter que editar cada post individualmente.

WordPress inclui funcionalidade de campos personalizados

WordPress na verdade inclui funcionalidade incorporada para adicionar campos personalizados ao seu conteúdo. No editor TinyMCE clássico, você pode ativar isso a partir da área de Opções de tela. Ou, no novo editor de blocos, você pode ativá-lo a partir da área de Opções:

Você pode, em seguida, introduza os seus dados de campo personalizado usando pares de chave/valor:

Este nativo campos personalizados a funcionalidade é totalmente funcional, mas não é a mais amigável para fazer as coisas, é por isso que um monte de pessoas se voltam para o Avançado Campos Personalizados plugin em seu lugar.

campos personalizados avançados torna muito mais fácil

simplificando, campos personalizados avançados torna muito mais fácil trabalhar com campos personalizados no WordPress em … praticamente todos os aspectos.

simplifica a interface para adicionar e gerir campos personalizados no seu painel de instrumentos WordPress e também simplifica o processo para mostrar informações de campos personalizados na interface do seu site. Esse fato só ajuda a explicar por que é ativo em mais de 1 milhão de sites com uma classificação de 4,9 estrelas em mais de 1.000 comentários.

na infra-estrutura, irá permitir-lhe criar meta-caixas fáceis de usar que incluam tipos de campos pré-seleccionados. Então, ao invés daquela interface de par de valores de chave genéricos( como aqueles que você viu acima), você será capaz de usar marcadores de data, checkboxes, e mais como isso:

No total, Avançado Campos Personalizados oferece mais de 30 diferentes tipos de campos que você pode adicionar a qualquer área no painel de controle, incluindo as mensagens, os usuários, taxonomias, mídia, comentários, e até mesmo opções de personalização de páginas.

pode ver informação detalhada sobre cada tipo de campo aqui.

campos personalizados avançados também torna muito mais fácil de exibir essa informação, com funções bem documentadas, códigos de acesso, blocos Gutenberg, e muito mais.

ou, você pode encontrar integrações com outras ferramentas, como alguns construtores de páginas WordPress drag-and-drop.

campos personalizados avançados livres vs Pro: de qual é que precisa?

campos personalizados avançados vem tanto em uma versão gratuita como Acessível premium.

para a maioria dos usos básicos, a versão livre está completamente bem. Ele lhe dá acesso a quase todos os tipos de campo, bem como todos os recursos de economia de tempo e fácil de usar descritos acima.

Se você só quer armazenar algumas informações extras sobre o seu conteúdo, a versão gratuita é tudo o que você precisa.

com isso dito, a versão Pro adiciona algumas funcionalidades bastante convenientes que o ajudam a usar campos personalizados avançados de formas mais interessantes:

• campos repetidores — Estes permitem-lhe repetir certos campos/grupos de campos numa base pós-post. Por exemplo, se você estivesse adicionando informações sobre um orador a um evento, um campo repetidor iria ajudá-lo a lidar com a situação em que há mais de um orador (você poderia apenas “repetir” o(S) Campo (s) para o orador tantas vezes quanto necessário, o que lhe permite lidar com casos de borda onde há vários oradores).
• ACF blocks-display your fields as a block Gutenberg, rather than a meta box. Isto é especialmente conveniente se você está construindo um site para um cliente e quer dar-lhes uma maneira fácil de introduzir e visualizar dados de campo personalizados.campo de conteúdo flexível-criar layouts a partir de outros campos. É como um construtor de páginas leve baseado em informações de campo personalizadas.campo da galeria-enviar várias imagens para um único campo.

Existem também algumas outras diferenças, como as páginas de opções, a capacidade de clonar campos, melhorias nos campos de relacionamento, e outros ajustes menores.

Você pode ver todas as características ACF PRO aqui.

ACF PRO começa em $ 25 para uso ao longo da vida em um único local. Ou, você pode pagar 100 dólares por uso vitalício em sites ilimitados.

Quando em dúvida, comece com a versão livre até que você descubra exatamente que funcionalidade você precisa. Você pode sempre atualizar mais tarde, se necessário.Tutorial avançado dos Campos personalizados

: Como adicionar os seus campos

vamos agora analisar o tutorial avançado dos Campos Personalizados e mostrar-lhe-ei como criar e mostrar o seu primeiro conjunto de campos personalizados.

para este exemplo, vamos dizer que você tem um blog sobre a execução. Gostas mesmo de correr e queres partilhar os teus treinos diários com os teus leitores. Especificamente, com cada post no blog, você quer compartilhar uma execução:

• propósito-digamos que você tem dois tipos diferentes de execução: “speed work” e “condicionamento”.distância-quanto tempo durou a sua corrida.hora de início — quando começou a correr.
• tempo de fim — quando terminou a sua corrida.Localização-onde a sua corrida teve lugar.

para recolher essa informação, irá querer adicionar cinco campos personalizados.

é importante notar que os princípios que você aprenderá neste tutorial avançado de campos personalizados se aplicam a qualquer caso de uso. Estamos apenas escolhendo um exemplo específico porque ajuda a ter um exemplo tangível para se conectar.

vamos quebrar este tutorial em duas partes:

1. Como adicionar e gerir os seus campos personalizados na infra-estrutura.
2. Como mostrar informações de campo personalizadas na interface do seu site.

crie um novo grupo de Campos

Depois de ter instalado e activado a versão livre dos Campos personalizados avançados de WordPress.org, go to Custom Fields > Add New to create your first Field Group.

Como o nome sugere, um “grupo de campo” é um grupo de um ou mais campos personalizados que são exibidos juntos em seu painel WordPress.

para este exemplo, você irá criar um grupo de campos que contém cinco campos personalizados.

dê um nome ao seu grupo de campo e, em seguida, escolha a sua localização. Por este exemplo, nós queremos exibir esses campos personalizados para posts regulares WordPress blog, para que você possa deixá-lo como o Post padrão.

no entanto, se quiser mostrar os seus campos personalizados noutro local, como ao lado de um tipo de post personalizado ou com uma taxonomia, gostaria de alterar isto. Você também pode configurar várias regras para exibir seus campos em vários locais:

Adicionar Campos Personalizados

em seguida, clique em + Adicionar Campo botão para adicionar a sua primeira campo personalizado:

Isso vai abrir um monte de opções, mas você não necessariamente precisará mais preencher tudo.

As Duas opções mais importantes são:

• campo Label — isto é o que vai aparecer no editor. Ele também será usado para gerar o nome do campo, que é o que você vai usar em código. Você não precisa mudar o nome do campo (embora você possa se precisar).
• tipo de Campo – este é o tipo de informação que deseja recolher. Por exemplo, você gostaria de um campo de números para coletar informações de números ou um campo de E-mail para coletar um endereço de E-mail.

para este primeiro campo, você gostaria de um tipo de campo do botão de rádio:

ainda Mais para baixo, você pode inserir o botão de seleção de opções nas Escolhas caixa:

Há também uma série de outras escolhas que você pode fazer, como se quer ou não um campo é obrigatório e um valor padrão. Sinta-se à vontade para configurá-los para suas necessidades.

vamos olhar para outro exemplo: um campo personalizado para recolher a distância da execução. Desta vez, você gostaria de ter um tipo de campo Número:

Você também poderia tornar as coisas um pouco mais amigáveis ao optar por adicionar a unidade de distância. E se você quiser, você também pode adicionar validação com um valor mínimo e máximo. Por exemplo, você provavelmente não está indo em corridas de 1.000 milhas (e se você fizer… OMG, você é o derradeiro Forrest Gump)!

Basta repetir o processo para todos os outros campos personalizados que você deseja coletar. Quando feito, deve ser algo como:

Configurar Definições de e Publicar

Para terminar as coisas, desloque-se para a caixa de Configurações. Aqui, você pode controlar como seus campos exibir no editor WordPress.

na maioria das vezes, você pode deixar estes como valores por omissão. Mas sinta-se à vontade para mudar as coisas, se quiser. Por exemplo, você pode optar por exibir os seus campos personalizados acima do normal editor do WordPress:

uma Vez que você tenha feito suas escolhas, Publicar o seu campo de grupo para fazê-lo viver.

Existem algumas maneiras diferentes que você pode exibir dados avançados de campos personalizados na interface do seu site. O método exato que você escolher dependerá de suas necessidades e nível de conhecimento. Aqui estão três maneiras diferentes de conseguir isso:

1. os ficheiros de modelo do seu tema-isto requer um pouco de conhecimento técnico, mas é a melhor abordagem A maior parte do tempo, especialmente se estiver confortável a trabalhar nos ficheiros de modelo do seu tema.
2. Com um shortcode – isto é super simples e uma boa opção se você apenas quiser inserir dados de campo personalizados numa base caso a caso. No entanto, requer muito mais trabalho manual, porque você vai precisar adicionar códigos de acesso a cada post.
3. Com Elementor Pro — isso é ótimo porque ele elimina completamente a necessidade de se trabalhar com PHP, mas é um produto premium e isso também significa que você precisará usar Elementor Pro para seu template.

Você pode clicar em cima para saltar diretamente para um método específico ou você pode ler através de todos eles. É contigo.

como adicionar campos personalizados avançados nos ficheiros de modelos de temas

a primeira forma de mostrar a sua informação de campo personalizado é adicionar as funções de PHP de campos personalizados avançados directamente aos ficheiros de modelos do seu tema-filho.

isto é um pouco avançado porque requer que você investigue os ficheiros de modelos do seu tema, mas garante que os seus campos personalizados irão aparecer automaticamente no mesmo local todas as vezes.

especificamente, você precisará editar o modelo único para o tipo de post em questão.

para um post regular no blog, este é único.pai. Ou, alguns temas dividem as coisas em partes template. Por exemplo, para o tema TwentyNineteen, você realmente precisa editar o conteúdo-single.parte do modelo php.se se sente perdido aqui, pode querer usar um método diferente.

Depois de ter encontrado o ficheiro de modelo de tema para a sua publicação única, poderá usar a função’ the_field () ‘ avançada para mostrar a informação de um campo. Por exemplo,

<?php the_field('FIELD_NAME'); ?>

Saiba mais aqui sobre isso.

Por exemplo, para mostrar o campo “finalidade”, você usaria

<?php the_field('purpose'); ?>

pode encontrar o nome do campo quando editar um grupo de campo:

Então, combinar um pouco de marcação HTML com PHP, você pode obter algo como isto para exibir todos os campos:

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

Para adicionar este acima do regular o conteúdo da postagem, você teria que adicionar isso ao seu tema arquivo de modelo acima the_content():

E agora, depois de atualizar o blog, você pode ver os dados de campo personalizado acima regular de conteúdo do WordPress:

Para saber mais, confira Advanced Custom Fields’ a documentação completa.

como mostrar dados avançados de campos personalizados com um Shortcode

para uma forma muito mais simples de mostrar os dados dos seus campos personalizados, Você também pode usar códigos de acesso. A desvantagem aqui, no entanto, é que você vai precisar adicionar o shortcode cada vez que você quer exibir um campo personalizado. Não há uma maneira fácil de automatizar esta tarefa.

o código short é este:

por exemplo, se você digitou isto no editor WordPress:

em Seguida, o frontend do seu site seria exatamente o mesmo como o tema anterior e o método de modelo:

Como Exibir Avançada de Campos Personalizados com Elementor Pro

Elementor é um dos mais populares do WordPress página de construtores. Permite-lhe construir os seus desenhos usando edição visual, drag-and-drop. Em uma nota, Elementor é um dos parceiros oficiais da Kinsta.

com o Elementor Pro, o complemento pago, você também pode construir os arquivos de modelo do seu tema, incluindo uma opção para inserir dados de campo personalizados dinâmicos de campos personalizados avançados em seus projetos.

esta é uma óptima opção se quiser que a flexibilidade inclua automaticamente dados de campos personalizados nos seus modelos, mas não se sinta confortável a fazer edições de código directo nos ficheiros de modelos do seu tema.

Para começar, você iria para Modelos de > Tema Builder e criar um novo Elementor modelo para o seu post Único:

Você pode adicionar o regular Elementor widgets para o Título do Post e o Conteúdo da Postagem. Então, para mostrar os dados de campo personalizados, você adicionaria widgets de Editor de texto regular. A única diferença aqui, em vez de editar o texto, você selecionaria a opção dinâmica:

Após isso, você pode selecionar ACF Campo a partir da lista drop-down:

a Partir daí, você pode selecionar o campo específico você adicionou com Avançada de Campos Personalizados:

você também pode usar a Avançada acordeão guia para preceder ou acrescentar informações, o que permite que você adicione etiquetas e unidades:

Fácil, certo? Agora repita para outros campos personalizados!

resumo

Usando campos personalizados avançados, você pode enriquecer suas páginas e postagens de blog com mais dados e informações com uma solução fácil de usar. Mais: você pode começar a coletar informações adicionais para qualquer conteúdo em seu site e, em seguida, exibi-lo no frontend para os seus visitantes.

para fazer isso, você tem 3 opções:

• O tema do modelo de ficheiros
• Com um shortcode
• Com Elementor Pro

O conhecimento que você ganhou neste post permitirá que você desbloquear o profundo potencial do WordPress para construir 100% personalizada de sites que vão muito além do WordPress’ blogging raízes.

a única questão que resta é esta:

O que irá criar com campos personalizados avançados? Compartilhe com a gente nos comentários abaixo