{"id":228543,"date":"2022-10-13T20:05:00","date_gmt":"2022-10-13T17:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228543"},"modified":"2022-11-09T02:56:45","modified_gmt":"2022-11-08T23:56:45","slug":"criando-um-controle-de-seletor-de-link-cmb2-personalizado-para-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/criando-um-controle-de-seletor-de-link-cmb2-personalizado-para-wordpress\/","title":{"rendered":"Criando um controle de seletor de link CMB2 personalizado para WordPress"},"content":{"rendered":"\n

Neste tutorial, veremos como voc\u00ea pode criar um controle personalizado para estender a funcionalidade do CMB2<\/a> (Custom Meta Boxes 2) do WebDevStudios<\/a>.<\/p>\n

Eu desenvolvo sites (e aplica\u00e7\u00f5es web) com o WordPress<\/a> CMS (Content Management System), e quando um novo projeto chega voc\u00ea pode garantir que haver\u00e1 um requisito para eu desenvolver ‘Custom Meta Boxes’ para permitir que o usu\u00e1rio tenha um bom controle sobre o conte\u00fado e layout dos sites.<\/p>\n

Vou detalhar como eu constru\u00ed o controle do CMB2 Link Picker para CMB2<\/a> (dispon\u00edvel em todos os bons reposit\u00f3rios de plugins do WordPress). Uma captura de tela da qual pode ser vista abaixo.<\/p>\n

O controle CMB2 ‘Link Picker’ em a\u00e7\u00e3o<\/p>\n

O Link Picker aciona a caixa de di\u00e1logo ‘Inserir\/editar link’ do WordPress quando voc\u00ea clica no bot\u00e3o ‘Escolher’. Isso pode ser visto na captura de tela abaixo:<\/p>\n

\"CriandoApertar o bot\u00e3o permite que voc\u00ea escolha um link (ou adicione o seu pr\u00f3prio)<\/p>\n

Tenho certeza de que voc\u00ea concordar\u00e1 que ter um controle como esse \u00e9 incrivelmente \u00fatil se voc\u00ea quiser dar aos editores do seu site a capacidade de adicionar um link e tamb\u00e9m pesquisar no WordPress por seus links internos, em vez de recortar e colar os links em um link campo.<\/p>\n

Introdu\u00e7\u00e3o \/ Hist\u00f3ria<\/h2>\n

Para quem n\u00e3o sabe, uma meta box fica na tela do editor de uma postagem do WordPress e provavelmente conter\u00e1 v\u00e1rios controles de formul\u00e1rio (caixas de texto, listas suspensas, caixas de sele\u00e7\u00e3o etc\u2026). Esses controles permitem que os usu\u00e1rios do seu site alterem facilmente um texto ou funcionalidade personalizada no site.<\/p>\n

\"Criando\"CriandoUm exemplo de uma meta box com v\u00e1rios controles de formul\u00e1rio<\/p>\n

O WordPress permite criar meta caixas usando fun\u00e7\u00f5es (como [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), mas criar meta caixas dessa maneira pode ser um processo demorado, com muita repeti\u00e7\u00e3o de c\u00f3digo (especialmente se voc\u00ea quiser usar os mesmos controles de formul\u00e1rio em v\u00e1rios projetos).<\/p>\n

Por que CMB2?<\/h2>\n

Alguns de voc\u00eas podem ter ouvido falar de Campos Personalizados Avan\u00e7ados<\/a> (ACF), que fornece uma GUI (Interface Gr\u00e1fica do Usu\u00e1rio) que permite criar meta caixas diretamente com o WordPress.<\/p>\n

O ACF, na minha opini\u00e3o, n\u00e3o \u00e9 uma \u00f3tima ferramenta<\/strong> para qualquer solu\u00e7\u00e3o web que seja escal\u00e1vel. O plug-in depende muito dos dados armazenados no banco de dados. Isso causa dor ao implantar altera\u00e7\u00f5es em um site, pois voc\u00ea n\u00e3o pode simplesmente enviar seu c\u00f3digo e ver as altera\u00e7\u00f5es instantaneamente. Em vez disso, voc\u00ea precisa fazer o trabalho novamente nos v\u00e1rios ambientes de implanta\u00e7\u00e3o (staging, live, et al). Ent\u00e3o precis\u00e1vamos de uma solu\u00e7\u00e3o que nos permitisse criar meta boxes programaticamente. Digite CMB2.<\/p>\n

Antes de adotarmos o CMB2, anteriormente us\u00e1vamos HM Custom Meta Boxes<\/a> daqueles ador\u00e1veis \u200b\u200bhumanos da Human Made<\/a> (que come\u00e7ou como um fork do precursor do WebDevStudio para o CMB2, ‘Custom Meta Boxes’).<\/p>\n

Adoramos HM Custom Meta Boxes e, com os mais simples trechos de c\u00f3digo, poder\u00edamos criar rapidamente Meta Boxes personalizadas para fazer praticamente qualquer coisa!<\/p>\n

\"CriandoHM Custom Meta Boxes Markup Example (esta \u00e9 a marca\u00e7\u00e3o para o Instagram Meta Box na primeira captura de tela)<\/p>\n

Ent\u00e3o, por que a mudan\u00e7a para o CMB2? Bem, o HM Custom Meta Boxes infelizmente n\u00e3o estava recebendo muito amor (falei com seu desenvolvedor l\u00edder e ele \u00e9 um homem muito ocupado), enquanto o CMB2 estava avan\u00e7ando com novos recursos, novos controles e ganhou for\u00e7a na comunidade WordPress com muitas pessoas adotando-o e lan\u00e7ando plugins para estend\u00ea-lo (incluindo v\u00e1rias de nossas ag\u00eancias parceiras).<\/p>\n

Finalmente, como voc\u00ea deve ter percebido, trabalhar com o CMB2 \u00e9 t\u00e3o incrivelmente simples quanto est\u00e1vamos acostumados, pois ambas as plataformas compartilham um ancestral comum.<\/p>\n

Tutorial<\/h2>\n

Antes de come\u00e7armos, todo mundo tem seu pr\u00f3prio conjunto de ideais sobre como criar um plugin WordPress, e eu tentei alguns, no entanto o tutorial sobre ‘ Root Composition in WordPress<\/a> ‘ de Tom J Nowell, mudou completamente a maneira como eu trabalho. Acho sua abordagem limpa, simples e facilita a manuten\u00e7\u00e3o futura de qualquer plug-in. Se voc\u00ea pegar a fonte do<\/a> plugin Link Picker for CMB2, poder\u00e1 ver os m\u00e9todos que ele ensina na pr\u00e1tica.<\/p>\n

Construindo o formul\u00e1rio<\/h3>\n

Para construir o formul\u00e1rio que renderiza o Link Picker, a primeira coisa que precisamos fazer \u00e9 entrar na cmb2_render_[control_name]<\/code>a\u00e7\u00e3o. Como chamei esse controle de ‘link_picker’, podemos completar o gancho assim:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Para aqueles que n\u00e3o entendem muito bem o add_action<\/code>gancho, funciona da seguinte forma:<\/p>\n
    \n
  1. O primeiro argumento cmb2_render_link_picker<\/code>\u00e9 o nome do gancho ao qual queremos nos conectar.<\/li>\n
  2. O segundo argumento array( $this, 'cmb2_render_link_picker' )<\/code>\u00e9 a fun\u00e7\u00e3o que queremos chamar quando esse gancho for executado. Observe que estou envolvendo isso em uma matriz, com $this<\/code>o primeiro par\u00e2metro, porque estou chamando a fun\u00e7\u00e3o dentro de uma classe. Se voc\u00ea n\u00e3o estiver trabalhando com classes, voc\u00ea pode simplesmente usar o nome da fun\u00e7\u00e3o cmb2_render_link_picker<\/code>.<\/li>\n
  3. O 10<\/code>, \u00e9 a ordem que queremos que a fun\u00e7\u00e3o dispare (quanto menor o n\u00famero, mais cedo ela dispara quando a a\u00e7\u00e3o \u00e9 chamada).<\/li>\n
  4. A 5<\/code>\u00e9 a quantidade de par\u00e2metros que ser\u00e3o passados \u200b\u200bpara a fun\u00e7\u00e3o que estou chamando (isso ficar\u00e1 claro em breve).<\/li>\n<\/ol>\n
    Em seguida, criamos a fun\u00e7\u00e3o que renderizar\u00e1 o formul\u00e1rio:<\/p>\n
    <?php\n\npublic function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {\n\u2026\n}\n`\n<\/code><\/pre>\n
    Deixei o ‘DocBlock’ no c\u00f3digo acima que descreve o que cada um dos par\u00e2metros passados \u200b\u200bpara a cmb2_render_link_picker()<\/code>fun\u00e7\u00e3o faz.<\/p>\n
    Observe que minha fun\u00e7\u00e3o come\u00e7a com a public<\/code>declara\u00e7\u00e3o. Isso novamente \u00e9 porque estou trabalhando dentro de uma classe. Se voc\u00ea n\u00e3o estiver trabalhando com classes, voc\u00ea pode omitir isso.<\/p>\n
    O valor deste campo \u00e9 passado para a fun\u00e7\u00e3o atrav\u00e9s do $value<\/code>par\u00e2metro. No caso deste campo, estaremos passando por um array, pois nosso controle possui tr\u00eas elementos separados para ele:<\/p>\n