{"id":233999,"date":"2023-02-27T15:57:00","date_gmt":"2023-02-27T12:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233999"},"modified":"2022-11-11T13:43:54","modified_gmt":"2022-11-11T10:43:54","slug":"codificacao-para-campos-personalizados-avancados-uma-introducao","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/codificacao-para-campos-personalizados-avancados-uma-introducao\/","title":{"rendered":"Codifica\u00e7\u00e3o para campos personalizados avan\u00e7ados: uma introdu\u00e7\u00e3o"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) \u00e9 um plugin do WordPress que \u00e9 uma \u00f3tima ferramenta na configura\u00e7\u00e3o de meta de postagem personalizada. Ele permite que voc\u00ea crie e configure facilmente meta caixas complexas e f\u00e1ceis de usar com todos os tipos de campos e configura\u00e7\u00f5es para tipos de postagem, taxonomia, telas de usu\u00e1rio e p\u00e1ginas de op\u00e7\u00f5es. E \u00e9 super amig\u00e1vel ao desenvolvedor.<\/p>\n<p>Agora, voc\u00ea pode configurar suas pr\u00f3prias meta caixas ou configura\u00e7\u00f5es manualmente, mas para configura\u00e7\u00f5es mais complexas, \u00e9 necess\u00e1rio codificar um pouco, incluindo estilo, Javascript, valida\u00e7\u00e3o e salvamento de manuseio. Imagine, por exemplo, escrever manualmente um repetidor com um grupo de configura\u00e7\u00f5es, uma sele\u00e7\u00e3o m\u00faltipla de postagens por uma determinada consulta. Ou lidar com configura\u00e7\u00f5es de exibi\u00e7\u00e3o que dependem de certas vari\u00e1veis, como qual termo ou modelo de p\u00e1gina \u00e9 atribu\u00eddo (o que requer Javascript). Campos personalizados avan\u00e7ados lida com tudo isso, e faz isso lindamente.<\/p>\n<p>Tenha em mente que os Campos Personalizados Avan\u00e7ados n\u00e3o produzir\u00e3o nenhuma meta personalizada em seus modelos. A sa\u00edda ou fazer algo com base nos campos e configura\u00e7\u00f5es configurados com o ACF depende de voc\u00ea como desenvolvedor. Mas isso \u00e9 feito facilmente usando qualquer um dos m\u00e9todos do ACF. Tamb\u00e9m \u00e9 bom saber que o ACF est\u00e1 utilizando a metafuncionalidade do n\u00facleo do WordPress (p\u00f3s, termo, usu\u00e1rio). O que significa que ele realmente salva, por exemplo, configura\u00e7\u00f5es de postagens como meta de postagem &#8211; que voc\u00ea pode obter usando fun\u00e7\u00f5es principais, como <code>get_post_meta()<\/code>.<\/p>\n<p>Campos personalizados avan\u00e7ados v\u00eam em uma <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vers\u00e3o gratuita<\/a> e uma vers\u00e3o <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro paga<\/a>. A vers\u00e3o gratuita \u00e9 mais do que suficiente para a maioria dos casos, mas na vers\u00e3o Pro voc\u00ea obt\u00e9m alguns recursos adicionais, como campo de repetidor, campo de galeria, blocos Gutenberg (veja mais adiante) e a possibilidade de usar o ACF para configurar seu pr\u00f3prio administrador personalizado p\u00e1ginas de op\u00e7\u00f5es. O ACF tamb\u00e9m \u00e9 t\u00e3o popular que voc\u00ea pode encontrar facilmente <a href=\"https:\/\/www.awesomeacf.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">extens\u00f5es<\/a> de alta qualidade para qualquer coisa que o n\u00facleo do ACF n\u00e3o cubra a si mesmo.<\/p>\n<h2>Campos personalizados avan\u00e7ados: a parte administrativa<\/h2>\n<p>Ao instalar o plugin Advanced Custom Fields, voc\u00ea receber\u00e1 um novo menu de administra\u00e7\u00e3o para &#8220;Custom Fields&quot;. \u00c9 aqui que voc\u00ea pode configurar e configurar suas &#8220;meta boxes&#8221; ou grupos de configura\u00e7\u00f5es.<\/p>\n<p>Dentro de um grupo, voc\u00ea pode configurar quantos campos desejar de diferentes tipos. Os mais comuns s\u00e3o entrada de texto, \u00e1rea de texto, editor richtext, arquivo, imagem, verdadeiro\/falso (alternador), caixas de sele\u00e7\u00e3o, bot\u00f5es de op\u00e7\u00e3o e caixa de sele\u00e7\u00e3o. Outros comuns s\u00e3o v\u00e1rias maneiras de escolher postagens, escolher taxonomia, selecionar usu\u00e1rios, datepicker, colorpicker, Google Maps e muito, muito mais. Dependendo do tipo de campo escolhido, voc\u00ea obt\u00e9m v\u00e1rias op\u00e7\u00f5es adicionais para personalizar o campo. Voc\u00ea tamb\u00e9m pode adicionar l\u00f3gica condicional a qualquer campo. A l\u00f3gica condicional serve para ocultar ou mostrar campos dependendo de outras op\u00e7\u00f5es dentro do grupo.<\/p>\n<p>Para cada grupo de configura\u00e7\u00f5es voc\u00ea pode definir em quais casos essas configura\u00e7\u00f5es devem aparecer. Exemplos s\u00e3o ao editar postagens, um termo de taxonomia ou editar um usu\u00e1rio. Voc\u00ea pode personalizar ainda mais a visibilidade de suas configura\u00e7\u00f5es, por exemplo, tipo de postagem. Ou se uma postagem tiver um determinado termo ou modelo de p\u00e1gina atribu\u00eddo a ela, se uma postagem for de um determinado autor, se a fun\u00e7\u00e3o do usu\u00e1rio for assim ou assim, a fun\u00e7\u00e3o do usu\u00e1rio conectado no momento ou se a p\u00e1gina for uma p\u00e1gina pai ou n\u00e3o. Voc\u00ea tamb\u00e9m pode personalizar onde a caixa meta deve aparecer. No entanto, esta funcionalidade \u00e9 um pouco reduzida agora com o novo editor Gutenberg.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" alt=\"Codifica\u00e7\u00e3o para campos personalizados avan\u00e7ados: uma introdu\u00e7\u00e3o\" ><\/a><\/p>\n<p>Configurando um grupo<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" alt=\"Codifica\u00e7\u00e3o para campos personalizados avan\u00e7ados: uma introdu\u00e7\u00e3o\" ><\/a><\/p>\n<p>Configura\u00e7\u00f5es para um \u00fanico campo<\/p>\n<h2>Campos personalizados avan\u00e7ados: a parte do c\u00f3digo<\/h2>\n<p>Vamos dar uma olhada na parte mais interessante: como voc\u00ea pode utilizar campos personalizados avan\u00e7ados por c\u00f3digo. Como mencionado anteriormente, o ACF \u00e9 super amig\u00e1vel ao desenvolvedor e oferece uma ampla gama de personaliza\u00e7\u00e3o.<\/p>\n<p>Obter valores e emiti-los em seus modelos \u00e9 feito facilmente usando os m\u00e9todos do ACF. Por exemplo <code>the_field('your_meta_key')<\/code>, para eco\u00e1-lo diretamente ou <code>get_field('your_meta_key')<\/code>para armazen\u00e1-lo em uma vari\u00e1vel PHP. Forne\u00e7a o ID do post como segundo argumento se precisar buscar dados fora do loop. Mole-mole. Voc\u00ea poderia usar <code>get_post_meta()<\/code>, mas \u00e9 recomend\u00e1vel usar os m\u00e9todos do ACF \u2013 pois o ACF pode transformar o valor em algo mais significativo antes de devolv\u00ea-lo a voc\u00ea.<\/p>\n<p>Outra coisa que voc\u00ea deve estar ciente \u00e9 a ferramenta de exporta\u00e7\u00e3o dentro do ACF. Voc\u00ea pode exportar grupos criados em dois formatos; um arquivo JSON para download ou c\u00f3digo PHP puro. O arquivo JSON \u00e9 \u00fatil se voc\u00ea precisar exportar configura\u00e7\u00f5es entre servidores de teste e ativos ou outro WordPress. Exportar em PHP puro lhe d\u00e1 a possibilidade de col\u00e1-lo diretamente em seu tema ou plugin de arquivos PHP.<\/p>\n<p>Como voc\u00ea pode concluir disso; voc\u00ea pode usar o c\u00f3digo PHP, escrevendo-o manualmente ou exportando-o depois de configur\u00e1-los no admin, para adicionar seus grupos e campos. Isso permite mais controle e formas de gerar escolhas personalizadas.<\/p>\n<p>Mas espere, tem mais! O ACF tamb\u00e9m oferece uma ampla gama de a\u00e7\u00f5es e filtros para personalizar ainda mais os campos ou seus valores. Existem ganchos para salvar ou renderizar um campo, bem como ganchos para registrar grupos por c\u00f3digo (mencionados acima), e filtros para personalizar os valores, configura\u00e7\u00f5es ou op\u00e7\u00f5es do campo antes de salvar ou renderizar. Voc\u00ea pode especificar ainda mais se o filtro deve afetar todos os campos, campos de um determinado tipo ou campos de uma determinada meta-chave. Todos os ganchos e filtros s\u00e3o prefixados com <code>acf\/<\/code>.<\/p>\n<p>D\u00ea uma olhada na p\u00e1gina <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de documenta\u00e7\u00e3o do ACF<\/a> ; clique em &#8216;Fun\u00e7\u00f5es&#8217;, &#8216;A\u00e7\u00f5es&#8217; ou &#8216;Filtros&#8217; para uma vis\u00e3o geral. Voc\u00ea encontrar\u00e1 \u00f3timos tutoriais e guias neste site tamb\u00e9m.<\/p>\n<h2>Uma nota sobre campos personalizados avan\u00e7ados e Gutenberg<\/h2>\n<p>A cria\u00e7\u00e3o de blocos personalizados do Gutenberg \u00e9, no momento, bastante assustadora. A documenta\u00e7\u00e3o n\u00e3o est\u00e1 no lugar, as altera\u00e7\u00f5es ocorrem com frequ\u00eancia e requer um pouco de conhecimento de Javascript para codificar. De prefer\u00eancia, voc\u00ea precisa ter conhecimento de React e como configurar o compilador do JSX\/ES6 com webpack e Babel.<\/p>\n<p>No entanto, na <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-5-8-introducing-acf-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vers\u00e3o 5.8, o ACF Pro introduziu<\/a> um recurso para configurar um grupo de campos como um bloco Gutenberg \u2013 permitindo adicionar blocos personalizados puramente com c\u00f3digo ACF e PHP. Nenhum conhecimento de Javascript \u00e9 necess\u00e1rio!<\/p>\n<p>Tudo o que voc\u00ea precisa fazer \u00e9 configurar os grupos em admin ou por c\u00f3digo, como de costume. Mas, em seguida, definindo sua localiza\u00e7\u00e3o como bloco de Gutenberg. Tudo o que resta \u00e9 adicionar algum c\u00f3digo PHP para registr\u00e1-los como um bloco Gutenberg personalizado com <code>acf_register_block()<\/code>. Para essa fun\u00e7\u00e3o voc\u00ea define um callback para uma fun\u00e7\u00e3o PHP ou arquivo de template que \u00e9 respons\u00e1vel por renderizar a sa\u00edda do bloco. Voc\u00ea escreve esta fun\u00e7\u00e3o ou parte do modelo totalmente em PHP e usa m\u00e9todos familiares, como <code>get_field()<\/code>para obter os valores de configura\u00e7\u00e3o.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" alt=\"Codifica\u00e7\u00e3o para campos personalizados avan\u00e7ados: uma introdu\u00e7\u00e3o\" ><\/a><\/p>\n<p>Como um bloco ACF se parece no editor Gutenberg<\/p>\n<p>Fique ligado na categoria <a href=\"https:\/\/awhitepixel.com\/blog\/category\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> para tutoriais sobre como usar este plugin!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este guia para iniciantes analisa o plugin do WordPress Advanced Custom Fields (ACF) e como voc\u00ea, como desenvolvedor, pode utiliz\u00e1-lo.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,920,1110,920,816,816,846,846,867,867],"tags":[1170],"class_list":["post-233999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-n-a","category-plug-ins","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233999"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233999\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}